首頁 > web前端 > js教程 > 主體

JavaScript型別系統之Object詳解_javascript技巧

WBOY
發布: 2016-05-16 15:21:16
原創
1425 人瀏覽過

前面的話

  在javascript中,物件為王;Javascript裡的幾乎所有東西都是物件或用起來像物件。理解了對象,就理解了Javascript。在javascript中,引用類型是一種資料結構,用於將資料和功能組織在一起,它也常被稱為類別。引用型別有時也被稱為物件定義,因為它們描述的是一類物件所具有的屬性和方法

  大部分引用型別的值都是Object型別的實例;而且,Object也是javascript中使用最多的一個型別。雖然Object實例不具備多少功能,但對於在應用程式中儲存和傳輸數據,它們確實是非常理想的選擇

建立物件

  有兩種Object型別的建立方法

[1]Object建構子

var person = new Object();
//如果不给构造函数传递参数可以不加括号 var person = new Object;
person.name = 'bai';
person.age = 29; 
//创建无属性的空对象
var cody1 = new Object();
var cody2 = new Object(undefined);
var cody3 = new Object(null);
console.log(typeof cody1,typeof cody2, typeof cody3);//object object object 
//创建string、number、array、function、boolean、regex
console.log(new Object('foo'));
console.log(new Object(1));
console.log(new Object([]));
console.log(new Object(function(){}));
console.log(new Object(true));
console.log(new Object(/\bbt[a-z]+\b/));
登入後複製

  [注意]Object()建構子本身就是對象,建構子是基於Function建構子所建立的物件

[2]使用物件字面量

  Javascript提供了一個叫做字面量的快捷方式,用於建立大多數原生物件值。使用字面量只是隱藏了與使用new 運算子相同的

基本過程

var person = {
name : 'bai',
age : 29,
5 : true
};
登入後複製

  [注意]在物件字面量中使用逗號來分隔不同的屬性,但是在最後一個屬性後面加上逗號,會在IE7-導致錯誤

  使用物件字面量的方法來定義對象,屬性名稱會自動轉換成字串

//同上
var person = {
'name' : 'bai',
'age' : 29,
'5' : true
};
登入後複製

  如果留空其花括號,則可以定義只包含預設屬性和方法的物件

//等价于var person = new Object();
var person = {}; 
[tips]使用对象字面量封装多个可选参数
function displayInfo(args){
var output = '';
if(typeof args.name == 'string'){
output += 'name:' + args.name +'\n';
}
if(typeof args.age == 'number'){
output += 'Age:' + args.age + '\n';
}
console.log(output);
};
displayInfo({
name: 'Nicholas',
age: 29
});
displayInfo({
name: 'match'
});
登入後複製

  以上這種傳遞參數的模式最適合需要向函數傳入大量可選參數的情況。一般來說,雖然命名參數容易處理,但有多個可選參數時就會不夠靈活。因此,對於必須值使用形參,而使用物件字面量來封裝多個可選參數

設定物件

  有兩種存取物件屬性的方法,可以用點表示法或中括號表示法取得、設定或更新物件的屬性

  中括號法的兩個優點分別是可以透過變數來存取屬性、屬性名稱可以為Javascript無效識別碼

    [注意]變數中可以存在中文,因為中文相當於字符,與英文字符同樣對待,因此可以寫成person.白或person['白']

var myObject = {
123:'zero',
class:'foo'
};
console.log(myObject['123'],myObject['class']);//'zero' 'foo'
console.log(myObject.123);//报错
登入後複製

  方括號中的值若是非字串類型會使用String()隱式轉換成字串再輸出;如果是字串類型,若有引號則原值輸出,否則會被識別為變量,若變量未定義,則報錯

person[0] = 1; //[]中的数字不会报错,而是自动转换成字符串
person[a] = 1; //[]中符合变量命名规则的元素会被当成变量,变量未被定义,而报错
person[''] = 2; //[]中的空字符串不会报错,是实际存在的且可以调用,但不会在控制台右侧的集合中显示
person[undefined 或 null 或 true 或 false] = 4;// 不会报错,而是自动转换成字符串
person['白'] = 6; // 不会报错 
登入後複製

刪除物件

  delete操作符可以用來將屬性從一個物件中完全刪除。 delete是將屬性從一個物件中刪除的唯一辦法,將屬性設為undefined或null只能改變屬性的值,而不會將屬性從物件中刪除。 delete只能刪除物件下的數據,其他5種基礎類型的值是刪除不掉的

  [注意]delete不會刪除在原型鏈上找到的屬性

var foo = {bar: 'bar'};
delete foo.bar;
console.log('bar' in foo);//false 
var a = 123;
delete a;
console.log(a);//123
登入後複製

  如果在全域狀態下宣告變數a,相當於window物件下的一個資料a,可以透過window.a或a來對a賦值,且window.a和a的值總是相等,但就是無法刪除

var a;
a = 10;
console.log(a,window.a);//10 10
window.a = 20;
console.log(a,window.a);//20 20
delete a ;
console.log(a,window.a);//20 20
delete window.a;
console.log(a,window.a);//20 20
登入後複製

  如果用window.b 來宣告並賦值(b相當於宣告在window物件下),可以刪除,且用delete b 和delete window.b 的效果相同,刪除後,console.log(b)提示變數不存在,console.log(window.b)提示undefined

window.b = 10;
console.log(b,window.b);//10 10
delete b;
console.log(b);//报错
console.log(window.b);//undefined 
window.b = 10;
console.log(b,window.b);//10 10
delete window.b;
console.log(b);//报错
console.log(window.b);//undefined 
登入後複製

物件嵌套

  物件可以嵌套,但必須逐層取值

var student = {
name : {
chinese : 1,
englisth : 2
},
sex : 1,
age : 26
}
登入後複製

  [注意]取值只能一層一層取,如student.name.chinese,而不能跨過name,直接用student.chinese,因為與name的同級下也可能有叫chinese的元素

var object1 = {
object1_1:{
object1_1_1:{foo: 'bar'},
object1_1_2:{}
},
object1_2:{
object1_2_1:{},
object1_2_2:{}
}
};
console.log(object1.object1_1.object1_1_1.foo);//bar
登入後複製

实例方法

  constructor:保存着用于创建当前对象的函数
  hasOwnProperty(propertyName):用于检查给定的属性在当前对象实例中(而不是在实例的原型中)是否存在。其中,propertyName必须以字符串形式指定

  isPrototypeOf(object):用于检查传入的对象是否是传入对象的原型

  propertyIsEnumerable(propertyName):用于检查给定的属性是否能够使用for-in语句来枚举。其中,propertyName必须以字符串形式指定

  toLocaleString():返回对象的字符串表示,该字符串与执行环境的地区对应

  toString():返回对象的字符串表示

  valueOf():返回对象的字符串、数值或布尔值表示,通常与toString()方法的返回值相同

var myObject = {
mark: true
};
console.log(myObject.constructor);//function Object(){}
console.log(myObject.hasOwnProperty('mark'));//true
console.log(Object.prototype.isPrototypeOf(myObject));//true
console.log(myObject.propertyIsEnumerable('mark'));//true
console.log(myObject.toLocaleString());//[object Object]
console.log(myObject.toString());//[object Object]
console.log(typeof myObject.valueOf(),myObject.valueOf());// object Object{mark:true}
登入後複製

小结:

Object类型

  对象其实就是一组数据和功能的集合。对象可以通过执行new操作符后跟要创建的对象类型的名称来创建。而创建Object类型的实例并为其添加属性和(或)方法,就可以创建自定义对象。

var o = new Object(); 
登入後複製

  Object的每个实例都具有下列属性和方法: 

  ● constructor——保存着用于创建当前对象的函数
   ● hasOwnProperty(propertyName)——用于检查给定的属性在当前对象实例中(而不是在实例的原型中)是否存在。其中,作为参数的属性名(propertyName)必须以字符串形式指定(例如:o.hasOwnProperty("name"))
   ● isPrototypeOf(object)——用于检查传入的对象是否是另一个对象的原型
   ● propertyIsEnumerable(propertyName)——用于检查给定的属性是否能够使用for-in语句来枚举 
  ● toString()——返回对象的字符串表示
   ● valueOf()——返回对象的字符串、数值或布尔值表示。通常与toString()方法的返回值相同。

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!