JavaScript inheritance basics strengthening note sharing

For security reasons, local classes and host classes cannot be inherited, but others can be inherited. ECMAScript does not strictly define abstract classes, but there are some classes that are not allowed to be used. The subclass will inherit all properties and methods of the superclass, including constructors and method implementations. Remember, all properties and methods are public, so subclasses can access these methods directly. Subclasses can also add new properties and methods that are not found in the superclass, and can also override properties and methods of the superclass.

The inheritance mechanism in JavaScript is not explicitly specified, but is implemented through imitation. This means that not all inheritance details are entirely handled by the interpreter.

Object impersonation

• To put it bluntly, it is to first write a constructor method of super class A. Write another constructor of class B;

• Then reference the constructor of A in B’s method;

• Delete the reference to ClassA after use.

• Define subclass attributes (all new subclass attributes are defined after deleting the reference)

<span style="font-size: 14px;">// 超类ClassA的构造方法function ClassA(sColor) {<br/>    this.color = sColor;    this.sayColor = function () {、<br/>        alert(this.color);<br/>    };<br/>}// 子类ClassB的构造方法function ClassB(sColor, sName) {<br/>    // 引用ClassA的构造方法<br/>    this.newMethod = ClassA;    // 使用ClassA的构造方法够照ClassB<br/>    this.newMethod(sColor);    // 删除对ClassA的引用<br/>    delete this.newMethod;    /* 所有的子类新属性在删除引用后定义 */<br/>    // 子类属性<br/>    this.name = sName;    this.sayName = function () {<br/>        alert(this.name);<br/>    };<br/>}</span>

Object impersonation can achieve multiple inheritance

A class can inherit multiple superclasses.
ClassX and ClassY, ClassZ wants to inherit these two classes.

If there are two classes ClassX and ClassY with properties or methods with the same name, ClassY has high priority.
Because it inherits from the later class.

<span style="font-size: 14px;">function ClassZ() {<br/>  // 继承ClassX<br/>  this.newMethod = ClassX;  this.newMethod();  delete this.newMethod;  //继承ClassY<br/>  this.newMethod = ClassY;  this.newMethod();  delete this.newMethod;<br/>}</span>

---

call() method

The call() method is most similar to the classic object impersonation method.
One parameter is used as the object of this. All other parameters are passed directly to the function itself.

<span style="font-size: 14px;">function ClassB(sColor, sName) {<br/>  /*<br/>  将classB付给ClassA中的this<br/>  这时classA中的this实际指向是ClassB<br/>  */<br/>  ClassA.call(this, sColor);  this.name = sName;  this.sayName = function () {<br/>    alert(this.name);<br/>  };<br/>}</span>

---

apply() method

Two parameters, the object used as this and the array of parameters to be passed to the function .
The second parameter of apply can only be an array

<span style="font-size: 14px;">function ClassB(sColor, sName) {<br/>  // 引用ClassA构造方法<br/>  ClassA.apply(this, new Array(sColor));  // 也可以使用arguments<br/>  // 只有超类中的参数顺序与子类中的参数顺序完全一致时才可以传递参数对象<br/>  // ClassA.apply(this, arguments);<br/>  // ClassB 自己的属性<br/>  this.name = sName;  this.sayName = function () {<br/>    alert(this.name);<br/>  };<br/>}</span>

---

Prototype chaining

Inherit this form Originally used for prototype chains in ECMAScript.

<span style="font-size: 14px;">// ClassA的构造方法function ClassA() {<br/>  //要求为空，全部写在prototype上}// ClassA的属性ClassA.prototype.color = "blue";<br/>ClassA.prototype.sayColor = function () {<br/>  alert(this.color);<br/>};// ClassB的构造方法function ClassB() {}// 继承ClassA的属性ClassB.prototype = new ClassA();// ClassB自己的属性，需要出现在继承之后ClassB.prototype.name = "";<br/>ClassB.prototype.sayName = function () {<br/>  alert(this.name);<br/>};</span>

About the instanceof operation

In the prototype chain, the instanceof operator also operates in a unique way. instanceof returns true for both ClassA and ClassB for all instances of ClassB.

<span style="font-size: 14px;">var objB = new ClassB();<br/>alert(objB instanceof ClassA);  //输出 "true"alert(objB instanceof ClassB);  //输出 "true"</span>

---

Mixed method

<span style="font-size: 14px;">// ClassA的构造方法,只写属性，不写函数function ClassA(sColor) {<br/>  this.color = sColor;<br/>}// 使用原型给ClassA赋予函数ClassA.prototype.sayColor = function () {<br/>  alert(this.color);<br/>};// ClassB的构造方法function ClassB(sColor, sName) {<br/>  // 先调用ClassA，继承ClassA的属性<br/>  ClassA.call(this, sColor);  this.name = sName;<br/>}// 再通过原型链继承ClassA的函数ClassB.prototype = new ClassA();// 通过原型链定义自己的函数ClassB.prototype.sayName = function () {<br/>    alert(this.name);<br/>};</span>

• In the ClassB constructor, use the object to pretend to inherit the sColor of the ClassA class Attributes.

• #In the second highlighted line of code, use the prototype chain to inherit the methods of the ClassA class.

JavaScript Basics Strengthening Notes - Inheritance

For security reasons, local classes and host classes cannot inherit, others All can be inherited.

ECMAScript does not strictly define abstract classes, but there are some classes that are not allowed to be used.

The subclass will inherit all properties and methods of the superclass, including the implementation of constructors and methods. Remember, all properties and methods are public, so subclasses can access these methods directly. Subclasses can also add new properties and methods that are not found in the superclass, and can also override properties and methods of the superclass.

The inheritance mechanism in JavaScript is not explicitly specified, but is implemented through imitation. This means that not all inheritance details are entirely handled by the interpreter.

---

Object impersonation

• To put it bluntly, it is to first write a constructor method of super class A. Write another constructor of class B;

• Then reference the constructor of A in B’s method;

• Delete the reference to ClassA after use.

• Define subclass attributes (all new subclass attributes are defined after deleting the reference)

<span style="font-size: 14px;">// 超类ClassA的构造方法function ClassA(sColor) {<br/>    this.color = sColor;    this.sayColor = function () {、<br/>        alert(this.color);<br/>    };<br/>}// 子类ClassB的构造方法function ClassB(sColor, sName) {<br/>    // 引用ClassA的构造方法<br/>    this.newMethod = ClassA;    // 使用ClassA的构造方法够照ClassB<br/>    this.newMethod(sColor);    // 删除对ClassA的引用<br/>    delete this.newMethod;    /* 所有的子类新属性在删除引用后定义 */<br/>    // 子类属性<br/>    this.name = sName;    this.sayName = function () {<br/>        alert(this.name);<br/>    };<br/>}</span>

Object impersonation can achieve multiple inheritance

A class can inherit multiple superclasses.
ClassX and ClassY, ClassZ wants to inherit these two classes.

If there are two classes ClassX and ClassY with properties or methods with the same name, ClassY has high priority.
Because it inherits from the later class.

<span style="font-size: 14px;">function ClassZ() {<br/>  // 继承ClassX<br/>  this.newMethod = ClassX;  this.newMethod();  delete this.newMethod;  //继承ClassY<br/>  this.newMethod = ClassY;  this.newMethod();  delete this.newMethod;<br/>}</span>

---

call()方法

call() 方法是与经典的对象冒充方法最相似。
一个参数用作 this 的对象。其他参数都直接传递给函数自身。

<span style="font-size: 14px;">function ClassB(sColor, sName) {<br/>  /*<br/>  将classB付给ClassA中的this<br/>  这时classA中的this实际指向是ClassB<br/>  */<br/>  ClassA.call(this, sColor);  this.name = sName;  this.sayName = function () {<br/>    alert(this.name);<br/>  };<br/>}</span>

---

apply() 方法

两个参数，用作 this 的对象和要传递给函数的参数的数组。
apply第二个参数只能是数组

<span style="font-size: 14px;">function ClassB(sColor, sName) {<br>  // 引用ClassA构造方法<br>  ClassA.apply(this, new Array(sColor));  // 也可以使用arguments<br>  // 只有超类中的参数顺序与子类中的参数顺序完全一致时才可以传递参数对象<br>  // ClassA.apply(this, arguments);<br>  // ClassB 自己的属性<br>  this.name = sName;  this.sayName = function () {<br>    alert(this.name);<br>  };<br>}</span>

---

原型链（prototype chaining）

继承这种形式在 ECMAScript 中原本是用于 原型链 的。

<span style="font-size: 14px;">// ClassA的构造方法function ClassA() {<br>  //要求为空，全部写在prototype上}// ClassA的属性ClassA.prototype.color = "blue";<br>ClassA.prototype.sayColor = function () {<br>  alert(this.color);<br>};// ClassB的构造方法function ClassB() {}// 继承ClassA的属性ClassB.prototype = new ClassA();// ClassB自己的属性，需要出现在继承之后ClassB.prototype.name = "";<br>ClassB.prototype.sayName = function () {<br>  alert(this.name);<br>};</span>

关于 instanceof 运算

在原型链中，instanceof 运算符的运行方式也很独特。对 ClassB 的所有实例，instanceof 为 ClassA 和 ClassB 都返回 true。

<span style="font-size: 14px;">var objB = new ClassB();<br/>alert(objB instanceof ClassA);  //输出 "true"alert(objB instanceof ClassB);  //输出 "true"</span>

---

混合方式

<span style="font-size: 14px;">// ClassA的构造方法,只写属性，不写函数function ClassA(sColor) {<br/>  this.color = sColor;<br/>}// 使用原型给ClassA赋予函数ClassA.prototype.sayColor = function () {<br/>  alert(this.color);<br/>};// ClassB的构造方法function ClassB(sColor, sName) {<br/>  // 先调用ClassA，继承ClassA的属性<br/>  ClassA.call(this, sColor);  this.name = sName;<br/>}// 再通过原型链继承ClassA的函数ClassB.prototype = new ClassA();// 通过原型链定义自己的函数ClassB.prototype.sayName = function () {<br/>    alert(this.name);<br/>};</span>

• ClassB 构造函数中，用对象冒充继承 ClassA 类的 sColor 属性。

• 在第二行突出显示的代码中，用原型链继承 ClassA 类的方法。

相关推荐：

javascript继承体系详解

JavaScript继承之原型式继承、寄生式继承、寄生组合式继承用法实例详解

javascript继承方式详解

The above is the detailed content of JavaScript inheritance basics strengthening note sharing. For more information, please follow other related articles on the PHP Chinese website!