初学者跪着学JavaScript Day20 : 原型毕露(中）

一日客语：中文：青色 客语：抢厶ㄟ ˋ

继续学习原型吧～
学习内容：
1.Object.getPrototypeOf() =>等於__proto__ 、[[prototype]]
2.Object.getPrototypeOf(实例).constructor
3.利用Object.getPrototypeOf(实例).constructor 方式建立物件
4.改掉原型

现在创了一个 constructor Cat 然後new 出一个实例 nini，可以透过
Object.getPrototypeOf()语法去查找到，除了定义的 sleep 属性以外还有一个内建属性叫 constructor指向 Cat 所以
Object.getPrototypeOf(nini).constructor才能印出Cat

function Cat() {
    this.eat = () => 'apple';
}

const nini = new Cat();
Cat.prototype.sleep = 'sleep';

console.log(nini);
//Cat { eat: [Function (anonymous)] }

console.log(Object.getPrototypeOf(nini));
//{sleep: 'sleep', constructor: Cat}

console.log(Object.getPrototypeOf(nini).constructor); //[Function: Cat]

自订物件改掉原型

若是把 Cat 的原型重新赋值新的物件，原本已经创建的nini还取得到 sleep 吗
新创的 niki 取得到 sleep 吗?

继续看下去吧

function Cat() {
    this.eat = () => 'apple';
}

const nini = new Cat();
Cat.prototype.sleep = 'sleep';
console.log(Object.getPrototypeOf(nini)); //{ sleep: 'sleep' }

//原型变动
//新物件改掉Cat原型
Cat.prototype = {
    go: function () {
        return 'go';
    },
};

const niki = new Cat();

console.log(Object.getPrototypeOf(niki)); //{ go: [Function: go] }
Object.getPrototypeOf(niki).constructor//Object

答案：新物件改掉 Cat 原型，nini 仍然可以使用 sleep 方法但 niki 参照的原型已经改变所以无法取用 sleep 属性

console.log(nini.sleep);//sleep
console.log(niki.go()); //go
console.log(niki.sleep); //undefined

用图型看看

新物件(niki)会参照到新原型
在原型变动之前创造出来的物件(nini)仍然可以参照到那时的原型

下集预告

修改了Cat原型後使用Object.getPrototypeOf(niki).constructor
为何是印出 Object 呢
一开始 Object.getPrototypeOf(nini).constructor 明明是Cat为何原型有这种差异呢～～
难道原型链结构产生变化？！明天让我用instanceof来解释这些关系

function Cat() {
    this.eat = () => 'apple';
}

const nini = new Cat();
Cat.prototype.sleep = 'sleep';
console.log(Object.getPrototypeOf(nini)); //{ sleep: 'sleep' }

//原型变动
//新物件改掉Cat原型
Cat.prototype = {
    go: function () {
        return 'go';
    },
};

const niki = new Cat();

console.log(Object.getPrototypeOf(niki)); //{ go: [Function: go] }
Object.getPrototypeOf(niki).constructor//Object

资料参考:
忍者开发技巧探秘第二版