一、原型繼承:
1、說起原型繼承,就要先由構(gòu)造函數(shù)創(chuàng)造對象說起棘街,首先了解構(gòu)造函數(shù)內(nèi)部基本原理:
(1).在函數(shù)體最前面隱式的加上this = {}
〕斜摺(2).執(zhí)行 this.xxx = xxx;
〉疟獭(3).隱式的返回this
并且要注意隱士創(chuàng)建的this對象中有個名為proto的屬性,其屬性值為該構(gòu)造函數(shù)繼承的原型prototype炒刁。
而原型對象的有一個名為constructor的屬性,其屬性值為繼承之的構(gòu)造函數(shù)誊稚,
所以可以通過這兩個屬性相互查看
2.原型的定義及一些特點(diǎn):
定義:原型是function對象的一個屬性翔始,它定義了構(gòu)造函數(shù)制造出的對象的公共祖先。通過該構(gòu)造函數(shù)產(chǎn)生的對象里伯,可以繼承該原型的屬性和方法城瞎。原型也是對象。
利用原型特點(diǎn)和概念疾瓮,可以提取共有屬性脖镀。
c.對象如何查看原型 — > 隱式屬性 proto
d.對象如何查看對象的構(gòu)造函數(shù) — > constructor
3、若一個構(gòu)造函數(shù)沒有指定其原型狼电,則其原型默認(rèn)為Object.prototype
且記住proto是原型鏈的一種表達(dá)方式蜒灰,
下面代碼更好展示結(jié)構(gòu)原型鏈
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)查:優(yōu)先去實(shí)例對象上尋找是否有該屬性,若沒有削祈,則再去其對應(yīng)的原型上去尋找該屬性翅溺,若都沒有脑漫,則返回undefined
(2)增:直接給實(shí)例對象增添屬性,則僅僅在實(shí)例對象上增添屬性咙崎,若在原型上增添屬性优幸,則在原型上增添屬屬性,則在原型上增添屬性褪猛,其實(shí)例繼承原型增添的屬性网杆。
(3)刪:delete僅僅能刪除實(shí)例對象的屬性,即構(gòu)造函數(shù)原有的自己的屬性和后來實(shí)例對象增添的屬性握爷,還有關(guān)于delete的一點(diǎn)需注意跛璧,delete無法刪除原型的屬性和用var定義的變量(即非window的屬性)
(4)改:更改實(shí)例對象的屬性,則僅僅更改實(shí)例對象的屬性值新啼;更改原型的屬性值追城,則更改原型的屬性值,繼承該原型的對象對應(yīng)屬性值也會被更改;
三燥撞、對象繼承的發(fā)展:
1座柱、傳統(tǒng)模式:即正常的通過構(gòu)造函數(shù)創(chuàng)建實(shí)例對象,來繼承原型
缺點(diǎn):繼承了過多不必要的屬性
2物舒、借用其他構(gòu)造函數(shù)(即通過call / apply來改變構(gòu)造函數(shù)內(nèi)this對象的引用)
缺點(diǎn):無法繼承借用構(gòu)造函數(shù)的原型
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色洞、共享原型:即將其他構(gòu)造函數(shù)的原型直接賦值給本構(gòu)造函數(shù)的原型
缺點(diǎn):兩個原型會想回影響,更改其中一個原型冠胯,更一個對應(yīng)的原型也會被更改火诸。
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相互影響
后續(xù)的還有圣杯模式,想了解的可以多去查查資料