JavaScript が継承を実装する方法についての深い理解_javascript スキル-jsチュートリアル-php.cn

JavaScript が継承を実装する方法についての深い理解_javascript スキル

WBOY

リリース： 2016-05-16 17:09:32

オリジナル

1059 人が閲覧しました

最近、タオバオのインタビュー中に誰かの体験談をネットで読んだのですが、よくわからないことが多かったので、いくつかの問題について理解を深めるために記事を書きました。

この記事で言及されている質問は、「JavaScript はどのように継承を実装するのですか?」です。

以下に、インターネット上で見つけた、印象を深めるためのいくつかの方法と例を説明します。

JavaScript の関数は関数定義に使用されるだけでなく、クラス定義にも使用できることがわかっています。

JavaScript の継承は少し奇妙です。C や一部のオブジェクト指向言語とは異なり、パブリック、プライベート、その他のアクセス制御の変更はなく、継承を示すインプリメントやその他の特定のシンボルもありません。

JavaScript クラスの継承については、次の例を参照してください。

コードをコピーコードは次のとおりです:

上記の例では、いくつかの属性とメソッドを含む person クラスが最初に宣言され、次に、base 属性を持つ Programmer クラスが宣言されます。この属性は必須ではありませんが、仕様と将来のためです。オブジェクトが継承するクラスを検索するときにこれを記述し、その person クラスをプログラマのプロトタイプオブジェクト (プロトタイプ) にコピーすることで、クラスの継承を実現する必要があります。

JavaScript でクラスと継承のいくつかの原則をシミュレートします

オブジェクト指向言語では、クラスを使用してカスタムオブジェクトを作成します。しかし、JavaScript ではすべてがオブジェクトなので、カスタムオブジェクトを作成するにはどうすればよいでしょうか?

これには、プロトタイプという別の概念の導入が必要です。新しく作成されたカスタムオブジェクトはすべて、このテンプレート (プロトタイプ) のコピーです (実際にはコピーではなく、リンクですが、このリンクは表示されません)。コピーのように感じます）。

プロトタイプを使用してカスタムオブジェクトを作成する例を見てみましょう:

コードをコピーしますコードは次のとおりです。 :

//Constructor
 function person(name, sex) {
 this.name = name;
 this.sex = sex;
 }
 / / personプロトタイプを定義すると、プロトタイプのプロパティは、カスタムオブジェクト
 person.prototype = {
getname：function（）{
{
;

ここでは、関数 person をコンストラクターと呼びます。これは、カスタム オブジェクトを作成する関数です。 JavaScript がコンストラクターとプロトタイプを通じてクラスの機能をシミュレートしていることがわかります。 


以下は、カスタム オブジェクトの作成時に JavaScript によって実行される特定の作業を示す例です: 

コードをコピー

コードは次のとおりです:

var zhang = new Person("ZhangSan", "man");console.log(zhang.getName()) // "ZhangSan" var chun = new Person("春華", "女性");console.log(chun.getName()) // "春華"

When the code var zhang = new Person("ZhangSan", "man") is executed, the following things are actually done internally:

Create a blank object (new Object()).
Copy the attributes (key-value pairs) in Person.prototype to this empty object (as we mentioned earlier, the internal implementation is not a copy but a hidden link).
Pass this object into the constructor through the this keyword and execute the constructor.
Assign this object to variable zhang.
All work done.
In order to prove that the prototype template is not copied into the instantiated object, but is a way of linking, please see the following code:

Copy code The code is as follows:

function Person(name, sex) {
 this.name = name;
 this.sex = sex;
}
Person.prototype.age = 20;
var zhang = new Person("ZhangSan", "man");
console.log(zhang.age); // 20
// Overwrite prototype The age attribute in 
zhang.age = 19;
console.log(zhang.age); // 19
delete zhang.age;
// After deleting the instance attribute age, this attribute The value is obtained from prototype 
console.log(zhang.age); // 20

In the above example, if it is only obtained by copying, after deleting the age attribute, the object will not exist. However, the age attribute in the example can still be output or overwritten. The previous value indicates that we have only deleted the attribute with the same name in the subclass, and the age attribute in the parent class still exists in the object through an invisible link.

How to implement simple inheritance in JavaScript?

The following example will create an employee class Employee, which inherits all the properties in the prototype prototype from Person.

Copy code The code is as follows:

function Employee(name, sex, employeeID) {
 this.name = name;
 this.sex = sex;
 this.employeeID = employeeID;
}
// Point the prototype of Employee to an instance of Person
// Because Person Instances of Employee can call methods in the Person prototype, so instances of Employee can also call all properties in the Person prototype. 
Employee.prototype = new Person();
Employee.prototype.getEmployeeID = function() {
 return this.employeeID;
};
var zhang = new Employee("ZhangSan" , "man", "1234");
console.log(zhang.getName()); // "ZhangSan

Okay, the above are some specific processes for implementing inheritance in JavaScript , and methods to implement inheritance .

Of course to summarize, the inheritance mechanism in JavaScript is only based on simulation. Compared with some object-oriented languages, it is rough and has some flaws. However, in general, this still does not slow down front-end development. author’s enthusiasm in this regard.