JS 中物件的簡單建立和繼承

weixin_34391854發表於2015-04-04
JS物件繼承

物件的簡單建立

1.通過物件直接量建立

比如 var obj = {};

2.通過new 建立

比如 var obj = new Object(); // 相當於var obj = {};

　　 var arr = new Array();

3.使用 Object.create()

這個方法有兩個引數，第一個引數是這個物件的原型，第二個引數用以對物件的屬性進行進一步描述（可選）

var obj = Object.create({x:1});
var obj1 = Object.create(null);
console.log(obj instanceof Object);//true
console.log(obj1 instanceof Object);//false

使用後obj將繼承來自原型物件Object的屬性，並具有obj.x = 1 的屬性值
但當引數為null時，obj1則是一個沒有原型的新物件，不會繼承任何東西，甚至沒有初始的toString()方法。

所以，如果僅僅是想建立一個空物件，有以下三種方式：

var obj = {};
var obj = new Object();
var obj = Object.create(Object.prototype);

 

物件的簡單繼承：

可以通過原型繼承建立一個新物件

以下函式inherit() 返回一個繼承自原型物件p的屬性的新物件

function inherit(p){ 
    if(p == null){   // 不能從null中繼承
        throw TypeError();
    }
    if(Object.create){   //如果有這個方法就直接使用
        return Object.create(p);
    }
    var t = typeof p;
    if(t !== "object" && t !== "function"){   //要繼承的物件  型別要符合
        throw TypeError();
    }
    function f(){ };  //定義一個空的建構函式
    f.prototype = p;  //原型指向要繼承的物件p
    return new f();   //建立f物件，此物件繼承自p
}

var obj = {x:1};
var obj1 = inherit(obj);
console.log(obj1.x);  // 1

如上，obj1繼承了來自obj物件定義的x屬性

又如

function inherit(p){ 
    if(p == null){   // 不能從null中繼承
        throw TypeError();
    }
    if(Object.create){   //如果有這個方法就直接使用
        return Object.create(p);
    }
    var t = typeof p;
    if(t !== "object" && t !== "function"){   //要繼承的物件  型別要符合
        throw TypeError();
    }
    function f(){ };  //定義一個空的建構函式
    f.prototype = p;  //原型指向要繼承的物件p
    return new f();   //建立f物件，此物件繼承自p
}

var o = {}; //o 繼承Object.prototype
o.x = 1;
var p = inherit(o); //p繼承o和Object.prototype
p.y = 2;
var q = inherit(p); //q繼承p和o和Object.prototype
q.z = 3;
console.log(q.x+q.y == q.z);//true

物件屬性相關操作涉及到了原型鏈的規則
值得注意的是：它總是在原始物件上建立屬性或對已有的屬性賦值，而不會去修改原型鏈；在JS中，只有在查詢屬性時才會體會到繼承的存在，而設定屬性則和繼承無關。

還是程式碼解釋吧

var obj1 = {x:1};
var obj2 = inherit(obj1);
console.log(obj1.x);//1
console.log(obj2.x);//1
obj2.x = 2;
console.log(obj1.x);//1
console.log(obj2.x);//2

 

相關文章