js의 상속 메커니즘에 대한 자세한 설명

서문

최근에 Vue를 배우고 있는데, 드디어 주말에 글을 쓸 시간이 생겼습니다. (좋아요를 다시 속일 수 있게 될 것을 생각하면 조금 설렙니다!) JavaScript의 기본에서는 클로저 외에도 상속도 어렵습니다. 글이 길어서 2부로 나누어 쓸 예정입니다. 또한 "Javascript Advanced 프로그래밍"을 바탕으로 자세히 설명하겠습니다. 잘못된 점이 있으면 정정해 주시기 바랍니다.

준비 지식

상속을 더 잘 설명하기 위해 몇 가지 준비 지식을 먼저 짚어보겠습니다.

1. 생성자, 인스턴스

생성자는 에서 객체를 생성하는 데 사용하는 함수이며 본질적으로 함수입니다. 다른 함수와의 차이점은 호출 메서드 가 다르다는 점입니다.

• new 연산자를 통해 호출하면 생성자

• new 연산자를 통해 호출되지 않으면 일반 함수입니다.
  예:

function Person(name, age) {
   this.name = name;
   this.age = age;
 }
 //当做构造函数调用
 var person1 = new Person('Mike',10);
 
 //当做普通函数调用，这里相当于给window对象添加了name和age属性,这个不是重点，只要注意调用方式
 Person('Bob',12);
 
 console.log(person1)//Person {name: "Mike", age: 10}
 console.log(name)//Bob
 console.log(age)//12

var person1 = new Person('Mike',10);에서 함수는 새로운 연산자 Person를 통해 호출되고 person1,
을 생성합니다. 여기서 Person은 생성자 라고 하며 person1은 <의 Person 인스턴스 라고 합니다. 🎜> 함수 객체. 인스턴스에는 해당 생성자 를 가리키는 constructor 속성이 있습니다. 다음 예를 참조하세요.

 function Person(name, age) {
    this.name = name;
    this.age = age;
  }
 var person1 = new Person('Mike',10);
 var person2 = new Person('Alice',20);
 console.log(person1.constructor)//function Person(){省略内容...}
 console.log(person2.constructor)//function Person(){省略内容...}

프로토타입 객체 prototype를 가리키는 포인터 인 속성이 있습니다. 프로토타입 객체의 본질도 객체입니다. 이 문장을 처음 읽으면 조금 이해하기 어려울 수 있습니다. 예를 들어, 방금 나온 함수를 살펴보세요:

function Person(name, age) {
        this.name = name;
        this.age = age;
     }
     console.log(Person.prototype)//object{constructor:Person}

가 <의 프로토타입 객체인 객체를 가리키는 것을 볼 수 있습니다. 🎜>Person Person.prototype, 이 객체에는 속성이 있으며, 이는 함수 객체를 가리킵니다. 조금 현기증이 나나요? 중요하지 않습니다. 다음에는 그림 그리기 예제를 제공하는 것보다 더 나은 방법을 사용할 것입니다. constructorPerson3. 생성자, 프로토타입 객체 및 인스턴스의 관계

앞서 생성자, 인스턴스 및 프로토타입 객체를 소개했습니다. 다음으로 이 세 가지를 그림으로 표현합니다. PS로 이런 그림 그리기 귀찮네요. 혹시 좋은 도구 추천해주실 수 있나요?):

그림에서 볼 수 있는 것은:

<🎜 함수 객체의 >는 프로토타입 객체를 가리키고, 프로토타입 객체의
• 은 함수 객체를 가리킵니다.

  prototypeconstructor

  인스턴스 객체의
속성은 <를 가리킵니다. 🎜>프로토타입 객체
• ,

  여기에 [Protoptype] 내부 속성 이 있는데, 이는 존재하는 것으로 먼저 이해할 수 있지만 액세스가 허용되지 않습니다(일부 브라우저에서는 이 속성에 대한 액세스를 허용하지만) , 그러나 우리는 먼저 이것을 이렇게 이해합니다.) 이 속성의 기능은 다음과 같습니다. 인스턴스가 이 [Protoptype] 속성을 ​​통해 프로토타입 객체의 속성과 메서드에 액세스할 수 있도록 합니다. 예:

  function Person(name, age) {
          this.name = name;
          this.age = age;
        }
        //在原型对象中添加属性或者方法
       Person.prototype.sex = '男'; 
       var person1 = new Person('Mike',10);
       var person2 = new Person('Alice',20);
       //只给person2设置性别
       person2.sex = '女';
       console.log(person1.sex)//'男'
       console.log(person2.sex)//'女'

  로그인 후 복사
  여기서
  인스턴스에
속성을 ​​설정하지 않았지만

동시에 person1 속성을 ​​person2로 설정하면 출력은 'female'입니다. 즉, sex 인스턴스 자체에 해당 속성이나 메서드가 없는 경우에만 프로토타입 객체 [Protoptype]<에 해당하는 속성이나 메소드를 찾을 수 있습니다. 🎜>
상속sex프로토타입 체인

프로토타입 체인의 원칙은 하나의 참조 유형이 다른 참조 유형의 속성과 메서드를 상속하도록 하는 것입니다.

방금 언급한 지식을 검토해 보겠습니다.

프로토타입 객체

속성을 ​​통해
• 생성자

  <를 가리킵니다. 🎜>constructorInstance는

  속성

• 을 통해 [Prototype] 프로토타입 객체를 가리킵니다. 이제 생각해 보겠습니다. 질문: 프로토타입 객체를 다른 생성자의 인스턴스와 동일하게 만들면 어떻게 되나요?

  예:

    function A() {
     
    }
    //在A的原型上绑定sayA()方法
    A.prototype.sayA = function(){
            console.log("from A")
    }
    function B(){

    }
    
     //让B的原型对象指向A的一个实例
     B.prototype = new A();
     
     //在B的原型上绑定sayB()方法
     B.prototype.sayB = function(){
            console.log("from B")
     }
     //生成一个B的实例
     var a1 = new A();
     var b1 = new B();
     
     //b1可以调用sayB和sayA
     b1.sayB();//'from B'
     b1.sayA();//'from A'

로그인 후 복사
방금 일어난 일을 더 쉽게 이해할 수 있도록 다른 사진을 찍어 보겠습니다.

이제 사진과 결합된 코드를 살펴보겠습니다.



먼저 두 개의 함수 객체 A와 B를 생성하고 프로토타입 객체도 생성했습니다


• 다음으로 A의 프로토타입 객체에 sayA() 메소드
  *를 추가했습니다. 그런 다음 중요한 단계 B.prototype = new A();, 함수 객체의 protytype 포인터를 B는 A 의 인스턴스를 가리킵니다. 설명에 주의하세요. 는 함수 개체 B의 protytype 포인터가 A 의 인스턴스를 가리키도록 하는 것입니다. B의 프로토타입 객체에는 더 이상 생성자 속성 이 없습니다. 실제로 B에는 원래 B.prototype을 통해 액세스할 수 있는 실제 프로토타입 객체가 있었지만 이제 이 포인터를 다시 작성했습니다. 이는 다른 객체를 가리키므로 B의 실제 프로토타입 객체는 지금 액세스할 수 없습니다. 대신 새 프로토타입 객체는 A의 인스턴스입니다. 당연히 constructor 속성

• 다음으로

  B .prototype이 가리키는 객체에 대해 메서드 sayB

• 를 추가합니다.

• 마지막으로 b1의 sayB 메소드가 실행될 수 있습니다. 왜일까요?

  
  b1에는 B 프로토타입의 메소드에 액세스할 수 있는 속성이 있기 때문에 [Prototype]

• b1의 sayA 메소드를 호출했습니다. 왜?

  
  b1은 속성을 ​​따라 B 프로토타입에 액세스할 수 있기 때문에 B 프로토타입은 [Prototype] 속성을 ​​따라 A 프로토타입에 계속 액세스하고 마침내 A.prototype에서 sayA() 메서드를 찾습니다. 실행 [Prototype]

따라서 현재 결과는

b1이 A의 속성과 메서드를 상속하는 것과 같습니다. 이런 종류의 은 다음과 같이 지속적으로 결합됩니다. 프로토타입 객체를 연결하는 구조가 프로토타입 체인[Prototype]입니다. 이는 js에서 상속을 구현하는 주요 방법이기도 합니다.

https://segmentfault.com/a/1190000007376061의 원본 텍스트




위 내용은 js의 상속 메커니즘에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!