__proto__ VS. JavaScript의 프로토 타입

이 그림은 모든 객체에 프로토 타입이 있음을 다시 보여줍니다. 생성자 함수 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

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

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

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

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

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

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

var eve = new Person("Eve");

eve.__proto__ == Person.prototype //true

eve.prototype  //undefined

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

JavaScript에서는 함수를 생성자로 사용할 수 있습니다. 즉, 새 키워드를 사용하여 객체로 객체를 만들 수 있습니다. 모든 생성자 함수는 그것들과 연결된 내장 객체와 함께 제공됩니다. 이 내장 객체를 프로토 타입이라고합니다.Instances of a constructor function use __proto__ to access the prototype property of its constructor function.

1. 먼저 생성자를 생성했습니다 : function Foo(){}. 분명히 Foo는 또 다른 기능입니다. 그러나 새 키워드를 사용하여 객체를 만들 수 있습니다. 그래서 우리는 그것을 생성자 함수라고 부릅니다.

2. 모든 함수에는 프로토 타입 속성이라고하는 고유 한 속성이 있습니다. 따라서 생성자 함수 Foo에는 프로토 타입을 가리키는 프로토 타입 속성이 있습니다 Foo.prototype(이미지 참조).

3. 생성자 함수 자체는 [[Function]] 생성자라고하는 시스템 생성자의 인스턴스 인 함수입니다. function Foo[[Function]] 생성자에 의해 생성 되었다고 말할 수 있습니다 . 그래서, __proto__우리의 Foo function것입니다 생성자의 프로토 타입 의지 포인트 Function.prototype.

4. Function.prototype그 자체는라는 다른 시스템 생성자로 구성된 객체 일뿐 [[Object]]입니다. 따라서 [[Object]]의 생성자입니다 Function.prototype. 우리 Function.prototype는의 인스턴스 라고 말할 수 있습니다 [[Object]]. 그래서 __proto__의 Function.prototype포인트 Object.prototype.

5. Object.prototype프로토 타입 체인에 서있는 마지막 사람입니다. 나는 그것이 건설되지 않았다는 것을 의미합니다. 이미 시스템에 있습니다. 그래서 그 __proto__지적 null.

6. 이제 우리는의 인스턴스에 온다 Foo. 를 사용하여 인스턴스를 만들면의 인스턴스 인 new Foo()새 객체가 생성 Foo됩니다. 즉 Foo, 이러한 인스턴스의 생성자입니다. 여기서 우리는 두 개의 인스턴스 (x와 y)를 만들었습니다. __proto__X 및 Y에 따라서 포인트 Foo.prototype.

요약:

__proto__객체 의 속성은 객체 prototype의 생성자 함수에 매핑되는 속성입니다 . 다시 말해:

instance.__proto__ === constructor.prototype // true

이것은 prototype객체 의 체인 을 형성하는 데 사용됩니다 . prototype체인 오브젝트의 속성에 대한 룩업 메커니즘이다. 객체의 속성에 액세스하면 JavaScript는 먼저 객체 자체를 살펴 봅니다. 해당 부동산이 발견되지 않으면 발견 protochain될 때까지 계속 올라갑니다.

예:

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

Person.prototype.age = 25;

const willem = new Person('Willem');

console.log(willem.__proto__ === Person.prototype); // the __proto__ property on the instance refers to the prototype of the constructor

console.log(willem.age); // 25 doesn't find it at willem object but is present at prototype
console.log(willem.__proto__.age); // now we are directly accessing the prototype of the Person function 

우리의 첫 번째 로그 결과 true는 앞에서 언급했듯이 __proto__생성자가 만든 인스턴스의 prototype속성이 생성자 의 속성을 참조하기 때문 입니다. JavaScript에서 함수는 객체이기도합니다. 객체에는 속성이있을 수 있으며 모든 함수의 기본 속성은 prototype이라는 속성입니다.

그런 다음이 함수를 생성자 함수로 사용하면이 함수에서 인스턴스화 된 객체는이라는 속성을받습니다 __proto__. 그리고이 __proto__속성은 prototype생성자 함수 의 속성 (기본적으로 모든 함수에 있음)을 나타냅니다.

이것이 왜 유용한가요?

JavaScript에는 'prototypal inheritance'Objects 라는 속성을 찾을 때 메커니즘 이 있습니다. 기본적으로 수행되는 작업은 다음과 같습니다.

• 먼저 속성이 개체 자체에 있는지 확인합니다. 그렇다면이 속성이 반환됩니다.
• 속성이 객체 자체에 없으면 'protochain'이 올라갑니다. 기본적으로 __proto__속성이 참조하는 개체를 봅니다 . 이 속성은에서 참조하는 객체에서 속성을 사용할 수 있는지 확인합니다 __proto__.
• 속성이 __proto__개체 에 없으면 __proto__체인 까지 올라가서 Object개체 까지 올라갑니다 .
• 객체와 그 prototype체인 의 어느 곳에서도 속성을 찾을 수 없으면 을 반환 undefined합니다.

예를 들면 다음과 같습니다.

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

let mySelf = new Person('Willem');

console.log(mySelf.__proto__ === Person.prototype);

console.log(mySelf.__proto__.__proto__ === Object.prototype);

나는 JS : this & Object Prototypes 에서 프로토 타입을 배우고 있습니다 .이 디자인은 그 아래의 디자인을 이해하고 많은 오해를 명확히하기위한 훌륭한 책 instanceof입니다.

그러나 나는 사람들이 여기에서 묻는 것과 같은 질문을 가지고 있습니다. 몇 가지 답변이 실제로 도움이되고 깨달았습니다. 또한 내 이해를 나누고 싶습니다.

프로토 타입이란 무엇입니까?

JavaScript의 객체에는 사양에서로 표시된 내부 속성 [[Prototype]]이 있으며 이는 단순히 다른 객체에 대한 참조입니다. 거의 모든 객체에는 null생성시이 속성에 대해 값이 아닌 값 이 부여 됩니다.

객체의 프로토 타입을 얻는 방법?

를 통해 __proto__또는Object.getPrototypeOf

var a = { name: "wendi" };
a.__proto__ === Object.prototype // true
Object.getPrototypeOf(a) === Object.prototype // true

function Foo() {};
var b = new Foo();
b.__proto__ === Foo.prototype
b.__proto__.__proto__ === Object.prototype

무엇입니까 prototype?

prototype는 함수 의 특수 속성으로 자동 생성 된 객체로 , 위임 (상속) 체인 (일명 프로토 타입 체인)을 설정하는 데 사용됩니다.

우리는 함수를 만들 때 a, prototype자동으로 특별한 속성으로 생성 a하고, 등의 기능 코드를 저장 constructor에 prototype.

function Foo() {};
Foo.prototype // Object {constructor: function}
Foo.prototype.constructor === Foo // true

이 속성을 함수 객체의 속성 (메서드 포함)을 저장하는 장소로 생각하고 싶습니다. 그것은 또한 JS에서 유틸리티 기능은 다음과 같이 정의되는 이유입니다 Array.prototype.forEach(), Function.prototype.bind(),Object.prototype.toString().

함수 의 속성을 강조해야하는 이유는 무엇 입니까?

{}.prototype // undefined;
(function(){}).prototype // Object {constructor: function}

// The example above shows object does not have the prototype property.
// But we have Object.prototype, which implies an interesting fact that
typeof Object === "function"
var obj = new Object();

그래서, Arary, Function, Object모든 기능은 다음과 같습니다. 이것이 JS에 대한 인상을 새롭게한다는 것을 인정해야합니다. 나는 JS에서 함수가 일류 시민이라는 것을 알고 있지만 함수에 내장 된 것 같습니다.

차이 무엇 __proto__과 prototype?

__proto__참조는 모든 객체 에서 작동 하여 해당 [[Prototype]]속성을 나타냅니다.

prototype는 함수 의 특수 속성으로 자동 생성되는 객체 로, 함수 객체의 속성 (메서드 포함)을 저장하는 데 사용됩니다.

이 두 가지를 사용하여 프로토 타입 체인을 정신적으로 매핑 할 수 있습니다. 이 그림과 같이

function Foo() {}
var b = new Foo();

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

'use strict'
function A() {}
var a = new A();
class B extends A {}
var b = new B();
console.log('====='); // =====
console.log(B.__proto__ === A); // true
console.log(B.prototype.__proto__ === A.prototype); // true
console.log(b.__proto__ === B.prototype); // true
console.log(a.__proto__ === A.prototype); // true
console.log(A.__proto__ === Function.__proto__); // true
console.log(Object.__proto__ === Function.__proto__); // true
console.log(Object.prototype === Function.__proto__.__proto__); // true
console.log(Object.prototype.__proto__ === null); // true

JavaScript에서 모든 객체 (함수도 객체입니다!)에는 __proto__속성이 있으며 속성은 프로토 타입을 참조합니다.

new새로운 객체를 생성하기 위해 생성자와 함께 연산자를 사용할 때 , 새로운 객체의 __proto__속성은 생성자의 prototype속성 으로 설정되고 , 생성자는 새로운 객체에 의해 호출됩니다. 그 과정에서 "this"는 새로운 객체에 대한 참조가됩니다 생성자 범위에서 마지막으로 새 객체를 반환합니다.

생성자의 프로토 타입은 __proto__속성이고 생성자의 prototype속성은 new연산자 와 함께 작동합니다.

생성자는 함수 여야하지만, prototype속성 이 있더라도 함수는 항상 생성자가 아닙니다 .

프로토 타입 체인은 실제로 프로토 타입 __proto__을 참조하는 객체의 속성이고 __proto__프로토 타입의 프로토 타입을 참조하는 프로토 타입의 __proto__속성 등은 null 을 참조하는 객체의 프로토 타입 속성 을 참조 할 때까지 입니다.

예를 들면 다음과 같습니다.

console.log(a.constructor === A); // true
// "a" don't have constructor,
// so it reference to A.prototype by its ``__proto__`` property,
// and found constructor is reference to A

[[Prototype]]그리고 __proto__재산은 실제로 같은 것입니다.

Object의 getPrototypeOf 메소드를 사용하여 무언가의 프로토 타입을 얻을 수 있습니다.

console.log(Object.getPrototypeOf(a) === a.__proto__); // true

우리가 작성한 모든 함수는 new연산자 로 객체를 생성하는 데 사용할 수 있으므로 해당 함수는 누구나 생성자가 될 수 있습니다.

그것을 이해하는 또 다른 좋은 방법 :

var foo = {}

/* 
foo.constructor is Object, so foo.constructor.prototype is actually 
Object.prototype; Object.prototype in return is what foo.__proto__ links to. 
*/
console.log(foo.constructor.prototype === foo.__proto__);
// this proves what the above comment proclaims: Both statements evaluate to true.
console.log(foo.__proto__ === Object.prototype);
console.log(foo.constructor.prototype === Object.prototype);

IE11 __proto__이 지원 된 후에 만 가능합니다 . IE9와 같은 해당 버전 이전에는를 사용하여을 constructor얻을 수있었습니다 __proto__.

원기

prototype은 함수의 속성입니다. 새 키워드와 함께 (생성자) 기능을 사용하여 오브젝트를 작성하기위한 청사진입니다.

__proto__메서드, 속성을 확인하기 위해 조회 체인에서 사용됩니다. 새 키워드와 함께 생성자 함수를 사용하여 개체를 만들면 __proto__(생성자) Function.prototype으로 설정됩니다.

function Robot(name) {
    this.name = name;
}
var robot = new Robot();

// the following are true   
robot.__proto__ == Robot.prototype
robot.__proto__.__proto__ == Object.prototype

혼란을 없애기위한 나의 (가상적인) 설명은 다음과 같습니다.

기능과 관련된 가상의 클래스 (청사진 / 쿠키 커터)가 있다고 상상해보십시오. 이 가상의 클래스는 객체를 인스턴스화하는 데 사용됩니다. prototype가상의 클래스에 사물을 추가하는 확장 메커니즘 (C #의 확장 방법 또는 Swift Extension)입니다.

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

위의 내용은 다음과 같습니다.

// imaginary class
class Robot extends Object{

    static prototype = Robot.class  
    // Robot.prototype is the way to add things to Robot class
    // since Robot extends Object, therefore Robot.prototype.__proto__ == Object.prototype

    var __proto__;

    var name = "";

    // constructor
    function Robot(name) {

        this.__proto__ = prototype;
        prototype = undefined;

        this.name = name;
    }

} 

그래서,

var robot = new Robot();

robot.__proto__ == Robot.prototype
robot.prototype == undefined
robot.__proto__.__proto__ == Object.prototype

이제 prototype로봇에 메소드를 추가하십시오 .

Robot.prototype.move(x, y) = function(x, y){ Robot.position.x = x; Robot.position.y = y};
// Robot.prototype.move(x, y) ===(imagining)===> Robot.class.move(x, y)

위는 로봇 클래스의 확장으로 상상할 수 있습니다.

// Swift way of extention
extension Robot{
    function move(x, y){    
        Robot.position.x = x; Robot.position.y = y
    }
}

차례로

// imaginary class
class Robot{

    static prototype = Robot.class // Robot.prototype way to extend Robot class
    var __proto__;

    var name = "";

    // constructor
    function Robot(name) {

        this.__proto__ = prototype;
        prototype = undefined;

        this.name = name;
    }

    // added by prototype (as like C# extension method)
    function move(x, y){ 
        Robot.position.x = x; Robot.position.y = y
    };
}

간단히 말해 :

> var a = 1
undefined
> a.__proto__
[Number: 0]
> Number.prototype
[Number: 0]
> Number.prototype === a.__proto__
true

이를 통해 X 유형의 속성을 X.prototype에 첨부 할 수 있습니다. X 유형의 AFTER 객체가 인스턴스화되었으므로 Javascript 엔진이 프로토 타입 체인을 걸기 위해 사용하는 __proto__ 참조를 통해 새 속성에 계속 액세스 할 수 있습니다.

프로토 타입 또는 Object.prototype 은 객체 리터럴의 속성입니다. 프로토 타입 체인을 따라 더 많은 속성 또는 메서드를 추가하기 위해 재정의 할 수 있는 Object 프로토 타입 객체를 나타냅니다 .

__proto__ 는 액세스되는 객체의 내부 프로토 타입을 노출하는 접근 자 속성 (get 및 set 함수)입니다.

참고 문헌 :

1. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype

2. http://www.w3schools.com/js/js_object_prototypes.asp

3. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/proto

나는 늦었다. 그러나 그것을 단순화 시키려고 노력하자.

함수가 있다고하자

    function Foo(message){

         this.message = message ; 
     };

     console.log(Foo.prototype);

Foo 함수에는 프로토 타입 객체가 연결됩니다. 따라서 JavaScript로 함수를 만들 때마다 항상 프로토 타입 객체가 연결됩니다.

이제 Foo 함수를 사용하여 두 개의 객체를 만듭니다.

    var a = new Foo("a");
    var b = new Foo("b");
    console.log(a.message);
    console.log(b.message);

1. 이제 객체 a와 객체 b의 두 객체가 있습니다. 둘 다 생성자 Foo를 사용하여 작성됩니다. 생성자는 단지 단어라는 것을 명심하십시오.
2. 객체 a와 b에는 메시지 속성의 사본이 있습니다.
3. 이 두 객체 a와 b는 생성자 Foo의 프로토 타입 객체에 연결됩니다.
4. 객체 a와 b에서는 모든 브라우저에서 proto 속성을 사용하여 Foo 프로토 타입에 액세스 할 수 있으며 IE에서는 Object.getPrototypeOf (a) 또는 Object.getPrototypeOf (b)를 사용할 수 있습니다.

이제 Foo. 프로토 타입 프로토 , 및 b. proto는 모두 동일한 객체를 나타냅니다.

    b.__proto__ === Object.getPrototypeOf(a);
    a.__proto__ ===  Foo.prototype;
    a.constructor.prototype  === a.__proto__;

위의 모든 것은 true를 반환합니다.

아시다시피 JavaScript 속성에서 동적으로 추가 할 수 있습니다. 객체에 속성을 추가 할 수 있습니다

    Foo.prototype.Greet = function(){

         console.log(this.message);
    }
    a.Greet();//a
    b.Greet();//b
    a.constructor.prototype.Greet();//undefined 

보시다시피 Foo.prototype에 Greet () 메소드를 추가했지만 a와 b 또는 Foo를 사용하여 구성된 다른 객체에서 액세스 할 수 있습니다.

a.Greet ()을 실행하는 동안 JavaScript는 먼저 객체 목록의 Greet을 검색합니다. 를 찾지 못하면 a의 프로토 체인 에서 올라갑니다 . 이후로. proto 와 Foo.prototype은 동일한 객체입니다. JavaScript는 Greet () 메소드를 찾아서 실행합니다.

이제 프로토 타입과 프로토 타입 이 약간 단순화 되기를 바랍니다 .

설명 예 :

function Dog(){}
Dog.prototype.bark = "woof"

let myPuppie = new Dog()

이제 myPupppie에는 __proto__Dog.prototype을 가리키는 속성이 있습니다.

> myPuppie.__proto__
>> {bark: "woof", constructor: ƒ}

그러나 myPuppie에는 프로토 타입 속성이 없습니다.

> myPuppie.prototype
>> undefined

따라서 __proto__mypuppie 의이 객체를 인스턴스화하는 데 사용 된 생성자 함수의 .prototype 속성에 대한 참조 이며 현재 myPuppie 객체는이 객체와 "대리인"관계가있는 __proto__반면 myPuppie의 .prototype 속성은 단순히 존재하지 않습니다 ( 우리는 그것을 설정하지 않았다).

MPJ의 좋은 설명 : 프로토 대 프로토 타입 -JavaScript에서 객체 생성

다음 코드 스 니펫을 나타내는 작은 그림을 만들었습니다.

var Cat = function() {}
var tom = new Cat()

나는 고전적인 OO 배경을 가지고 있으므로 이런 식으로 계층을 나타내는 것이 도움이되었습니다. 이 다이어그램을 쉽게 읽을 수 있도록 이미지의 사각형을 JavaScript 객체로 취급하십시오. 그렇습니다. 함수도 객체입니다. ;)

JavaScript의 객체에는 속성 __proto__이 있으며 그중 하나 일뿐입니다.

이 속성의 기본 개념은 (상속) 계층의 조상 객체를 가리키는 것입니다.

JavaScript의 루트 개체는 Object.prototype다른 모든 개체는이 개체의 자손입니다. __proto__루트 개체 의 속성은 null입니다. 상속 체인의 끝을 나타냅니다.

이것이 prototype함수의 속성 이라는 것을 알 수 있습니다. Cat함수이지만, 또한 Function하고 Object있습니다 (기본) 기능을합니다. tom함수가 아니므로이 속성이 없습니다.

이 속성의 기본 개념은 구성에 사용될 개체, 즉 new해당 함수 에서 연산자 를 호출 할 때 사용되는 개체를 가리키는 것 입니다.

프로토 타입 객체 (노란색 사각형)에는 constructor각각의 함수 객체를 가리키는 다른 속성이 있습니다. 간결한 이유로 이것은 묘사되지 않았습니다.

실제로로 tom객체를 만들면 생성 된 객체 new Cat()의 __proto__속성 prototype이 생성자 함수 의 객체로 설정됩니다 .

결국이 다이어그램을 약간 살펴 보도록하겠습니다. 다음 진술은 사실입니다.

• tom.__proto__속성은와 동일한 객체를 가리 킵니다 Cat.prototype.

• Cat.__proto__Function.prototype좋아 Function.__proto__하고 Object.__proto__하는 것과 같이 물건을 가리킨다 .

• Cat.prototype.__proto__와 tom.__proto__.__proto__같은 개체를 가리킨 즉 Object.prototype.

건배!

정의

(괄호 안의 숫자 ()는 아래에 작성된 코드에 대한 '링크'입니다)

prototype-다음으로 구성된 객체 :
=>이 특정 기능 (3) ConstructorFunction.prototype(5)이 생성자 함수를 통해 생성되거나 생성 될 각 개체 (4)에 의해 액세스 가능한 기능 (1)
=> 생성자 함수 자체 (1) )
=> __proto__이 특정 객체 (시제품 객체)

__proto__(dandor proto?)-특정 생성자 함수 (1)를 통해 생성 된 객체 (2)와 해당 생성자의 프로토 타입 객체 속성 (5) 사이의 링크로 생성 된 각 객체 (2)가 프로토 타입의 기능에 액세스 할 수 있습니다. 메소드 (4) ( __proto__기본적으로 JS의 모든 단일 오브젝트에 포함됨)

코드 설명

1.

    function Person (name, age) {
        this.name = name;
        this.age = age;  

    } 

2.

    var John = new Person(‘John’, 37);
    // John is an object

삼.

    Person.prototype.getOlder = function() {
        this.age++;
    }
    // getOlder is a key that has a value of the function

4.

    John.getOlder();

5.

    Person.prototype;

나는 4 학년 설명을 시도 할 것이다 :

일이 매우 간단합니다. A prototype는 무언가를 어떻게 구축해야하는지에 대한 예입니다. 그래서:

• 나는 a function와 나는 비슷한 새로운 물체를 만든다prototype

• 나는 예를 들어 object내 __proto__것을 사용하여 지어졌습니다.

증거 :

function Foo() { }

var bar = new Foo()

// `bar` is constructed from how Foo knows to construct objects
bar.__proto__ === Foo.prototype // => true

// bar is an instance - it does not know how to create objects
bar.prototype // => undefined

생성하는 모든 함수에는이라는 속성이 prototype있으며 수명은 빈 개체로 시작됩니다. 이 속성은 생성자 함수로 'new'키워드와 함께이 함수를 사용할 때까지 사용되지 않습니다.

이것은 종종 __proto__객체 의 속성 과 혼동됩니다 . 일부는 혼란 스러울 수 prototype있으며 객체 의 속성으로 인해 객체의 프로토 타입이 생길 수 있습니다. 그러나 이것은 사실이 아닙니다. 함수 생성자에서 생성 된 객체 prototype를 얻는 데 사용됩니다 __proto__.

위의 예에서 :

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

var eve = new Person("Eve");

console.log(eve.__proto__ == Person.prototype) // true
// this is exactly what prototype does, made Person.prototype equal to eve.__proto__

나는 그것이 의미가 있기를 바랍니다.

__proto__정적 메소드 에 사용 하는 것은 어떻습니까?

function Foo(name){
  this.name = name
  Foo.__proto__.collection.push(this)
  Foo.__proto__.count++

}

Foo.__proto__.count=0
Foo.__proto__.collection=[]

var bar = new Foo('bar')
var baz = new Foo('baz')

Foo.count;//2
Foo.collection // [{...}, {...}]
bar.count // undefined

(function(){ 
      let a = function(){console.log(this.b)};
      a.prototype.b = 1;
      a.__proto__.b = 2;
      let q = new a();
      console.log(a.b);
      console.log(q.b) 
    })()

이해하기 위해이 코드를 사용해보십시오

Protypal Chaining에 사용되는 객체는 하나뿐입니다. :이 개체는 분명 이름과 값을 가지고 __proto__그 이름이며, prototype그 값입니다. 그게 다야.

이해하기 쉽도록이 게시물의 맨 위에있는 다이어그램 (dmitry soshnikov의 다이어그램)을 보면 가치 __proto__이외의 다른 점을 찾을 수 없습니다 prototype.

요점은 이것입니다 : __proto__프로토 타입 객체를 참조하는 이름이며 prototype실제 프로토 타입 객체입니다.

다음과 같이 말합니다.

let x = {name: 'john'};

x객체 이름 (포인터)이며 {name: 'john'}실제 객체 (데이터 값)입니다.

참고 : 이것은 그것들이 높은 수준과 어떻게 관련되어 있는지에 대한 매우 간단한 힌트입니다.

업데이트 : 다음은 더 나은 일러스트레이션을위한 간단한 구체적인 자바 스크립트 예제입니다.

let x = new String("testing") // Or any other javascript object you want to create

Object.getPrototypeOf(x) === x.__proto__; // true

때이 방법 Object.getPrototypeOf(x)우리의 실제 값 취득 x(프로토 타입입니다), 정확히 무엇 __proto__의이 x가리키고 있습니다. 따라서 __proto__실제로의 프로토 타입을 가리키고 x있습니다. 따라서 (의 포인터 )를 __proto__참조 하고 (그의 프로토 타입) 의 값입니다 .xxprototypex

나는 그것이 조금 분명해지기를 바랍니다.

이것은 프로토 타입 상속을 이해하려는 사람과 관련된 매우 중요한 질문입니다. 내가 이해하는 것에서, 함수는 정의에 따라 프로토 타입 객체를 가지고 있기 때문에 함수에서 객체로 객체를 새로 만들 때 프로토 타입이 기본적으로 할당됩니다.

function protofoo(){
}
var protofoo1 = new protofoo();
console.log(protofoo.prototype.toString()); //[object Object]

함수없이 명시 적으로 새로운 객체없이 일반 객체를 만들 때 프로토 타입은 없지만 프로토 타입을 할당 할 수 있는 빈 프로토 타입이 있습니다.

var foo={
  check: 10
};
console.log(foo.__proto__); // empty
console.log(bar.prototype); //  TypeError
foo.__proto__ = protofoo1; // assigned
console.log(foo.__proto__); //protofoo

Object.create를 사용하여 객체를 명시 적으로 연결할 수 있습니다.

// we can create `bar` and link it to `foo`
var bar = Object.create( foo );
bar.fooprops= "We checking prototypes";
console.log(bar.__proto__); // "foo"
console.log(bar.fooprops); // "We checking prototypes"
console.log(bar.check); // 10 is delegated to `foo`

__proto__생성 할 기본 prototype이자 생성자 함수입니다. 예 : 생성자 함수 의 새 인스턴스에서 공유되는 function human(){}has prototype입니다 __proto__. 더 자세한 내용은 여기를 참조 하십시오

으로 이 바르게 진술

__proto__메소드 등을 해결하기 위해 조회 체인에서 사용되는 실제 객체입니다. prototype은 __proto__new로 객체를 만들 때 작성하는 데 사용 되는 객체입니다.

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

우리는 더주의 할 __proto__메모리 위치로 향해 지적으로 객체의 속성이 기능 생성자 포인트를 사용하여 만든 프로토 타입 이 각각의 생성자의 재산입니다.

생성자 함수 프로토 타입 의 메모리 위치를 변경해도 __proto__파생 된 개체 의 메모리 주소는 계속 원래 주소 공간을 가리 킵니다. 따라서 상속 체인에서 공통 속성을 사용할 수있게하려면 속성을 다시 초기화하는 대신 항상 생성자 함수 prototype에 속성을 추가 하십시오 (메모리 주소가 변경됨).

다음 예제를 고려하십시오.

function Human(){
    this.speed = 25;
}

var himansh = new Human();

Human.prototype.showSpeed = function(){
    return this.speed;
}

himansh.__proto__ === Human.prototype;  //true
himansh.showSpeed();    //25

//now re-initialzing the Human.prototype aka changing its memory location
Human.prototype = {lhs: 2, rhs:3}

//himansh.__proto__ will still continue to point towards the same original memory location. 

himansh.__proto__ === Human.prototype;  //false
himansh.showSpeed();    //25

내 이해는 : __proto__ 및 프로토 타입은 모두 프로토 타입 체인 기술에 사용됩니다. 차이점은 밑줄로 명명 된 함수 (예 : __proto__)는 명시 적으로 호출 된 개발자를위한 것이 아닙니다. 다시 말해, 그들은 상속 등의 일부 메커니즘만을위한 것입니다. 그들은 '백엔드'입니다. 그러나 밑줄없이 이름이 지정된 함수는 명시 적으로 호출되도록 설계되었으며 '프론트 엔드'입니다.

!!! 이것은 세계에서 가장 좋은 설명입니다 !!!!!

var q = {}
var prototype = {prop: 11}

q.prop // undefined
q.__proto__ = prototype
q.prop // 11

함수 생성자에서 자바 스크립트 엔진은 q.__proto__ = prototype우리가 쓸 때 소품 세트 new Class에 이것을 자동으로 호출합니다.__proto__Class.prototype

function Class(){}
Class.prototype = {prop: 999} // set prototype as we need, before call new

var q = new Class() // q.__proto__ = Class.prototype
q.prop // 999

즐겨 %)