최근에 Vue를 배우고 있는데, 드디어 주말에 글을 쓸 시간이 생겼습니다. (좋아요를 다시 속일 수 있게 될 것을 생각하면 조금 설렙니다!) JavaScript의 기본에서는 클로저 외에도 상속도 어렵습니다. 글이 길어서 2부로 나누어 쓸 예정입니다. 또한 "Javascript Advanced 프로그래밍"을 바탕으로 자세히 설명하겠습니다. 잘못된 점이 있으면 정정해 주시기 바랍니다.
상속을 더 잘 설명하기 위해 몇 가지 준비 지식을 먼저 짚어보겠습니다.
생성자는 에서 객체를 생성하는 데 사용하는 함수이며 본질적으로 함수입니다. 다른 함수와의 차이점은 호출 메서드 가 다르다는 점입니다.
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
, 이 객체에는 속성이 있으며, 이는 함수 객체를 가리킵니다. 조금 현기증이 나나요? 중요하지 않습니다. 다음에는 그림 그리기 예제를 제공하는 것보다 더 나은 방법을 사용할 것입니다. constructor
Person
3. 생성자, 프로토타입 객체 및 인스턴스의 관계
그림에서 볼 수 있는 것은:
prototype
constructor
여기에 [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
프로토타입 체인
방금 언급한 지식을 검토해 보겠습니다.
프로토타입 객체
constructor
Instance는
을 통해 [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에는 B 프로토타입의 메소드에 액세스할 수 있는 속성이 있기 때문에 [Prototype]
b1은 속성을 따라 B 프로토타입에 액세스할 수 있기 때문에 B 프로토타입은 [Prototype]
속성을 따라 A 프로토타입에 계속 액세스하고 마침내 A.prototype에서 sayA() 메서드를 찾습니다. 실행 [Prototype]
b1이 A의 속성과 메서드를 상속하는 것과 같습니다. 이런 종류의 은 다음과 같이 지속적으로 결합됩니다. 프로토타입 객체를 연결하는 구조가 프로토타입 체인[Prototype]
입니다. 이는 js에서 상속을 구현하는 주요 방법이기도 합니다.
위 내용은 js의 상속 메커니즘에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!