__proto__가 constructor.prototype과 어떻게 다릅니까?

__proto__가 constructor.prototype과 어떻게 다릅니까?

function Gadget(name, color)
{
   this.name = name;
   this.color = color;
}

Gadget.prototype.rating = 3

var newtoy = new Gadget("webcam", "black")

newtoy.constructor.prototype.constructor.prototype.constructor.prototype 

항상 등급 = 3의 개체를 반환합니다.

하지만 다음과 같이 하면 됩니다.

newtoy.__proto__.__proto__.__proto__

로 됩니다.null.

또한 익스플로러)에서 Internet Explorer() 에서 null null 가 은 무엇입니까?__proto__재산?

저는 최근에 이 문제에 대해 머리를 싸매려고 노력해왔고 마침내 이 문제를 충분히 설명할 수 있는 이 "지도"를 생각해 냈습니다.

https://i.stack.imgur.com/KFzI3.png

내가 이것을 처음으로 구성한 것이 아니라는 것을 알지만 그것을 발견하는 것이 더 흥미로웠습니다 :-).어쨌든, 그 후에 저는 이 그림을 발견했습니다. 제가 생각하기에 기본적으로 동일한 그림입니다.

자바스크립트 객체 레이아웃

가 가장 은 그 입니다.Object.__proto__킴을 .Function.prototype에, Object.prototype 에요 :-)

테스트를 원하는 사람이 있으면 이미지에 언급된 코드를 여기에 붙여넣습니다.점프 후 위치를 쉽게 알 수 있도록 오브젝트에 속성이 추가됩니다.

Object.O1='';
Object.prototype.Op1='';

Function.F1 = '';
Function.prototype.Fp1 = '';

Cat = function(){};
Cat.C1 = '';
Cat.prototype.Cp1 = '';

mycat = new Cat();
o = {};

// EDITED: using console.dir now instead of console.log
console.dir(mycat);
console.dir(o);

constructor된 [DontEnum]입니다가 속성입니다.prototype함수 개체의 속성이며 처음에 함수 개체 자체를 가리킵니다.

__proto__는 물체의 내부 프로토타입(Prototype) 속성, 즉 실제 프로토타입과 동등합니다.

할 때new자인형 됩니다]부가 됩니다.prototype소유물.

은..constructor입니다에게 할 것입니다..__proto__.constructor, 와 같이, , , , ,protoype이 함수의 속성은 개체의 [Prototype]을 설정하는 데 사용되었습니다.

뒤에 ..constructor.prototype.constructor합니다와 ..constructor(이러한 속성을 덮어쓰지 않는 한); 자세한 설명은 여기를 참조하십시오.

한다면__proto__를 사용할 수 있습니다. 개체의 실제 프로토타입 체인을 걸을 수 있습니다.자바스크립트는 심층 상속 계층 구조를 위해 설계되지 않았기 때문에 일반적인 ECMAscript3에서는 이를 수행할 방법이 없습니다.

은 를 .__proto__n에서 하고 있다는 __proto__소유물.

prototype만 특별합니다.Function)를 됩니다.new이 A합니다.Function시공자로서 이 이 경우,__proto__다로 됩니다.Function.prototype.

이는 다음에 추가한다는 것을 의미합니다.Function.prototype입니다가 있는 합니다.__proto__는.Function.prototype.

Function.prototype다른 개체가 있는 경우 업데이트되지 않습니다.__proto__이미 존재하는 개체의 속성입니다.

:__proto__속성에 직접 액세스하면 안 되며 Object.getPrototypeOf(object)를 대신 사용해야 합니다.

번째 의 __proto__그리고.prototype참고문헌, 유감스럽게도 스택 오버플로는 "10개 미만의 평판"을 가진 이미지를 추가할 수 없습니다.다음 기회로 미루죠.

은 []를 합니다.[[Prototype]]__proto__ECMAscript 규격이 내부 객체를 참조하는 방식이기 때문입니다.당신이 모든 것을 알아낼 수 있기를 바랍니다.

그림을 이해하는 데 도움이 되는 몇 가지 힌트는 다음과 같습니다.

red    = JavaScript Function constructor and its prototype
violet = JavaScript Object constructor and its prototype
green  = user-created objects
         (first created using Object constructor or object literal {},
          second using user-defined constructor function)
blue   = user-defined function and its prototype
         (when you create a function, two objects are created in memory:
          the function and its prototype)

:constructor속성은 생성된 개체에 존재하지 않지만 프로토타입에서 상속됩니다.

Object이고는Function담,담)Function합니다)를 사용합니다.Function.prototype 를 만듭니다.Object()을 은 누구입니까? 그렇다면 아담을 창조한 자는 누구인가 ( )Function -- :-).

utsaina의 답변에 따라 좀 더 유용한 정보를 추가하고 싶습니다.

가 가장 은 그 입니다.Object.__proto__킴을 .Function.prototype에, Object.prototype 에요 :-)

그러면 안 됩니다.Object.__proto__다를 안 .Object.prototype . 에의 instance)입니다.Object o,o.__proto__ 할Object.prototype.

합니다이라는 합니다.class그리고.instance자바스크립트로 하지만 당신은 알고 있습니다 :-)

는 그 이 이라고 생각합니다.Object그 한입니다.FunctionObject.__proto__ === Function.prototype . :Object이고는Function담,담)Function합니다)를 사용합니다.Function.prototype 를 만듭니다.Object).

심지어 학급 들 도, Function그 한입니다.Function그 체입니다.Function.__proto__ === Function.prototype, 그래서이기도 합니다.Function === Function.constructor

ㅇCat의 한 입니다.Function,Cat.__proto__ === Function.prototype.

때,, 이고, 의 할 를 만드는 Function.Object그리고.Function입니다,이지만에 수업입니다.Cat정규 수업입니다.

요인에 따라 구글 크롬 자바스크립트 엔진에서는 다음 4가지가 있습니다.

• Function.prototype
• Function.__proto__
• Object.__proto__
• Cat.__proto__

은 모두.===으로 같음)은 음)른 3.function Empty() {}

> Function.prototype
  function Empty() {}
> Function.__proto__
  function Empty() {}
> Object.__proto__
  function Empty() {}
> Cat.__proto__
  function Empty() {}
> Function.prototype === Function.__proto__
  true
> Function.__proto__ === Object.__proto__
  true
> Object.__proto__ === Cat.__proto__
  true

이 한 는 건가요?function Empty() {}(Function.prototype 생각해보세요 :-)

왜 사람들이 당신의 이해에 실질적인 문제가 어디에 있는지에 대해 당신을 바로잡지 않았는지 정말 모르겠습니다.

그러면 문제를 발견하기가 훨씬 쉬워질 것입니다.

그럼 무슨 일이 일어나고 있는지 알아보겠습니다.

var newtoy = new Gadget("webcam", "black")

newtoy 
  .constructor //newtoy's constructor function is newtoy ( the function itself)
    .prototype // the function has a prototype property.( all functions has)
      .constructor // constructor here is a **property** (why ? becuase you just did `prototype.constructor`... see the dot ? )  ! it is not(!) the constructor function  !!! this is where your mess begins. it points back to the constructor function itself ( newtoy function)
         .prototype // so again we are at line 3 of this code snippet
            .constructor //same as line 4 ...
                .prototype 
                 rating = 3

를 봅시다, .__proto__

에와 , 2가지 를 .__proto__:

1. 할 때new자,[[Prototype]]/proto__됩니다.prototype1속성(constructor function r'요.

2. 됨 — : JS 됨 — :Object.prototype.__proto__이다.null.

이 두 가지 사항을 "라고 언급해 보겠습니다.bill"

newtoy
     .__proto__ // When `newtoy` was created , Js put __proto__'s value equal to the value of the cunstructor's prototype value. which is `Gadget.prototype`.
       .__proto__ // Ok so now our starting point is `Gadget.prototype`. so  regarding "bill" who is the constructor function now? watch out !! it's a simple object ! a regular object ! prototype is a regular object!! so who is the constructor function of that object ? Right , it's the `function Object(){...}`.  Ok .( continuing "bill" ) does it has a `prototype` property ? sure. all function has. it's `Object.prototype`. just remember that when Gadget.prototype was created , it's internal `__proto__` was refered to `Object.prototype` becuase as "bill" says :"..will be set to the `prototype` property of   its `constructor function`"
          .__proto__ // Ok so now our satrting point is `Object.prototype`. STOP. read bullet 2.Object.prototype.__proto__ is null by definition. when Object.prototype ( as an object) was created , they SET THE __PROTO__ AS NULL HARDCODED

더 나아졌나요?

:__proto__입니다.prototype객체를 생성한 생성자의 속성입니다.

자바스크립트의 객체

자바스크립트 객체는 0개 이상의 속성 집합을 위한 내장형입니다.속성은 다른 개체, 원시 값 또는 함수를 보관하는 컨테이너입니다.

자바스크립트의 컨스트럭터

는 는(되는) 입니다를 [[Call]]ECMA-262 용어)에서 호출할 수 있지만 자바스크립트에서 또 다른 역할을 수행합니다: 만약 그것들이 호출되면 컨스트럭터(객체를 위한 공장)가 됩니다.new교환입니다. 다른 합니다.따라서 생성자는 다른 언어의 클래스와 대략적으로 유사합니다.

한 예입니다.Function이라는 특수 을 가진 함수 prototype프로토타입 기반 상속 및 공유 속성을 구현하는 데 사용됩니다.컨스트럭터 함수에 의해 생성된 모든 객체는 (프로토타입이라고 함) 암시적 참조를 갖습니다.__proto__으로 ) prototype.

prototype생성자에 의해 생성된 모든 객체는 해당 객체에 대한 참조를 상속하기 때문에 건물 객체에 대한 일종의 청사진입니다.prototype.

원형 체인

합니다를 합니다.[[Prototype]]아니면__proto__두 관계는 에 관한 것입니다. 개체는 수 있습니다 두 개체 간의 원형 관계는 상속에 관한 것입니다. 모든 개체는 다른 개체를 원형으로 가질 수 있습니다. 수 .null치.

로 입니다.__proto__속성은 프로토타입 체인이라고 불립니다.개체의 속성에 대한 참조를 만들 때 해당 참조는 프로토타입 체인의 첫 번째 개체에서 해당 이름의 속성을 포함하는 속성에 대한 것입니다.프로토타입 체인은 단일 개체인 것처럼 동작합니다.

할되거나 , 합니다일 을 계속합니다.__proto__합니다를 합니다.null.

프로토타입 체인을 사용하는 이러한 유형의 상속은 종종 클래스 체인을 사용하는 다른 언어와의 혼동을 피하기 위해 위임이라고 불립니다.

는 입니다의 입니다.Object,Object.prototype마지막으로 원형 사슬에 있지만Object.prototype다의 .Object.Object.prototype.__proto__합니다를 합니다.null.

로 를 만들 .null프로토타입은 다음과 같습니다.

var dict = Object.create(null);

이러한 객체는 리터럴 객체보다 더 나은 맵(사전)이므로 이러한 패턴을 dict 패턴(사전의 딕션)이라고 부르기도 합니다.

: 를 된 리터럴 {}Object({}).__proto__입니다에 입니다.Object.prototype.

모든 기능은 원형을 만들어냅니다.함수 생성자를 사용하여 객체를 생성하면 객체의 __proto_ 속성이 해당 함수의 프로토타입을 가리키기 시작합니다.

만약 그 모든 수치가 압도적이었다면, 그 속성이 무엇을 의미하는지 살펴봅시다.

STH.prototype

때 빈되어 에 연결됩니다.[[Prototype]] 이 쇄를 쇄prototype함수의 속성

function Gadget() {}
// in background, new object has been created
// we can access it with Gadget.prototype
// it looks somewhat like {constructor: Gadget}

하세요를 하세요.prototype할 수 다.

STH.시공자

는 1 를 .constructor 이 속성은 프로토타입 개체를 만든 함수를 나타냅니다.

var toy = new Gadget();

Gadget수,다 .{constructor: Gadget}- 한 같은 -다.Gadget.prototype.~하듯이constructor하며를 .toy.constructor합니다.Gadget기능.우리는 글을 씁니다.toy.constructor.prototypeg어려지고 .{constructor: Gadget}시.

를 할 수 toy.constructor.prototype.constructor.prototype.constructor.prototype.constructor.prototype.constructor.prototype.constructor.prototype.constructor.prototype.constructor.prototype입니다일 Gadget.prototype.

toy
.constructor    // Gadget
.prototype    // {constructor: Gadget}
.constructor    // Gadget
.prototype    // {constructor: Gadget}
// ...

STH.__proto__

하는 동안에prototype 한 속성입니다.__proto__다에 있는 에 대해 할 수 있습니다.Object.prototype할 수 을 말합니다 객체를 생성할 수 있는 기능의 원형을 말합니다.

[].__proto__ === Array.prototype
// true

({}).__proto === Object.prototype
// true

여기서,toy.__proto__이다.Gadget.prototype.~하듯이Gadget.prototype입니다)입니다.{}및는 ) 로 됩니다.Object예),수조),를 얻습니다.Object.prototype 객체입니다.__proto__다만 수 .null.

toy
.__proto__    // Gadget.prototype (object looking like {constructor: Gadget})
.__proto__    // Object.prototype (topmost object in JS)
.__proto__    // null - Object.prototype is the end of any chain

자바스크립트의 프로토타입은 모두에게 혼란을 줍니다.

임의의 유형(Object, String, Array 등)의 생성자가 처음에는Function Object그것이 그들을 만들어 냅니다.객체 유형 값/객체가 생성되면, 각 값이 생성될 때 함수 생성자가 생성하는 고유 속성 및 객체인 자신의 프로토타입이 할당됩니다.그러나 시작하는 자바스크립트의 모든 객체/타입(Object, String, Array 등)의 프로토타입은 모두Function.prototype. 그것들은 모두 사물의 인스턴스와 메모리의 원시적인 가치를 만드는 데 필요한 함수와 그 생성자로부터 파생됩니다!함수 생성자가 가치를 창출하기 전까지는 "prototyoe" 속성과 상속받은 개체 프로토타입 모두 고유한 프로토타입을 할당받을 수 없습니다.

이것은 인터넷의 99%의 온라인 웹 페이지가 여러분에게 알려주지 않는 것입니다!

를 들면 .Number는 String Array, Boolean등)다가 .Number.constructor은 , 합니다.Function Object"Number" 유형에 할당됩니다.이것이 "Number"가 "Constructor"라고 불리는 이유입니다. 그 은.Function.prototype당신이 확인할 때.e을 한 후Number형 되었습니다.Number.prototype 그것을 아래에서 증명해 봅시다!

여기 간단한 설명이 있습니다.아래는 대부분의 자바스크립트 객체가 null부터 시작하여 객체 유형으로 상속하는 방법입니다.

String   < Function < Object < null
Array    < Function < Object < null
Object   < Function < Object < null
Function < Function < Object < null

여기 증거가 있습니다!아래는 각 객체별로 발견된 프로토타입을 요청하는 것입니다.고:Object.prototype.toString.call()프로토타입의 문자열 이름만 알려주시면 됩니다.

Object.prototype.toString.call(String);// [object Function]
Object.prototype.toString.call(Array);// [object Function]
Object.prototype.toString.call(Object);// [object Function]
Object.prototype.toString.call(Function);// [object Function]

Object.prototype.toString.call(String.__proto__);// [object Function]
Object.prototype.toString.call(Array.__proto__);// [object Function]
Object.prototype.toString.call(Object.__proto__);// [object Function]
Object.prototype.toString.call(Function.__proto__);// [object Function]

Object.prototype.toString.call(String.__proto__.__proto__);// [object Object]
Object.prototype.toString.call(Array.__proto__.__proto__);// [object Object]
Object.prototype.toString.call(Object.__proto__.__proto__);// [object Object]
Object.prototype.toString.call(Function.__proto__.__proto__);// [object Object]

Object.prototype.toString.call(String.__proto__.__proto__.__proto__);// [object Null]
Object.prototype.toString.call(Array.__proto__.__proto__.__proto__);// [object Null]
Object.prototype.toString.call(Object.__proto__.__proto__.__proto__);// [object Null]
Object.prototype.toString.call(Function.__proto__.__proto__.__proto__);// [object Null]

"[object Function]" 문자열은 해당 유형의 "prototype" 또는 상위 개체가 "Function.prototype"임을 나타냅니다.따라서 각 수준에서 할당된 기본 프로토타입 상위 개체를 나타냅니다.이제 좀 더 자세히 설명해 보겠습니다.

자바스크립트의 프로토타입은 다음을 의미하는 단어입니다.

• 자바스크립트의 모든 개체들은 결국 상속을 통해 자신의 다양한 속성과 특징을 할당하는 일련의 프로토타입이나 "기본 클래스"로부터 상속됩니다.이것은 나무를 타고 아래쪽에 있는 아이에게로 흘러갑니다.자바스크립트에서 모든 개체는 해당 상속 트리의 맨 위에 있는 Object.prototype에서 최종적으로 상속됩니다.
• "원형"이라 함은 자녀의 물건이 물려받은 성질과 방법을 가진 특수한 물건을 말합니다.
• 또한 "prototype"은 주어진 객체를 자식에게 부모 프로토타입으로 할당하지만 프로토타입을 변경할 수 있는 권한을 부여하는 자바스크립트의 모든 객체에 부여되는 특수 속성입니다.하위 개체에 할당된 실제 프로토타입을 제어하지만 하위 개체의 프로토타입을 조작하는 데 사용할 수 있다는 점에서 실제 클래스 속성과 같은 역할을 합니다.이렇게 하는 것은 권장하지 않지만 간단한 속성 추가를 사용하여 새 속성을 추가하거나 속성이 포함된 Object Literal을 통해 속성을 추가하여 모든 개체가 상속하는 원래 Object.prototype을 수정할 수 있습니다.

    Object.prototype.myproperty = "Hello World";
    Object.prototype.myobjectproperties = {text1: "Hello", text2: "World"};

• "prototype" 속성은 하위 개체 이름과 함께 "MyObjectType.prototype"으로 표현됩니다.이 새로운 이름은 이제 상위 프로토타입의 식별자이면서 동시에 이를 변경하기 위한 도구이기도 합니다.그러나 실제 프로토타입 개체에 대한 참조는 아닙니다! (아래에서는 __proto_를 사용하여 수행함).해당 유형을 생성하면 모든 새 개체에 할당됩니다.먼저 객체를 작성한 함수 생성자에게 할당된 다음 함수 생성자가 작성한 객체로 전달됩니다.

• "__proto__"는 자식에게 할당된 실제 프로토타입 개체에 대한 참조입니다.그것 또한 재산이지만 참고가 됩니다.그래서 아이들이 물려받은 원형 물체의 나무 위에 올라가 그것들과 그들의 속성에 접근하곤 했습니다.아래 예제는 생성된 객체 리터럴에서 트리 위로 올라가 "null"로 끝납니다.

    alert({}.__proto__.__proto__);// null

프로토타입의 이상함

그래서 자바스크립트 상속에서는 모든 것이 Function 타입으로 시작됩니다!왜 그런 것일까요?함수가 없으면 개체 "유형"(Object, Array, Function, String 등)을 만들 수 없기 때문입니다.그리고 그렇게 했을 때, 그들은 여전히 함수의 어딘가에 있는 "시공자"로부터 구성됩니다.함수와 함수의 생성자는 유형에서 새 개체를 생성할 뿐만 아니라 "원형" 속성, "_proto__" 속성 및 자식 개체가 사용할 상속된 프로토타입 또는 개체의 실제 트리를 할당합니다.

자바스크립트에는 "유형"과 실제 인스턴스화된 개체의 두 가지 상태가 있습니다.따라서 "Object"가 생성된 Object와 "const x = {}"과(와) 같지 않습니다.그래서 "유형"은 최종 유형과 다른 상속이나 프로토타입으로 시작합니다.

이것 좀 봐!

// The Array type has a prototype of "Function.prototype"
alert(Object.prototype.toString.call(Array));// [object Function]

// But an instance of an Array object has a NEW prototype of "Array.prototype" that the function prototype's constructor created for the object!
const myarray = [];
alert(Object.prototype.toString.call(myarray));// [object Array]

그래서 어떻게 됐나요?

FUCTION CONCUCTOR 를 하는 것으로 .prototype객체가 생성될 때. 이은 더 많은 등으로를 만들기 할 수 .그러나 이 사용자 지정 프로토타입은 어레이 객체가 더 많은 속성, 객체 등으로 생성되기 전과 후에 모두 수정할 수 있습니다.따라서 최종 할당된 프로토타입은 위와 같이 Array type 초기 프로토타입이었던 Function 객체의 Constructor에 의해 설정됩니다.

자바스크립트의 모든 객체 유형의 기본 프로토타입이 바로 그것임을 깨달으시기 바랍니다!이것은 모든 개체의 아래에 놓여 있지만, 생성될 때 자체 프로토타입이 할당되는 최종 인스턴스화된 개체를 생성하는 도구입니다."Array.prototype"에는 다음과 같은 상위 프로토타입이 있습니다.Object.prototype를 둔입니다입니다서.Object.prototype는 이 모든 개체에 의해 상속되는 상위 부모로 남아 있습니다.그러나 생성자는 새 개체가 생성될 때 모든 하위 개체의 직계 부모를 변경합니다.

하세요에 하세요.Function.prototype자체 Object.prototype에서 많은 기능을 가져옵니다.작성한 개체에 대해 작성한 프로토타입도 이 상위 프로토타입으로 제작됩니다.그래서 결국에는.Object.prototype는 기능 유형과 모든 유형을 생성하고 해당 유형에 할당된 프로토타입을 관리하는 데 필요한 유용한 기능을 제공합니다.오브젝트와 같은 기능은 모든 유형의 오브젝트를 만드는 데 필요한 특별한 도구와 기능을 갖춘 사전 제작된 특별한 유형이라는 것만 기억하세요!

마지막 테스트..프로토타입이 당사가 작성한 맞춤형 객체에 대해 어떻게 작동하는지 살펴보겠습니다.아래 예제는 함수 생성자(Function.prototype의 일부)가 생성된 개체에 "prototype" 속성을 할당하지만 개체 프로토타입에 할당되기 전이나 후에 다양한 속성과 메서드로 사용자 지정할 수 있음을 증명합니다.MyCustomObject.prototype이 . 의 .Object.prototype의 상속된 속성이지만 완전히 새로운 것을 만들 수도 있습니다!

let newPet;
function Pet() {
  this.fourlegs = true;
}

var Cat = {
  type : "cat"
}

var Dog = {
  type : "dog"
}

// We can see the prototype our constructor created for us
// and modify it as we like! Here we assigned it to an object
// which only means the prototype will merge "Cat" object's
// properties into the Pet.prototype.
Pet.prototype = Cat;

newPet = new Pet();
alert(newPet.type);// cat - inherited the Cat Object's properties in the prototype

Pet.prototype = Dog;

newPet = new Pet();
alert(newPet.type);// dog - inherited the Dog Object's properties in the prototype

alert(newPet.fourlegs);// true - this shows, even though you replace prototype, it ADDs the new types but does NOT erase the existing object properties! This must mean "prototype" is dynamically additive and rebuilt until the final "Pet" prototype is complete.

// Now change the "Pet.prototype" so all new objects have a new property.
Pet.prototype.furcolor = "white";
newPet = new Pet();
alert(newPet.furcolor);// "white"

// So you can see the "Pet.prototype" is dynamic, something you can tell the function constructor to modify!

언급URL : https://stackoverflow.com/questions/650764/how-does-proto-differ-from-constructor-prototype