實現繼承的幾種方式及工作原理

2021-09-27 08:45:14 字數 2307 閱讀 8329

function

animal

() animal.prototype =

}function

dog()

dog.prototype = new animal();

dog.prototype.saycolor = function

() var dog = new dog();

var dog1 = new dog();

console.log(dog);

dog.arrt.push(5);

console.log(dog1);

dog.saycolor();

dog.sayname();

可以自己列印一下,看一下結果

優點

1.非常純粹的繼承關係,例項是子類的例項,也是父類的例項

2.父類新增原型方法/原型屬性,子類都能訪問到

3.簡單,易於實現

缺點

1.包含引用型別值的原型屬性會被所有例項共享,這會導致對乙個例項的修改會影響另乙個例項。

2.在建立子型別的例項時,不能向超型別的建構函式中傳遞引數。由於這兩個問題的存在,實踐中很少單獨使用原型鏈。

function animal(name)

function dog(name)

animal.prototype.sayname = function()

var dog = new dog();

var dog1=new dog();

dog.colors.push("hhh");

console.log(dog.colors);//red gray hhh

console.log(dog1.colors);//red gray

animal.prototype.swif="hua";

console.log(dog.swif);//undefined

var animal = new animal();

console.log(animal); //如果將函式定義在建構函式中,函式復用無從談起

dog.sayname(); //在超型別的原型中定義的方法,對於子型別而言是無法看到的

優點1.解決了1中,子類例項共享父類引用屬性的問題

2.建立子類例項時,可以向父類傳遞引數

3.可以實現多繼承(call多個父類物件)

缺點

1.例項並不是父類的例項,只是子類的例項

2.只能繼承父類的例項屬性和方法,不能繼承父類原型屬性/方法

3.無法實現函式復用,每個子類都有父類例項函式的副本,影響效能

組合繼承(combination inheritance),有時候也叫做偽經典繼承,指的是將原型鏈和借用建構函式的 技術組合到一塊,從而發揮二者之長的一種繼承模式。其背後的思路是使用原型鏈實現對原型屬性和方 法的繼承,而通過借用建構函式來實現對例項屬性的繼承。這樣,既通過在原型上定義方法實現了函式 復用,又能夠保證每個例項都有它自己的屬性

function animal(name)

function dog(name)

animal.prototype.sayname = function

()//繼承方法

dog.prototype = new animal();

dog.prototype.constructor = animal;

var dog = new dog("2");

dog.colors.push("hhh");

console.log(dog);

var animal = new animal();

console.log(animal);

dog.sayname(); //可以呼叫

優點1.可以繼承例項屬性/方法,也可以繼承原型屬性/方法

2.既是子類的例項,也是父類的例項

3.不存在引用屬性共享問題

4.通過call繼承父類的基本屬性和引用屬性並保留能傳參的優點

5.函式可復用

缺點

1,子類原型上有乙份多餘的父類例項屬性,因為父類建構函式被呼叫了兩次,生成了兩份,而子類例項上的那乙份遮蔽了子類原型上的。

實現繼承的幾種方式

要搞懂js繼承,我們首先要理解原型鏈 每乙個例項物件都有乙個 proto 屬性 隱式原型 在js內部用來查詢原型鏈 每乙個建構函式都有prototype屬性 顯式原型 用來顯示修改物件的原型,例項.proto 建構函式.prototype 原型。原型鏈的特點就是 通過例項.proto 查詢原型上的屬...

js實現繼承的幾種方式

一,js中物件繼承 js中有三種繼承方式 1.js原型 prototype 實現繼承 複製 如下 2.建構函式實現繼承 複製 如下 複製 如下 js手冊中對call的解釋 複製 如下 call 方法 呼叫乙個物件的乙個方法,以另乙個物件替換當前物件。call thisobj arg1 arg2 ar...

JS實現繼承的幾種方式

取自 1.js實現繼承的幾種方式 2.js 物件導向之繼承 多種組合繼承 js作為物件導向的弱型別語言,繼承也是其非常強大的特性之一。那麼如何在js中實現繼承呢?讓我們拭目以待。既然要實現繼承,那麼首先我們得有乙個父類,如下 定義乙個動物類 function animal name 原型方法 ani...