JS原型鏈筆記

2019 年 10 月 29 日
筆記

構造函數創建對象：

function Person() {    }  var person = new Person();  person.name = 'Kevin';  console.log(person.name) // Kevin

Person 就是一個構造函數，我們使用 new 創建了一個實例對象 person

prototype

每個函數都有一個 prototype 屬性每一個JavaScript對象(null除外)在創建的時候就會與之關聯另一個對象，這個對象就是我們所說的原型，每一個對象都會從原型"繼承"屬性。

function Person() {    }  // 雖然寫在注釋里，但是你要注意：  // prototype是函數才會有的屬性  Person.prototype.name = 'Kevin';  var person1 = new Person();  var person2 = new Person();  console.log(person1.name) // Kevin  console.log(person2.name) // Kevin

在這裡插入圖片描述

proto

每一個JavaScript對象(除了 null )都具有的一個屬性，叫proto，這個屬性會指向該對象的原型

function Person() {    }  var person = new Person();  console.log(person.__proto__ === Person.prototype); // true

在這裡插入圖片描述

constructor

每個原型都有一個 constructor 屬性指向關聯的構造函數實例原型指向構造函數

function Person() {    }  console.log(Person === Person.prototype.constructor); // true

在這裡插入圖片描述

function Person() {    }    var person = new Person();    console.log(person.__proto__ == Person.prototype) // true  console.log(Person.prototype.constructor == Person) // true  // 順便學習一個ES5的方法,可以獲得對象的原型  console.log(Object.getPrototypeOf(person) === Person.prototype) // true

實例與原型

function Person() {    }    Person.prototype.name = 'Kevin';    var person = new Person();    person.name = 'Daisy';  console.log(person.name) // Daisy    delete person.name;  console.log(person.name) // Kevin

在這個例子中，我們給實例對象 person 添加了 name 屬性，當我們列印 person.name 的時候，結果自然為 Daisy。

但是當我們刪除了 person 的 name 屬性時，讀取 person.name，從 person 對象中找不到 name 屬性就會從 person 的原型也就是 person.proto ，也就是 Person.prototype中查找，幸運的是我們找到了 name 屬性，結果為 Kevin。

原型與原型

var obj = new Object();  obj.name = 'Kevin'  console.log(obj.name) // Kevin

在這裡插入圖片描述

原型鏈

console.log(Object.prototype.__proto__ === null) // true

在這裡插入圖片描述 JavaScript 默認並不會複製對象的屬性，相反，JavaScript 只是在兩個對象之間創建一個關聯，這樣，一個對象就可以通過委託訪問另一個對象的屬性和函數，所以與其叫繼承，委託的說法反而更準確些

作者：饕餮瀦鏈接：https://www.jianshu.com/p/be7c95714586 來源：簡書著作權歸作者所有。商業轉載請聯繫作者獲得授權，非商業轉載請註明出處。

Tags: