JS高階之原型,原型鏈,繼承

2021-10-23 16:53:02 字數 2566 閱讀 8233

(一)原型

1.原型是function物件的乙個屬性,它定義了建構函式製造出的物件的公共祖先,通過建構函式例項化的物件可以繼承該原型的屬性和方法,原型也是物件

2.例項物件可以訪問自己的屬性和方法,也可以訪問原型物件的屬性和方法,例項物件和原型物件都有的屬性和方法,訪問的是例項物件的

3.利用原型的特點,將共有的屬性和方法放到原型中,例項物件可以繼承原型中的屬性和方法,但不能修改/刪除原型上的方法和屬性,可以修改自己的屬性和方法

// 增

peo.age = '18'

// 刪 delect + 空格 + 物件名.屬性名/方法名

delete peo.name;

// 改

peo.*** = '女';

// 查 物件名.屬性名/方法名 物件名[屬性名/方法名]

'***4']);

4.constructor 用例項物件訪問到其建構函式

5.檢視物件屬性和方法可以用 . 和 數字只能用 ,字串可以用 . 也可以用 ,用要加引號

(二)原型規則和示例

1.所有的引用型別都具有物件特性,可自由擴充套件,null除外

var obj = {}

obj.a = 100;

console.log(obj);//

function fn1(){}

fn1.c = 200;

console.log(fn1['c']);

2.所有的引用型別都有乙個__proto__屬性(隱式原型),數值是乙個普通物件

3.所有函式都有乙個prototype的屬性(顯式原型),屬性值也是乙個普通物件

4.隱式原型的屬性值指向它建構函式的prototype的屬性值

5.如果要得到物件的某個屬性,如果物件自身沒有這個屬性就會去它的原型上尋找

(三)原型鏈

1.如何構成原型鏈

grand.prototype.xing = '張'

function grand(){}//祖父級建構函式

var g1 = new grand();//例項化乙個祖父

father.prototype = g1;//將例項化的祖父賦值給父級建構函式的原型

function father(){}//父級建構函式

var f1 = new father();//例項化乙個父

son.prototype = f1;//將例項化的父賦值給子級建構函式的原型

function son(){}//子級建構函式

var s1 = new son();//例項化乙個子

console.log(s1.xing);//張

2.例項物件只能檢視其原型鏈上的屬性,不能增刪改查

3.從原型鏈上看到原型物件也有原型,最終指向object

(四)繼承

1.傳統形式----用原型鏈繼承 弊端:過多繼承沒用的屬性和方法 已被棄用

3.共享原型繼承 ,將父的原型賦值給子的原型

弊端:不能隨便改動自己的原型,改動對影響所有的共享原型的例項物件

4.聖杯模式

//繼承聖杯模式

//功能:實現原型共享繼承,同時相互之間盡量不影響

//target:建構函式

//origin:建構函式

function gongxiang(target,origin); //宣告乙個建構函式(橋梁作用)

m.prototype = origin.prototype;//將origin的原型和m的原型共享

target.prototype = new m();//將target的原型的建構函式變為m()

target.prototype.constructor = target;//將target的原型的建構函式拉回來變為target

target.prototype.uber = origin.prototype;//將origin的原型和target.prototype.uber共享

}fu.prototype.money = '1億';

fu.prototype.fangzi = '別墅';

fu.prototype.*** = '男'; //給fu原型上新增屬性和方法

function fu(){}; 建構函式 ----origin的實參

function zi(){}; 建構函式 ----target的實參

gongxiang(zi,fu); //呼叫原型共享的函式並傳參

zi.prototype.*** = '女'; //隨意改動/新增target的原型上的任意屬性和方法

var z1 = new zi(); //例項化target實參物件

console.log(z1); //仍是自己原型上的屬性和方法,不受origin實參的影響

var f1 = new fu(); //例項化origin實參物件

console.log(f1); //仍是自己原型上的屬性和方法,不受target實參的影響

js高階 原型鏈繼承

實現繼承方式1 套路 1,定義父型別建構函式。2,給父型別的原型新增方法。3,定義子型別的建構函式。4,建立父型別的物件賦值給子型別的原型。5,將子類原型的構造屬性設定為子型別。6,給子型別原型新增方法 7,建立子型別的物件 可以呼叫父型別的方法 關鍵 子型別的原型為父型別的乙個例項物件。實際上是子...

JS高階系列之原型 原型鏈

最近在看 j ascript忍者秘籍 這本書的時候,再加上最近遇到的關於原型 原型鏈的面試題,所以萌生了要把這些知識梳理一遍的想法,所以以下是我自己對原型 原型鏈的看法 提到原型,我們可能都會想到與物件有關的東西,但其實,原型是與函式才是密切相關的。每當我們建立乙個函式,都會有乙個指向該函式的原型物...

js之原型鏈 繼承

首先來總結一下自己對原型鏈的的理解,直白的說就是 為例項物件查詢方法屬性提供乙個橋梁,在原型鏈中,proto 是至關重要的東西,上圖 繼承,說白了就是繼承父親的屬性,方法 繼承屬性可以使用father.call this,name,age,來實現 繼承方法就不行了,得使用原型物件的查詢機制 發不多說...