鍍金池/ 問答/HTML/ JS構(gòu)造函數(shù)原型問題

JS構(gòu)造函數(shù)原型問題

function Person() {}

Person.prototype.name = 'Nicholas';

const p1 = new Person();

console.log(p1.name); // Nicholas

p1.name = 'Greg';

console.log(p1.__proto__.name); // Nicholas

// 為什么上面輸出不是 'Greg'

代碼如上。name屬性是在構(gòu)造函數(shù)Person的原型上的。當(dāng)我實(shí)例化p1時(shí)，修改了name的值，因?yàn)?code>p1實(shí)例本身沒有name屬性，所以就會(huì)去原型上找。而p1實(shí)例對(duì)原型是一種引用，所以按照正常邏輯，不應(yīng)該原型上的name屬性也會(huì)被修改嗎？

回答
編輯回答
小眼睛

1、

p1.name = 'Greg';

重點(diǎn)是這句代碼，他不會(huì)修改原型的 name ，而是直接設(shè)置 實(shí)例 的 name，不管原型上有沒有，如果實(shí)例上有 name 就覆蓋，沒有就設(shè)置；

2、如果你單獨(dú)訪問屬性：

p1.name

這樣，在實(shí)例上沒有 name 屬性時(shí)，才會(huì)去原型鏈上找；

3、

p1實(shí)例對(duì)原型是一種引用

錯(cuò)誤，Object.getPrototypeOf(p1)、p1.constructor.prototype才是對(duì) p1 原型的引用

4、不要用 __proto__ 屬性，如果要訪問實(shí)例的原型用 Object.getPrototypeOf 設(shè)置原型用 Object.setPrototypeOf

2017年6月19日 09:22
編輯回答
孤酒

p1實(shí)例對(duì)原型是一種引用這句有誤

p1是Person的實(shí)例，他有個(gè)__proto__屬性指向/引用Person的原型

p1.name是修改或訪問他本身的name屬性，訪問他的屬性或方法時(shí)，如果它本身沒有，會(huì)去原型鏈上找

p1.__proto__.name是修改或訪問原型的name屬性

2017年3月10日 15:18
編輯回答
終相守

構(gòu)造函數(shù)實(shí)例化的時(shí)候，會(huì)從原型鏈上繼承屬性，這個(gè)繼承是通過指針指向原型對(duì)象所在內(nèi)存。
實(shí)例化后創(chuàng)建的對(duì)象單獨(dú)占用一個(gè)內(nèi)存，當(dāng)更改屬性的時(shí)候，會(huì)在對(duì)象內(nèi)添加一個(gè)屬性，你可以通過hasOwnProperty檢查是繼承的屬性還是自身有的屬性。如下代碼：

function Func(){}
Func.prototype.name="nihao";
var abc=new Func();
console.log(abc.name);
console.log(abc.hasOwnProperty("name"));
abc.name="text";
console.log(abc.name);
console.log(abc.hasOwnProperty("name"));
// 打印abc對(duì)象的結(jié)構(gòu)，看的更清楚些
console.dir(abc);

如上，name屬性是在實(shí)例化后的對(duì)象上的，所以，修改name值，并不會(huì)導(dǎo)致原型鏈上name值的改變。

2017年2月13日 02:07