js繼承實現

2022-07-22 10:54:13 字數 3521 閱讀 1555

在js裡面,繼承總是晦澀難懂的。那讓我們一步一步來分析js繼承。

首先,繼承的目的。我們可以通過new乙個構造器的例項物件,就可以實現呼叫父類的所有的方法。根本不需要propotype之類的。

來段**理解下:

這裡沒有用到prototype,person1物件可以直接呼叫person構造器中的屬性和方法。

那我們為什麼要用到prototype呢?說明通過new乙個例項物件的方法是存在缺陷的 。那我們就來分析下,這個缺陷到底是什麼?

var person = function

(name, age) ;

};var person1 = new person("bella", 23);

var person2 = new person("alex", 2);

console.log(person1);

console.log(person2);

console.log(person1.sayname === person2.sayname);

我們可以看到person1.sayname 不等於person2.name。意味著person1複製了乙份sayname,person2也複製了乙份sayname. 這樣就比較消耗記憶體了。

於是我們想要person1和person2兩個呼叫的時同乙個sayname,像引用物件一樣,呼叫同乙個引用。

於是就引出了prototype,__proto__,原型鏈。如果這些知識不懂,先自行搞懂這些。

我們列印下person1物件,都有哪些東東?

可以看到有age,name,sayname除外,還有__proto__隱式原型。

__proto__裡面有constructor 和__proto__.那我們就著重看下這個construtor和__proto__

每個物件都有個__proto__。__proto__.constructor又指向自己,相當於__proto__.constructor = person;

__proto__.__proto__ = person.prototype

那如果實現繼承需要實現什麼?

乙個parent構造器和乙個child構造器。然後child繼承person,需要實現什麼?

第一步,肯定需要實現person構造器裡面的。

.call(this);

第二步,就是通過原型鏈的原理實現,繼承父類原型上的屬性和方法。

child子類的prototype 裡面有constructor和__proto__屬性。

那麼繼承原理就是:

child.prototype.constructor = child;

child.prototype.__proto__ = parent.prototype;

這樣child就可以通過原型鏈找到parent原型上的方法了。

所以原理就是第一步和第二步裡面標紅的3行**了。

實現如下:

var parent = function

(name, age) ;

};parent.prototype.sayage = function

() ;

var child = function

(name, age) ;

child.prototype.__proto__

= parent.prototype;

child.prototype.constructor = child;

var child = new child("bella", 23);

console.log(child);

輸出結果:

但是js裡面一般不直接操作__proto__屬性,所以有了更優化的方案。

var parent = function

(name, age) ;

};parent.prototype.sayage = function

() ;

var child = function

(name, age) ;

var temp = function() {};

temp.prototype = parent.prototype;

var temp = new temp();

temp.constructor = child;

child.prototype = temp;

= parent.prototype;

= child;

var child = new parent("bella", 23);

console.log(child);

標紅部分就是優化之後的**。很多看著會一臉懵。為什麼這個算是優化的?我怎麼看不懂。

需要看懂這個的,首先需要了解new temp()這個過程做了什麼?

new做了什麼,自行去了解。我把new的過程寫下來:

var temp =new

temp();

//上面一步相當於下面四步

var obj={};

temp.call(

this

); obj.__proto__ =temp.prototype;

var temp = obj;

這樣一來是不是有點明白了。

var temp = function() {};

temp.prototype = parent.prototype;

var temp = new temp();

這三步就先相當於是

child.prototype.__proto__ = parent.prototype;

temp.constructor = child;

這一步相當是

child.prototype.constructor = child;現在的temp就包含了需要繼承的parent的__proto__和指向child的constructor.

然後再把temp賦值給child.prototype就實現了繼承。

所以理解完這個之後,繼承看起來也沒有那個晦澀難懂了。

JS實現繼承

1.使用物件冒充實現繼承 該種實現方式可以實現多繼承 實現原理 讓父類的建構函式成為子類的方法,然後呼叫該子類的方法,通過this關鍵字給所有的屬性和方法賦值 function parent firstname function child firstname var mychild new chi...

js實現繼承

通過修改原型的指向實現的繼承,雖然實現了繼承,但是繼承後的例項物件的屬性值都是一樣的 都是 zs,20,男 只有自己定義的屬性值不一樣。使用這種方式實現的繼承,不能繼承父類的方法,只能繼承父類的屬性。方式一 var obj1 通過這種方式只是讓obj2指向了和obj1相同的一塊位址空間,記憶體中只有...

js 實現繼承

在開始擺弄 之前,應該搞清楚使用繼承的目的和能帶來什麼好處。一般來說,在設計類的時候,我們希望能減少重複性的 並且盡量弱化類之間的耦合。而要做到這兩者都兼顧是很難的,我們需要根據具體的條件和環境下決定我們應該採取什麼方法。根據我們對物件導向語言中繼承的了解,繼承會帶類直接的強耦合,但js由於其特有的...