자바스크립트 객체지향 지식집(자바스크립트 고급 프로그래밍(제3판) 읽기)_javascript 기술

처음에는 진심으로 삼켰을 때 명확한 설명을 요구하지 않았고 갑자기 깨달음을 얻었습니다. 그러나 밤에 잠자리에 들었을 때 많은 문제를 발견하고 잠시 읽은 후에는 아무것도 이해하지 못했습니다. 시간이 지나서 보니 이런 내용이었다. 며칠 사용해본 결과 손으로 글을 쓸 때 여전히 기억에 의존하고 있다는 것을 알게 되어서 다음에는...

기억만으로는 내용을 파악하기가 어렵습니다. 그리고 오랜 시간이 지나면 내 마음은 멍해질 것이다. 특히 많은 기술적인 아이디어와 원칙은 실천하지 않으면 당시에 아주 명확하게 생각하더라도 오랜 시간이 지나면 잊어버리게 됩니다. 게다가 인터넷에 있는 것들은 보기에 편리한 방법만 제공한다고 할 수 있는데, 결국 대부분은 개인적인 요약이기 때문에 명확하게 설명하기 어렵습니다. , 일반적으로 단계와 챕터가 다르기 때문에 교차 기억이 형성되기 쉽습니다. 회의적인 태도로 사물을 보는 것이 더 낫습니다. 시도해 보면 그것이 어떤 것인지 알게 될 것입니다. 품질이 보장된 책이나 공식적인 자료가 있는 책은 좋은 출처입니다.

지금도 선명하게 보이고 정신이 맑을 때 녹음하고 메모해 보세요. 앞으로의 오해를 줄이기 위해 개념적인 내용을 책에 담았습니다. 예시를 손으로 작성하고 확인한 후, 나중에 한눈에 이해할 수 있도록 그림을 그려보세요.

1. 캡슐화

객체 정의: ECMA-262는 객체를 "속성이 기본 값, 객체 또는 기능을 포함할 수 있는 정렬되지 않은 속성의 모음"으로 정의합니다. .

객체 생성: 각 객체는 참조 유형을 기반으로 생성됩니다. 이 참조 유형은 기본 유형(객체, 배열, 날짜, RegExp, 함수, 부울, 숫자, 문자열) 또는 자체 정의 유형일 수 있습니다. .

1. 생성자 패턴

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

function 사람(이름, 나이) {
this.name = 이름;
this.age = 나이;
this.sayName = function() {
alert(this.name); >}
}
위 생성자를 통해 new 연산자를 사용하여 객체 인스턴스를 생성할 수 있습니다.
var zhangsan = new Person('zhangsan', 20);
var lisi = new Person('lisi', 20)
zhangsan.sayName();//zhangsan
lisi.sayName (); //lisi

new를 통한 객체 생성은 4단계를 거칩니다.

1. 새로운 객체 생성 [var o = new Object();]

2. 생성자의 범위를 새 개체에 할당합니다(이것이 새 개체를 가리킵니다). [Person.apply(o)] [Person의 원본 this가 창을 가리킵니다]

3. 생성자의 코드(이 새 개체에 특성 추가)

4. 새 개체를 반환합니다.

코드를 통해 새로 복원하는 단계:

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

function createPerson(P) {
var o = new Object();
var args = Array.prototype.slice.call(arguments, 1)
o.__proto__ = P.prototype ;
P.prototype.constructor = P;
P.apply(o, args);
}
새 인스턴스 생성 메서드 테스트
var wangwu = createPerson(Person, 'wangwu' , 20) ;
wangwu.sayName();//wangwu

2. 프로토타입 모드

프로토타입 객체 개념: 새로운 함수를 생성할 때마다 A 프로토타입 속성은 특정 규칙 세트에 따라 함수에 대해 생성됩니다. 이 속성은 함수의 프로토타입 객체를 가리킵니다. 기본적으로 모든 프로토타입 객체는 프로토타입 속성이 있는 함수에 대한 포인터를 포함하는 생성자 속성을 자동으로 가져옵니다. 이 생성자를 통해 프로토타입 객체에 다른 속성과 메서드를 계속 추가할 수 있습니다. 사용자 정의 생성자를 생성한 후 해당 프로토타입 개체는 기본적으로 생성자 속성만 가져오며 다른 메서드의 경우 Object에서 상속됩니다. 새 인스턴스를 생성하기 위해 생성자가 호출되면 인스턴스에는 생성자의 프로토타입 객체를 가리키는 포인터(내부 속성)가 포함됩니다. ECMA-262 5판에서는 이 포인터를 [[프로토타입]]이라고 부릅니다. 스크립트에서 [[Prototype]]에 액세스하는 표준 방법은 없지만 Firefox, Safari 및 Chrome은 다른 구현에서 모든 객체에 __proto__ 속성을 지원합니다. 이 속성은 스크립트에 완전히 표시되지 않습니다. 하지만 명확히 해야 할 중요한 점은 인스턴스와 생성자 사이가 아니라 인스턴스와 생성자의 프로토타입 객체 사이에 연결이 존재한다는 것입니다.

이 단락은 기본적으로 생성자, 프로토타입 및 예제 간의 관계를 간략하게 설명합니다.

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

함수 사람(이름, 나이) {
this.name = 이름;
this.age = 나이
}
Person.prototype.country = 'chinese'; 🎜>Person.prototype.sayCountry = function() {
alert(this.country);
}

var zhangsan = new Person('zhangsan', 20)
var lisi = new Person('lisi', 20);

zhangsan.sayCountry(); //중국어
lisi.sayCountry() //중국어

alert(zhangsan.sayCountry) = lisi.sayCountry); //true

참고: 생성자의 프로토타입 객체는 주로 여러 객체 인스턴스가 포함된 속성과 메서드를 공유할 수 있도록 하는 데 사용됩니다. 그러나 프로토타입 객체에 참조 유형이 포함되어 있으면 참조 유형이 포인터를 저장하므로 값 공유가 발생하기 쉽습니다.

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

Person.prototype.friends = ['wangwu' ]; //사람이 배열 유형을 추가합니다
zhangsan.friends.push('zhaoliu'); //Zhang San의 수정이 Li Si에 영향을 미칩니다
alert(zhangsan.friends); zhaoliu
alert(lisi.friends); //wangwu, zhaoliu Li Si도 하나 더 있습니다

3. 생성자 모드와 프로토타입 모드를 함께 사용하세요

사용자 정의 유형을 생성하는 가장 널리 알려져 있는 방법을 사용하는 것입니다. 생성자 패턴은 인스턴스 속성을 정의하는 데 사용되며 프로토타입 패턴은 메서드 및 공유 속성을 정의하는 데 사용됩니다. 이러한 방식으로 각 인스턴스는 인스턴스 속성의 자체 복사본을 갖고 메서드에 대한 참조를 공유하므로 메모리를 최대한 절약합니다.

수정된 프로토타입 모드는 다음과 같습니다.

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

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

Person.prototype.country = 'chinese';
Person.prototype.sayCountry = function() {
alert(this.country)
}

var zhangsan = new Person(' zhangsan', 20);
var lisi = new Person('lisi', 20)

zhangsan.friends.push('zhaoliu')
alert(zhangsan) .friends); / /wangwu,zhaoliu
alert(lisi.friends); //wangwu

상속

상속의 기본 개념

ECMAScript는 주로 프로토타입 체인 구현 상속에 의존합니다(속성을 복사하여 상속할 수도 있음).

프로토타입 체인의 기본 아이디어는 프로토타입을 사용하여 하나의 참조 유형이 다른 참조 유형의 속성과 메서드를 상속하도록 하는 것입니다. 생성자, 프로토타입 및 예제 사이의 관계는 다음과 같습니다. 각 생성자는 프로토타입 개체를 가지며, 프로토타입 개체에는 생성자에 대한 포인터가 포함되고, 인스턴스에는 프로토타입에 대한 내부 포인터가 포함됩니다. 따라서 프로토타입 객체를 다른 유형의 인스턴스와 동일하게 만듦으로써 프로토타입 객체는 다른 프로토타입에 대한 포인터를 포함하게 되며, 그에 따라 다른 프로토타입에도 다른 생성자에 대한 이 포인터가 포함됩니다. 다른 프로토타입이 다른 유형의 인스턴스인 경우 위의 관계는 여전히 유지되며, 레이어별로 인스턴스와 프로토타입의 체인이 형성됩니다. 이것이 프로토타입 체인의 기본 개념이다.

읽기가 혼란스럽고 이해하기 어렵습니다. 예시를 통해 직접 검증해보세요.

1. 프로토타입 체인 상속

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

function Parent() {
this.pname = 'parent';
}
Parent.prototype.getParentName = function() {
return this.pname;
function Child() {
this.cname = 'child';
}
//자식 생성자 프로토타입은 상위 생성자의 인스턴스로 설정되어 Child가 getParentName 메소드
Child .prototype = new Parent();
Child.prototype.getChildName = function() {
return this.cname;

var c = new 자식();
경고(c.getParentName()); //부모


그림:


프로토타입 체인 문제, 상위 클래스에 참조 유형이 포함된 경우 Child.prototype = new Parent()는 상위 클래스의 참조 유형을 서브클래스의 프로토타입, 참조 유형 값의 프로토타입 속성은 모든 인스턴스에서 공유됩니다. 문제는 섹션 [1, 2]에서 다시 발생합니다.

2. 조합 상속 - 가장 일반적으로 사용되는 상속 방식

조합 상속은 프로토타입 체인과 차용 생성자(적용, 호출) 기술을 결합한 것입니다. 아이디어는 프로토타입 체인을 사용하여 프로토타입 속성과 메서드의 상속을 달성하고 생성자를 빌려 인스턴스 속성의 상속을 달성하는 것입니다. 이런 방식으로 함수 재사용을 달성하기 위해 프로토타입에 메서드를 정의할 수 있으며, 각 인스턴스가 고유한 속성을 갖도록 보장할 수 있습니다.

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

function Parent(name) {
this.name = 이름;
this.colors = ['빨간색', '노란색'];
}
Parent.prototype.sayName = function() {
alert(this.name);
}

function Child(이름, 나이) {
Parent.call(this, 이름); //Parent()를 두 번째로 호출합니다.
this.age = age; 🎜>}

Child.prototype = new Parent(); //Parent()가 처음 호출되면 상위 클래스의 속성은
Child.prototype.sayAge = function() {
alert(this.age );
}

var c1 = new Child('zhangsan', 20)
var c2 = new Child('lisi', 21); 🎜>c1.colors.push('blue');
alert(c1.colors); //red,yellow,blue
c1.sayName(); //zhangsan
c1.sayAge() ; //20

alert(c2.colors); //빨간색, 노란색
c2.sayName(); //lisi
c2.sayAge(); 🎜>
조합 상속 문제는 상위 유형 생성자가 매번 두 번 호출된다는 것입니다. 한 번은 하위 유형 프로토타입을 생성할 때, 다른 한 번은 하위 유형 생성자 내부에서 호출됩니다. 이로 인해 속성이 다시 작성됩니다. 하위 유형 생성자는 상위 클래스의 속성을 포함하고 하위 클래스의 프로토타입 객체에는 상위 클래스의 속성도 포함됩니다.

3. 기생 조합 상속 - 가장 완벽한 상속 방법

소위 기생 조합 상속은 생성자를 빌려 속성을 상속하고 프로토타입 체인의 하이브리드 형태를 통해 메서드를 상속하는 것을 의미합니다. 그 뒤에 있는 기본 아이디어는 하위 클래스의 프로토타입을 지정하기 위해 상위 유형의 생성자를 호출하는 대신 상위 유형의 프로토타입 복사본




코드 복사

코드는 다음과 같습니다. function Extension(child, parent) { var F = function(){} //빈 생성자 정의 F.prototype = parent.prototype; //부모 클래스의 프로토타입으로 설정

child.prototype = new F(); //서브클래스의 프로토타입을 F의 인스턴스로 설정하여 프로토타입 체인을 형성합니다.

child .prototype.constructor = child; //하위 클래스 생성자 포인터 재할당
}

function Parent(name) {
this.name =
this.colors = [ ' 빨간색', '노란색'];
}
Parent.prototype.sayName = function() {
alert(this.name)
}

function Child(이름 , age) {
Parent.call(this, name);
this.age = age
}

extend(Child, Parent); .prototype.sayAge = function() {
alert(this.age);
}

var c1 = new Child('zhangsan', 20)
var c2 = new Child ( 'lisi', 21);

c1.colors.push('blue');
alert(c1.colors); //red,yellow,blue
c1.sayName() ; //장산
c1.sayAge(); //20
alert(c2.colors); //red,yellow
c2.sayName(); ) ; //21