快捷導(dǎo)航

詳解js創(chuàng)建對象的幾種方法及繼承

更新時(shí)間：2019年04月12日 16:05:57 作者：南果梨

這篇文章主要介紹了js創(chuàng)建對象的幾種方法及繼承，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

創(chuàng)建對象

通過Object構(gòu)造函數(shù)或?qū)ο笞置媪縿?chuàng)建單個(gè)對象
這些方式有明顯的缺點(diǎn)：使用同一個(gè)接口創(chuàng)建很多對象，會(huì)產(chǎn)生大量的重復(fù)代碼。為了解決這個(gè)問題，出現(xiàn)了工廠模式。

工廠模式

考慮在ES中無法創(chuàng)建類（ES6前），開發(fā)人員發(fā)明了一種函數(shù)，用函數(shù)來封裝以特定接口創(chuàng)建對象的細(xì)節(jié)。（實(shí)現(xiàn)起來是在一個(gè)函數(shù)內(nèi)創(chuàng)建好對象，然后把對象返回）。

function createPerson(name,age,job){
  var o=new Object();
  o.name=name;
  o.age=age;
  o.job=job;
  o.sayName=function(){
    alert(this.name);
  };
  return 0;
}

var person1=createPerson("Nicholas",29,"Software Engineer");
var person2=createPerson("Greg",27,"Doctor");

構(gòu)造函數(shù)模式

像Object和Array這樣的原生構(gòu)造函數(shù)，在運(yùn)行時(shí)會(huì)自動(dòng)出現(xiàn)在執(zhí)行環(huán)境。此外，也可以創(chuàng)建自定義的構(gòu)造函數(shù)，從而定義自定義對象類型的屬性和方法。

function Person(name,age,job){
  this.name=name;
  this.age=age;
  this.job=job;
  this.sayName=function(){
    alert(this.name);
  };
}

var person1=new Person(...);
var person2=new Person(...);

與工廠模式相比，具有以下特點(diǎn)：

沒有顯式創(chuàng)建對象；
直接將屬性和方法賦給了this對象；
沒有return語句；
要?jiǎng)?chuàng)建新實(shí)例，必須使用new操作符；（否則屬性和方法將會(huì)被添加到window對象）
可以使用instanceof操作符檢測對象類型

構(gòu)造函數(shù)的問題：

構(gòu)造函數(shù)內(nèi)部的方法會(huì)被重復(fù)創(chuàng)建，不同實(shí)例內(nèi)的同名函數(shù)是不相等的。可通過將方法移到構(gòu)造函數(shù)外部解決這一問題，但面臨新問題：封裝性不好。

原型模式

我們創(chuàng)建的每個(gè)函數(shù)都有一個(gè)prototype屬性，這個(gè)屬性是一個(gè)指針，指向一個(gè)對象，而這個(gè)對象的用途是包含可以由特定類型的所有實(shí)例共享的屬性和方法。（prototype就是通過調(diào)用構(gòu)造函數(shù)而創(chuàng)建的那個(gè)對象實(shí)例的原型對象）。
使用原型對象的好處是可以讓所有對象實(shí)例共享它所包含的屬性和方法。換句話說，不必在構(gòu)造函數(shù)中定義對象實(shí)例的信息，而是可以將這些信息直接添加到原型對象中。

function Person(){
}

Person.prototype.name="Nicholas";
Person.prototype.age=29;
Person.prototype.job="...";
Person.prototype.sayName=function(){
  ...
};

var person1=new Person();
person1.sayName();//"Nicholas"

更常見的做法是用一個(gè)包含所有屬性和方法的對象字面量來重寫整個(gè)原型對象，并重設(shè)constructor屬性。

function Person(){
}

Person.prototype={
  name:"...",
  age:29,
  job:"...",
  sayName:function(){
    ...
  }
};

Object.defineProperty(Person.prototype,"constructor",{
  enumerable:false,
  value:Person,
});

原型對象的問題：

他省略了為構(gòu)造函數(shù)傳遞初始化參數(shù)這一環(huán)節(jié)，結(jié)果所有實(shí)例在默認(rèn)情況下都將取得相同的屬性值，雖然這會(huì)在一定程度帶來一定的不便，但不是最大的問題，最大的問題是由其共享的本性所決定的。
對于包含基本值的屬性可以通過在實(shí)例上添加一個(gè)同名屬性隱藏原型中的屬性。然后，對于包含引用數(shù)據(jù)類型的值來說，會(huì)導(dǎo)致問題。

組合使用構(gòu)造函數(shù)模式和原型模式

這是創(chuàng)建自定義類型的最常見的方式。
構(gòu)造函數(shù)模式用于定義實(shí)例屬性，而原型模式用于定義方法和共享的屬性。所以每個(gè)實(shí)例都會(huì)有自己的一份實(shí)例屬性的副本，但同時(shí)共享著對方法的引用，最大限度的節(jié)省了內(nèi)存。同時(shí)支持向構(gòu)造函數(shù)傳遞參數(shù)。

function Person(name,age,job){
  this.name=name;
  this.age=age;
  this.job=job;
  this.friends=["S","C"];
}

Person.prototype={
  constructor:Person,
  sayName:function(){
    alert(this.name);
  }
};

var person1=new Person(...);

動(dòng)態(tài)原型模式

function Person(name,age,job){
  this.name=name;
  this.age=age;
  this.job=job;

  if(typeof this.sayName!="function"){
    Person.prototype.sayName=function(){
      alert(this.name);
    };
  }
}

這里只有sayName（）不存在的情況下，才會(huì)將它添加到原型中，這段代碼只會(huì)在初次調(diào)用構(gòu)造函數(shù)時(shí)才執(zhí)行。這里對原型所做的修改，能夠立刻在所有實(shí)例中得到反映。

Object.create()

ES5定義了一個(gè)名為Object.create（）的方法，它創(chuàng)建一個(gè)新對象，其中第一個(gè)參數(shù)是這個(gè)對象的原型，第二個(gè)參數(shù)對對象的屬性進(jìn)行進(jìn)一步描述。

Object.create()介紹

Object.create(null) 創(chuàng)建的對象是一個(gè)空對象，在該對象上沒有繼承 Object.prototype 原型鏈上的屬性或者方法,例如：toString(), hasOwnProperty()等方法

Object.create()方法接受兩個(gè)參數(shù):Object.create(obj,propertiesObject) ;

obj:一個(gè)對象，應(yīng)該是新創(chuàng)建的對象的原型。

propertiesObject：可選。該參數(shù)對象是一組屬性與值，該對象的屬性名稱將是新創(chuàng)建的對象的屬性名稱，值是屬性描述符（這些屬性描述符的結(jié)構(gòu)與Object.defineProperties()的第二個(gè)參數(shù)一樣）。注意：該參數(shù)對象不能是 undefined，另外只有該對象中自身擁有的可枚舉的屬性才有效，也就是說該對象的原型鏈上屬性是無效的。

var o = Object.create(Object.prototype, {
 // foo會(huì)成為所創(chuàng)建對象的數(shù)據(jù)屬性
 foo: { 
  writable:true,
  configurable:true,
  value: "hello" 
 },
 // bar會(huì)成為所創(chuàng)建對象的訪問器屬性
 bar: {
  configurable: false,
  get: function() { return 10 },
  set: function(value) {
   console.log("Setting `o.bar` to", value);
  }
 }
});
console.log(o);//{foo:'hello'}
var test1 = Object.create(null) ;
console.log(test1);// {} No Properties 
因?yàn)樵赽ar中設(shè)置了configurable 使用set,get方法默認(rèn)都是不起作用，所以bar值無法賦值或者獲取
這里的o對象繼承了 Object.prototype Object上的原型方法
我們可以 對象的 __proto__屬性，來獲取對象原型鏈上的方法 如：
console.log(o.__proto__);//{__defineGetter__: ƒ, __defineSetter__: ƒ, hasOwnProperty: ƒ, __lookupGetter__: ƒ, __lookupSetter__: ƒ, …}
console.log(test1.__proto__);//undefined

通過打印發(fā)現(xiàn)，將{}點(diǎn)開，顯示的是 No Properties ，也就是在對象本身不存在屬性跟方法，原型鏈上也不存在屬性和方法，

new object()

var test1 = {x:1};

var test2 = new Object(test1);

var test3 = Object.create(test1);
console.log(test3);//{} 
//test3等價(jià)于test5
var test4 = function(){
&emsp;&emsp;
}
test4.prototype = test1;
var test5 = new test4();
console.log(test5);
console.log(test5.__proto__ === test3.__proto__);//true
console.log(test2);//{x:1}

var test1 = {};
var test2 = new Object();
var test3 = Object.create(Object.prototype);
var test4 = Object.create(null);//console.log(test4.__proto__)=>undefined 沒有繼承原型屬性和方法
console.log(test1.__proto__ === test2.__proto__);//true
console.log(test1.__proto__ === test3.__proto__);//true
console.log(test2.__proto__ === test3.__proto__);//true
console.log(test1.__proto__ === test4.__proto__);//false
console.log(test2.__proto__ === test4.__proto__);//false
console.log(test3.__proto__ === test4.__proto__);//false

總結(jié)：使用Object.create()是將對象繼承到__proto__屬性上

var test = Object.create({x:123,y:345});
console.log(test);//{}
console.log(test.x);//123
console.log(test.__proto__.x);//3
console.log(test.__proto__.x === test.x);//true

var test1 = new Object({x:123,y:345});
console.log(test1);//{x:123,y:345}
console.log(test1.x);//123
console.log(test1.__proto__.x);//undefined
console.log(test1.__proto__.x === test1.x);//false

var test2 = {x:123,y:345};
console.log(test2);//{x:123,y:345};
console.log(test2.x);//123
console.log(test2.__proto__.x);//undefined
console.log(test2.__proto__.x === test2.x);//false

繼承

我這里就介紹一種吧，剩下的可以去權(quán)威指南里看去

原型鏈

ECMAScript 中描述了原型鏈的概念，并將原型鏈作為實(shí)現(xiàn)繼承的主要方法。其基本思想是利用原型讓一個(gè)引用類型繼承另一個(gè)引用類型的屬性和方法。簡單回顧一下構(gòu)造函數(shù)、原型和實(shí)例的關(guān)系:每個(gè)構(gòu)造函數(shù)都有一個(gè)原型對象，原型對象都包含一個(gè)指向構(gòu)造函數(shù)的指針，而實(shí)例都包含一個(gè)指向原型對象的內(nèi)部指針。那么，假如我們讓原型對象等于另一個(gè)類型的實(shí)例，結(jié)果會(huì)怎么樣呢?顯然，此時(shí)的原型對象將包含一個(gè)指向另一個(gè)原型的指針，相應(yīng)地，另一個(gè)原型中也包含著一個(gè)指向另一個(gè)構(gòu)造函數(shù) 的指針。假如另一個(gè)原型又是另一個(gè)類型的實(shí)例，那么上述關(guān)系依然成立，如此層層遞進(jìn)，就構(gòu)成了實(shí) 例與原型的鏈條。這就是所謂原型鏈的基本概念。

實(shí)現(xiàn)原型鏈有一種基本模式，其代碼大致如下。

function SuperType(){
    this.property = true;
}
SuperType.prototype.getSuperValue = function(){
  return this.property;
};
function SubType(){
  this.subproperty = false;
}
//繼承了 SuperType
SubType.prototype = new SuperType();
SubType.prototype.getSubValue = function (){
  return this.subproperty;
  };
  var instance = new SubType();
alert(instance.getSuperValue());
//true

以上代碼定義了兩個(gè)類型:SuperType 和 SubType。每個(gè)類型分別有一個(gè)屬性和一個(gè)方法。它們的主要區(qū)別是 SubType 繼承了 SuperType，而繼承是通過創(chuàng)建 SuperType 的實(shí)例，并將該實(shí)例賦給 SubType.prototype 實(shí)現(xiàn)的。實(shí)現(xiàn)的本質(zhì)是重寫原型對象，代之以一個(gè)新類型的實(shí)例。換句話說，原來存在于 SuperType 的實(shí)例中的所有屬性和方法，現(xiàn)在也存在于 SubType.prototype 中了。在確立了繼承關(guān)系之后，我們給 SubType.prototype 添加了一個(gè)方法，這樣就在繼承了 SuperType 的屬性和方法的基礎(chǔ)上又添加了一個(gè)新方法。這個(gè)例子中的實(shí)例以及構(gòu)造函數(shù)和原型之間的關(guān)系如圖 6-4 所示。