個人關於JS原型鏈的學習和理解

2021-08-24 20:28:09 字數 3026 閱讀 4862

簡單記錄下關於對原型鏈的理解。

字串、數字、布林、陣列、物件、null、undefined,其中物件為複雜基本型別。

基本型別:number string  boolean  undefined null  ,其中string  boolean  number 這三種型別也叫做  基本包裝型別

引用型別:object  function

特此說明:在使用過程中,我們看到的基本型別為基本的包裝型別,可看做引用型別來理解原型鏈的關係,下面會詳細描述。至於基本型別是如何被包裝成基本包裝型別的,則後續再進行研究說明。

一切皆物件,函式是特殊的物件。

所有的引用型別(函式、陣列和物件)都擁有__proto__屬性(隱式原型)

所有函式擁有prototype屬性(顯示原型)

原型物件:擁有prototype屬性的物件,在定義函式時就被建立

大多數情況下,__proto__可以理解為「構造器的原型」,

__proto__ === constructor.prototype

function word(words)

word.prototype =

} var w = new word("hello word");

w.alert();

console.log(w.__proto__ === word.prototype) // true

例項w的隱式原型指向它建構函式的顯示原型。(指向即恆等於)

w.__proto__ === word.prototype // true
當呼叫某種方法或查詢某種屬性時,首先會在自身呼叫和查詢,如果自身沒有該屬性或方法,則會去它的__proto__屬性中呼叫查詢,也就是構造方法的prototype屬性中查詢。例項通過這樣的方法繼承建構函式的方法和屬性。

例項通過__proto__屬性指向構造方法的prototype的屬性實現方法和屬性的繼承。

var a = '1' 如同

var a = new string('1')
則可以理解為 a的隱式原型指向它建構函式的顯示原型。其它兩個基本型別同理。string 物件是 string 原始型別的物件表示法。由於__proto__屬性是任何物件都有的屬性,在js中一切皆物件,所以會形成一條__proto__連線起來的鏈條,遞迴訪問__proto__必須最終到頭,並且值為null。

function.prototype.a = 'a';

object.prototype.b = 'b';

function person(){}

console.log(person);

let p = new person();

console.log(p); // person {} 物件

console.log(p.a); // null

console.log(p.b); // b

說明: p是person()的例項,是乙個person物件,它擁有乙個屬性值__proto__,並且__proto__是乙個物件,包含兩個屬性值constructor和__proto__,

會發現p.__proto__ ===person.prototype,

p.__proto__.constructor ===person // true(未截圖),即p.__proto__.constructor指向了建構函式本身。

person.prototype的__proto__屬性,指向了object 的prototype屬性。即p.b的列印結果為b。則例項w通過__proto__屬性繼承了object 的屬性b。通過__proto__屬性一直向上查詢,一直到nulll為止。

那麼建構函式person__proto__指向了function.prototype。

1.查詢屬性,如果本身沒有,則會去__proto__中查詢,也就是建構函式的顯式原型中查詢,如果建構函式中也沒有該屬性,因為建構函式也是物件,也有__proto__,那麼會去它的顯式原型中查詢,一直到null,如果沒有則返回undefined

2.p.__proto__.constructor  == function person(){}

3.p.___proto__.__proto__== object.prototype

4.p.___proto__.__proto__.__proto__== object.prototype.__proto__ == null

5.通過__proto__形成原型鏈而非protrotype

部分內容摘自:

理解js原型和原型鏈

一.普通物件和函式物件 js中,萬物皆物件,大體分為兩種 普通物件,函式物件。凡是通過new function 建立的都是函式物件,其他的則為普通物件。下面舉例說明 function fun1 function var fun2 function function var fun3 new func...

js的原型和原型鏈理解

以以下 為例 let arr 1,3,2,0 arr.reverse arr.tostring 我們使用console.dir arr 命令 發現arr.proto 屬性上有reverse 和tostring 方法了 用console.dir arr 發現,arr不僅有我們定義的四個值,其proto...

js關於原型建構函式和原型鏈的理解

js的物件導向方式的函式有很多種方式,其中有兩個比較重要的是兩種方式一是建構函式模式,一是原型模式。1 建構函式模式如 function persion name,age var person1 new person alex 29 person1.sayname alex var person2 ...