자바스크립트의 상속 방법은 무엇입니까?

JavaScript의 상속 방법에는 프로토타입 체인 상속, 빌린 생성자 상속, 결합 상속, 프로토타입 상속, 기생 상속 및 기생 결합 상속이 포함됩니다. 그 중 결합 상속이 가장 일반적으로 사용되는 상속 방법이다.

이 기사의 운영 환경: windows10 시스템, javascript 1.8.5, thinkpad t480 컴퓨터.

자바스크립트에서 상속하려면 먼저 부모 클래스를 제공해야 합니다. 여기서는 Person을 부모 클래스로 사용합니다.

아래 생성자 이름은 모두 Coder, Rocker 등 실제 의미가 없으며 예시로만 사용됩니다.

		 function Person(name){//给构造函数添加了参数
		            this.name=name;
		            this.sex="male";
		            this.say=function(){
		                console.log(this.name);
		            }
		        }
		Person.prototype.age=21;//给构造函数添加了原型属性

1 프로토타입 체인 상속

		function Programmer(){
            this.name="Jayee";
        }

        Programmer.prototype=new Person();//子类构造函数.prototype=父类实例

        var per1=new Programmer();
        console.log(per1);//Programmer {name: "Jayee"}
        console.log(per1.sex);//male
        console.log(per1.age);//21
        console.log(per1 instanceof Person);//true

핵심 사항: 새 인스턴스의 프로토타입을 만듭니다. 상위 클래스의 인스턴스와 같습니다. Programmer.prototype=new Person();

Features: 인스턴스가 상속할 수 있는 속성에는 인스턴스 생성자의 속성, 상위 클래스 생성자의 속성 및 상위 클래스 프로토타입의 속성이 포함됩니다. (새 인스턴스는 상위 클래스 인스턴스의 속성을 상속하지 않습니다!)

단점: 1. 새 인스턴스는 상위 클래스 생성자에 매개 변수를 전달할 수 없습니다.

　 2. 단일 상속.

　　3. 모든 새 인스턴스는 상위 클래스 인스턴스의 속성을 공유합니다. (프로토타입의 속성은 공유됩니다. 한 인스턴스가 프로토타입의 속성을 수정하면(per1.__proto__.sex = "female", 그러면 per2.sex도 female이 됩니다), 다른 인스턴스의 프로토타입 속성도 변경됩니다. )

두 번째, 생성자 상속 차용

        //借用构造函数继承
        function Coder(){
            Person.call(this,"Jayee");//重点：借用了Person
            this.age=18;
        }
        var cod1=new Coder();
        console.log(cod1);
        //Coder {name: "Jayee", sex: "male", hobby: "", age: 18, say: ƒ}
        console.log(cod1.name);//Jayee
        console.log(cod1.age);//18
        console.log(cod1 instanceof Person);//false

핵심 사항: .call() 및 .apply()를 사용하여 상위 클래스 생성자를 하위 클래스 함수에 도입합니다(하위 클래스 함수 실행에서 상위 클래스 함수를 자동으로 만듭니다). (복사))

특징: 1. 상위 클래스 생성자의 속성만 상속하고 상위 클래스 프로토타입의 속성은 상속하지 않습니다. (

　　cod1.age가 21이 아닌 18이라는 것을 보면 알 수 있습니다.)

　　2. 프로토타입 체인 상속의 단점 1, 2, 3을 해결했습니다.

　 3. 여러 생성자 속성을 상속받을 수 있습니다(다중 호출).

　 4. 하위 인스턴스의 상위 인스턴스에 매개변수를 전달할 수 있습니다.

단점: 1. 상위 클래스 생성자의 속성만 상속할 수 있습니다.

　 2. 생성자의 재사용은 불가능합니다. (사용할 때마다 다시 호출해야 합니다.) 3. 각각의 새 인스턴스에는 부풀려진 상위 클래스 생성자의 복사본이 있습니다.

3. 결합 상속(결합 프로토타입 체인 상속 및 빌린 생성자 상속)(일반적으로 사용됨)

        //组合继承
        function Typer(name){
            Person.call(this,name);
        }
        Typer.prototype=new Person();
        var typ=new Typer("Jayee");
        console.log(typ);
        //Typer {name: "Jayee", sex: "male", hobby: "", say: ƒ}
        console.log(typ.name);//Jayee，继承了构造函数
        console.log(typ.age);//21，继承了父类的原型的属性

핵심 사항: 매개변수 전달 및 재사용이라는 두 가지 모드의 장점을 결합합니다.

특징: 1. 프로토타입의 프로토타입을 상속할 수 있습니다. 상위 클래스 속성은 매개변수로 전달되어 재사용될 수 있습니다.

　2. 각각의 새 인스턴스에 도입된 생성자 속성은 비공개입니다.

단점: 상위 클래스 생성자가 두 번 호출되고(메모리 소비) 하위 클래스 생성자가 프로토타입의 상위 클래스 생성자를 대체합니다

4. 프로토타입 상속

        //原型式继承
        function Rocker(obj) {
        //先封装一个函数容器，用来输出对象和承载继承的原型
            function F(){}
            F.prototype=obj;//继承了传入的函数
            return new F();//返回函数对象
        }
        var per=new Person();//拿到父类实例
        var roc =Rocker(per);//F {}
        console.log(per.__proto__);//{age: 21, constructor: ƒ}
        console.log(roc.age);//21，继承了父类函数的属性

핵심 사항: 함수 객체로 래핑하고 그런 다음 이 함수의 호출을 반환하면 이 함수는 마음대로 속성을 추가할 수 있는 인스턴스 또는 개체가 됩니다. object.create()가 이 원칙입니다.

기능: 객체를 복사하여 함수로 래핑하는 것과 유사합니다.

단점: 1. 모든 인스턴스는 프로토타입의 속성을 상속합니다.

　　2. 재사용이 불가능합니다. (새로운 인스턴스 속성은 추후 추가됩니다.)

5. 기생 상속

        //寄生式继承
        function Rocker(obj){
            function F(){}
            F.prototype=obj;//继承了传入的函数
            return new F();//返回函数对象
        }
        var per4=new Person();
        //以上是原型式继承,给原型式继承再套个壳子传递参数
        function Artist(obj){
            var roc=Rocker(obj);
            roc.name="Jayee";
            return roc;
        }
        var art = Artist(per4)
        //这个函数经过声明之后就成了可增添属性的对象
        console.log(typeof Artist);//function
        console.log(typeof art);//object
        console.log(art.name);//Jayee，返回了个roc对象，继承了roc的属性

핵심: 프로토타입 상속 주위에 쉘을 두는 것입니다.

장점: 객체(this)를 반환하는 셸일 뿐이므로 사용자 정의 유형이 생성되지 않으며 이 함수는 자연스럽게 생성된 새 객체가 됩니다.

단점: 프로토타입을 사용하지 않으며 재사용할 수 없습니다.

6. 기생 결합 상속(일반적으로 사용됨)

Parasite: 함수 내에서 객체를 반환한 다음

Composition을 호출합니다. 1. 함수의 프로토타입은 다른 인스턴스와 같습니다. 2. 적용 또는 호출을 사용하여 함수에 다른 생성자를 도입하고 매개변수를 전달할 수 있습니다

         //寄生式组合式继承

         //寄生
         function Rocker(obj){
            function F(){}
            F.prototype=obj;//继承了传入的函数
            return new F();//返回函数对象
        }
        //Rocker就是F实例的另一种表示法
        var roc=new Rocker(Person.prototype);
        //roc实例（F实例）的原型继承了父类函数的原型
        //上述更像是原型链继承，只不过继承了原型属性

        //组合
        function Sub(){
            Person.call(this);
            //这个继承了父类构造函数的属性
            //解决了组合式两次调用构造函数属性的缺点
        }
        //重点
        Sub.prototype=roc;//继承了roc实例
        roc.constructor=Sub;//一定要修复实例
        var sub1=new Sub();
        //Sub的实例就继承了构造函数属性，父类实例，roc的函数属性
        console.log(sub1.age);//21

핵심 사항: 결합 상속 문제 수정

7. ES6의 클래스 및 확장

//todo

관련 동영상 튜토리얼 공유:

javascript 비디오 튜토리얼

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