一、原型繼承:
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相互影響
后續的還有圣杯模式,想了解的可以多去查查資料