프로토 타입의 7 개 Koans

깊은 명상 후 시로 산이 파이어 폭스 산으로 내려 갔을 때 그의 마음은 깨끗하고 평화로웠다.

그러나 그의 손은 불안했고, 그 자체로 붓을 잡고 다음 음표를 적어 두었다.

0) 두 가지 다른 것을 “시제품”이라고 부를 수 있습니다.

• 와 같은 프로토 타입 속성 obj.prototype

• 원형 내부 속성으로 표시 [[Prototype]] ES5에서 .

  ES5를 통해 검색 할 수 있습니다 Object.getPrototypeOf().

  Firefox는 __proto__속성을 통해 확장 기능으로 액세스 할 수 있습니다 . ES6는 이제에 대한 선택적 요구 사항을 언급 합니다 __proto__.

1) 이러한 개념은 질문에 대답하기 위해 존재합니다.

내가 할 때 obj.propertyJS는 어디를 찾는가 .property?

직관적 인 고전 상속은 속성 조회에 영향을 미칩니다.

2)

• __proto__.에서와 같이 도트 속성 조회에 사용됩니다 obj.property.
• .prototype를 사용 하여 객체를 생성 할 때 간접적으로 만 직접 조회하는 데 사용 되지 않습니다 .__proto__new

조회 순서는 다음과 같습니다.

• objobj.p = ...또는로 추가 된 속성Object.defineProperty(obj, ...)
• 의 속성 obj.__proto__
• 의 속성 obj.__proto__.__proto__ , 그리고에 이렇게
• 일부 경우 __proto__입니다 null반환 undefined.

이것이 소위 프로토 타입 체인입니다 입니다.

당신은 피할 수 .와 조회 obj.hasOwnProperty('key')및Object.getOwnPropertyNames(f)

3) 두 가지 주요 설정 방법이 있습니다 obj.__proto__.

• new:

  var F = function() {}
  var f = new F()

  그런 다음 new설정했습니다 :

  f.__proto__ === F.prototype

  이것이.prototype 사용되는 곳 입니다.

• Object.create:

   f = Object.create(proto)

  세트 :

  f.__proto__ === proto

4) 코드 :

var F = function(i) { this.i = i }
var f = new F(1)

다음 다이어그램에 해당합니다 (일부 Number는 생략).

(Function)       (  F  )                                      (f)----->(1)
 |  ^             | | ^                                        |   i    |
 |  |             | | |                                        |        |
 |  |             | | +-------------------------+              |        |
 |  |constructor  | |                           |              |        |
 |  |             | +--------------+            |              |        |
 |  |             |                |            |              |        |
 |  |             |                |            |              |        |
 |[[Prototype]]   |[[Prototype]]   |prototype   |constructor   |[[Prototype]]
 |  |             |                |            |              |        |
 |  |             |                |            |              |        |
 |  |             |                | +----------+              |        |
 |  |             |                | |                         |        |
 |  |             |                | | +-----------------------+        |
 |  |             |                | | |                                |
 v  |             v                v | v                                |
(Function.prototype)              (F.prototype)                         |
 |                                 |                                    |
 |                                 |                                    |
 |[[Prototype]]                    |[[Prototype]]          [[Prototype]]|
 |                                 |                                    |
 |                                 |                                    |
 | +-------------------------------+                                    |
 | |                                                                    |
 v v                                                                    v
(Object.prototype)                                       (Number.prototype)
 | | ^
 | | |
 | | +---------------------------+
 | |                             |
 | +--------------+              |
 |                |              |
 |                |              |
 |[[Prototype]]   |constructor   |prototype
 |                |              |
 |                |              |
 |                | -------------+
 |                | |
 v                v |
(null)           (Object)

이 다이어그램은 많은 언어 사전 정의 된 오브젝트 노드를 보여줍니다.

• null
• Object
• Object.prototype
• Function
• Function.prototype
• 1
• Number.prototype( (1).__proto__구문을 만족시키기 위해 필수 인 괄호 로 찾을 수 있음 )

우리의 두 줄의 코드는 다음과 같은 새로운 객체 만 만들었습니다.

• f
• F
• F.prototype

if당신이 할 때 의 속성입니다 :

var f = new F(1)

이 평가 F에 this가치있는 new다음에 할당됩니다 반환됩니다, f.

5) .constructor 일반적으로 조회 를 F.prototype통해 발생합니다 ..

f.constructor === F
!f.hasOwnProperty('constructor')
Object.getPrototypeOf(f) === F.prototype
F.prototype.hasOwnProperty('constructor')
F.prototype.constructor === f.constructor

우리가 작성할 때 f.constructorJavaScript는 다음 .과 같이 조회를 수행합니다.

• f 이 없습니다 .constructor
• f.__proto__ === F.prototype가지고 .constructor === F, 가지고

클래식 OOP 언어와 매우 유사한 방식으로 필드 설정 등 을 구성하는 데 사용 f.constructor == F되므로 결과 는 직관적으로 정확 합니다.Ff

6) 프로토 타입 체인을 조작하여 클래식 상속 구문을 얻을 수 있습니다.

ES6는 이전에 가능한 프로토 타입 조작 광기를위한 구문 설탕 인 classand 및 extends키워드를 추가합니다 .

class C {
    constructor(i) {
        this.i = i
    }
    inc() {
        return this.i + 1
    }
}

class D extends C {
    constructor(i) {
        super(i)
    }
    inc2() {
        return this.i + 2
    }
}

// Inheritance syntax works as expected.
c = new C(1)
c.inc() === 2
(new D(1)).inc() === 2
(new D(1)).inc2() === 3

// "Classes" are just function objects.
C.constructor === Function
C.__proto__ === Function.prototype
D.constructor === Function
// D is a function "indirectly" through the chain.
D.__proto__ === C
D.__proto__.__proto__ === Function.prototype

// "extends" sets up the prototype chain so that base class
// lookups will work as expected
var d = new D(1)
d.__proto__ === D.prototype
D.prototype.__proto__ === C.prototype
// This is what `d.inc` actually does.
d.__proto__.__proto__.inc === C.prototype.inc

// Class variables
// No ES6 syntax sugar apparently:
// http://stackoverflow.com/questions/22528967/es6-class-variable-alternatives
C.c = 1
C.c === 1
// Because `D.__proto__ === C`.
D.c === 1
// Nothing makes this work.
d.c === undefined

사전 정의 된 모든 객체가없는 단순화 된 다이어그램 :

(c)----->(1)
 |   i
 |
 |
 |[[Prototype]]
 |
 |
 v    __proto__
(C)<--------------(D)         (d)
| |                |           |
| |                |           |
| |prototype       |prototype  |[[Prototype]]
| |                |           |
| |                |           |
| |                | +---------+
| |                | |
| |                | |
| |                v v
|[[Prototype]]    (D.prototype)--------> (inc2 function object)
| |                |             inc2
| |                |
| |                |[[Prototype]]
| |                |
| |                |
| | +--------------+
| | |
| | |
| v v
| (C.prototype)------->(inc function object)
|                inc
v
Function.prototype

다음이 어떻게 작동하는지 연구 해 봅시다.

c = new C(1)
c.inc() === 2

첫번째 라인 세트 c.i에1 “4)”에 설명 된대로 .

두 번째 줄에서, 우리가 할 때 :

c.inc()

• .inc[[Prototype]]체인을 통해 발견됩니다 : c-> C-> C.prototype->inc
• Javascript로 함수를 호출하면 X.Y()JavaScript 가 함수 호출 내에서 자동으로 this동일하게 설정 됩니다 !XY()

똑같은 논리도 설명 d.inc하고d.inc2 있습니다.

이 기사 https://javascript.info/class#not-just-a-syntax-sugar 는 class알 가치가있는 추가 효과를 언급합니다 . 일부 class키워드 는 키워드 가 없으면 달성 할 수 없습니다 (TODO check which).

• [[FunctionKind]]:"classConstructor"생성자를 new로 호출해야합니다. ES6 클래스 생성자가 일반 함수로 호출 할 수 없습니다 이유는 무엇인가는?
• 클래스 메소드는 열거 할 수 없습니다. 함께 할 수 있습니다Object.defineProperty .
• 항상 수업 use strict. use strict모든 기능에 대해 명시 적으로 수행 할 수 있으며 , 이는 지루합니다.

답변

var obj = new Object();
obj.test = function() { alert('Hello?'); };

function obj()
{
}

obj.prototype.test = function() { alert('Hello?'); };
var obj2 = new obj();
obj2.test();

object [[Prototype]] → anotherObject

object [[Prototype]] → aFunction.prototype

anObject.__proto__ === anotherObject

// (1) Object.create:
var object = Object.create(anotherObject)
// object.__proto__ = anotherObject

// (2) ES6 object initializer:
var object = { __proto__: anotherObject };
// object.__proto__ = anotherObject

// (3) Traditional JavaScript:
var object = new aFunction;
// object.__proto__ = aFunction.prototype

var object = Object.create(Object.prototype);
var object = { __proto__: Object.prototype }; // ES6 only
var object = new Object;