JS原型鏈


一、原型鏈圖示

Foo為構造函數,foo是Foo的實例化對象,Foo.prototype是原型對象。
__proto__屬性是對象特有的,prototype屬性是函數特有的。

二、原型鏈的查找機制

js規定,所有的(實例)對象都有自己的原型對象(Foo.prototype)。
查找的順序是:對象的原型 ==> 原型的原型 ==> 原型的原型的原型 ==> ... ==> Object.prototype ==> null
如果一層一層查找,所有的對象的原型都會找到Object.prototype,所有的對象都繼承了Object.prototype中的屬性和方法。 如toString()

三、原型鏈的作用

定制所有實例對象共享的屬性和方法。
讀取屬性和方法的規則:

  1. js引擎會先尋找對象本身的屬性和方法,如果找不到那就去原型對象上去找,如果還是找不到,就去原型的原型去找,如果直到最頂層Object.prototype還是找不到,就會返回undefined。
  2. 如果對象和它的原型都定制了同名的屬性,那么優先讀取對象自身的屬性。
function Foo() {};
Foo.prototype.name = 'mm';
var f = new Foo();
console.log(f.age); // undefined
f.name = 'gg'
console.log(f.name); // gg
console.log(Foo.prototype.name); // mm

四、constructor屬性

constructor表示原型對象和構造函數之間的關聯關系。
現在我們改造一個自定義的數組對象,就可以通過prototype實現。
我們知道原型對象的constructor是指向構造函數本身的,因此當我們改變了原型對象的指向時,要把constructor改回自定義的構造函數。以免出現引用問題。

function myArray() {};
myArray.prototype = Array.prototype; // 把數組的屬性和方法賦值給myArray
myArray.prototype.constructor = myArray; // 把構造器指向myArray 不改的話指向Array
var arr = new myArray();
arr.push(1,2,3);
console.log(myArray.prototype.constructor === myArray); // true

五、構造函數、原型對象、實例對象之間的關系

實例對象的__proto__屬性指向了原型對象。
原型對象的constructor屬性指向了構造函數。
實例對象的constructor屬性繼承自原型對象的constructor,所以同樣指向了構造函數。
(說白了還是那張原型鏈的圖。。。)


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM