자바스크립트 연구노트(9) 자바스크립트의 프로토타입과 프로토타입 체인의 상속방법_기본지식

객체지향 프로그래밍을 사용할 때 객체 간의 상속관계는 당연히 필수입니다! 프로토타입은 JavaScript 상속을 구현하는 매우 중요한 방법입니다!
먼저 다음 코드를 살펴보겠습니다.

코드 복사 코드는 다음과 같습니다.

함수 사람(이름, 나이) {
this.name = 이름;
this.age = 나이
}
person.prototype.getInfo = function() {
alert( "제 이름은 " this.name "이고, 나이는 " this.age "입니다.")
}
var zhangchen = new person("zhangchen",
zhangchen.getInfo( ); // 출력 내 이름은 zhangchen이고 나이는 23세입니다.

실행 결과에서 new 키워드를 통해 생성된 zhangchen 개체는 다음을 통해 정의된 getInfo(를 상속하는 것을 볼 수 있습니다. 직접 프로토타입을 만드는 방법. 새로 생성된 zhangchen 객체가 person 객체의 속성과 메소드를 어떻게 상속하는지 자세히 살펴보겠습니다.
프로토타입: JavaScript를 사용한 객체지향 프로그래밍에서 프로토타입 객체는 핵심 개념입니다. 이 이름은 JavaScript의 개체가 기존 인스턴스(예: 프로토타입) 개체의 복사본으로 생성된다는 개념에서 유래되었습니다. 이 프로토타입 객체의 모든 속성과 메서드는 프로토타입 생성자에서 생성된 객체의 속성과 메서드로 나타납니다. 이러한 객체는 프로토타입에서 속성과 메서드를 상속한다고 말할 수 있습니다. zhangchen 객체 생성 시:

코드 복사 코드는 다음과 같습니다.

var zhangchen = 새로운 회사( "zhangchen", 23)

zhangchen이 참조하는 객체는 생성자(이 경우 함수 person)의 속성에서 비롯된 프로토타입의 속성과 메서드를 상속받습니다.

JavaScript에서 모든 함수에는 프로토타입 개체를 참조하는 데 사용되는 프로토타입이라는 속성이 있습니다. 이 프로토타입 객체에는 생성자라는 속성이 있으며, 이는 함수 자체를 참조합니다. 이는 순환 참조입니다. 다음 그림은 이 순환 관계를 더 잘 보여줍니다.

그림 1 순환관계

이제 new 연산자를 통해 함수(위 예에서는 사람)가 포함된 개체를 생성하면 얻은 개체는 person.prototype의 속성을 상속하게 됩니다. 위 이미지에서 person.prototype 객체에는 person 함수를 다시 참조하는 생성자 속성이 있는 것을 볼 수 있습니다. 이런 방식으로 각 사람 개체(person.prototype에서 상속됨)에는 사람 함수를 다시 참조하는 생성자 속성이 있습니다.

다음 코드를 사용하여 이 루프가 올바른지 확인할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

함수 사람(이름, 나이) {
this.name = 이름;
this.age = 나이
}

person.prototype.getInfo; = function() {
alert("내 이름은 " this.name "이고, 나이는 " this.age " 살입니다.")
}
var zhangchen = new person("zhangchen", 23);
alert(zhangchen.constructor == person.prototype.constructor); // true 출력
alert(zhangchen.constructor == person); // true 출력
alert(person.prototype. isPrototypeOf(zhangchen)) ; //output true

위 코드에서 "isPrototypeOf()" 메서드에 대한 호출은 어디에서 왔습니까? person.prototype 개체에서 가져온 것인가요? 아니요, 사실 person.prototype과 person 인스턴스에는 toString, toLocaleString, valueOf라는 다른 메서드가 있지만 그 중 어느 것도 person.prototype에서 나오지 않습니다. 오히려 모든 프로토타입의 궁극적인 기본 프로토타입인 JavaScript의 Object.prototype에서 유래합니다. (Object.prototype의 프로토타입은 null입니다.)

위 예에서는 zhangchen.prototype이 객체입니다. 이는 다음 코드를 실행하는 것과 동일한 Object 생성자를 호출하여 생성됩니다(표시되지는 않지만).

코드 복사 코드는 다음과 같습니다.

zhangchen.prototype = new Object()

따라서 person 인스턴스가 person.prototype을 상속하는 것처럼 zhangchen.prototype은 Object.prototype을 상속합니다. 이로 인해 모든 zhangchen 인스턴스는 Object.prototype의 메서드와 속성도 상속하게 됩니다.

프로토타입 체인: 모든 JavaScript 객체는 프로토타입 체인을 상속하며 모든 프로토타입은 Object.prototype에서 종료됩니다. 이 상속은 활성 개체 간에 이루어집니다. 이는 클래스가 선언될 때 발생하는 클래스 간의 상속을 나타내는 일반적인 상속 개념과 다릅니다. 따라서 JavaScript 상속은 더욱 동적입니다. 이는 다음과 같은 간단한 알고리즘을 사용하여 달성됩니다. 객체의 속성/메서드에 액세스하려고 하면 JavaScript는 속성/메서드가 해당 객체에 정의되어 있는지 확인합니다. 그렇지 않은 경우 개체의 프로토타입을 확인합니다. 그렇지 않은 경우 객체 프로토타입의 프로토타입이 검사되고 Object.prototype까지 계속됩니다. 다음 그림은 이 구문 분석 프로세스를 보여줍니다.

그림 2 toString() 메소드의 파싱 과정

위 구문 분석 과정에서 속성/메서드 X가 개체에 정의되어 있으면 같은 이름의 속성/메서드가 개체의 프로토타입에서 숨겨집니다. 예를 들어 person.prototype에서 toString 메서드를 정의하여 Object.prototype의 toString 메서드를 재정의할 수 있습니다.

다음 코드를 다시 보세요.

코드 복사 코드는 다음과 같습니다.

function person(name , age) {
this.name = name;
this.age = age
}
person.prototype.getInfo = function() {
alert( "내 이름은 " this .name "이고, 내 나이는 " this.age "입니다.")
}
var zhangchen = new person("zhangchen", 23) var luomi = new person("luomi", 23);
zhangchen.getInfo(); // 출력 제 이름은 zhangchen이고 23살입니다.
luomi.getInfo() // 출력 제 이름은 luomi입니다. 저는 23살입니다.
luomi.getInfo = function() {
alert("여기서 getInfo 함수를 다시 작성할 수 있습니다!")
}
luomi.getInfo(); 여기서 getInfo 함수를 다시 작성할 수 있습니다!
zhangchen.getInfo(); // 출력 제 이름은 zhangchen이고,

실행 결과에서 볼 수 있듯이, 비록 person의 각 인스턴스가 person.prototype의 메소드를 상속하지만 인스턴스화된 객체의 프로토타입 객체에서 메소드를 재정의할 수도 있으며 이는 다른 인스턴스에 영향을 미치지 않습니다!

위 내용은 프로토타입 및 프로토타입 체인 상속 방법에 대한 저의 이해입니다. (
JavaScript: 객체 지향 기술을 사용하여 고급 웹 애플리케이션 만들기)를 참조하세요. !