一文彻底理解js原生语法prototype, proto 和 constructor

什么是 prototype

在 JavaScript 中，每个函数都有一个 .prototype 属性。这个属性是一个指向对象的引用，它被称为原型对象（prototype object）。如果在函数对象中定义了某个属性或方法，则该函数的所有实例都将继承该属性或方法。

下面是一个例子：

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

Person.prototype.sayHello = function() {
  console.log(`Hello, my name is ${this.name}`);
}

const person1 = new Person('小明', 18);
const person2 = new Person('小红', 20);

person1.sayHello(); // 输出 Hello, my name is 小明
person2.sayHello(); // 输出 Hello, my name is 小红

在上面的例子中，我们在 Person 函数的原型对象上定义了一个 sayHello 方法。然后通过使用 new 关键字创建了两个 Person 实例，它们都可以访问和使用 sayHello 方法。

什么是 proto

在 JavaScript 中，每个对象都有一个特殊的 __proto__ 属性，它指向该对象的原型对象。换句话说，当我们访问一个对象的某个属性时，如果该对象本身没有定义该属性，JavaScript 就会在该对象的 __proto__ 属性所指向的原型对象中寻找该属性。这就是原型继承的概念。

下面是一个例子：

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

Person.prototype.sayHello = function() {
  console.log(`Hello, my name is ${this.name}`);
}

const person = new Person('小明', 18);

console.log(person.__proto__ === Person.prototype); // 输出 true

在上面的例子中，我们在 Person 函数的原型对象上定义了一个 sayHello 方法。然后通过使用 new 关键字创建了一个 Person 实例。我们可以通过 person.__proto__ 访问该实例的原型对象，也可以通过 Person.prototype 访问 Person 函数的原型对象。在上面的例子中，这两个对象是相等的。

需要注意的是，在 ECMAScript 2015 （也就是 ES6）中，__proto__ 属性已经被标准化（它之前是一个非标准的属性）。并且我们也可以使用 Object.getPrototypeOf() 方法获取一个对象的原型对象。

什么是 constructor

在 JavaScript 中，每个函数都有一个 constructor 属性，它指向该函数本身。当我们通过使用 new 关键字创建一个对象时，JavaScript 会自动为该对象设置一个 constructor 属性，它的值为创建该对象的函数。这个 constructor 属性可以用来判断一个对象是由哪个函数创建的。

下面是一个例子：

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

const person = new Person('小明', 18);

console.log(person.constructor === Person); // 输出 true

在上面的例子中，我们通过使用 new 关键字创建了一个 Person 实例。我们可以通过 person.constructor 访问该实例的构造函数，也可以通过 Person 访问构造函数本身。在上面的例子中，这两个对象是相等的。

示例1：利用 prototype 和 constructor 实现继承

利用 JavaScript 中的原型继承，我们可以轻松实现对象之间的继承关系。下面是一个继承的示例：

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

Animal.prototype.sayHello = function() {
  console.log(`Hello, I am a ${this.name}`);
}

function Cat(name) {
  Animal.call(this, name);
  this.type = 'cat';
}

Cat.prototype = Object.create(Animal.prototype);
Cat.prototype.constructor = Cat;

const cat = new Cat('小花');

console.log(cat.constructor === Cat); // 输出 true
console.log(cat.sayHello()); // 输出 Hello, I am a cat

在上面的例子中，我们定义了父类 Animal 和子类 Cat。子类 Cat 通过调用父类 Animal 的构造函数来继承父类 Animal。同时，我们还设置了子类 Cat 的原型对象指向父类 Animal 的原型对象，以实现对父类属性和方法的继承。

示例2：proto 和 constructor 的使用

下面是一个使用 __proto__ 和 constructor 的示例：

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

function Cat(name) {
  this.type = 'cat';
}

const animal = new Animal('动物');
const cat = new Cat('小花');

cat.__proto__ = animal;

console.log(cat instanceof Animal); // 输出 true
console.log(cat.constructor === Cat); // 输出 true
console.log(cat.__proto__ === animal); // 输出 true

在上面的例子中，我们定义了一个父类 Animal 和一个子类 Cat。然后我们创建了两个对象 animal 和 cat。通过将子类 Cat 的 __proto__ 属性指向父类 Animal，我们让 cat 对象拥有了 Animal 对象的所有属性和方法。同时，我们还可以使用 cat.constructor 来获取 cat 对象的构造函数，可以使用 cat.__proto__ 来获取 cat 对象的原型对象。