대부분의 프로그래밍 언어에는 클래스와 객체가 있으며 한 클래스는 다른 클래스를 상속받을 수 있습니다.
JavaScript에서 상속은 프로토 타입 기반이므로 JavaScript에는 클래스가 없으며 대신 하나는 다른 객체를 상속합니다. :)
1. 상속, 프로토
JavaScript에서, 물체 토끼가 다른 물체 동물을 물려받을 때, 그것은 토끼 대상에 특별한 특성이있을 것임을 의미합니다. 토끼 .__ proto__ = 동물;
토끼 물체에 액세스 할 때, 통역사가 토끼에서 속성을 찾을 수없는 경우, __proto__ 체인을 따라 동물 물체에서 검색됩니다.
밤나무의 __proto__ 속성은 크롬과 파이어 폭스에서만 액세스 할 수 있습니다. 밤나무를 참조하십시오 :
var 동물 = {eats : true} var rabbit = {jumps : true} Rabbit .__ proto__ = 동물 // 상속자 (Rabbit.eats) // trueEATS 속성은 동물 대상에서 액세스됩니다.
토끼 객체에서 속성이 발견되면 프로토 속성을 확인하지 않습니다.
또 다른 밤을 보내겠습니다. 서브 클래스에 EATS 속성이 있으면 부모 클래스에 액세스되지 않습니다.
var 동물 = {eats : true} var feduprabbit = {eats : false} feduprabbit .__ proto__ = 동물 알림 (Feduprabbit.eats) // false동물에 기능을 추가 할 수 있으며 토끼에서도 액세스 할 수도 있습니다.
var 동물 = {eat : function () {alert ( "I 'm Full") this.full = true}} var Rabbit = {jump : function () { / * something * /}} 토끼 .__ proto__ = 동물(1) Rabbit.eat () :
Rabbit.eat () 함수는 다음 두 단계에서 실행됩니다.
먼저, 통역사는 Rabbit.eat를 찾습니다. 토끼에는 식사 기능이 없으므로 토끼를 따라 쳐다보고 동물에서 발견했습니다.
함수는 이것 = 토끼로 실행됩니다. 이 값은 __proto__ 속성과 관련이 없습니다.
그래서 이것은 토끼에서 true.
우리가 여기서 어떤 새로운 발견을했는지 봅시다. 객체는 부모 함수를 호출하지만 여전히 객체 자체를 가리 킵니다.
__proto__에 의해 언급 된 대상은 프로토 타입이라고하며 동물은 토끼의 프로토 타입입니다 (번역기 참고 : 이것은 토끼의 __proto__ 속성입니다.
(2) 글을 읽을 때가 아니라 읽을 때 검색하십시오
this.prop과 같은 객체를 읽을 때 통역사는 프로토 타입의 속성을 찾습니다.
this.prop = value와 같은 속성 값을 설정할 때 검색 할 이유가 없으며이 속성 (prop) 이이 개체에 직접 추가됩니다 (이것은 이것이). obj.prop 삭제는 비슷하며 객체 자체의 특성 만 삭제하고 프로토 타입의 속성은 그대로 유지됩니다.
(3) 프로토 정보
가이드를 읽는 경우 여기서 우리는 가이드에 [[[프로토 타입]]으로 표시되는 __proto__라고 호출합니다. 프로토 타입이라는 다른 속성이 있기 때문에 두 브래킷 모두 중요합니다.
2. Object.create, Object.getPrototype
__proto__는 Chrome/Firefox에서 제공하는 비표준 속성이며 다른 브라우저에서는 보이지 않습니다.
오페라 (예 :> 9)를 제외한 모든 최신 브라우저는 프로토 타입 문제를 처리하기위한 두 가지 표준 기능을 지원합니다.
Object.ceate (prop [, props])
주어진 프로토로 빈 개체를 만듭니다.
var 동물 = {eats : true} rabbit = 객체.위의 코드는 빈 토끼 물체를 생성하고 프로토 타입은 동물에게 설정됩니다.
토끼 물체가 만들어지면 속성을 추가 할 수 있습니다.
var 동물 = {eats : true} Rabbit = Object.create (동물) Rabbit.jumps = true개체의 두 번째 매개 변수는 선택 사항이며, 이는 특성을 새 개체처럼 설정할 수 있도록합니다. 이것은 우리 관계의 상속 때문에 생략됩니다.
(1) Object.getPrototype (OBJ)
obj .__ proto__의 값을 반환합니다. 이 기능은 표준이며 __proto__ 속성에 직접 액세스 할 수없는 브라우저에서 사용할 수 있습니다.
var 동물 = {eats : true} rabbit = 객체.최신 브라우저는 __proto__ 속성 값을 읽을 수 있지만 설정할 수는 없습니다.
3. 프로토 타입
생성자 함수를 사용하는 __proto__ 속성을 설정하는 몇 가지 좋은 크로스 브라우저 방법이 있습니다. 기억하다! 모든 함수는 새 키워드를 통해 객체를 만듭니다.
밤나무 :
기능 토끼 (이름) {this.name = name} var 토끼 = 새로운 토끼 ( 'John') Alert (Rabbit.name) // John새 작전은 프로토 타입의 속성을 토끼 물체의 __proto__ 특성으로 설정합니다.
예를 들어 동물을 물려받는 새로운 토끼 물체와 같은 원리를 살펴 보겠습니다.
var 동물 = {eats : true} 함수 토끼 (이름) {this.name = name} rabbit.prototype = AnimalVar Rabbit = new Rabbit ( 'John') 경고 (토끼 .eats) // true, rabbit .__ proto__ == 동물Rabbit.prototype = 동물 문자 그럴 수단 : set __proto__ = New Rabbit에 의해 생성 된 모든 물체에 대한 동물
4. 크로스 브라우저 개체.
Object.create (prop) 함수는 주어진 객체에서 직접 상속을 허용하기 때문에 강력합니다. 다음 코드로 시뮬레이션 할 수 있습니다.
함수 상속 (proto) {function f () {} f. prototype = proto return new f}상속 (동물)은 물체와 정확히 동일합니다.
밤나무 :
var 동물 = {eats : true} var rabbit = hinherit (동물) 경고 (Rabbit.eats) // truealert (Rabbit.hasownproperty ( 'eats')) // false, 프로토 타입에서 false원리가 무엇인지 살펴 보겠습니다.
함수 상속 (proto) {function f () {} // (1) f.prototype = proto // (2) return new f () // (3)}}(1) 새로운 함수가 생성되었고 함수가 이에 대한 속성을 설정하지 않았으므로`new F`는 빈 개체를 생성합니다.
(2)`F. prototype`은 프로토로 설정됩니다
(3)`new 'f는 빈 객체를 생성합니다.
(4) 빙고! 우리는`proto`를 상속하는 빈 개체를 얻습니다
이 기능은 다양한 라이브러리 및 프레임 워크에서 널리 사용됩니다.
기능은 옵션이있는 객체를 수락합니다
/ * 옵션은 메뉴 설정을 포함합니다 : 너비, 높이 등 */함수 메뉴 (옵션) {// ...} 특정 옵션 기능 메뉴 (옵션) {Options.Width = 옵션 |width || 300 // 기본값 설정 // ...}. . . 그러나 옵션이 외부 코드에서 사용될 수 있으므로 매개 변수 값을 변경하면 일부 잘못된 결과가 발생할 수 있습니다. 해결책은 옵션 객체를 복제하고 모든 속성을 새 개체에 복사 한 다음 새 개체에서 수정하는 것입니다.
상속 문제를 해결하는 방법은 무엇입니까? PS 옵션은 설정을 추가 할 수 있지만 삭제할 수는 없습니다.
해결책
옵션을 상속하고 서브 클래스에서 새 속성을 수정하거나 추가 할 수 있습니다.
함수 상속 (proto) {function f () {} f.prototype = proto return new f} 함수 메뉴 (옵션) {var opts = inherit (옵션) opts.width = opts.width || 300 // ...}모든 작업은 하위 관점에서만 유효합니다. 메뉴 메소드가 종료되면 외부 코드는 여전히 수정되지 않은 옵션 객체를 사용할 수 있습니다. 삭제 작업은 여기에서 매우 중요합니다. 너비가 프로토 타입의 속성 인 경우 삭제 opts.width는 아무런 영향을 미치지 않습니다.
5. Hasownproperty
모든 객체에는 속성 자체인지 프로토 타입인지 여부를 감지하는 데 사용할 수있는 모든 객체에는 프로파일 기능이 있습니다.
밤나무 :
기능 토끼 (이름) {this.name = name} prototype = {eats : true} var rabbit = new Rabbit ( 'John') Alert (prototypealert에서 Rabbit.hasownproperty ( 'name')))6. 상속 된 특성이 있거나없는 루핑
for..in 루프 출력 자체 및 프로토 타입을 포함하여 객체의 모든 속성.
함수 토끼 (이름) {this.name = name} prototype = {eats : true} var rabbit = new Rabbit ( 'john') for (alert (p + "=" + Rabbit [p]) // "이름"과 "Eats"}를 출력합니다.hasownproperty를 사용하여 객체의 속성을 필터링합니다.
함수 토끼 (이름) {this.name = name} prototype = {eats : true} var rabbit = new Rabbit ( 'john') for (var p in Rabbit) {if (! rabbit.hasownproperty (p)) 계속 // "eats"alert (p + "=" + rabbit [p]) // outputs "}7. 요약
JavaScript는 특수 속성 프로토를 통해 상속을 구현합니다
객체의 속성에 액세스 할 때 통역사가 객체에서 찾을 수없는 경우 기능 속성을 계속 찾을 수 있습니다. 이는 프로토 타입이 아닌 객체를 가리 킵니다.
obj.prop = value를 할당하고 obj.prop을 삭제하십시오
프로토 관리 :
Chrome과 Firefox는 객체의 __proto_ artipe에 직접 액세스 할 수 있습니다. 대부분의 최신 브라우저는 Object.getPrototype (OBJ)을 사용하여 읽기 전용 액세스를 지원합니다.
객체.
함수 상속 (proto) {function f () {} f.prototype = proto return new f ()}기타 방법 :
for..in 루프는 객체 (자체 및 프로토 타입 포함)의 모든 속성과 객체의 프로토 타입 체인을 출력합니다.
속성 소품이 객체 obj에 속한 경우 obj.hasownproperty (prop)는 true를 반환하고 그렇지 않으면 거짓을 반환합니다.