這篇文章主要介紹了JavaScript原型繼承和原型鏈原理詳解,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下

在討論原型繼承之前，先回顧一下關(guān)于創(chuàng)建自定義類型的方式，這里推薦將構(gòu)造函數(shù)和原型模式組合使用，通過構(gòu)造函數(shù)來定義實例自己的屬性，再通過原型來定義公共的方法和屬性。

這樣一來，每個實例都有自己的實例屬性副本，又能共享同一個方法，這樣的好處就是可以極大的節(jié)省內(nèi)存空間。同時還可以向構(gòu)造函數(shù)傳遞參數(shù)，十分的方便。

這里還要再講一下兩種特色的構(gòu)造函數(shù)模式：

1.寄生構(gòu)造函數(shù)

從形式上來看，這種模式和工廠模式并無區(qū)別：

function Person(name, age, job) {
  var o = new Object();
  o.name = name;
  o.age = age;
  o.job = job;
  o.sayName = function() {
    alert(this.name);
  };
  return o;
}
var friend = new Person("Nicholas", 29, "Software Engineer");
friend.sayName(); //"Nicholas"

都是在內(nèi)部創(chuàng)建一個Object對象實例，再賦予屬性和方法，最后返回，這種構(gòu)造模式的好處是，對于原生的引用類型創(chuàng)建的實例，例如Array，想為實例創(chuàng)建新的方法或者屬性時，因為不建議直接修改原生的Array引用類型的構(gòu)造函數(shù)，所以可以利用寄生構(gòu)造函數(shù)：

function SpecialArray() {
  //創(chuàng)建數(shù)組
  var values = new Array();
  //添加值
  values.push.apply(values, arguments);
  //添加方法
  values.toPipedString = function() {
    return this.join("|");
  };
  //返回數(shù)組
  return values;
}
var colors = new SpecialArray("red", "blue", "green");
alert(colors.toPipedString()); //"red|blue|green"

通過在內(nèi)部創(chuàng)建一個Array實例，并添加新的方法，最后將這個實例返回，既沒有修改原生的Array構(gòu)造函數(shù)，又成功添加了自定義的方法和屬性。

缺點：使用寄生構(gòu)造函數(shù)有一個缺點，那就是返回的實例與構(gòu)造函數(shù)或構(gòu)造函數(shù)原型屬性之間沒有關(guān)系，與在構(gòu)造函數(shù)外創(chuàng)建實例沒有區(qū)別，也無法通過instanceof來確定對象類型，因此有其他更好選擇的時候，不推薦使用該方法。

2.穩(wěn)妥構(gòu)造函數(shù)

穩(wěn)妥構(gòu)造函數(shù)與寄生構(gòu)造函數(shù)類似，但是并不使用new和this（某些環(huán)境下禁止使用），前面的函數(shù)可以改寫成這樣：

function Person(name, age, job) {
  //創(chuàng)建要返回的對象
  var o = new Object();

  //可以在這里定義私有變量和函數(shù)
  //添加方法
  o.sayName = function() {
    alert(name);
  };
  //返回對象
  return o;
}

說完這些，現(xiàn)在來談?wù)勗屠^承和原型鏈，所謂繼承，基本思想是利用原型讓一個引用類型繼承另一個引用類型的方法和屬性。每個構(gòu)造函數(shù)都有一個原型對象，原型對象都包含一個指向構(gòu)造函數(shù)的指針，而實例都包含一個指向原型對象的內(nèi)部指針。所有引用類型默認都繼承了Object，而這個繼承也是通過原型鏈實現(xiàn)的。大家要記住，所有函數(shù)的默認原型都是Object 的實例，因此默認原型都會包含一個內(nèi)部指針，指向Object.prototype。

借用構(gòu)造函數(shù)（即在子類型構(gòu)造函數(shù)的內(nèi)部調(diào)用超類型構(gòu)造函數(shù)）

如果僅僅是借用構(gòu)造函數(shù)，那么也將無法避免構(gòu)造函數(shù)模式存在的問題——方法都在構(gòu)造函數(shù)中定
義，因此函數(shù)復(fù)用就無從談起了。而且，在超類型的原型中定義的方法，對子類型而言也是不可見的，結(jié)
果所有類型都只能使用構(gòu)造函數(shù)模式?？紤]到這些問題，借用構(gòu)造函數(shù)的技術(shù)也是很少單獨使用的。

組合繼承（思路是使用原型鏈實現(xiàn)對原型屬性和方法的繼承，而通過借用構(gòu)造函數(shù)來實現(xiàn)對實例屬性的繼承）

function SuperType(name) {
  this.name = name;
  this.colors = ["red", "blue", "green"];
}
SuperType.prototype.sayName = function() {
  alert(this.name);

};
function SubType(name, age) {
  //繼承屬性
  SuperType.call(this, name);
  this.age = age;
}
//繼承方法
SubType.prototype = new SuperType();
SubType.prototype.constructor = SubType;
SubType.prototype.sayAge = function() {
  alert(this.age);
};
var instance1 = new SubType("Nicholas", 29);
instance1.colors.push("black");
alert(instance1.colors); //"red,blue,green,black"
instance1.sayName(); //"Nicholas";
instance1.sayAge(); //29
var instance2 = new SubType("Greg", 27);
alert(instance2.colors); //"red,blue,green"
instance2.sayName(); //"Greg";
instance2.sayAge(); //27

SuperType 構(gòu)造函數(shù)定義了兩個屬性：name 和colors。SuperType 的原型定義了一個方法sayName()。SubType 構(gòu)造函數(shù)在調(diào)用SuperType 構(gòu)造函數(shù)時傳入了name 參數(shù)，緊接著又定義了它自己的屬性age。然后，將SuperType 的實例賦值給SubType 的原型，然后又在該新原型上定義了方法sayAge()。這樣一來，就可以讓兩個不同的SubType 實例既分別擁有自己屬性——包括colors 屬性，又可以使用相同的方法了。

原型式繼承（借助原型可以基于已有的對象創(chuàng)建新對象，同時還不必因此創(chuàng)建自定義類型）

var person = {
  name: "Nicholas",
  friends: ["Shelby", "Court", "Van"]
};
var anotherPerson = object(person);
anotherPerson.name = "Greg";
anotherPerson.friends.push("Rob");
var yetAnotherPerson = object(person);
yetAnotherPerson.name = "Linda";
yetAnotherPerson.friends.push("Barbie");
alert(person.friends); //"Shelby,Court,Van,Rob,Barbie"

在沒有必要興師動眾地創(chuàng)建構(gòu)造函數(shù)，而只想讓一個對象與另一個對象保持類似的情況下，原型式
繼承是完全可以勝任的。不過別忘了，包含引用類型值的屬性始終都會共享相應(yīng)的值，就像使用原型模
式一樣。

寄生式繼承（寄生式繼承的思路與寄生構(gòu)造函數(shù)和工廠模式類似，即創(chuàng)建一個僅用于封裝繼承過程的函數(shù)，該函數(shù)在內(nèi)部以某種方式來增強對象，最后再像真地是它做了所有工作一樣返回對象）

function createAnother(original) {
  var clone = object(original); //通過調(diào)用函數(shù)創(chuàng)建一個新對象
  clone.sayHi = function() { //以某種方式來增強這個對象
    alert("hi");
  };
  return clone; //返回這個對象
}

寄生組合式繼承

通過借用構(gòu)造函數(shù)來繼承屬性，通過原型鏈的混成形式來繼承方法。其背后的基本思路是：不必為了指定子類型的原型而調(diào)用超類型的構(gòu)造函數(shù)，我們所需要的無非就是超類型原型的一個副本而已。本質(zhì)上，就是使用寄生式繼承來繼承超類型的原型，然后再將結(jié)果指定給子類型的原型。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評論