집 >웹 프론트엔드 >JS 튜토리얼 >JS의 상속 방법 요약(케이스 포함)

JS의 상속 방법 요약(케이스 포함)

php中世界最好的语言원래의: 2018-06-04 17:22:251688검색

프로토타입 체인 상속

Core: 상위 클래스의 인스턴스를 하위 클래스의 프로토타입으로 사용
특징:
1: 매우 순수한 상속 관계, 인스턴스는 하위 클래스의 인스턴스이자 상위 클래스의 인스턴스입니다.
2: 상위 클래스는 새 클래스입니다. 확장된 프로토타입 메서드는 하위 클래스에서 액세스할 수 있습니다.
단점:
1: 하위 클래스에 새 속성과 메서드를 추가하려면 다중 상속이 불가능합니다. 달성
2: 하위 클래스 인스턴스를 생성할 때 상위 클래스 생성자에 매개변수 전달

function Animal(name){
    this.name=name;
    this.sleep=function(){
        console.log(this.name+"正在睡觉");
    }
}
Animal.prototype.eat=function() {
    console.log(this.name + "正在吃");
}
function Cat(){
}
Cat.prototype=new Animal();
Cat.prototype.name="猫";
var cat=new Cat();
console.log(cat.name);
console.log(cat.sleep());
console.log(cat.eat());
console.log(cat instanceof Cat);//true
console.log(cat instanceof Animal);//true

구성 상속
Core: 상위 클래스의 생성자를 사용하여 하위 클래스 인스턴스를 향상시키는 것은 상위 클래스의 인스턴스 속성을 복사하는 것과 같습니다. (프로토타입이 사용되지 않음)
특징:
1: 하위 클래스 인스턴스를 생성할 때 매개변수를 상위 클래스에 전달할 수 있습니다.
2: 다중 상속이 가능합니다.
단점:
1: 인스턴스가 인스턴스가 아닙니다. 상위 클래스, 그러나 하위 클래스의 인스턴스
2: 상위 클래스의 속성과 속성만 상속될 수 있습니다. 메서드는 프로토타입 속성과 메서드를 상속할 수 없습니다.
3: 각 하위 클래스는 상위 클래스의 복사본을 가질 수 없습니다. 성능에 영향을 미치는 클래스 인스턴스 함수

    function Animal(name){
            this.name=name;
            this.sleep=function(){
                console.log(this.name+"正在睡觉");
            }
        }
        Animal.prototype.eat=function() {
            console.log(this.name + "正在吃");
        }
                function Cat(name){
                Animal.call(this);
                this.name=name;
        }
        var cat=new Cat("猫");
        console.log(cat.name);
        console.log(cat.sleep());
//        console.log(cat.eat());不能继承原型化方法
        console.log(cat instanceof Cat);//true
        console.log(cat instanceof Animal);//false

인스턴스 상속

function Animal(name){
    this.name=name;
    this.sleep=function(){
        console.log(this.name+"正在睡觉");
    }
}
Animal.prototype.eat=function() {
    console.log(this.name + "正在吃");
}
function Cat(name){
    var instance=new Animal();
    instance.name=name;
    return instance;
}
var cat=new Cat("猫");
console.log(cat.name);
console.log(cat.sleep());
console.log(cat.eat());
console.log(cat instanceof Cat);//false
console.log(cat instanceof Animal);//true

특징:
호출 메서드를 제한하지 않습니다. 새로운 subclass()이든 subclass()이든 반환된 객체는 동일한 효과를 가집니다
단점:
인스턴스는 하위 클래스의 인스턴스가 아니라 상위 클래스의 인스턴스입니다.
다중 상속을 지원하지 않습니다
결합 상속

function Animal(name){
    this.name=name;
    this.sleep=function(){
        console.log(this.name+"正在睡觉");
    }
}
Animal.prototype.eat=function() {
    console.log(this.name + "正在吃");
}
function Cat(name){
    Animal.call(this);
    this.name=name;
    }
Cat.prototype=new Animal();
var cat=new Cat("猫");
console.log(cat.name);
console.log(cat.sleep());
console.log(cat.eat());
console.log(cat instanceof Cat);//true
console.log(cat instanceof Animal);//true

기타:
1: 양식 확인
게시물이 안전하게 제출되고 정보가 노출되지 않습니다.
get will 정보 노출
2: 브라우저 객체
3: 네비게이터에는 브라우저에 대한 정보가 포함되어 있습니다. navigator.appName은 브라우저 이름을 반환합니다.
4: 캡슐화된 클래스의 속성은 사용자 정의할 수 있으며 이름은 사용자 정의할 수 있습니다.

읽고 나면 방법을 마스터하신 것 같습니다. 이 기사의 사례에 대해 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!