JavaScript의 네 가지 상속 방법(코드 예제)-JS 튜토리얼-php.cn

이 글은 JavaScript 상속의 네 가지 방법(코드 예제)을 제공합니다. 필요한 친구들이 참고할 수 있기를 바랍니다.

1. 프로토타입 체인 상속

핵심: 상위 클래스의 인스턴스를 하위 클래스의 프로토타입으로 사용

단점: 상위 클래스는 하위 클래스에서 액세스할 수 있는 프로토타입 메서드/프로토타입 속성을 추가합니다. 상위 클래스가 다른 것으로 변경됨 모든 것이 변경되었습니다

        function Person (name) {
            this.name = name;
        };

        Person.prototype.getName = function () {    //对原型进行扩展
            return this.name;
        };

        function Parent (age) {
            this.age = age;
        };

        Parent.prototype = new Person('老明');   //这一句是关键 //通过构造器函数创建出一个新对象，把老对象的东西都拿过来。

        Parent.prototype.getAge = function () {
            return this.age;
        };

//        Parent.prototype.getName = function () {   //可以重写从父类继承来的方法,会优先调用自己的。
//            console.log(222);
//        };

        var result = new Parent(22);
        console.log(result.getName());  //老明　　//调用了从Person原型中继承来的方法(继承到了当前对象的原型中)　　
        console.log(result.getAge());   //22 　　//调用了从Parent原型中扩展来的方法

로그인 후 복사

2. 구성 상속

기본 아이디어
생성자를 빌리는 기본 아이디어는 call 또는 apply를 사용하는 것입니다. > 상위 클래스의 를 전달하려면 이에 지정된 속성과 메서드가 하위 클래스에서 생성된 인스턴스에 복사(빌려)됩니다. call或者apply把父类中通过this指定的属性和方法复制（借用）到子类创建的实例中。
因为this对象是在运行时基于函数的执行环境绑定的。也就是说，在全局中，this等于window，而当函数被作为某个对象的方法调用时，this等于那个对象。
call、apply 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。

所以，这个借用构造函数就是，new对象的时候(new创建的时候，this指向创建的这个实例)，创建了一个新的实例对象，
并且执行Parent里面的代码，而Parent里面用call调用了Person，也就是说把this指向改成了指向新的实例，
所以就会把Person里面的this相关属性和方法赋值到新的实例上，而不是赋值到Person上面,
所以所有实例中就拥有了父类定义的这些this的属性和方法。

因为属性是绑定到thisthis 객체는 런타임 시 함수의 실행 환경에 따라 바인딩되기 때문입니다. 즉, 전역적으로 this는 window와 같고, 함수가 객체의 메서드로 호출되면 this는 that과 같습니다. 물체 .

call, apply 메소드는 함수의 객체 컨텍스트를 초기 컨텍스트에서 thisObj가 지정한 새 객체로 변경할 수 있습니다.

그래서 이 빌린 생성자는 new 객체가 생성되면(new가 생성되면 this는 생성된 인스턴스를 가리킴) 새 인스턴스 객체가 생성되고,

그리고 Parent 내부에서 코드를 실행하면 Parent는 call을 사용하여 Person을 호출합니다. 즉, this 포인터가 새 인스턴스를 가리키도록 변경되어

그래서 Person의 this 관련 속성 및 메서드가 새 인스턴스에 할당됩니다. Person에 값을 할당하는 대신

모든 인스턴스에는 상위 클래스에서 정의한 this 속성과 메서드가 있습니다. 속성은 this에 바인딩되어 있기 때문에 호출 시 해당 인스턴스에 할당되며, 각 인스턴스의 값은 서로 영향을 미치지 않습니다.

Core: 상위 클래스의 생성자를 사용하여 하위 클래스의 인스턴스를 향상시키는 것은 상위 클래스의 인스턴스 속성을 하위 클래스에 복사하는 것과 같습니다(프로토타입이 사용되지 않음)

단점: 메서드는 생성자에서 정의되며 다음과 같은 작업을 수행할 수 있습니다. 인스턴스 속성과 메서드는 프로토타입 속성/메서드를 상속할 수 없으며 함수 재사용은 불가능합니다. 각 하위 클래스에는 성능에 영향을 미치는 상위 클래스 인스턴스 함수의 복사본이 있습니다

      function Person (name) {
            this.name = name;
            this.friends = ['小李','小红'];
            this.getName = function () {
                return this.name;
            }
        };

//        Person.prototype.geSex = function () {    //对原型进行扩展的方法就无法复用了
//            console.log("男");
//        };

        function Parent = (age) {
            Person.call(this,'老明');　　//这一句是核心关键
            //这样就会在新parent对象上执行Person构造函数中定义的所有对象初始化代码，
            // 结果parent的每个实例都会具有自己的friends属性的副本
            this.age = age;
        };

        var result = new Parent(23);
        console.log(result.name);　　　　//老明
        console.log(result.friends);　　//["小李", "小红"]
　　　　 console.log(result.getName());　　//老明
　　　　 console.log(result.age);　　　　//23
　　　　 console.log(result.getSex());　　//这个会报错，调用不到父原型上面扩展的方法

로그인 후 복사

결합 상속(모든 인스턴스는 모두 자신의 속성을 가질 수 있고 동일한 방법을 사용할 수 있습니다. 결합 상속은 프로토타입 체인과 빌린 생성자의 결함을 피하고 두 가지의 장점을 결합하며 가장 일반적으로 사용되는 상속 방법입니다)Core : 상위 클래스를 호출하여 구성하고 상위 클래스의 속성을 상속하며 매개변수 전달의 이점을 유지한 다음 상위 클래스 인스턴스를 하위 클래스의 프로토타입으로 사용하여 함수 재사용을 실현합니다.

단점: 상위 클래스 생성자가 호출됩니다. 두 번 생성되고 두 개의 인스턴스(하위 클래스)가 생성됩니다. 인스턴스는 하위 클래스의 프로토타입에 대한 공유를 보호합니다.)

        function Person  (name) {
             this.name = name;
             this.friends = ['小李','小红'];
         };

         Person.prototype.getName = function () {
             return this.name;
         };

        function Parent (age) {
            Person.call(this,'老明');　　//这一步很关键
            this.age = age;
        };

        Parent.prototype = new Person('老明');　　//这一步也很关键
        var result = new Parent(24);
        console.log(result.name);　　　　//老明
        result.friends.push("小智");　　//
        console.log(result.friends);　　//['小李','小红','小智']
        console.log(result.getName());　　//老明
        console.log(result.age);　　　　//24

        var result1 = new Parent(25);   //通过借用构造函数都有自己的属性，通过原型享用公共的方法
        console.log(result1.name);　　//老明
        console.log(result1.friends);　　//['小李','小红']

로그인 후 복사

4. 기생 조합 상속

핵심: 기생을 통해 상위 클래스의 인스턴스 속성이 끊어지고, 그러면 부모 클래스의 생성자가 두 번 호출될 때 인스턴스 메서드/속성을 두 번 초기화하지 않으므로 결합 상속의 단점을 피할 수 있습니다

단점: 완벽하지만 구현이 더 복잡합니다

        function Person(name) {
            this.name = name;
            this.friends = ['小李','小红'];
        }

        Person.prototype.getName = function () {
            return this.name;
        };

        function Parent(age) {
            Person.call(this,"老明");
            this.age = age;
        }

        (function () {
            var Super = function () {};     // 创建一个没有实例方法的类
            Super.prototype = Person.prototype;
            Parent.prototype = new Super();     //将实例作为子类的原型
        })();

        var result = new Parent(23);
        console.log(result.name);
        console.log(result.friends);
        console.log(result.getName());
        console.log(result.age);

로그인 후 복사

[관련 권장 사항: 🎜JavaScript 비디오 튜토리얼🎜]🎜🎜🎜🎜

위 내용은 JavaScript의 네 가지 상속 방법(코드 예제)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!