動態

詳情 返回 返回

[JS] javascript中的原型鏈02 prototype&constructor - 動態 詳情

這是構造函數和構造函數的prototype之間的關係

Person.prototype.constructor === Person; // true

那麼對Person創建的實例對象p1
p1.__proto__.constructor === Person; // true

在瀏覽器控制枱中輸入如下代碼

function Person(name) {
this.name = name;
}

Person.prototype.sayHello = function() {
console.log(`Hello, ${this.name}!`);
}

const p1 = new Person("Mike"); // 實例對象p1

console.log("p1->", p1)

查看輸出
image.png

實例對象p1有一個內部屬性[[Prototype]], 其用於存放該對象對應的_proto。
對象的內部屬性[[Prototype]]是無法被直接訪問的,需要通過p1.__proto__屬性或者 Object.getPrototypeOf(p1)方法來訪問。

展開p1的[[Prototype]]
(p1.__proto__ === Person.prototype 實際上看的是Person的prototype屬性)

橙框中是Person.prototype
image.png

再看下去
image.png

可以看到藍框中我們自己定義的sayHello方法。
也可以看到Person.prototype.constructor 指向Person本身。
還能看到Person.prototype.__proto__ 這個屬性指向Object.prototype
image.png

其他:
console.log("Person.__proto__->", Person.__proto__)
image.png

同步更新到自己的語雀:
https://www.yuque.com/dirackeeko/blog/gpbe3gy7zcyc6l0l

user avatar 54r9rxzy 頭像 jerryc 頭像 dalidexiaoxiami 頭像 zengh 頭像
點贊 4 用戶, 點贊了這篇動態!
點贊

Add a new 評論

Some HTML is okay.