js的原型和原型鏈

構造函數創建對象：

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) // Daisydelete 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 只是在兩個對象之間創建一個關聯，這樣，一個對象就可以通過委托訪問另一個對象的屬性和函數，所以與其叫繼承，委托的說法反而更準確些

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/249428.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/249428.shtml
英文地址，請注明出處：http://en.pswp.cn/news/249428.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！