JavaScript의 여러 핵심 개념 이해 - 프로토타입 chain_javascript 기술 구축

Javascript의 모든 함수는 프로토타입 속성을 가지며, 이 프로토타입 속성은 객체 유형 객체입니다. 이 함수로 생성된 모든 객체는 이 프로토타입의 특성을 가지며, 이는 생성된 객체를 사용하여 프로토타입 속성 및 메서드에 직접 액세스할 수 있음을 의미합니다. 에.
다음 코드는 프로토타입 사용 방법을 보여줍니다.

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

function Staff(name) {
this.name = name;
}
Staff.prototype.say = function() {
alert(this.name "안녕하세요");
}
var Staff1 = new Staff("hunter");
var Staff2 = new Staff("dangjian")
staff1.say()
staff2.say();

위 프로그램을 실행하면 생성된 객체 간에 프로토타입의 속성과 메소드를 호출할 수 있음을 알 수 있습니다. 더 중요한 것은 프로토타입의 속성과 메소드가 동일한 객체 간에 공유된다는 것입니다.

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

alert( Staff1.say == Staff2.say) ;

프로토타입에서 일반적으로 사용되는 또 다른 기능은 프로토타입을 통해 객체의 상속 관계를 구성하는 것입니다. 하위 클래스의 프로토타입에 기본 클래스 객체를 할당함으로써 객체지향에서의 상속 관계를 시뮬레이션할 수 있습니다. . 이것은 모두가 종종 JavaScript의 객체 지향 메커니즘이라고 부르는 것입니다. 다음 코드 조각은 이 기능을 사용하여 객체를 구성하는 상속 관계를 보여줍니다.

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

function Staff(name) { // 기본 클래스
this.name = name
}
Staff.prototype.say = function() {
alert(this. name " 인사");
}
function ManStaff(name, age) { // 서브클래스
this.name = name; ManStaff.prototype = new Staff(); // 상속 관계 설정
var manStaff1 = new ManStaff("hunter", 22)
var manStaff2 = new ManStaff("dangjian", 32); .say ();
manStaff2.say();


ManStaff 개체의 기본 클래스 Staff에 Say 메서드가 있음을 알 수 있습니다. 자바스크립트를 실현했습니다. 위의 프로토타입 사용법에 익숙할 수도 있지만 프로그래머로서 우리는 프로토타입의 사용법을 알아야 할 뿐만 아니라 프로토타입의 내부 메커니즘이라는 점도 이해해야 합니다. 프로토타입의 원리와 프로토타입 체인의 구현을 분석해 보겠습니다.
프로토타입의 메커니즘을 이해하려면 JavaScript에서 함수가 어떻게 생성되는지 이해해야 합니다.
Staff(name) {this.name = name;} 함수에 대한 코드가 실행되면 var Staff = new Function("name", "this.name = name")을 실행하는 것과 동일합니다. 미리 정의된 Function() 생성자를 사용하여 Staff라는 함수 유형 개체를 만듭니다.

그런 다음 생성된 Staff 객체에 __proto__ 속성을 추가하고 이를 Function 생성자의 프로토타입에 할당합니다. 이 단계는 var x = new X () 메소드와 같은 것을 실행할 때의 단계입니다. X의 프로토타입을 다음의 __proto__에 할당하는 것입니다.
Staff.__proto__ = Function.prototype;


다음으로 Staff에 대한 프로토타입 속성을 생성합니다. 단계 및 생성 프로세스를 사용하여 함수 유형 객체를 생성하려면 다음 의사 코드:

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

var o = new Object();
o.constructor = Base;

Staff.prototype = o;
위 분석을 보면 객체가 생성되면 private 속성인 __proto__가 생성되고, 함수가 생성되면 프로토타입 속성이 생성되는 것을 알 수 있습니다. Staff는 함수 유형 객체이므로 두 속성을 모두 갖습니다.
이 두 속성은 프로토타입 체인을 구축하기 위한 핵심 속성입니다. var Staff1 = new Staff("hunter") 코드를 실행할 때 프로토타입이 어떻게 전달되는지 분석해 보겠습니다.
위 분석에 따르면, Staff1.__proto__ = Staff.prototype이고, Staff.prototype은 Object가 생성한 객체, 즉 Staff.prototype.__proto__ = Object.prototype이므로, Staff1.__proto__ .__proto__는 Object를 가리킵니다. . 프로토타입, 즉 Staff1.__proto__ .__proto__ == Object.prototype, 객체의 속성을 읽으려고 할 때 JS는 먼저 객체 자체에 이 속성이 있는지 확인합니다. 이 속성을 계속해서 검색합니다.
프로토타입 체인의 원리를 알면 이 원리를 기반으로 Javascript에서 객체 상속을 쉽게 구축할 수 있습니다.
위 분석을 통해 프로토타입 체인의 최상위가 Object.prototype이라는 것을 알 수 있습니다. 이는 Object가 구축된 상속 관계에 있는 모든 객체의 기본 클래스임을 의미합니다. 다음 코드 확인을 실행할 수 있습니다.

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

Object.prototype.location = "China" ;
function Staff(name) { // 기본 클래스
this.name = name
}
Staff.prototype.say = function() {
alert(this.name " say; hello") ;
}
var ManStaff1 = new Staff("hunter");
var ManStaff2 = new Staff("dangjian");
alert(ManStaff1.location);
alert (ManStaff2.location);

실행 결과 Object가 Staff의 기본 클래스인 것으로 나타났는데 어떻게 Staff의 하위 클래스를 만들 수 있나요?
위 함수의 성립 원리를 이해하면 다음과 같은 코드를 쉽게 작성할 수 있습니다.

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

function Staff(name) { // 기본 클래스
this.name = name
}
Staff.prototype.say = function() {
alert(this .name "안녕하세요");
}
function ManStaff(name, age) { // 하위 클래스
Staff.call(this,name)
this.age = age ;
}
ManStaff.prototype = new Staff(); // 상속 관계 설정
var ManStaff1 = new ManStaff("hunter", 22)
var ManStaff2 = new ManStaff("dangjian" , 32) ;
ManStaff1.say();
ManStaff2.say();

다음은 상속 관계를 설정하는 문장입니다. ManStaff.prototype = new Staff(); , 상속 관계는 다음과 같이 계산됩니다. ：ManStaff1.__proto__ = =ManStaff.prototype, ManStaff.prototype.__proto__ = Staff.prototype, Staff.prototype.__proto__ == Object.prototype; 그런 다음 ManStaff1.__proto__.__proto__.__proto__ == Object .원기.
JavaScript의 이러한 상속 관계는 전통적인 객체 지향 상속 관계보다 느슨하고 구성 방법도 이해하기 어렵지만 스크립트 언어로서 그 기능은 이미 매우 강력합니다.