L - JavaScript繼承

joyvw 發(fā)布于2019-08-22 15:59 / 2764人閱讀

摘要：類式繼承原型鏈繼承實現(xiàn)我是的方法我是的方法由于的實例能夠訪問，所以我們可以設置指向的實例。所以的實例可以訪問的實例以及，實現(xiàn)繼承缺點由于對象類型的賦值是引用賦值，如果父類實例化過程中有引用類型，那么子類的實例的這個屬性都指向同一內存空間。

類式繼承（原型鏈繼承） 實現(xiàn)

function A(){
    this.a="a";
    this.arr=[1,2];
}
A.prototype.funA=function(){
    console.log("我是A的方法");
    
}
function B(){
    this.b="b";
}
B.prototype.funB=function(){
    console.log("我是B的方法");
}
B.prototype=new A();

var b1=new B();

由于A的實例能夠訪問A.prototype，所以我們可以設置B.prototype指向A的實例。所以B的實例可以訪問A的實例以及A.prototype，實現(xiàn)繼承

缺點：

1.由于對象類型的賦值是引用賦值，如果父類A實例化過程中有引用類型，那么子類B的實例的這個屬性都指向同一內存空間。

function A(){
    this.a="a";
    this.arr=[1,2];
}
A.prototype.funA=function(){
    console.log("我是A的方法");
    
}
function B(){
    this.b="b";
}
B.prototype.funB=function(){
    console.log("我是B的方法");
}
B.prototype=new A();

var b1=new B();
var b2=new B();

b1.arr.push(3);
console.log(b1.arr);    // [1, 2, 3]
console.log(b2.arr);    // [1, 2, 3]

2.如果父類的實例需要傳入一些參數(shù)，那么兩個子類實例初始化時某一屬性值相同

function A(year){
    this.year=year;
}
function B(){
    this.b="b";
}
B.prototype=new A(18);

var b1=new B();
var b2=new B();
console.log(b1.color);    // 18
console.log(b2.color);    // 18

3.B.prototype中constructor指向不正確，因為B.prototype指向了一個A的實例，所以本應指向B的constructor指向了A

function A(year){
    this.year=year;
}
function B(){
    this.b="b";
}
B.prototype=new A(18);

var b1=new B();

b1.constructor===A    // true

構造函數(shù)繼承（借用構造函數(shù)繼承） 實現(xiàn)

function A(color){
    this.a="a";
    this.arr=[1,2];
    this.color=color;
}
A.prototype.funA=function(){
    console.log("我是A的方法");
    
}
function B(color){
    A.call(this,color);
}
B.prototype.funB=function(){
    console.log("我是B的方法");
}

var b1=new B("red");

console.log(b1)    // {a: "a", arr: Array(2), color: "red"}

優(yōu)點

解決了引用賦值問題，也可以自定義一些屬性了，constructor也指向B了，即解決了類式繼承的第一個、第二個問題以及第三個問題

缺點

很明顯，B除了調用了A這個函數(shù)外并沒有和A扯上什么關系，原型鏈是不通的(無法訪問到應該作為父類的A的prototype屬性)，我甚至并不覺得這是一種繼承方式，但它為下面兩種方法奠定了基礎

b1.__proto__===B.prototype   // true
b1.__proto__.__proto__===Object.prototype    // true

組合繼承

說白了，就是將上述兩種方法的長處組合到一起，利用原型鏈實現(xiàn)原型屬性和方法的繼承，通過借用構造函數(shù)實現(xiàn)對實例屬性的繼承

實現(xiàn)

function A(color){
    this.a="a";
    this.arr=[1,2];
    this.color=color;
}
A.prototype.funA=function(){
    console.log("我是A的方法");
    
}
function B(color,age){
    // 通過借用構造函數(shù)實現(xiàn)對實例屬性的繼承
    A.apply(this,[color]);
    this.age=age;
}

// 利用原型鏈實現(xiàn)原型屬性和方法的繼承
B.prototype=new A();
B.prototype.constructor=B;

var b1=new B("red",18);

優(yōu)點

既通過在原型上定義方法實現(xiàn)了函數(shù)復用，又能夠保證每個實例都有它自己的屬性

缺點

調用了兩次父類的構造函數(shù)

寄生組合式繼承（此方法最好） 實現(xiàn)

function A(color){
    this.a="a";
    this.arr=[1,2];
    this.color=color;
}
A.prototype.funA=function(){
    console.log("我是A的方法");
    
}
function B(color,age){
    A.apply(this,[color]);
    this.age=age;
}

B.prototype=Object.create(A.prototype);
B.prototype.constructor=B;

var b1=new B("red",18);

優(yōu)點

只需訪問一次父類的構造函數(shù),避免了在子類的prototype上創(chuàng)建不必要、多余的屬性

云服務器 GPU云服務器 javascript繼承 javascript繼承方法 Javascript實現(xiàn)繼承 javascript類的繼承

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://www.ezyhdfw.cn/yun/93928.html

JavaScript instanceof運算符深入分析

摘要：注意基本變量類型不是對象類型，只有基本包裝類型才是對象類型。至于顯示的原型，在里用屬性表示，這個是原型繼承的基礎知識，在這里就不在敘述了。前言如果你要開發(fā)一個復雜的產(chǎn)品，那么肯定少不了使用面向對象機制，當然也避不開 Javascript 里面的繼承，instanceof 運算符是原生 Javascript 語言中用來判斷實例繼承的操作符。所以我們有必要深入理解該運算符！ inst...

zhangyucha0 2019-08-20 16:48 評論0 收藏0
JavaScript繼承的六種方式

這是最近在學習js繼承時看了多篇文章以及自我總結的學習筆記。目錄：一：原型鏈二：構造函數(shù)三：原型鏈和構造函數(shù)組合繼承四：原型式五：寄生式六：寄生組合式 1、原型鏈 function Super(){ this.name = lily; this.age = 21; this.arr = [1,2,3] } function Sub(){} Sub.prototype = new S...

wujl596 2019-08-21 11:22 評論0 收藏0
從Vue源碼學習JavaScript之this instanceof Vue

摘要：函數(shù)的調用有以下幾種方式作為對象方法調用，作為函數(shù)調用，作為構造函數(shù)調用，和使用或調用。并且規(guī)范中說明，只有對象實現(xiàn)了方法。使用了回到上面作為構造函數(shù)調用第一步創(chuàng)建一個空的對象，。第二步鏈接該對象即設置該對象的構造函數(shù)到另一個對象，即。在src/core/instance/index.js中 if (process.env.NODE_ENV !== production && !(t...

付永剛 2019-08-23 17:12 評論0 收藏0
如何理解JavaScript的原型和原型鏈？

摘要：之前有朋友問怎么去理解原型和原型鏈的問題。理解原型鏈的小技巧將箭頭視作泛化子類到父類關系那么圖中所有的虛線將構成一個繼承層級，而實線表示屬性引用。原型鏈是實現(xiàn)繼承的重要方式，原型鏈的形成是真正是靠而非。之前有朋友問怎么去理解原型和原型鏈的問題。這個問題，在面試中，很多同學經(jīng)常都會遇到。這里給大家講講，方便大家記憶。 JavaScript的特點JavaScript是一門直譯式腳本...

xuexiangjys 2019-08-02 16:12 評論0 收藏0
如何理解JavaScript的原型和原型鏈？

摘要：之前有朋友問怎么去理解原型和原型鏈的問題。理解原型鏈的小技巧將箭頭視作泛化子類到父類關系那么圖中所有的虛線將構成一個繼承層級，而實線表示屬性引用。原型鏈是實現(xiàn)繼承的重要方式，原型鏈的形成是真正是靠而非。之前有朋友問怎么去理解原型和原型鏈的問題。這個問題，在面試中，很多同學經(jīng)常都會遇到。這里給大家講講，方便大家記憶。 JavaScript的特點JavaScript是一門直譯式腳本...

adie 2019-08-23 16:54 評論0 收藏0