JavaScript의 프로토타입 및 상속에 대한 심층 분석

이 글에서는 주로 JavaScript에서 프로토타입이 작동하는 방식, 모든 객체가 공유하는 [Prototype] 숨겨진 속성을 통해 객체 속성과 메서드를 연결하는 방법, 사용자 정의 생성자를 만드는 방법, 프로토타입 상속이 작동하여 속성과 메서드를 전달하는 방법에 대해 설명합니다. 메소드 값.

Introduction

JavaScript는 프로토타입 기반 언어입니다. 이는 개체 속성과 메서드를 복제 및 확장 기능을 갖춘 공통 개체를 통해 공유할 수 있음을 의미합니다. 이것을 프로토타입 상속이라고 하며 클래스 상속과는 다릅니다. PHP, Python, Java 등 잘 알려진 다른 언어는 클래스를 객체의 청사진으로 정의하는 클래스 기반 언어이기 때문에 JavaScript는 널리 사용되는 객체지향 프로그래밍 언어 중에서 상대적으로 독특합니다.

【관련 강좌 추천: JavaScript 동영상 튜토리얼】

이 글에서는 객체 프로토타입이 무엇인지, 그리고 객체 프로토타입을 어떻게 사용하는지 알아볼 것입니다. 프로토타입 생성자는 새로운 객체로 확장됩니다. 상속과 프로토타입 체인에 대해서도 알아봅니다.

JavaScript Prototype

JavaScript의 모든 개체에는 [[Prototype]]이라는 개체가 있습니다. 새로운 빈 객체를 생성하여 이를 입증할 수 있습니다.

let x = {};

이것은 우리가 일반적으로 객체를 생성하는 방법이지만 이를 달성하는 또 다른 방법은 객체 생성자를 사용하는 것입니다:

let x = new object()

surrounded [[Prototype ]] 안의 이중 괄호는 내부 속성이며 코드에서 직접 액세스할 수 없음을 나타냅니다.

새로 생성된 객체의 [[Prototype]]을 찾으려면 getPrototypeOf() 메서드를 사용합니다.

Object.getPrototypeOf(x);

출력은 여러 내장 속성과 메서드로 구성됩니다.

출력:

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

[[Prototype]]을 찾는 또 다른 방법은 __proto__ 속성을 이용하는 것입니다. __proto__는 [[Prototype]] 객체의 내부 속성을 노출하는 속성입니다.

._proto__는 레거시 기능이므로 프로덕션 코드에서 사용해서는 안 되며 모든 최신 브라우저에 존재하지도 않습니다. 그러나 이 기사에서는 데모 목적으로 사용할 수 있습니다.

x.__proto__;

출력은 getPrototypeOf()를 사용한 것과 동일합니다.

Output

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

두 개 이상의 객체와 마찬가지로 JavaScript의 모든 객체에 [[프로토타입]]이 있는 것이 중요합니다. 링크를 만들었습니다. 방법.

생성한 객체는 Date 및 Array와 같은 내장 객체와 동일한 [[프로토타입]]을 갖습니다. 이 내부 속성은 튜토리얼의 뒷부분에서 살펴볼 프로토타입 속성을 통해 한 객체에서 다른 객체로 참조될 수 있습니다. JavaScript 객체 자체를 먼저 검색하고, 찾지 못한 경우 해당 객체의 [[Prototype]]을 검색합니다. 객체와 객체의 [[Prototype]]을 쿼리한 후 일치하는 항목이 없으면 JavaScript는 연결된 객체의 프로토타입을 확인하고 프로토타입 체인의 끝에 도달할 때까지 계속 검색합니다.

프로토타입 체인의 끝은 Object.prototype입니다. 모든 개체는 개체의 속성과 메서드를 상속합니다. 체인 끝을 넘어서 검색하면 null이 발생합니다. 이 예에서 x는 object에서 상속된 빈 개체입니다. x는 toString()과 같이 객체가 가지고 있는 모든 속성이나 메서드를 사용할 수 있습니다.

x.toString();

Output

[object Object]

이 프로토타입 체인은 길이가 하나뿐입니다. x - > 두 개의 [[Prototype]] 속성을 함께 연결하려고 하면 null이 되기 때문에 이를 알고 있습니다.

x.__proto__.__proto__;

Output

null

다른 유형의 객체를 살펴보겠습니다. JavaScript에서 배열을 사용해 본 경험이 있다면 배열에 pop() 및 push()와 같은 내장 메서드가 많이 있다는 것을 알 것입니다. 새 배열을 생성할 때 이러한 메서드에 액세스할 수 있는 이유는 생성된 모든 배열이 array.prototype의 속성과 메서드에 액세스할 수 있기 때문입니다.

새 배열을 만들어 이를 테스트할 수 있습니다.

let y = [];

기억하세요. 이것을 배열 생성자로 작성할 수도 있습니다. y = new array()로 설정합니다.

새 y 배열의 [[프로토타입]]을 살펴보면 x 개체보다 더 많은 속성과 메서드가 있음을 알 수 있습니다. Array.prototype의 모든 것을 상속합니다.

y.__proto__;

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

프로토타입의 생성자 속성이 Array()로 설정되어 있는 것을 확인할 수 있습니다. constructor 속성은 함수에서 객체를 생성하는 메커니즘인 객체의 생성자를 반환합니다.

이 경우 프로토타입 체인이 더 길기 때문에 이제 두 프로토타입을 함께 연결할 수 있습니다. y -> Array -> Object처럼 보입니다.

y.__proto__.__proto__;

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

이 체인은 이제 Object.prototype을 참조합니다. 생성자의 Prototype 속성에 대해 내부 [[Prototype]]을 테스트하여 동일한 것을 참조하는지 확인할 수 있습니다.

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

이를 달성하기 위해 isPrototypeOf() 메서드를 사용할 수도 있습니다.

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的字符类，向原型添加了方法，并创建了单独的字符实例。

이 기사는 js tutorial 칼럼에서 가져온 것입니다. 배우신 것을 환영합니다!

위 내용은 JavaScript의 프로토타입 및 상속에 대한 심층 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!