Javascript中prototype与__proto__的关系详解

下面我来为大家讲解“Javascript中prototype与__proto__的关系详解”。

1. 什么是prototype

prototype是Javascript中的一个属性，每一个函数都会默认拥有prototype属性。prototype属性指向一个对象，这个对象中包含了一些属性和方法，这些属性和方法可被该构造函数的实例对象共享。也就是说，当使用new运算符创建该构造函数的一个实例对象时，实例对象会继承该构造函数的prototype属性上所定义的属性和方法，从而实现代码的重用。

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

Person.prototype.sayName = function () {
  console.log("My name is " + this.name);
};

let person1 = new Person("Tom", 18);
person1.sayName(); // My name is Tom

在上面的示例中，我们定义了一个Person构造函数，并在其prototype属性上添加了一个sayName方法。接着我们通过new运算符创建了一个person1实例对象，并调用了其sayName方法，发现成功输出了"My name is Tom"字符串。

2. 什么是__proto__

__proto__是Javascript中的一个特殊属性，也称为原型链。每个对象(除null以外)都有一个__proto__属性，它指向该对象的原型(prototype)。通过原型链，一个对象可以访问和使用其原型(prototype)上所定义的所有属性和方法。

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

Person.prototype.sayName = function () {
  console.log("My name is " + this.name);
};

let person1 = new Person("Tom", 18);

console.log(person1.__proto__ === Person.prototype); // true
console.log(Person.prototype.__proto__); // {}

Object.prototype.toString.call(Person.prototype.__proto__); // "[object Object]"

在上面的示例中，我们使用__proto__属性来验证person1实例对象的原型(prototype)是否为Person函数的prototype属性，发现结果为true。接着我们使用__proto__属性查看Person函数的prototype属性的原型(prototype)，发现为一个空对象。最后我们使用Object.prototype.toString方法查看空对象的类型，发现为"[object Object]"。

3. prototype与__proto__的关系

每个函数都有一个prototype属性，它指向一个对象(即该函数的原型)。通过原型链，每个实例对象都可以访问和使用该函数prototype属性上所定义的属性和方法。而每个对象(除了null以外)都有一个__proto__属性，它指向该对象的原型(prototype)。通过原型链，每个实例对象都可以访问和使用其原型(prototype)上所定义的所有属性和方法。

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

Person.prototype.sayName = function () {
  console.log("My name is " + this.name);
};

let person1 = new Person("Tom", 18);

console.log(person1.__proto__ === Person.prototype); // true
console.log(Person.prototype.constructor === Person); // true
console.log(person1.constructor === Person); // true

在上面的示例中，我们创建了一个Person函数，并在其prototype属性上添加了一个sayName方法。接着我们使用new运算符创建了一个person1实例对象，验证了person1实例对象的__proto__属性与Person函数的prototype属性是否指向同一个对象，发现结果为true。接着我们分别验证了Person函数的prototype属性的constructor属性和person1实例对象的constructor属性是否均指向Person函数，发现结果均为true。

总结

通过本文，我们详细讲解了Javascript中prototype与__proto__的关系。每个函数默认都会拥有prototype属性，它指向一个对象(即该函数的原型)，而每个对象(除了null以外)都拥有一个__proto__属性，它指向该对象的原型(prototype)。我们还通过示例详细说明了函数的原型和实例的原型如何在原型链中连接起来，并进一步解释了原型链的概念。掌握了这些知识，有助于我们更好地理解Javascript的面向对象编程特性，更加灵活地开发出高效的Javascript程序。