__proto__ VS. JavaScript의 프로토 타입 통해 Object.prototype을

이 그림은 모든 객체에 프로토 타입이 있음을 다시 보여줍니다. 생성자 함수 Foo에는 __proto__Function.prototype 이라는 고유 한 __proto__특성이 있으며,이 특성을 통해 Object.prototype을 다시 참조 합니다. 따라서 Foo.prototype은 b 및 c 객체의 프로토 타입을 나타내는 Foo의 명시 적 속성입니다.

var b = new Foo(20);
var c = new Foo(30);

의 차이점은 무엇입니까 __proto__와는 prototype?

여기에 이미지 설명을 입력하십시오

그림은 dmitrysoshnikov.com 에서 가져온 것 입니다.



답변

__proto__메소드 등을 해결하기 위해 조회 체인에서 사용되는 실제 오브젝트입니다. 다음을 사용 prototype하여 오브젝트를 작성할 __proto__때 빌드하는 데 사용 되는 오브젝트입니다 new.

( new Foo ).__proto__ === Foo.prototype;
( new Foo ).prototype === undefined;

답변

prototypeFunction 객체의 속성입니다. 해당 기능으로 구성된 객체의 프로토 타입입니다.

__proto__프로토 타입을 가리키는 객체의 내부 속성입니다. Object.getPrototypeOf(O)실제 표준 __proto__은 더 빠르지 만 현재 표준은 동등한 방법을 제공합니다 .

instanceof함수 와 prototype객체의 __proto__체인 을 비교하여 관계를 찾을 수 있으며을 변경하여 이러한 관계를 끊을 수 있습니다 prototype.

function Point(x, y) {
    this.x = x;
    this.y = y;
}

var myPoint = new Point();

// the following are all true
myPoint.__proto__ == Point.prototype
myPoint.__proto__.__proto__ == Object.prototype
myPoint instanceof Point;
myPoint instanceof Object;

다음 Point은 생성자 함수이며 절차 적으로 개체 (데이터 구조)를 작성합니다. myPoint에 의해 생성 된 객체 Point()이므로 당시에 Point.prototype저장됩니다 myPoint.__proto__.


답변

프로토 타입 속성은 함수가 선언 될 때 생성됩니다.

예를 들어 :

 function Person(dob){
    this.dob = dob
 }; 

Person.prototype위 함수를 선언하면 속성이 내부적으로 생성됩니다. new Person ()을 사용하여 작성된 Person 인스턴스가 공유하는 Person.prototype에 많은 특성을 추가 할 수 있습니다.

// adds a new method age to the Person.prototype Object.
Person.prototype.age = function(){return date-dob}; 

것을 주목할 필요가있다 Person.prototype한다 Object(이것은 필요에 따라 변경 될 수 있습니다) 기본적으로 리터럴.

를 사용하여 생성 된 모든 인스턴스 new Person()에는 __proto__을 가리키는 속성이 Person.prototype있습니다. 이것은 특정 객체의 속성을 찾기 위해 이동하는 데 사용되는 체인입니다.

var person1 = new Person(somedate);
var person2 = new Person(somedate);

2 개 인스턴스를 생성 Person,이 2 개의 객체는 호출 할 수있는 age방법 Person.prototype등을 person1.age, person2.age.

귀하의 질문에서 위의 그림에서, 당신은 볼 수 FooA는 Function Object따라서 그것은이 __proto__받는 링크 Function.prototype차례의 인스턴스 Object와이 __proto__링크를 Object.prototype. 여기에 프로토 링크 종료 __proto__에서 Object.prototype가리키는 null.

에 연결된 모든 객체는 프로토 체인의 모든 속성에 액세스 할 수 __proto__있으므로 프로토 타입 상속의 기초를 형성합니다.

__proto__프로토 타입 체인에 액세스하는 표준 방법은 아니지만 표준이지만 유사한 방법을 사용 Object.getPrototypeOf(obj)합니다.

instanceof연산자에 대한 아래 코드 는 더 나은 이해를 제공합니다.

객체 instanceof클래스 연산자는 객체가 클래스 true의 인스턴스 일 때,보다 구체적 Class.prototype으로 해당 객체의 프로토 체인에서 발견되면 객체는 해당 클래스의 인스턴스입니다.

function instanceOf(Func){
  var obj = this;
  while(obj !== null){
    if(Object.getPrototypeOf(obj) === Func.prototype)
      return true;
    obj = Object.getPrototypeOf(obj);
  }
  return false;
}      

위의 메소드는 다음과 같이 호출 할 수 있습니다 instanceOf.call(object, Class). 오브젝트가 클래스의 인스턴스 인 경우 true를 리턴합니다.


답변

그것을 생각하는 좋은 방법은 …

prototypeconstructor()기능에서 사용됩니다 . 그것이 실제로 그렇게 되었기 "prototypeToInstall"때문입니다.

__proto__오브젝트 해당 “설치된 원형”이다 (그 생성 /로부터 상기 대상물에 설치된 constructor()기능)


답변

함수를 만들어 보자

 function a (name) {
  this.name = name;
 }

자바 스크립트는이 코드를 실행하면 추가 prototype속성을하기 위해 a, prototype속성은 그 두 가지 속성을 가진 객체입니다 :

  1. constructor
  2. __proto__

우리가 할 때

a.prototype 그것은 반환

     constructor: a  // function definition
    __proto__: Object

보시 constructor다시피 함수 a자체에 지나지 않으며 JavaScript __proto__의 루트 수준 Object을 가리 킵니다 .

키워드로 a함수를 사용할 때 어떤 일이 발생하는지 봅시다 new.

var b = new a ('JavaScript');

JavaScript가이 코드를 실행하면 4 가지 작업이 수행됩니다.

  1. 빈 객체 인 새 객체를 만듭니다. // {}
  2. 그것은 생성 __proto__b그것을 가리 수 a.prototype있도록b.__proto__ === a.prototype
  3. 새로 생성 된 객체 (1 단계에서 생성)를 컨텍스트 (this)로 실행하여 a.prototype.constructor(함수 정의) 실행 a되므로 name‘JavaScript'(에 추가됨 this) 로 전달 된 속성 이 새로 생성 된 객체에 추가됩니다.
  4. var b는 새로 만든 개체에 할당 되도록 (1 단계에서 만든) 새로 만든 개체를 반환 합니다.

이제 우리가 추가 a.prototype.car = "BMW"하고 수행
b.car하면 출력 “BMW”가 나타납니다.

이것은 JavaScript가이 코드를 실행할 때 car속성 on을 검색했을 때 b사용 된 JavaScript b.__proto__(# 2에서 ‘a.prototype’을 가리 키도록 만든)를 찾지 못하고 car속성을 찾아서 “BMW”를 반환하기 때문입니다.


답변

프로토 타입 VS. __proto__ VS. [[원기]]

함수를 만들 때 프로토 타입 이라는 속성 개체 가 자동으로 만들어지고 (사용자가 직접 만들지 않은 경우 constructor) 함수 개체 ( )에 연결됩니다.
참고 :이 새로운 프로토 타입 객체는 기본 JavaScript 객체를 가리 키거나 내부-개인 링크가 있습니다.

예:

function Foo () {
    this.name = 'John Doe';
}

// Foo has an object property called prototype.
// prototype was created automatically when we declared the function Foo.
Foo.hasOwnProperty('prototype'); // true

// Now, we can assign properties and methods to it:
Foo.prototype.myName = function () {
    return 'My name is ' + this.name;
}

키워드 를 Foo사용하여 새 객체를 만드는 경우 new기본적으로 앞에서 설명한 함수 의 프로토 타입에 대한 내부 또는 개인 링크 가있는 새 객체를 만드는 것입니다 Foo.

var b = new Foo();

b.[[Prototype]] === Foo.prototype  // true

이중 괄호 프로토 타입 또는 just라는 해당 함수의 객체에
대한 전용 링크 [[Prototype]]입니다. 많은 브라우저들이 우리에게 공개 링크를 제공하고 있습니다 __proto__!

구체적으로는, __proto__실제로입니다 getter 함수 네이티브 자바 스크립트 객체에 속한다. 그것은 무엇이든의 내부 사설 프로토 타입 연계 반환 this구속력에게 (반환을 [[Prototype]]b) :

b.__proto__ === Foo.prototype // true

의 시작으로 getPrototypeOf 메소드를 ECMAScript5사용 하여 내부 개인 링크를 가져올 수도 있습니다 .

Object.getPrototypeOf(b) === b.__proto__ // true

참고 : 이 답변은 새로운 개체 또는 새 생성자를 작성의 전 과정을 포함하려고하지만, 도움이 더 나은 무엇인지 이해하지 못하는 __proto__, prototype그리고 [[Prototype]]어떻게 작동하는지.


답변

위의 훌륭한 답변 외에도 약간 명확하게하려면 :

function Person(name){
    this.name = name
 };

var eve = new Person("Eve");

eve.__proto__ == Person.prototype //true

eve.prototype  //undefined

인스턴스 에는 __proto__이 있고 클래스 에는 prototype이 있습니다.