집 > 기사 > 웹 프론트엔드 > 노트 공유를 강화하는 JavaScript 상속 기본 사항

노트 공유를 강화하는 JavaScript 상속 기본 사항

小云云원래의: 2018-03-12 14:10:341265검색

보안상의 이유로 로컬 클래스와 호스트 클래스는 상속할 수 없지만 다른 클래스는 상속할 수 있습니다. ECMAScript에서는 추상 클래스를 엄격하게 정의하지 않지만 사용이 허용되지 않는 클래스도 있습니다. 서브클래스는 생성자와 메소드 구현을 포함하여 슈퍼클래스의 모든 속성과 메소드를 상속합니다. 모든 속성과 메서드는 공개이므로 하위 클래스에서 이러한 메서드에 직접 액세스할 수 있습니다. 하위 클래스는 슈퍼클래스에 없는 새로운 속성과 메서드를 추가할 수도 있고, 슈퍼클래스의 속성과 메서드를 재정의할 수도 있습니다.

JavaScript의 상속 메커니즘은 명시적으로 지정되지 않지만 모방을 통해 구현됩니다. 이는 모든 상속 세부 사항이 인터프리터에 의해 완전히 처리되지는 않음을 의미합니다.

Object Impersonation

직접 말하면 먼저 슈퍼 클래스 A의 생성자 메소드를 작성하는 것입니다. 클래스 B의 다른 생성자를 작성하고 B의 메서드에서 A의 생성자를 참조합니다.
사용 후 ClassA에 대한 참조를 삭제합니다.
하위 클래스 속성 정의(모든 새 하위 클래스 속성은 참조 삭제 후 정의됨)

<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>

객체 가장은 다중 상속을 달성할 수 있습니다.

클래스는 여러 슈퍼클래스를 상속할 수 있습니다.

ClassX와 ClassY, ClassZ는 이 두 클래스를 상속받고 싶어합니다.

같은 이름의 속성이나 메소드를 가진 ClassX와 ClassY 두 클래스가 있는 경우 ClassY가 우선순위가 높습니다. 다음 클래스에서 상속받기 때문입니다.

<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() 메서드는 기존 개체 가장 방법과 가장 유사합니다.

하나의 매개변수가 객체로 사용됩니다. 다른 모든 매개변수는 함수 자체에 직접 전달됩니다.

<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() 메소드

는 두 개의 매개변수, 즉 이것으로 사용되는 객체와 함수에 전달될 매개변수 배열을 사용합니다.

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>

프로토타입 체이닝

상속 이 형식은 원래 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 연산자도 독특한 방식으로 동작합니다. instanceof는 ClassB의 모든 인스턴스에 대해 ClassA와 ClassB 모두에 대해 true를 반환합니다.

<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>

ClassB 생성자에서 객체를 사용하여 ClassA 클래스의 sColor 속성을 상속받는 척합니다.

두 번째 강조 표시된 코드 줄에서는 프로토타입 체인을 사용하여 ClassA 클래스의 메서드를 상속합니다.
JavaScript 기본 강화 사항 - 상속

보안상의 이유로 로컬 클래스와 호스트 클래스는 상속할 수 없지만 다른 클래스는 상속할 수 있습니다.

ECMAScript에서는 추상 클래스를 엄격하게 정의하지 않지만 사용이 허용되지 않는 클래스도 있습니다.

하위 클래스는 생성자 및 메서드 구현을 포함하여 슈퍼 클래스의 모든 속성과 메서드를 상속합니다. 모든 속성과 메서드는 공개이므로 하위 클래스에서 이러한 메서드에 직접 액세스할 수 있습니다. 하위 클래스는 슈퍼클래스에 없는 새로운 속성과 메서드를 추가할 수도 있고, 슈퍼클래스의 속성과 메서드를 재정의할 수도 있습니다.

Object Impersonation

직설적으로 말하면 먼저 슈퍼 클래스 A의 생성자 메서드를 작성하는 것입니다. 클래스 B의 다른 생성자를 작성하고 B의 메서드에서 A의 생성자를 참조합니다.

사용 후 ClassA에 대한 참조를 삭제합니다.
하위 클래스 속성 정의(모든 새 하위 클래스 속성은 참조 삭제 후 정의됨)

<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>

객체 가장은 다중 상속을 달성할 수 있습니다.

클래스는 여러 슈퍼클래스를 상속할 수 있습니다.
ClassX와 ClassY, ClassZ는 이 두 클래스를 상속받고 싶어합니다.

다음 클래스에서 상속받기 때문입니다.

<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 상속 기본 사항

Object Impersonation

ClassB 생성자에서 객체를 사용하여 ClassA 클래스의 sColor 속성을 상속받는 척합니다.

직설적으로 말하면 먼저 슈퍼 클래스 A의 생성자 메서드를 작성하는 것입니다. 클래스 B의 다른 생성자를 작성하고 B의 메서드에서 A의 생성자를 참조합니다.

call()方法

apply() 方法

原型链（prototype chaining）

混合方式

관련 기사