Prototype教程

什么是Prototype

Prototype是JavaScript中一个重要的概念，它是指在JavaScript中，所有的对象都是通过另一个对象来继承属性和方法的。这个原型对象就是所谓的“原型”。

在JavaScript中，每一个对象都有一个指向原型的指针，即__proto__属性。原型的属性和方法可以被对象直接使用，而无需再次定义，从而实现代码的重用和可维护性。

创建对象

在JavaScript中，可以使用Object构造函数来创建对象，然后通过赋值的方式来添加属性和方法。例如：

var person = new Object();
person.firstName = "John";
person.lastName = "Doe";
person.fullName = function() {
  return this.firstName + " " + this.lastName;
}

这样的方式虽然简单，但是当需要创建多个相同结构的对象时，会显得冗长且难以维护。Prototype提供了一个更简洁的方式来创建对象。

使用Prototype创建对象

可以通过构造函数来创建对象，并在构造函数的原型对象上定义属性和方法。这样，通过new操作符创建的每个对象都会共享这些属性和方法，从而实现了对象的重用。

function Person(firstName, lastName) {
  this.firstName = firstName;
  this.lastName = lastName;
}
Person.prototype.fullName = function() {
  return this.firstName + " " + this.lastName;
}

var person1 = new Person("John", "Doe");
var person2 = new Person("Jane", "Doe");
console.log(person1.fullName()); // "John Doe"
console.log(person2.fullName()); // "Jane Doe"

在这个例子中，我们定义了一个Person构造函数，它接受firstName和lastName作为参数，并将它们分别赋值给this.firstName和this.lastName，从而创建了一个新的对象。

然后，我们在Person的原型对象上定义了一个fullName方法，它返回拼接后的完整名字。这个fullName方法可以被每一个通过Person构造函数创建的对象所共享。

最后，我们创建了两个person对象，并分别调用了它们的fullName方法，从而打印出完整的名字。

获取和设置原型对象

可以使用Object.getPrototypeOf和Object.setPrototypeOf方法来获取和设置原型对象。例如：

function Person(firstName, lastName) {
  this.firstName = firstName;
  this.lastName = lastName;
}
Person.prototype.fullName = function() {
  return this.firstName + " " + this.lastName;
}

var person1 = new Person("John", "Doe");
var person2 = new Person("Jane", "Doe");

console.log(Object.getPrototypeOf(person1) === Person.prototype); // true

var newPrototype = {
  fullName: function() {
    return this.lastName + ", " + this.firstName;
  }
};

Object.setPrototypeOf(person1, newPrototype);
console.log(person1.fullName()); // "Doe, John"
console.log(person2.fullName()); // "Jane Doe"

在这个例子中，我们定义了一个newPrototype对象，它有一个fullName方法，与Person原型对象定义的fullName方法不同。然后，我们使用Object.setPrototypeOf方法将person1对象的原型设置为newPrototype对象。

最后，我们分别调用了person1和person2的fullName方法，可以看到person1的fullName方法与之前不同，而person2的fullName方法仍然是原来的方法。

总结

Prototype是JavaScript中一个重要的概念，它使得对象的重用和维护变得更加容易。使用Prototype创建对象可以大大简化代码，使得代码更加清晰和易于理解。