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(){省略内容...}

2. 프로토타입 객체를 생성할 때

함수를 사용할 때마다 함수 객체에는

프로토타입 객체 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프로토타입 체인

JS에서 상속의 주요 개념은 다음과 같습니다. 프로토타입 체인을 이해하면 상속 문제의 절반을 이해하게 됩니다. 여기서 잠시 휴식을 취하시면 됩니다. 이전 준비 지식을 거의 이해했다면 프로토타입 체인에 대해 이야기해 보세요.

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

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

프로토타입 객체

는

속성을 ​​통해
• 생성자

  <를 가리킵니다. 🎜>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 중국어 웹사이트의 기타 관련 기사를 참조하세요!