H5-2.25原型繼承+原型鏈

一、原型繼承:

1、說起原型繼承,就要先由構造函數創造對象說起,首先了解構造函數內部基本原理:
      (1).在函數體最前面隱式的加上this = {}
      (2).執行 this.xxx = xxx;
      (3).隱式的返回this

并且要注意隱士創建的this對象中有個名為proto的屬性,其屬性值為該構造函數繼承的原型prototype。

而原型對象的有一個名為constructor的屬性,其屬性值為繼承之的構造函數,

所以可以通過這兩個屬性相互查看

2.原型的定義及一些特點:

定義:原型是function對象的一個屬性,它定義了構造函數制造出的對象的公共祖先。通過該構造函數產生的對象,可以繼承該原型的屬性和方法。原型也是對象。
   利用原型特點和概念,可以提取共有屬性。

c.對象如何查看原型 — > 隱式屬性 proto

d.對象如何查看對象的構造函數 — > constructor

3、若一個構造函數沒有指定其原型,則其原型默認為Object.prototype
且記住proto是原型鏈的一種表達方式,
下面代碼更好展示結構原型鏈

   A.protorype = {
    name: 'a'
}
function A() (
    this.name = 'A';
)
B.prototype = new A();
function B() {
    this.name = 'B';
}
C.prototype = new B();
function C(){
    this.name = 'C';
}
C繼承B,B繼承A,形成C->B->A的一條以原型為繼承方式的原型鏈
原型鏈結構圖

、原型鏈上屬性的增刪改查:

(1)查:優先去實例對象上尋找是否有該屬性,若沒有,則再去其對應的原型上去尋找該屬性,若都沒有,則返回undefined

(2)增:直接給實例對象增添屬性,則僅僅在實例對象上增添屬性,若在原型上增添屬性,則在原型上增添屬屬性,則在原型上增添屬性,其實例繼承原型增添的屬性。

(3)刪:delete僅僅能刪除實例對象的屬性,即構造函數原有的自己的屬性和后來實例對象增添的屬性,還有關于delete的一點需注意,delete無法刪除原型的屬性和用var定義的變量(即非window的屬性)

(4)改:更改實例對象的屬性,則僅僅更改實例對象的屬性值;更改原型的屬性值,則更改原型的屬性值,繼承該原型的對象對應屬性值也會被更改;

三、對象繼承的發展:

1、傳統模式:即正常的通過構造函數創建實例對象,來繼承原型

缺點:繼承了過多不必要的屬性

2、借用其他構造函數(即通過call / apply來改變構造函數內this對象的引用)

缺點:無法繼承借用構造函數的原型

   prototype = {
    name: 'a',
    age: 18,
    class: 1
}
function A(){
    this.name = 'A';
}
function B(){
    A.call(this);
}
var b = new B();
console.log(b.name); // A
console.log(b.age) // undefined

3、共享原型:即將其他構造函數的原型直接賦值給本構造函數的原型

缺點:兩個原型會想回影響,更改其中一個原型,更一個對應的原型也會被更改。

  A.prototype = {
    name: 'a',
    age: 18,
    class: 1
}
function A(){
    this.name = 'A';
}
B.prototype = A.prototype;
function B(){
    this.name = 'B';  }
C.prototype = A.prototype; function C() {   this.name = "C" }
 var a = new A();
var b = new B();
var c = new C();
console.log(a.age); // 18
console.log(b.age); //18
console.log(c.age); //18
// 原型繼承成功
B.prototype.age = 20; //更改其中一個原型的age屬性
console.log(b.age);//20
console.log(c.age); //20
// 繼承A原型的B和C相互影響

后續的還有圣杯模式,想了解的可以多去查查資料

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容