[Js] javascript中的原型链02 prototype&constructor

83 阅读1分钟

这是构造函数和构造函数的prototype之间的关系

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

那么对Person创建的实例对象p1
p1.__proto__.constructor === Person; // true

在浏览器控制台中输入如下代码

                  Person.prototype.sayHello = function() {
                  console.log(`Hello, ${this.name}!`);
                  }
                  
                  const p1 = new Person("Mike"); // 实例对象p1
                  
                  console.log(&quot;p1->&quot;, p1)" aria-label="复制" data-bs-original-title="复制"></button>
</div>
function Person(name) {
this.name = name;
}

Person.prototype.sayHello = function() { console.log(Hello, <span class="hljs-subst">${<span class="hljs-variable language_">this</span>.name}</span>!); }

const p1 = new Person("Mike"); // 实例对象p1

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

查看输出

实例对象p1有一个内部属性[[Prototype]], 其用于存放该对象对应的_proto。
对象的内部属性[[Prototype]]是无法被直接访问的,需要通过p1.__proto__属性或者 Object.getPrototypeOf(p1)方法来访问。

展开p1的[[Prototype]]
(p1.proto === Person.prototype 实际上看的是Person的prototype属性)

橙框中是Person.prototype

再看下去

可以看到蓝框中我们自己定义的sayHello方法。
也可以看到Person.prototype.constructor 指向Person本身。
还能看到Person.prototype.proto 这个属性指向Object.prototype

其他:
console.log("Person.proto->", Person.proto)

同步更新到自己的语雀:
www.yuque.com/dirackeeko/…