js의 상속 방법은 무엇입니까?

공식적으로 출시된 ES6는 상속 형식, 클래스 Extends을 캡슐화하고 구현했습니다. 여기서는 주로 js pro를 기록합니다. 일반적인 상속 및 빌림 생성자 상속

1. 프로토타입 체인 상속

function Super(){
    this.name="小明";
}
Super.prototype.sayName = function(){
    alert(this.name)
};function Sub(){}
Sub.prototype = new Super();var instance = new Sub();
instance.sayName();//小明1234567891011

프로토타입 체인 상속 문제

//하위 클래스의 여러 인스턴스 중에서 슈퍼 클래스에 참조 유형 속성 값이 포함된 경우 , 하나의 인스턴스 참조 속성이 한 번만 수정되는 한 다른 인스턴스의 참조 유형 속성 값도 즉시 변경됩니다. //이유는 슈퍼클래스 속성이 하위 클래스 함수 Super()의 프로토타입 속성이 되기 때문입니다. this.name="Xiao Ming"; this.friends = ['Xiaohong','Xiaoqiang'];
}

Super.prototype.sayName = function(){
    alert(this.name)
};function Sub(){}
Sub.prototype = new Super();var instance1 = new Sub();var instance2 = new Sub();
instance1.friends.push('张三');
console.log(instance1.friends);//["小红", "小强", "张三"]console.log(instance2.friends);//["小红", "小强", "张三"]1234567891011121314151617

2. 생성자 상속

function Super(){this.name="小明";    this.friends = ['小红','小强'];
}
Super.prototype.sayName = function(){
    alert(this.name)
};function Sub(){
    Super.call(this);
}var instance1 = new Sub();var instance2 = new Sub();
instance1.friends.push('张三');
console.log(instance1.friends);//["小红", "小强", "张三"]console.log(instance2.friends);//["小红", "小强"]12345678910111213141516

빌린 생성자만 사용하는 경우 , 슈퍼 클래스

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

결합 상속도 실제로 개발되었습니다. 가장 일반적으로 사용되는 상속 방법입니다. in

function Super(){this.name="小明";    this.friends = ['小红','小强'];
}
Super.prototype.sayName = function(){
    alert(this.name)
};function Sub(){
    Super.call(this);
}
Sub.prototype = new Super();var instance1 = new Sub();var instance2 = new Sub();
instance1.friends.push('张三');
console.log(instance1.friends);//["小红", "小强", "张三"]console.log(instance2.friends);//["小红", "小强"]instance1.sayName();//小明instance2.sayName();//小明12345678910111213141516171819

결합 상속의 문제

//组合式继承中，超类的构造函数将被调用两次function Super(){this.name="小明";    this.friends = ['小红','小强'];
}
Super.prototype.sayName = function(){
    alert(this.name)
};function Sub(){
    Super.call(this);//第二次调用}
Sub.prototype = new Super();//第一次调用var instance = new Sub();1234567891011121314

4. 기생 상속

//직접 유형과 생성자를 정의하는 것보다 객체를 주로 고려할 때 기생 상속은 유용한 패턴이지만 재사용할 수 없습니다. Function

createAnother(original){
    var clone = Object(original);//创建一个新对象，original的副本
    clone.sayName = function(){ //对象的增强，添加额外的方法
        alert('hi');
    }    
return
 clone;
}var person = {
    name:'小明',
    friends:['小红','小强']
}var person1 = createAnother(person);var person2 = createAnother(person);
person1.friends.push('张三');
console.log(person.friends);//["小红", "小强", "张三"]console.log(person1.friends);//["小红", "小强", "张三"]console.log(person2.friends);//["小红", "小强", "张三"]123456789101112131415161718

기생 결합 상속

//寄生组合式继承解决了组合式继承调用两次超类构造函数的问题function inheritPrototype(sub,superr){var prototype = Object.create(superr.prototype);//ES5中
创建对象
副本的方法
    prototype.constructor = superr; //弥补重写原型失去的默认constructor属性
    sub.prototype = prototype;
}function Super(name){
    this.name = name;    this.friends = ['小红','小强'];
}
Super.prototype.sayName = function(){
    alert(this.name);
}function Sub(name){
    Super.call(this,name);
}
inheritPrototype(Sub,Super);var person1 = new Sub('小明');var person2 = new Sub('小华');
person1.friends.push('张三');
console.log(person1.friends);//["小红", "小强", "张三"]console.log(person2.friends);//["小红", "小强"]console.log(person1.sayName());//小明console.log(person2.sayName());//小华

위 내용은 제가 여러분을 위해 컴파일한 js의 여러 상속 방법입니다.

관련 기사:

JS onclick

js의 기본 구문에 대한 자세한 답변

클래스 정의 방법 설명 JS

위 내용은 js의 상속 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!