javascript原型_JavaScript原型附带示例

javascript原型

样机 (Prototypes)

JavaScript is a prototype-based language, therefore understanding the prototype object is one of the most important concepts which JavaScript practitioners need to know. This article will give you a short overview of the Prototype object through various examples. Before reading this article, you will need to have a basic understanding of the this reference in JavaScript.

JavaScript是基于原型的语言，因此了解原型对象是JavaScript从业人员需要了解的最重要的概念之一。 本文将通过各种示例向您简要介绍Prototype对象。 在阅读本文之前，您需要对JavaScript中的this参考有一个基本的了解。

原型对象 (Prototype object)

For the sake of clarity, let’s examine the following example:

为了清楚起见，让我们研究以下示例：

function Point2D(x, y) {
  this.x = x;
  this.y = y;
}

As Point2D function is declared, a default property named prototype will be created for it (note that, in JavaScript, a function is also an object). The prototype property is an object which contains a constructor property and its value is Point2D function: Point2D.prototype.constructor = Point2D. And when you call Point2D with new keyword, newly created objects will inherit all properties from Point2D.prototype. To check that, you can add a method named move into Point2D.prototype as follows:

声明Point2D函数后，将为其创建一个名为prototype的默认属性(请注意，在JavaScript中，函数也是一个对象)。 prototype属性是一个包含constructor属性的对象，其值为Point2D函数： Point2D.prototype.constructor = Point2D 。 当您使用new关键字调用Point2D时， 新创建的对象将继承 Point2D.prototype 所有属性 。 要进行检查，可以在Point2D.prototype添加一个名为move的方法，如下所示：

Point2D.prototype.move = function(dx, dy) {
  this.x += dx;
  this.y += dy;
}

var p1 = new Point2D(1, 2);
p1.move(3, 4);
console.log(p1.x); // 4
console.log(p1.y); // 6

The Point2D.prototype is called prototype object or prototype of p1 object and for any other object created with new Point2D(...) syntax. You can add more properties to Point2D.prototype object as you like. The common pattern is declare methods to Point2D.prototype and other properties will be declared in constructor function.

Point2D.prototype称为原型对象或p1对象的原型 ，对于使用new Point2D(...)语法创建的任何其他对象，也称为原型对象 。 您可以根据需要向Point2D.prototype对象添加更多属性。 通用模式是Point2D.prototype声明方法，其他属性将在构造函数中声明。

Built-in objects in JavaScript are constructed in a similar manner. For example:

JavaScript中的内置对象以类似的方式构造。 例如：

• Prototype of objects created with new Object() or {} syntax is Object.prototype.

  使用new Object()或{}语法创建的对象的原型为Object.prototype 。

• Prototype of arrays created with new Array() or [] syntax is Array.prototype.

  使用new Array()或[]语法创建的数组的原型为Array.prototype 。

• And so on with other built-in objects such as Date and RegExp.

  以此类推，以及其他内置对象，例如Date和RegExp 。

Object.prototype is inherited by all objects and it has no prototype (its prototype is null).

Object.prototype被所有对象继承，并且没有原型(原型为null )。

原型链 (Prototype chain)

The prototype chain mechanism is simple: When you access a property p on object obj, the JavaScript engine will search this property inside obj object. If the engine fails to search, it continues searching in the prototype of obj object and so on until reaching Object.prototype. If after the search has finished, and nothing has been found the result will be undefined. For example:

原型链机制很简单：访问对象obj的属性p时，JavaScript引擎将在obj对象内搜索此属性。 如果引擎搜索失败，它将继续搜索obj对象的原型，依此类推，直到到达Object.prototype 。 如果搜索完成后仍未找到任何内容，则结果将是undefined 。 例如：

var obj1 = {
  a: 1,
  b: 2
};

var obj2 = Object.create(obj1);
obj2.a = 2;

console.log(obj2.a); // 2
console.log(obj2.b); // 2
console.log(obj2.c); // undefined

In above snippet, the statement var obj2 = Object.create(obj1) will create obj2 object with prototype obj1 object. In other words, obj1 becomes the prototype of obj2 instead of Object.prototype by default. As you can see, b is not a property of obj2, you can still access it via the prototype chain. For c property, however, you get undefined value because it can’t be found in obj1 and Object.prototype.

在以上代码段中，语句var obj2 = Object.create(obj1)将使用原型obj1对象创建obj2对象。 换句话说，默认情况下， obj1成为obj2的原型，而不是Object.prototype 。 如您所见， b不是obj2的属性，您仍然可以通过原型链访问它。 但是，对于c属性，您会得到undefined值，因为在obj1和Object.prototype 。

班级 (Classes)

In ES2016, we now get to use the Class keyword as well as the methods mentioned above to manipulate prototype. The JavaScript Class appeals to developers from OOP backgrounds, but it’s essentially doing the same thing as above.

在ES2016中，我们现在可以使用Class关键字以及上述方法来操作prototype 。 JavaScript Class吸引了OOP背景的开发人员，但实际上它的作用与上述相同。

class Rectangle {
  constructor(height, width) {
    this.height = height
    this.width = width
  }

  get area() {
    return this.calcArea()
  }

  calcArea() {
    return this.height * this.width
  }
}

const square = new Rectangle(10, 10)

console.log(square.area) // 100

This is basically the same as:

这基本上与以下内容相同：

function Rectangle(height, width) {
  this.height = height
  this.width = width
}

Rectangle.prototype.calcArea = function calcArea() {
  return this.height * this.width
}

The getter and setter methods in classes bind an Object property to a function that will be called when that property is looked up. It’s just syntactic sugar to help make it easier to look up or set properties.

类中的getter和setter方法将Object属性绑定到将在查找该属性时调用的函数。 它只是语法糖，可以帮助您更轻松地查找或设置属性。

有关JS原型的更多信息： (More info on JS Prototypes:)

• All you need to know to understand JavaScript's prototype

  您需要了解的所有知识才能理解JavaScript的原型

翻译自: https://www.freecodecamp.org/news/javascript-prototype-explained-with-examples/

javascript原型