A deep dive into prototypes and inheritance in JavaScript

This article mainly talks about how prototypes work in JavaScript, and how to link object properties and methods through [Prototype] hidden properties shared by all objects; and how to create custom constructors and how prototypal inheritance works to pass property and method values .

Introduction

JavaScript is a prototype-based language, which means that object properties and methods can be accessed by having Universal object sharing with cloning and extension capabilities. This is called prototypal inheritance and is different from class inheritance. JavaScript is relatively unique among popular object-oriented programming languages ​​because other well-known languages ​​such as PHP, Python, and Java are class-based languages ​​that define classes as blueprints for objects.

[Related course recommendations: JavaScript video tutorial]

In the article, we will learn what an object prototype is and how to use a constructor to extend the prototype into a new object. We will also learn about inheritance and the prototype chain.

JavaScript Prototype

Every object in JavaScript has an internal property called [[Prototype]]. We can demonstrate this by creating a new empty object.

let x = {};

This is how we usually create objects, but please note that another way to achieve this is to use the object constructor:

let x = new object()

Square brackets surrounding [[Prototype]] Indicates that it is an internal property and cannot be accessed directly from code.

To find the [[Prototype]] of this newly created object, we will use the getPrototypeOf() method.

Object.getPrototypeOf(x);

The output will consist of several built-in properties and methods.

Output:

{constructor: ƒ, __defineGetter__: ƒ, __defineSetter__: ƒ, …}

Another way to find [[Prototype]] is through the __proto__ property. __proto__ is a property that exposes the internal properties of the [[Prototype]] object.

It should be noted that . _proto__ is a legacy feature and should not be used in production code, and it does not exist in every modern browser. However, we can use it for demonstration purposes in this article.

x.__proto__;

The output will be the same as using getPrototypeOf().

Output

{constructor: ƒ, __defineGetter__: ƒ, __defineSetter__: ƒ, …}

It is important that every object in JavaScript has a [[Prototype]] because it creates linked methods for any two or more objects .

The objects you create have the same [[Prototype]] as built-in objects such as Date and Array. This internal property can be referenced from one object to another via the prototype attribute, which we will see later in the tutorial.

Prototypal Inheritance

#When you try to access a property or method of an object, JavaScript will first search for the object itself, if not found , which will search for the object's [[Prototype]]. If no match is found after querying the object and its [[Prototype]], JavaScript will check the prototype of the linked object and continue searching until it reaches the end of the prototype chain.

The end of the prototype chain is Object.prototype. All objects inherit the object's properties and methods. Any search beyond the end of the chain will result in null.

In our example, x is an empty object inherited from object. x can use any properties or methods that the object has, such as toString().

x.toString();

Output

[object Object]

This prototype chain is only one chain long. x - > Object. We know this because if we try to chain two [[Prototype]] properties together it will be null.

x.__proto__.__proto__;

Output

null

Let's look at another type of object. If you have experience working with arrays in JavaScript, you know that they have many built-in methods, such as pop() and push(). The reason these methods are accessible when creating a new array is that any array created can access the properties and methods on array.prototype.

We can test this by creating a new array.

let y = [];

Remember, we can also write this as an array constructor, let y = new array().

If we look at the [[Prototype]] of the new y array, we will see that it has more properties and methods than the x object. It inherits everything from Array.prototype.

y.__proto__;

[constructor: ƒ, concat: ƒ, pop: ƒ, push: ƒ, …]

You will notice that the constructor attribute on the prototype is set to Array(). The constructor property returns the object's constructor, which is a mechanism for constructing objects from functions.

We can now link two prototypes together because in this case our prototype chain is longer. It looks like y -> Array -> Object.

y.__proto__.__proto__;

{constructor: ƒ, __defineGetter__: ƒ, __defineSetter__: ƒ, …}

This chain now references Object.prototype. We can test the inner [[Prototype]] against the constructor's Prototype attribute to make sure they refer to the same thing.

y.__proto__ === Array.prototype;            // true
y.__proto__.__proto__ === Object.prototype; // true

We can also use the isPrototypeOf() method to achieve this.

Array.prototype.isPrototypeOf(y);      // true
Object.prototype.isPrototypeOf(Array); // true

我们可以使用instanceof操作符来测试构造函数的prototype属性是否出现在对象原型链中的任何位置。

y instanceof Array; // true

总而言之，所有JavaScript对象都具有隐藏的内部[[Prototype]]属性（可能__proto__在某些浏览器中公开）。对象可以扩展，并将继承[[Prototype]]其构造函数的属性和方法。

这些原型可以被链接，并且每个额外的对象将继承整个链中的所有内容。链以Object.prototype结束。

构造器函数

构造函数是用来构造新对象的函数。new操作符用于基于构造函数创建新实例。我们已经看到了一些内置的JavaScript构造函数，比如new Array()和new Date()，但是我们也可以创建自己的自定义模板来构建新对象。

例如，我们正在创建一个非常简单的基于文本的角色扮演游戏。用户可以选择一个角色，然后选择他们将拥有的角色类别，例如战士、治疗者、小偷等等。

由于每个字符将共享许多特征，例如具有名称、级别和生命值，因此创建构造函数作为模板是有意义的。然而，由于每个角色类可能有非常不同的能力，我们希望确保每个角色只能访问自己的能力。让我们看看如何使用原型继承和构造函数来实现这一点。

首先，构造函数只是一个普通函数。当使用new关键字的实例调用它时，它将成为一个构造函数。在JavaScript中，我们按照惯例将构造函数的第一个字母大写。

// Initialize a constructor function for a new Hero
function Hero(name, level) {
  this.name = name;  this.level = level;
}

我们创建了一个名为Hero的构造函数，它有两个参数:name和level。因为每个字符都有一个名称和一个级别，所以每个新字符都有这些属性是有意义的。this关键字将引用创建的新实例，因此将this.name设置为name参数将确保新对象具有name属性集。

现在我们可以用new创建一个新的实例。

let hero1 = new Hero('Bjorn', 1);

如果我们在控制台输出hero1，我们将看到已经创建了一个新对象，其中新属性按预期设置。

输出

Hero {name: "Bjorn", level: 1}

现在，如果我们得到hero1的[[Prototype]]，我们将能够看到构造函数Hero()。(记住，它的输入与hero1相同。，但这是正确的方法。)

Object.getPrototypeOf(hero1);

输出

constructor: ƒ Hero(name, level)

您可能注意到，我们只在构造函数中定义了属性，而没有定义方法。在JavaScript中，为了提高效率和代码可读性，通常在原型上定义方法。

我们可以使用prototype向Hero添加一个方法。我们将创建一个greet()方法。

// Add greet method to the Hero prototype
Hero.prototype.greet = function () {
  return `${this.name} says hello.`;
}

因为greet()在Hero的原型中，而hero1是Hero的一个实例，所以这个方法对hero1是可用的。

hero1.greet();

输出

"Bjorn says hello."

如果检查Hero的[[Prototype]]，您将看到greet()现在是一个可用选项。

这很好，但是现在我们想要为英雄创建角色类。将每个类的所有功能都放到Hero构造函数中是没有意义的，因为不同的类具有不同的功能。我们希望创建新的构造函数，但也希望它们连接到原始的Hero。

我们可以使用call()方法将属性从一个构造函数复制到另一个构造函数。让我们创建一个战士和一个治疗构造器。

// Initialize Warrior constructor
function Warrior(name, level, weapon) {
  // Chain constructor with call
  Hero.call(this, name, level);  // Add a new property
  this.weapon = weapon;
}// Initialize Healer constructor
function Healer(name, level, spell) {
  Hero.call(this, name, level);  this.spell = spell;
}

两个新的构造函数现在都具有Hero和unqiue的属性。我们将把attack()方法添加到Warrior中，而heal()方法添加到Healer中。

Warrior.prototype.attack = function () {
  return `${this.name} attacks with the ${this.weapon}.`;
}

Healer.prototype.heal = function () {
  return `${this.name} casts ${this.spell}.`;
}

此时，我们将使用两个可用的新字符类创建字符。

const hero1 = new Warrior('Bjorn', 1, 'axe');
const hero2 = new Healer('Kanin', 1, 'cure');

hero1现在被认为是拥有新属性的战士。

输出

Warrior {name: "Bjorn", level: 1, weapon: "axe"}

我们可以使用我们在战士原型上设置的新方法。

hero1.attack();

Console
"Bjorn attacks with the axe."

但是如果我们尝试使用原型链下面的方法会发生什么呢?

hero1.greet();

输出

Uncaught TypeError: hero1.greet is not a function

使用call()链接构造函数时，原型属性和方法不会自动链接。我们将使用Object.create()来链接原型，确保在创建并添加到原型的任何其他方法之前将其放置。

Warrior.prototype = Object.create(Hero.prototype);
Healer.prototype = Object.create(Hero.prototype);
// All other prototype methods added below…

现在我们可以在一个战士或治疗者的实例上成功地使用Hero的原型方法。

hero1.greet();

输出

"Bjorn says hello."

这里是我们的角色创建页面的完整代码。

// Initialize constructor functions
function Hero(name, level) {
  this.name = name;
  this.level = level;
}
 
function Warrior(name, level, weapon) {
  Hero.call(this, name, level);
 
  this.weapon = weapon;
}
 
function Healer(name, level, spell) {
  Hero.call(this, name, level);
 
  this.spell = spell;
}
 
// Link prototypes and add prototype methods
Warrior.prototype = Object.create(Hero.prototype);
Healer.prototype = Object.create(Hero.prototype);
 
Hero.prototype.greet = function () {
  return `${this.name} says hello.`;
}
 
Warrior.prototype.attack = function () {
  return `${this.name} attacks with the ${this.weapon}.`;
}
 
Healer.prototype.heal = function () {
  return `${this.name} casts ${this.spell}.`;
}
 
// Initialize individual character instances
const hero1 = new Warrior('Bjorn', 1, 'axe');
const hero2 = new Healer('Kanin', 1, 'cure');

使用这段代码，我们已经用基本属性创建了Hero类，从原始构造函数创建了两个名为Warrior和Healer的字符类，向原型添加了方法，并创建了单独的字符实例。

This article comes from the js tutorial column, welcome to learn!

The above is the detailed content of A deep dive into prototypes and inheritance in JavaScript. For more information, please follow other related articles on the PHP Chinese website!