JS原型prototype和__proto__用法实例分析

来讲一下JS原型prototype和__proto__用法的攻略。

1. 前置知识

在开始之前，需要了解一些前置知识：

• JavaScript中所有对象的原型都是 Object.prototype，它包含了常用的方法如 toString()、valueOf() 等。
• 每个 JavaScript 对象都有一个 __proto__ 属性，指向它的原型对象。这个属性是非标准的，但是现代浏览器都支持它。
• 每个函数（除了箭头函数）都有一个 prototype 属性，它指向一个对象。这个对象就是函数的原型对象。

2. __proto__

__proto__ 指向对象的原型对象，它可以用来访问对象原型上的属性和方法。比如以下示例：

let p = {name: 'Leo'};
let o = {age: 18};
o.__proto__ = p;

console.log(o.name);  // 'Leo'

上面示例中，我们创建了一个 p 对象，包含了一个 name 属性；然后创建了另一个 o 对象，包含了一个 age 属性。接着我们把 o 对象的原型指向了 p 对象，这样 o 就可以访问到 p 的 name 属性了。这也就是 JS 原型继承的基础。

3. prototype

函数的 prototype 属性是用来挂载属性和方法，以便通过构造函数创建新对象时使用。比如以下示例：

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

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

let p = new Person('Leo');
p.hello();  // 'Hello, Leo!'

上面示例中，我们定义了一个 Person 函数，创建了一个对象 p。我们通过 new Person('Leo') 来创建 p，在实例化过程中，Person 的 prototype 中所定义的 hello 函数被赋值给了 p 的原型对象。这样我们可以通过 p.hello() 来调用这个函数。

4. 总结

上面我们分别讲解了 __proto__ 和 prototype，从实例的角度分别说明了它们的用法。

在具体使用中，我们可以结合这两个特性，使用原型链来实现对象之间的继承关系（实际上就是将一个对象的 __proto__ 属性指向另一个对象）。根据需要我们还可以通过给构造函数的 prototype 添加方法和属性，以便将这些方法和属性赋值给由构造函数创建的实例对象的原型对象。

希望这些讲解对你有所帮助～