JavaScript构造函数、实例与原型链关系解析

构造函数、实例与原型三者之间的关系

1. 任何函数都具备一个 prototype 属性，该属性的值是一个对象。

function F () {}
console.log(F.prototype) // => object
//原型对象
F.prototype.sayHi = function () {
  console.log('hi!')
}

2. 构造函数的 prototype 对象默认包含一个 constructor 属性，该属性指向定义该 prototype 的函数本身。

console.log(F.constructor === F) // => true
//表示这个

3. 通过构造函数创建的实例对象内部，会包含一个指向构造函数 prototype 对象的指针 __proto__。

var instance = new F()
console.log(instance.__proto__ === F.prototype) // => true

这意味着，使用当前构造函数创建的每个实例对象内部都持有一个指针，即 _proto_，该指针指向构造函数的 prototype 对象。

因此，我们可以直接通过实例访问原型对象上定义的成员。

示例：

instance.sayHi() // => 打印hi!

注意

_proto_ 是一个非标准属性。

prototype 属性

JavaScript 规定，每个构造函数都拥有 prototype 属性，指向另一个对象。该对象的所有属性和方法，都会被构造函数的实例所继承。

这意味着，我们可以将所有对象实例需要共享的属性和方法直接定义在 prototype 对象上。

示例：

function Person (name, age) {
  this.name = name
  this.age = age
}
console.log(Person.prototype)//打印原型
Person.prototype.type = 'human'//将human挂载到原型对象的属性上
Person.prototype.sayName = function () {//还可以定义函数
  console.log(this.name)
}
let p1 = new Person(...)
let p2 = new Person(...)
console.log(p1.sayName === p2.sayName) // => true

我们可以看到 console.log(p1.sayName === p2.sayName) 这行代码打印的结果为 true。

这是因为所有实例的 type 属性和 sayName() 方法都指向同一个内存地址，即指向 prototype 对象，从而提高了运行效率。

属性或成员的搜索原则

既然多个实例对象可以共享原型对象中的属性或成员，那么 JavaScript 是如何实现这种共享机制的呢？

这涉及到属性的搜索原则。

每当代码读取某个实例对象的某个属性时，都会执行一次搜索，目标是寻找具有给定名字的属性或成员。

搜索过程如下：

1. 首先从对象实例本身开始搜索。

2. 如果在实例对象中找到了具有给定名字的属性，则返回该属性的值。

3. 如果没有找到，则继续搜索实例对象中含有的指针（前文所述）所指向的原型对象，并在原型对象中查找具有给定名字的属性。

4. 如果在原型对象中找到了这个属性，则返回该属性的值。

在执行 instance.sayName() 时，会执行两次搜索：第一次搜索实例对象，第二次搜索原型对象。

总结

以上即为多个实例对象共享原型所挂载的属性和方法的基本原理！

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注本站的更多内容！