浅谈Javascript中的prototype和__proto__的理解

Javascript中有两个与对象原型相关的概念——prototype和__proto__，它们在原型继承和对象属性访问时作用重要。下面我们详细讲解它们的理解。

1. prototype

prototype是一个对象，它存在于每一个函数(function)中。当我们使用new关键字来调用函数时，prototype对象中的属性和方法会被加入到新生成的对象中。

示例一：

function Person(firstName, lastName) {
  this.firstName = firstName;
  this.lastName = lastName;
}

Person.prototype.getFullName = function() {
  return this.firstName + ' ' + this.lastName;
}

var person1 = new Person('Alice', 'Smith');
console.log(person1.getFullName()); // Alice Smith

在以上示例中，我们定义了一个Person函数，并给它的prototype对象添加了一个getFullName方法，接着我们使用new关键字调用Person函数，并将生成的对象存放在person1变量中。我们可以通过person1.getFullName()访问getFullName方法，并得到其返回值。

2. __proto__

__proto__是一个对象内置的属性，它指向该对象的构造函数(constructor)的prototype对象。当我们访问一个对象的属性时，首先查找对象本身是否拥有该属性，如果没有就会一级一级向上查找其构造函数的prototype对象。

示例二：

function Dog(age) {
  this.age = age;
}

Dog.prototype.bark = function() {
  console.log('wang!');
}

var d = new Dog(2);
console.log(d.age); // 2
console.log(d.bark); // function()...
console.log(d.__proto__ === Dog.prototype); // true
console.log(d.__proto__.__proto__ === Object.prototype); // true

在以上示例中，我们定义了一个Dog构造函数，给它的prototype对象添加了一个bark方法，并使用new关键字来调用生成d对象。接着我们访问d对象的age属性和bark方法，发现这两个属性和方法都是存在于Dog构造函数的prototype对象上的。最后我们比较d.__proto__是否指向Dog.prototype对象，以及d.__proto__.__proto__是否指向Object.prototype对象，结果都为true。

结论

prototype是函数(function)对象独有的属性，它的作用是添加公共属性和方法，以用于所有通过该函数生成的对象。

而__proto__是每个对象独有的属性，它的作用是指向该对象构造函数的prototype对象，以支持原型链继承。

在实际应用中，我们可以通过prototype来定义构造函数的公共属性和方法，也可以使用__proto__来实现对象之间的属性和方法的继承。

以上就是Javascript中prototype和__proto__的基本知识点及应用教程。

阅读剩余 29%