JavaScript의 여러 상속 구현 방법-JS 튜토리얼-php.cn

JavaScript의 여러 상속 구현 방법

php中世界最好的语言

풀어 주다： 2020-02-27 14:04:54

앞으로

2853명이 탐색했습니다.

이 기사에서는 JavaScript의 여러 상속 구현 방법을 소개합니다. 이 기사를 읽은 후 JavaScript의 상속에 대해 어느 정도 이해하게 되기를 바랍니다.

JavaScript의 여러 상속 구현 방법

JavaScript의 여러 상속 구현 방법

Inheritance

상속을 구현하려면 먼저 속성과 메서드를 제공하는 상위 클래스(생성자)가 있어야 합니다.

function Father(name){
    this.name=name   //父类构造函数中的属性
}
Father.prototype.age=&#39;40&#39;   //父类原型中的属性

로그인 후 복사

1. 생성자 상속 차용

var Son=function(){
    Father.call(this,...arguments)
    this.age=10
}
var son=new Son(&#39;小明&#39;)
console.log(son)   //{name: "小明", age: 10}

로그인 후 복사

이때 Son 함수는 호출 메서드를 통해 자식 생성자의 부모 생성자만 호출합니다

즉, 부모 클래스 생성자의 속성만 상속받습니다. , 상위 클래스 프로토타입의 속성은 없습니다.

이때 판단하기 위해 instanceof 메소드를 사용할 수 있습니다

console.log(son instanceof Father) //false

로그인 후 복사

2. 프로토타입 체인을 통해 상속

var Son=function(name){
    this.sonName=name
}
Son.prototype=new Father()
var xiaoming=new Son(&#39;小明&#39;)
console.log(xiaoming)    //{sonName:&#39;小明&#39;}
console.log(xiaoming.__proto__==Son.prototype)   //true
console.log(xiaoming.__proto__.__proto__==Father.prototype) //true
console.log(xiaoming.age)  //40  通过原型链查找

로그인 후 복사

Son은 Father 생성자의 name 속성과 프로토타입인

Son의 프로토타입에서 age 속성을 상속받습니다. 객체 Xiao Ming 상속 Son 생성자의 sonName 속성, Father 생성자의 name 속성 및 프로토타입의 age 속성이 제거되지만 값은 Son에게만 전달될 수 있으며 Father에는 전달될 수 없습니다.

3. 결합 상속(결합 프로토타입 체인 상속 및 빌린 생성자 상속)

var Son=function(){
    Father.call(this,...arguments)
}
Son.prototype=new Father()
var son=new Son(&#39;小明&#39;)
console.log(son)  //{name:&#39;小明&#39;}
console.log(son.age) //40

로그인 후 복사

두 가지 상속 방법 1과 2를 결합하여 프로토타입 속성과 메서드를 상속할 수 없고 매개 변수를 전달할 수 없는 문제를 해결합니다. 실제로 하위 클래스에는 상위 클래스의 두 가지 속성이 있지만 하위 클래스의 속성은 상위 클래스의 속성(Father.call(), new Father())을 포함합니다

4. 상속 복사

를 통해. for... in에서는 부모 클래스 객체와 프로토타입 객체의 열거 가능한 속성과 메서드를 Son의 프로토타입에 주기적으로 할당합니다

function Son(name){
  var father=new Father()
  for(let i in father){
    console.log(father[i])
    Son.prototype[i]=father[i]
  }
  Son.prototype.name=name
}
var son=new Son(&#39;leo&#39;)
console.log(son)

로그인 후 복사

이 메서드는 부모 클래스의 열거 불가능한 메서드를 얻을 수 없으며 동시에 다음을 수행해야 합니다. 상위 클래스의 속성과 메서드를 복사하면 메모리 사용량이 상대적으로 높고 효율성이 낮습니다.

5. 프로토타입 상속

프로토타입 상속을 사용하려면 클래스를 정의하고, 매개변수 obj를 전달하고, obj 개체를 상속하는 개체를 생성할 필요가 없습니다. 객체를 복사하여 함수로 래핑하는 것과 유사합니다. 그러나 이는 클래스 상속이 아니라 클래스 개념이 결여된 프로토타입 기반입니다.

function ObjectCreate(obj){ //这个方法的原理就是Object.create()
  function F(){}
  F.prototype=obj
  return new F()
}
var Son=new Father(&#39;son&#39;);
var son=ObjectCreate(Son)
var objson=Object.create(Son);
console.log(son.name)   //son
console.log(objson.name)  //son
console.log(son.__proto__==Son)  //true

로그인 후 복사

6. 기생 상속

상속 프로세스를 캡슐화하기 위한 함수를 만든 다음 내부적으로 객체를 강화하고 마지막으로 객체를 반환합니다.

function ObjectCreate(obj){
  function F(){}
  F.prototype=obj
  return new F()
}
var Son=new Father();
function subObject(obj){
  var sub=ObjectCreate(obj)
  sub.name=&#39;son&#39;
  return sub
}
var son=subObject(Son)
console.log(son.name)  //son

로그인 후 복사

7. 기생 결합 상속

7. 그리고 결합 상속은 두 개의 슈퍼클래스 속성 없이 상속을 완벽하게 구현하지만 너무 복잡하고 결합 상속에 비해 열등한 느낌을 줍니다.

function ObjectCreate(obj){
  function F(){}
  F.prototype=obj
  return new F()  
}
var middle=ObjectCreate(Father.prototype) //middle的原型继承了父类函数的原型
function Son(){
  Father.call(this,...arguments)
}
Son.prototype=middle; 
middle.construtor=Son;   //修复实例 
var son=new Son(&#39;son&#39;);
console.log(son)   //{name:&#39;son&#39;}

로그인 후 복사

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

위 내용은 JavaScript의 여러 상속 구현 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!