javascript對象創建使用

作者:烽行天下

JavaScript是面向對象語言,通過原型機制實現繼承,通過『閉包』等方式可以實現封裝。 本文來探討JavaScript對象的特殊之處:原型鏈、引用、反射、屬性遍歷等特性。

對象創建

JavaScript擁有非常直觀的對象創建方式:

var emptyObject = {}; 
var person = { 
name: 'harttle',
age: 24,
};

相當于:

var xx = new Object();
xx.name = 'hartle';
xx.age = 24;

屬性訪問

屬性可以通過兩種語法訪問:

person.age
person['age']

當屬性名不存在時JavaScript會沿著原型鏈去查找。 賦值可以更新或創建一個屬性,屬性可以通過delete person.age來刪除。

對undefined獲取屬性會引發TypeError,一般通過&&來解決:

// person.girl === undefined
person.girl.name;// TypeError
person.girl  
person.girl.name; // undefined

原型

JavaScript的原型繼承方式有些繁瑣,在ES6中提供了Object.create方法, 原型繼承變得更加簡單。它的實現大致是這樣的:

if (typeof Object.create !== 'function') {
Object.create = function (o) {
var F = function () {};
F.prototype = o;
return new F();
 };
}
var obj = Object.create(proto);

如果被賦值/刪除的屬性來自于原型,JavaScript也會為當前對象創建/刪除對應屬性, 原型的屬性不會受到影響。

網傳person.age = undefined來刪除屬性的方式,其實相當于創建一個屬性,其值為undefined。而delete person.age則會真正刪除屬性,就像從未聲明過那個屬性一樣。

例如:

var prot = { name: 'harttle' };
// 以 prot 為原型創建 p
var p = Object.create(prot);

delete p.name; // p.name === 'harttle', 原型鏈的對象屬性不受影響
p.name = undefined;  // p.name === undefined
delete p.name; // p.name === 'harttle',獲取了原型的屬性

undefined屬于基本數據類型Undefined,該類型的取值只有一種,即undefined。

對象引用

JavaScript中對象是通過引用傳遞的,它們不會被拷貝:

var a = b = {};
a.name = 'harttle';
b.name === 'harttle' // true

通過原型繼承時,原型也是作為引用進入原型鏈的,原型屬性不會被拷貝:

var prot = {girl: {name: 'alice'}};
var p1 = Object.create(prot);
var p2 = Object.create(prot);

p1.girl.name = 'fuck';// p2.girl.name === 'fuck'

可見原型關系是一種動態關系。

反射

JavaScript是一門動態語言,通過typeof可以在運行時獲取類型信息:

typeof p.age  // 'number'
typeof p.name // 'string'
typeof p.toString // 'function',來自原型:Object.prototype
typeof p.wing // 'undefined'


當然,typeof的能力有限,只能檢查基本數據類型。 為了支持面向對象設計,我們需要更復雜的類型判斷機制,可以參考 如何檢查JavaScript的類型?一文。

屬性遍歷

可以通過for in遍歷對象屬性(包括原型屬性):

var person = {name: 'harttle', age: 24};
for(var prop in person){
console.log(p[prop);
}

為了只獲取當前對象的屬性,可以通過hasOwnProperty來判斷:

for(var prop in person){
if(person.hasOwnProperty(prop)){
console.log(p[prop);
 }
}

for in不保證屬性的順序,如果需要保證順序可以使用Array來代替。 還避免了判斷來自原型的屬性。


避免全局變量

對全局變量的依賴是JavaScript的設計缺陷之一。避免使用全局變量有很多方法, 其中最簡單的便是為你的項目定義一個全局變量,并且只定義一個全局變量:

var APP = {};

APP.foo = 'xxx';
APP.bar = 'xxx';

這樣代碼更容易維護和變更,畢竟APP.foo一眼看去就是一個全局變量。

四川时时彩在线投注