js繼承的幾種方式,以及缺點

2021-08-22 06:16:46 字數 2288 閱讀 9632

1.原型鏈繼承:可以繼承屬性和方法,但是會對原型上的方法誤修改:

例如:繼承屬性

//父類

function

person

() //子類

function

student

(s) student.prototype = new person();

var stu1 = new student(1);

console.log(stu1.head) //aaa

stu1.head = 'bbb';

console.log(stu1.head)//bbb

var stu2 = new student(1);

console.log(stu2.head)//aaa

列印出bbb的地方,是因為stu1.head自己新增了乙個本地屬性,而並不會影響原型上的屬性

例如:原型鏈繼承方法:

//父類

function

person

()//子類

function

student

(s)student.protype = new person();

var stu1 = new student(1);

console.log(stu1.love);//我愛你

stu1.love.push('呀');

console.log(stu1.love);//我愛你呀

var stu2 = new student(1);

console.log(stu2.love);//我愛你呀(這邊並沒有在本地修改,但是卻對person裡面的方法進行了修改)

例如:

function person()

function student(s)

var stu1 = new student(1);

console.log(stu1.fn);//

'a','b','c'

stu1.fn.push('eeeeee');

console.log(stu1.fn);//

'a','b','c','eeeeeee'

var stu2 = new student(1);

console.log(stu2.fn); //

'a','b','c','d'

person.call(this),代表了把person建構函式借用給student函式,那麼誰呼叫student,this就指向誰,因為建立了乙個student例項,所以相當於person.call(stu1),所以再修改就只是修改stu1這個例項物件,而不會影響其他

//缺點:這種形式的繼承,每個子類例項都會拷貝乙份父類建構函式的方法,作為例項自己的方法,占用

很多記憶體,而且當需求改變時,無法達到快速更新例項中的屬性及方法

3.結合使用兩種繼承模式:

例如:

function

person()}

person.prototype.eat = function

()person.prototype.sleep = function

()function

student

(id)

student.prototype = new person();

student.prototype.constructor = student;

var stu1 = new student(1);

console.log(stu1.a);//a,b,c

stu1.a.push('d');

console.log(stu1.a)//a,b,c,d

var stu2 = new student(1);

console.log(stu2.a);//a,b,c

stu1.eat();//aaa

stu2.sleep();//bbb

console.log(stu1.constructor); //student

其實還有乙個拷貝的方法,也可以模擬繼承:

總結一下:

原型鏈繼承:是通過子類的原型等於父類的例項物件,從而繼承父類原型中的方法及屬性.

缺點是:如果修改子類的例項物件中的方法,父類中原型的方法以及屬性(引用型別)也會隨著修改

組合繼承:採用了原型鏈繼承+借用繼承,保證了子類例項可以繼承父類原型中的屬性和方法,然後根據本地修改,而不需要每一次都繼承父類,然後又用了借用,這樣修改例項就不會影響父類的原型了

js繼承的幾種方式及優缺點

前言 js作為物件導向的弱型別語言,繼承也是其非常強大的特性之一。那麼如何在js中實現繼承呢?讓我們拭目以待。既然要實現繼承,那麼首先我們得有乙個父類,如下 定義乙個動物類 function animal name 原型方法 animal.prototype.eat function food 核心...

JS中幾種繼承的方式及缺點

原型鏈繼承 每個建構函式都有乙個原型物件 通過prototype屬性 原型物件都包含乙個指向建構函式的指標 通過constructor屬性 例項都包含乙個指向原型物件的內部指標 通過隱式proto屬性 那麼,若原型物件等於另乙個原型的例項,則此時原型物件將包含乙個指向另乙個原型物件的指標。相應的另乙...

js繼承的原理 方式以及優缺點

之前看js繼承問題,自己查閱資料,看到有一篇文章整理還可以,便在文章的基礎上又細化了一些。js作為物件導向的弱型別語言,繼承也是其非常強大的特性之一。那麼如何在js中實現繼承呢?讓我們拭目以待。js繼承的實現方法 原型鏈繼承 構造繼承 例項繼承 拷貝繼承 組合繼承 寄生組合繼承。既然要實現繼承,那麼...