本文我們來簡單的說下js的繼承,本文的基礎是在JS原型基礎至上的,所以必須對JS的原型有一定的瞭解。 原型繼承 原型繼承:道格拉斯·克羅克福德在 2006年寫了一篇文章,題為 Prototypal Inheritance in JavaScript (JavaScript中的原型式繼承)。在這篇文章 ...
本文我們來簡單的說下js的繼承,本文的基礎是在JS原型基礎至上的,所以必須對JS的原型有一定的瞭解。
原型繼承
原型繼承:道格拉斯·克羅克福德在 2006年寫了一篇文章,題為 Prototypal Inheritance in JavaScript (JavaScript
中的原型式繼承)。在這篇文章中,他介紹了一種實現繼承的方法,這種方法並沒有使用嚴格意義上的
構造函數。他的想法是藉助原型可以基於已有的對象創建新對象,同時還不必因此創建自定義類型。
這段文字引用的是javascript高級程式設計第三版6.3.4
簡單解釋:原型繼承就是子類根據原型鏈去找父類的一些方法和屬性。
A.prototype=new B()
說白了就是把A的原型指向B的實例這樣,B中的私有/公有方法和屬性就變成了A的公有方法和屬性了。
舉個慄子:
function A(){
}
function B(){
this.name='bob'
}
A.prototype = new B();
var a = new A();
console.log(a.name);//bob
在很多書中是這樣的:
function object(o){
function F(){}
F.prototype = o;
return new F();
}
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"
很多書中是這樣的,或者類似這樣的,其實這是最早大神道格拉斯·克羅克福德在06年提出的,到後來ECMAScript 5 通過新增 Object.create() 方法規範化了原型式繼承。
Object.create()是啥意思呢?
創建一個擁有指定原型和若幹指定屬性的對象!有兩個參數
一個用作新對象原型的對象和(可選的)一個為新對象定義額外屬性的對象。
用法和上面大神道格拉斯·克羅克福德給出的方式是一樣的大家可以參考下麵的地址
構造繼承
其實就是用call這個方法來實現的,也很簡單
function A(){
this.name='fakin';
}
function B(){
A.call(this)
}
var c=new B;
console.log(c.name)//fakin
原理:利用call方法把A中的this變成B中的this,並且執行A,而var c=new B;使得B中的this變成了所以c中有了A中的name屬性。
特點:是把父類的屬性和方法複製一份一模一樣的!和原型繼承差很多哦,原型繼承只是把子類和父類做一個鏈式關係,以後要用的時候還得去原型上面上找。
組合繼承
和構造繼承差不多也是用了call,但是組合繼承是call+原型
function A(){
this.name='fakin';
}
function B(){
A.call(this)
}
B.prototype=new A;
B.prototype.constructor=B;
var n= new B;
組合繼承避免了原型鏈和借用構造函數的缺陷,融合了它們的優點,成為 JavaScript 中最常用的繼承模式
冒充對象繼承
function A(){
this.x=100;
}
function B(){
var o=new A;
for(var key in o){
this[key]=temp[key]
}
o=null;
}
var n= new B;
其實就是拷貝一份一模一樣的。
寄生組合式繼承
function A(){
this.x=100;
}
A.prototype.getX=function(){
consoloe.log(this.x)
}
function B(){
A.call(this)//n.x=100
}
B.prototype=Object.create(A.prototype)
B.prototype.constructor=B;
var n= new B;
關於JS繼承就說道這裡,肯定還有沒有說道的地方,歡迎大家補充,有說錯的地方希望大家指正!