JS學習之原型和原型鏈模式

2022-07-22 20:00:17 字數 1598 閱讀 3361

原型鏈模式

1、每乙個物件(例項也是物件)都有乙個天生自帶的屬性:__proto__,這個屬性指向當前所屬類的原型(prototype)

2、每乙個函式(類也是函式)都有乙個天生自帶的屬性:prototype(原型),並且這個屬性儲存的值是乙個物件資料型別的資料,瀏覽器預設給這個屬性開闢乙個堆記憶體

在這個堆記憶體中儲存了相關的屬性和方法

1)其中constructor就是天生自帶的乙個屬性,constructor等於當前的函式本身

2)__proto__:prototype對應的值也是乙個物件資料型別的值,所以也天生自帶__proto__這個屬性

3)我們手動新增的屬性和方法:這部分屬於當前類的公有屬性和方法

1

function

fn(num)

4 fn.prototype.b = function

() ;

7var f1 = new fn(100);

8var f2 = new fn(200);

用畫圖的方式來表示如下:

fn是f1,f2所屬的類,

f1、f2是fn的例項,所以f1.__proto__===fn.prototype,f2.__proto__===fn.prototype

首先找當前例項的私有屬性,如果私有中存在,找的就是私有的,如果私有中不存在,預設根據__proto__找所屬類prototype上公有的屬性,公有中有的話就是公有的,如果公有也沒有,則繼續根據__proto__在往上一級找....一直到找到object這個基類的prototype為止,如果基類上也沒有,則代表當前例項沒有這個屬性,返回的結果是undefined

如下:

//    console.log(f1.a); -->100

// console.log(f1.b); -->f1.__proto__.b

// console.log(f1.hasownproperty) -->f1.__proto__.__proto__.hasownproperty

// console.log(f1.zz); -->undefined

修改原型上公有屬性和方法:

1.通過__proto__給原型上增加了乙個屬性

1      f1.__proto__.c = 300;//

f1通過__proto__把原型上增加了乙個c的屬性,值是300

2 console.log(f2.c);//

-->300

2.直接的通過fn的prototype修改原型上的公有的屬性和方法

1      fn.prototype.b=1000;

2 console.log(f1.b); //

-->1000

注:在所有ie瀏覽器中,瀏覽器為了保護類的原型,遮蔽了__proto__的使用,console.log(f1.__proto__.b);//在ie下-->無法獲取屬性「b」的值: 物件為 null 或未定義。

如果想往類的原型上增加(修改)屬性和方法,相容所有瀏覽器的只有fn.prototype這種方式。

JS原型和原型鏈

建立建構函式 function word words word.prototype 建立例項 var w new word hello world w.print function w.print hello world w.alert hello world function.prototype....

js原型鏈和原型

1 原型 在js中一切皆物件,那原型也是乙個物件,通過原型可以實現物件的屬性繼承,js的物件中包含著乙個 prototype 內部屬性,這個屬性所對應的就是物件的原型。prototype 作為物件的內部屬性不能被直接訪問,所以為了方便檢視乙個物件的原型,提供了 proto 這個非標準的訪問器,在js...

JS 原型和原型鏈

先宣告乙個建構函式 function people name,age 把類的方法寫在建構函式原型物件中,子類就不能再通過呼叫父類建構函式來繼承方法 屬性還是可以繼承 給people的原型新增方法 people.prototype.speak function 建立子類繼承people functio...