programing

__proto__ JavaScript의 VS. 프로토타입

nicescript 2022. 12. 9. 22:08
반응형

__proto__ JavaScript의 VS. 프로토타입

이 그림은 모든 물체에 시제품이 있음을 보여줍니다. Foo를 가지고 .__proto__을 통해 할 수도 .protype 、 、 이 function기능.프로타입으로 하다__proto__오브젝트프로타이프따라서 Foo.protype은 Foo의 명시적 특성일 뿐이며, 이는 b 및 c 객체의 프로토타입을 나타냅니다.

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

__proto__ ★★★★★★★★★★★★★★★★★」prototype

enter image description here

이 수치는 dmitrysoshnikov.com에서 가져온 것입니다.

주의: 상기 2010년 기사 제2판(2017년)이 있습니다.

__proto__는 메서드 등을 해결하기 위해 룩업체인에서 사용되는 실제 객체입니다. prototype를 구축하기 위해 사용되는 객체입니다.__proto__시 "" " " " " 를 를 만듭니다.new:

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

prototype①기능 ②기능 ③그것은 그 함수에 의해 만들어진 객체의 원형이다.

__proto__는 객체의 내부 속성으로, 프로토타입을 가리킵니다.한 것을 하고 있습니다.Object.getPrototypeOf(obj)의 표준인 '방법'은__proto__더 빠릅니다.

보면 '아까불까불까불까불까불까불까불까불까불까불까불까불까요?instanceofprototype to to to an 三 an에 대하여.__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__그 당시에.

prototype이치

예:

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

Person.prototype속성은 위의 함수를 선언하면 내부적으로 생성됩니다. 속성을 할 수 있습니다.Person.prototypePerson를 사용하여 new Person().

// 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);

creates 2 instances of 2개의 인스턴스를 만듭니다.Person, 이 두 개체가 호출될 수 있습니다. 의 2 브 these개 , 2는 can objects call트오젝 2이ageμm의 방법Person.prototype as ~하듯이person1.age, , ,person2.age.

위의 사진에서는 신 당 문 의 질 림 신 음 있 니 습, in the수 from picture question your that다볼 see can다당그위을은 above에서나Foo is a 는 입니다.Function Object and therefore it has a 그 때문에, 이것은__proto__ Function.prototype이것은 다시 의 한 예이다.Object a가 ,__proto__로 연결하다.Object.prototype__proto__ Object.prototypenull.

어떤 오브젝트라도 링크된 프로토 체인 내의 모든 속성에 접근할 수 있습니다.__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를 반환합니다.

설명을 위해 함수를 만들자.

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

가 이하면 JavaScript가 됩니다.prototype을 property property로 설정합니다.a,prototype두 가지 입니다.

  1. constructor
  2. __proto__

그래서 우리가 할 때

a.prototype

     constructor: a  // function definition
    __proto__: Object

constructor에 a와 itself itself itself itself__proto__ 레벨 「」를 합니다.Object자바스크립트입니다.

요?a new키워드

var b = new a ('JavaScript');

JavaScript는 이 코드를 실행할 때 다음 4가지 작업을 수행합니다.

  1. 빈 개체 // {} 새 개체를 생성합니다.
  2. 은 성 it__proto__을 하다.b를 .a.prototypeb.__proto__ === a.prototype
  3. a.prototype.constructor입니다).a#1)를이것 (#1 )을(를) name'('JavaScript'에 됨)this가 새로 된 오브젝트에 가 새로 생성된 오브젝트에 추가됩니다.
  4. 스텝에서 새로 에 var('#1')는 var('#1'로 작성)를 반환합니다.b는 새로 생성된 객체에 할당됩니다.

, 그럼 이제 ㅇㅇㅇㅇㅇㅇㅇ를 요?a.prototype.car = "BMW" 하다b.car비엠웨이다

가 이 했을 때 입니다.carproperty の 。b 후 는 "JavaScript"를 사용하지 b.__proto__에서 'disc'를) (#2단계에서 'a.disc'를 찾습니다.)car"를하십시오.BMW' ★★★★★★★★★★★★★★★★★★★★★」

좋은 방법은...

prototype요.constructor진짜 "prototypeToInstall"그게 바로 그거니까.

★★★★★★★★★★★★★★★★★」__proto__'된 프로토타입'은해당 대상물 '설치된 프로토타입'에서에 대한 constructor()□□□□□□□□★

프로토타입 VS_proto_ VS.[프로토타입]

함수를 만들 때 프로토타입이라는 속성 객체가 자동으로 생성되고(직접 생성하지 않음) 함수 객체에 첨부됩니다(사용자 자신이 생성하지 않음).constructor를 참조해 주세요.
주의: 이 새로운 프로토타입 오브젝트는 네이티브 JavaScript 오브젝트를 가리키거나 네이티브 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;
}

에서 했을 때Foonew키워드는 기본적으로 함수에 대한 내부 링크 또는 개인 링크가 있는 새로운 객체를 만듭니다.Foo「 」 「 」 、 「 」

var b = new Foo();

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

The 사적인 linkage to that function's object called double brackets prototype or just [[Prototype]]. Many browsers are providing us a 일반의 linkage to it that called __proto__!

더 으로 말하면, 「 」입니다.__proto__는 실제로 네이티브 JavaScript 객체에 속하는 getter 함수입니다.내부와 사설의 연결 고리를 반환합니다.this은 (바인딩을 )입니다[[Prototype]]b

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

가 있습니다.ECMAScript5getProtypeOf 메서드를 사용하여 내부 프라이빗 링크를 가져올 수도 있습니다.

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

주의: this answer doesn't intend to cover the whole process of creating new objects or new constructors, but to help better understand what is __proto__, prototype and [[Prototype]] and how it works.

위의 훌륭한 답변과 더불어 조금 더 명확하게 하기 위해:

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

var eve = new Person("Eve");

eve.__proto__ == Person.prototype //true

eve.prototype  //undefined

인스턴스에는 __proto__가 있고 클래스에는 프로토타입이 있습니다.

JavaScript에서는 함수를 생성자로 사용할 수 있습니다.즉, 새로운 키워드를 사용하여 오브젝트를 작성할 수 있습니다.모든 컨스트럭터 함수에는 빌트인 객체가 체인으로 포함되어 있습니다.이 빌트인 오브젝트는 프로토타입이라고 불립니다.Instances of a constructor function use __proto__ to access the prototype property of its constructor function.

prototype diagram

  1. .function Foo(){}후우우우우우우우우우우우우우우우우우우우우우우우우우우우우우우우우우우우우우우우우우우우우우우우우타그러나 새로운 키워드를 사용하여 오브젝트를 만들 수 있습니다.을 생성자 .

  2. __proto__ JavaScript의 VS. 프로토타입모든 기능에는 프로토타입 속성이라고 하는 고유한 속성이 있습니다. 함수입니다.Foo프로토타입을 가리키는 프로토타입을 가지고 있습니다.Foo.prototype(일부러)

  3. 【기능】스트럭터라고 불리는 시스템컨스트럭터의 인스턴스입니다. 수 요.function Foo【기능】이치노so,는,__proto__ 회사의Foo function그인 【 will will 、 will 、 will will 、 will will will will 。Function.prototype.

  4. Function.prototype그 자체는 다른 시스템컨스트럭터로부터 구축되는 오브젝트에 지나지 않습니다.[[Object]][[Object]]입니다.Function.prototype '아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 예.Function.prototype의 예다.[[Object]]__proto__Function.prototypeObject.prototype.

  5. Object.prototype원형 체인에 서 있는 마지막 남자입니다.내 말은 그것은 건설되지 않았다는 것이다.그것은 이미 시스템에 있습니다. ★★★★★★★★★★★★★★★.__proto__null.

  6. , 그럼 이제 예를 보겠습니다.Foo를 사용하여 new Foo()이 오브젝트는Fooㅇㅇ,Foo는 이러한 인스턴스의 컨스트럭터입니다.두 번째, 두 번째. __proto__, .Foo.prototype.

__proto_, protype과 프로토타입의 차이를 알아야 할 것 같습니다.

이 되지만,은 ( 하는 바가 있을 수 .__proto__는 컨스트럭터 함수로 작성된 오브젝트에만 관련된 것으로, 이는 사실이 아닙니다.

좀 더 정확히 말하면: 모든 개체에 존재합니다.

  • ★★★★★★★★★★★★★★★★★★★★★__proto__★★★★★★★★★★★★★★★★★?

    • 이 오브젝트는 다른 오브젝트를 참조하는 오브젝트입니다.이 오브젝트는 모든 오브젝트의 속성이기도 합니다.
    • 가 있다[[prototype]]JavaScript가 내부적으로 처리하는 것으로 개발자가 액세스할 수 없습니다.

  • 는 무엇입니까?[[prototype]](「 」)

    • "JavaScript"를 가져오거나 하는 것을 하지 않기 입니다.[[prototype]]직접, 그래서 그것은 중간 층을 통과할 수 있게 합니다.__proto__ '이렇게'를 떠올릴 수 __proto__'getter/setter'의[[prototype]]★★★★★★★★★★★★★★★★★★.

  • 죠?prototype ????

    • 이것은 기능에 고유한 것입니다(초기 정의).Function ,contrace,Function.prototype그리고 새로 생성된 기능에 의해 프로토타입적으로 상속된 다음, 다시 이러한 기능이 자녀에게 제공되어 프로토타입적 상속의 사슬을 형성합니다.)

    • 의 JavaScript를 합니다.prototype 기능을합니다.[[prototype]]가 「」와 함께 하고 있는 .new(모든 물체는 다음 기능을 가지고 있습니다.[[prototype]] ,, 수, 수, 수, 수, ,가 있습니다[[prototype]](서양속담, 친구속담)?[[prototype]]가 (자녀)로 prototype다른 기능(상위 기능)의 마지막에는 다음과 같은 기능이 있습니다.

      let child = new Parent();
child.__proto__ === Parent.prototype // --> true.

      하다(기억하다child.[[prototype]]할 수 에, 「」를 사용해 했습니다.__proto__

주의 1: 속성이 자녀에 포함되지 않을 경우 해당 속성은__proto__검색됩니다.예를 들어, 만약child.myprop값을 반환합니다. "myprop"이 자녀의 재산인지 아니면 부모의 프로토타입 중 하나인지 알 수 없습니다.은 '하다, 하다, 하다, 하다'와 같은 할이기도 합니다.child.__proto__.__proto__.myprop만 하면 돼child.myprop자동으로 처리해 드립니다.

주의 2: 부모의 프로토타입에 아이템이 들어있더라도 자녀 자신의 아이템은prototype처음에는 빈 객체가 됩니다.상속 체인을 추가로 확장하려는 경우 항목을 추가하거나 항목에서 수동으로 제거할 수 있습니다(하위에 자식 추가[렌]).또는 예를 들어 class 구문을 사용하여 암묵적으로 조작할 수도 있습니다.

주의 3: 설정/취득이 필요한 경우[[prototype]] 자신,, 사용, 사용__proto__좀 구식이고 최신 자바스크립트에서는 를 사용하는 것이 좋습니다.Object.setPrototypeOf ★★★★★★★★★★★★★★★★★」Object.getPrototypeOf★★★★★★ 。

요약:.

__proto__은 사물의 속성으로, 사물의 은 사물의 .prototype이치노 ,, 음, 음, 다, 다, 다, in, in, in, in.

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

은 「이것」을 형성하기 사용됩니다.prototype★★★★★★prototypechain 입니다.오브젝트의 속성에 액세스 하면 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__은 "Director"를 합니다.prototype컨스컨자바스크립트개체에는 속성이 있을 수 있으며, 모든 함수의 기본 속성은 프로토타입이라는 하나의 속성입니다.

다음 이 를 생성자 함수로 할 때, 는 음음음음음음, 이수음 then then then then then, 음음음음음음음음음음음음음음음음음음음음음음음 then 라는 속성을 받게 됩니다.__proto__ 이 __proto__는 「」를 합니다.prototype생성자 함수의 속성(기본적으로 모든 함수에 있음)입니다.

이게 왜 도움이 되죠?

에는 JavaScript에서 할 때 .Objects이것은 '친구의 상속'이라고 불리며, 기본적으로 다음과 같은 역할을 합니다.

  • 먼저 속성이 개체 자체에 있는지 확인합니다.이 경우 이 속성이 반환됩니다.
  • 오브젝트 자체에 속성이 없는 경우 프로토체인 위로 올라갑니다..__proto__여기서이 속성을 사용할 수 합니다.__proto__.
  • 에 __proto__ object, it will climb up the 오브젝트, 그것은 올라갑니다.__proto__ chain, all the way up to 체인,까지Object물건.물건.
  • 개체와 브 젝 트 브 젝 느 에 성 을 없 우 는 it 경 if 수 을 찾 and anywhere on속 the cannot its도곳prototype chain, it will return 쇠사슬, 그것은 돌아올 것이다.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);

JavaScript prototype vs __prototype__ 

'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

Java스크립트에서 모든 개체(기능도 개체도)JavaScript에서는 Every object(함수도 객체입니다!) has a 가 있다__proto__이치노

하는 new오브젝트를 , 의 "New Object", "New Object "New Object", "New Object", "New Object", "New Object", "New Object", "New Object", "New Object", "New Object", "New Object",__proto__or성 property construct construct construct construct construct construct construct construct로 설정됩니다.로 됩니다.prototypeproperty가 오브젝트에 그"this스코프의 오브젝트를 합니다.즉, "this"는 새로운 오브젝트를 반환한다.

컨스트럭터의 프로토타입은__proto__ 컨스트럭터prototype속성은 와 함께 동작합니다.new환입니니다다

.prototype★★★★★★★★★★★★★★★★★★.

의 원형사슬입니다.__proto__수 있는 , 할 수 있는 속성, 프로토타입을 할 수 있습니다.__proto__참조하는등__proto__을

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

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__이치노

오브젝트의 getProtypeOf 메서드를 사용하여 시제품을 얻을 수 있습니다.

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

쓴는 어떤 때 할 수 .new연산자라면 누구나 생성자가 될 수 있습니다.

저는 우연히 You Don't Know JS: 이 & 객체 프로토타입으로부터 프로토타입을 배우고 있습니다.이 책은 그 밑의 디자인을 이해하고 많은 오해를 해명할 수 있는 훌륭한 책입니다(그래서 상속 등의 사용을 피하고 있습니다).instanceof

하지만 여기 사람들이 물어본 것과 같은 질문이 있습니다.몇 가지 답변이 정말 도움이 되고 계몽이 됩니다.나도 내 이해에 대해 말하고 싶어.

시제품이란?

에는 내부, 이 속성은 JavaScript 에 "JavaScript", "JavaScript", "JavaScript", "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();

so,는,Arary,Function,Object모든 기능이 있습니다.JS는 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

알아요, 늦었지만 간단히 할게요.

예를 들어 다음과 같은 기능이 있습니다.

    function Foo(message){

         this.message = message ; 
     };

     console.log(Foo.prototype);

Foo 함수는 시제품 객체를 링크합니다.그래서 자바스크립트에서 함수를 만들 때마다 항상 프로토타입 오브젝트가 링크되어 있습니다.

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

    var a = new Foo("a");
    var b = new Foo("b");
    console.log(a.message);
    console.log(b.message);
  1. 오브젝트 a와 오브젝트 b의 2개의 오브젝트가 있습니다.둘 다 생성자 Foo를 사용하여 생성됩니다.여기서 constructor는 단어에 불과하다는 것을 명심하십시오.
  2. 오브젝트 a와 b는 모두 메시지속성의 복사본을 가지고 있습니다.
  3. 이 두 객체 a와 b는 컨스트럭터 Foo의 프로토타입 객체에 연결되어 있습니다.
  4. 오브젝트 a와 b에서는 모든 브라우저에서 __proto_속성을 사용하여 Foo 프로토타입에 액세스할 수 있으며 IE에서는 Object.getProtypeOf(a) 또는 Object.getProtypeOf(b)를 사용할 수 있습니다.

자, Foo. prototype, a.__syslog__ 및 b.__filen__는 모두 동일한 개체를 나타냅니다.

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

위의 모든 것이 사실로 돌아올 것이다.

아시다시피 JavaScript에서는 속성을 동적으로 추가할 수 있습니다.오브젝트에 속성을 추가할 수 있습니다.

    Foo.prototype.Greet = function(){

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

보시는 바와 같이 Foo.protype에는 Greet() 메서드가 추가되어 있습니다만, a와 b 또는 Foo를 사용하여 작성된 다른 오브젝트에서는 액세스 할 수 있습니다.

a 실행 중.Greet(). JavaScript는 먼저 속성 목록에서 개체 a의 Greet을 검색합니다.찾을 수 없는 경우 a의 __proto_체인으로 올라갑니다.a부터.__proto__와 Foo.protype은 동일한 객체이며 JavaScript는 Greet() 메서드를 검색하여 실행합니다.

시제품과 __proto_가 조금 단순화되었으면 합니다.

이를 이해하는 또 다른 좋은 방법은 다음과 같습니다.

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__.

시제품

프로토타입은 기능의 속성입니다.새로운 키워드와 함께 해당(컨스트럭터) 함수를 사용하여 객체를 작성하기 위한 청사진입니다.

__param__

__proto__되면(새로운 키워드를 를 사용하여), 오브젝트가 생성됩니다.__proto__ 、 [ Constructor]( 컨스트럭터)로 설정되어 있습니다.기능.입력하다

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 Cat = function() {}
var tom = new Cat()

Understanding __proto__ and prototype

저는 고전적인 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.

건배!

[프로토타입] :

[프로토타입]은 JS에서 객체의 내부 숨겨진 속성으로 다른 객체에 대한 참조입니다.생성 시 모든 개체는 [Prototype]에 대해 Null이 아닌 값을 받습니다.[Get] 조작은 myObject.a와 같은 객체의 속성을 참조할 때 실행됩니다.오브젝트 자체에 속성이 있는 경우 해당 속성이 사용됩니다.

let myObject= {
    a: 2
};

console.log(myObject.a);            // 2

그러나 오브젝트 자체에 요청된 속성이 직접 없는 경우 [Get] 조작은 오브젝트의 [Protype]링크를 따르도록 진행됩니다.이 프로세스는 일치하는 속성 이름이 발견되거나 [Protype] 체인이 종료될 때까지 계속됩니다(내장 Object.protype).일치하는 속성을 찾을 수 없으면 정의되지 않은 상태로 반환됩니다.Object.create(specified Object)는 지정한 객체에 대한 [Protype]링크를 가진 객체를 만듭니다.

let anotherObject= {
    a: 2
};

// create an object linked to anotherObject
let myObject= Object.create(anotherObject);
console.log(myObject.a);                // 2

둘 다...루프 및 오퍼레이터에서 [Protype] 체인 조회 프로세스를 사용합니다.그래서 만약 우리가..오브젝트의 속성을 반복하는 루프에서는 오브젝트의 [Protype]체인을 통해 도달할 수 있는 모든 열거 가능한 속성이 오브젝트 자체의 열거 가능한 속성과 함께 열거됩니다.그리고 in 연산자를 사용하여 객체에 속성이 존재하는지 테스트할 때 in 연산자는 열거 가능성과 관계없이 객체의 [Prototype]링크를 통해 모든 속성을 확인합니다.

// for..in loop uses [[Prototype]] chain lookup process
let anotherObject= {
    a: 2
};

let myObject= Object.create(anotherObject);

for(let k in myObject) {
    console.log("found: " + k);            // found: a
}

// in operator uses [[Prototype]] chain lookup process
console.log("a" in myObject);              // true

.timeout:

.protype은 JS에서 함수의 속성으로 함수 객체의 모든 속성(및 메서드)을 저장하는 생성자 속성을 가진 객체를 나타냅니다.

let foo= function(){}

console.log(foo.prototype);        
// returns {constructor: f} object which now contains all the default properties

foo.id= "Walter White";

foo.job= "teacher";

console.log(foo.prototype);       
// returns {constructor: f} object which now contains all the default properties and 2 more properties that we added to the fn object
/*
{constructor: f}
    constructor: f()
        id: "Walter White"
        job: "teacher"
        arguments: null
        caller: null
        length: 0
        name: "foo"
        prototype: {constructor: f}
        __proto__: f()
        [[FunctionLocation]]: VM789:1
        [[Scopes]]: Scopes[2]
    __proto__: Object

*/

그러나 JS의 일반 개체에는 .protype 속성이 없습니다.Object.protype은 JS에 있는 모든 객체의 루트 객체입니다.따라서 개체는 함수입니다. 즉, 개체 === "함수"의 유형입니다.즉, myObj= new Object()와 같은 Object 함수에서 개체를 만들 수도 있습니다.마찬가지로 Array, Function도 함수이므로 Array.protype, Function.protype을 사용하여 어레이 및 함수의 모든 일반 속성을 저장할 수 있습니다.JS는 함수를 기반으로 합니다.

{}.prototype;                            // SyntaxError: Unexpected token '.'

(function(){}).prototype;                // {constructor: f}

또한 함수에서 객체를 작성할 경우 새로 생성된 객체의 내부 숨겨진 [Protype]속성이 원래 함수의 .protype 속성에 의해 참조되는 객체를 가리킵니다.아래 코드에서는 a from a fn, Letter라는 객체를 만들고 fn 객체와 fn의 프로토타입 객체에 각각 2개의 속성을 추가하였습니다.이제 새로 만든 개체의 두 속성에 모두 액세스하려고 하면 함수의 프로토타입 개체에 추가된 속성에만 액세스할 수 있습니다.이는 함수의 프로토타입 개체가 이제 새로 생성된 개체 a의 [프로토타입] 체인에 있기 때문입니다.

let Letter= function(){}

let a= new Letter();

Letter.from= "Albuquerque";

Letter.prototype.to= "New Hampshire";

console.log(a.from);                // undefined

console.log(a.to);                  // New Hampshire

.__proto__:

.__proto__【JS】【프로토타입】체인의 다른 오브젝트를 참조합니다.[프로토타입]은 JS에 있는 객체의 내부 숨겨진 속성이며 [프로토타입] 체인의 다른 객체를 참조합니다.는 2가지 할 수 .★★[ Protype ]속성에 의해 참조되는 오브젝트는 2가지 방법으로 취득 또는 설정할 수 있습니다.

  1. Object.getPrototypeOf(obj) / Object.setPrototypeOf(obj)

  2. obj.__proto__

[할 수 .__proto__.__proto__. .. . 속성constructor, .toString(), .isProtypeOf())이 dunder proto에 포함되어 있습니다.__proto__는 실제로 내장된 오브젝트에 할 수 있습니다는 、 [ Object ](오브젝트).protype 루트 오브젝트에 실제로 존재하지만 특정 오브젝트에서 사용할 수 있습니다. ★★★★★★★★★★★★★★★★★★.__proto__을 사용하다★★★의 .__proto__.Object프로타이프

Object.defineProperty(Object.prototype, "__proto__", {
    get: function() {
        return Object.getPrototypeOf(this);
    },
    set: function(o) {
        Object.setPrototypeOf(this, o);
        return o;
    }
});

「」의 하려면 , 「」를 해 주세요.obj.__proto__콜, 콜, 콜, 콜 등입니다.obj.__proto__()fn의 을 반환합니다.Object.getPrototypeOf(obj)object.protype object object object object object 。일일 ~일도 although although although although 。.__proto__는 설정 가능한 속성이지만 성능 문제로 인해 기존 개체의 [프로토타입]을 변경하지 마십시오.

함수에서 객체를 만들면 새로 생성된 객체의 내부 숨겨진 [Protype]속성이 원래 함수의 .protype 속성에 의해 참조되는 객체를 가리킵니다.「」를 사용합니다..__proto__.property의 숨김 [ 수 .[ Protype ]속성에 의해 참조되는 다른 객체에 접근할 수 있습니다. ★★★★★★★★★★★★★★★★★.__proto__［Protype］(프로타입)의 경우,［getter/setter］의 경우. 을 생각해 보십시오.

let Letter= function() {}

let a= new Letter();

let b= new Letter();

let z= new Letter();

// output in console
a.__proto__ === Letter.prototype;               // true

b.__proto__ === Letter.prototype;               // true

z.__proto__ === Letter.prototype;               // true

Letter.__proto__ === Function.prototype;        // true

Function.prototype.__proto__ === Object.prototype;        // true

Letter.prototype.__proto__ === Object.prototype;          // true

enter image description here

간단히 말하면:

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

이를 통해 X 타입의 오브젝트가 인스턴스화된 후 X.protype에 속성을 첨부할 수 있으며, 이 오브젝트는 Javascript 엔진이 프로토타입 체인을 위로 이동하기 위해 사용하는 __proto_ 참조를 통해 이러한 새로운 속성에 액세스할 수 있습니다.

Protype 또는 Object.protype은 객체 리터럴의 속성입니다.오브젝트 프로토타입 객체를 나타냅니다.이 객체를 재정의하여 프로토타입 체인을 따라 더 많은 속성 또는 메서드를 추가할 수 있습니다.

__filter__는 액세스되는 객체의 내부 프로토타입을 공개하는 접근자 속성(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 Dog(){}
Dog.prototype.bark = "woof"

let myPuppie = new Dog()

에는 my Pupppie가 있습니다__proto__Dog.protype.

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

하지만 my Puppie에는 프로토타입 속성이 없습니다.

> myPuppie.prototype
>> undefined

so,는,__proto__of mypuppie는 이 오브젝트를 인스턴스화하기 위해 사용된 컨스트럭터 함수의 .protype 속성을 참조합니다(그리고 현재 myPuppie 오브젝트는 이 오브젝트에 대한 "위임" 관계가 있습니다).__proto__오브젝트), myPuppie의 .protype 속성은 단순히 존재하지 않습니다(설정하지 않았기 때문에).

MPJ에 의한 좋은 설명: proto vs protype - JavaScript에서의 객체 생성

정의들

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

prototype - 다음 요소로 구성된 개체:
>이= > 기능(3)ConstructorFunction.prototype이 또는 각 할 수 것 (1)(5)
함수 (1)=> 컨스트럭터 함수 (1)
> =>__proto__ 오브젝트의 경우

__proto__ (andor 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

3. 

    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어떤 것이 어떻게 만들어져야 하는가에 대한 예시입니다. ★★★★★★★★★★★★★★★★:

  • ★★★★★★★★★★★★★★★★.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) 
    })()

이 코드를 사용하여 이해하십시오.

근친사슬: obviously this obviously오 obviously this this this this this this this this this this this this this this this this this this this 。__proto__이고, 는 ''입니다'''prototype치가있있 있있있다다그게 다예요.

이를 봐 주세요.Dmitry Soshnikov는 절대 수 __proto__ 것을 가리키다prototype그 가치로.

는 이렇습니다.__proto__ 오브젝트를 이며, 제pal is is is 、 is 、 is 、 is 、 is 、 is 、 is 、 is 。prototype이치노

마치 다음과 같습니다.

let x = {name: 'john'};

x이고, 는 (사)입니다.{name: 'john'}는 실제 객체(데이터 값)입니다.

메모: 이것은 단지 그들이 높은 수준에서 어떻게 관련되어 있는지에 대한 매우 간단한 힌트일 뿐입니다.

업데이트: 더 나은 설명을 위한 간단한 구체적인 javascript 예를 소개합니다.

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__ '''」x)x및 , 。prototype is is is is is is is is 。x(미국의)

이제 좀 명확해졌으면 좋겠어요.

이는 프로토타입 유전을 이해하고자 하는 모든 사람에게 매우 중요한 질문입니다.내가 아는 바로는, 함수의 새로운 객체를 작성할 때 기본적으로 프로토타입 객체가 할당되는데, 이는 함수의 정의에 따라 다음과 같은 프로토타입 객체가 있기 때문입니다.

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`

이 질문에는 좋은 답변이 많이 있지만, 좋은 세부사항을 가진 요약과 간결한 답변 형식을 위해 다음을 추가합니다.

우리가 가장 먼저 고려해야 할 것은 JS가 발명되었을 때 컴퓨터의 메모리가 매우 낮았기 때문에 새로운 객체 유형을 만드는 과정이 필요하다면 메모리 성능을 고려해야 한다는 것이다.

은 그 .object type오브젝트를 마다 그 의 다른 합니다.need는 이외의 메서드를 저장합니다.즉, 오브젝트를 할 수 있습니다.new 및 """constructorJS의 새로운 기능을 사용한 기능 컨셉에는 다음과 같은 단계가 있습니다.

  1. 빈 객체입니다.(오브젝트 타입 인스턴스화의 최종 결과가 됩니다)
let empty={}
  1. 로, 「메모리 퍼포먼스」의 있습니다.object type는, 의 「컨스트럭터」에 .prototype (을 가질 수 .)을 합니다. (프로퍼티도 오브젝트이기 때문에 속성을 가질 수 있습니다)그래서 우리는 이 명령어를 참조합니다.empty의 ★★★★★★★★★★★★★★」__protp__당당메메메ororororororwewewewewewewewewewewewewewewewewewewewewewewewe로서 개념적으로 사용하는 기능, 즉 라고 하는 기능을 고려합니다(컨스트럭터라는 이름의 컨스트럭터로 개념적으로 사용하는 함수를 고려합니다.
empty.__proto__ = constructor.prototype
  1. 의 체체유 are in in in in in 되어 있습니다.는 점 이나 점 표기법과 같은 을 사용합니다.bind call apply 있는 것은 '이냐'는 것을 합니다.this함수의 컨텍스트"를 참조해 주세요.
let newFunc = constructor.bind(empty)
  1. , 이제 새로운 했습니다.empty를 제기하다this 이 function후. 이 、 행 、 [ ]empty이 오브젝트입니다.empty(정의되어 있는 )constructor함수가 반환되지 않음(프로세스의 결과인 것처럼)

__proto__오브젝트를 입니다).prototype: .object type.

할 수 , '어느 정도'는functions are objects에는 , 「」도 있습니다.__proto__할 수 prototype 거예요.prototype inheritance구현되어 있습니다.

__proto__ is is is is is 、 is 、 is 、 is 、 is is 。prototype(예: " " " ):function human(){} 있다prototype는 「」를 통해서 행해집니다.__proto__생성자 함수의 새 인스턴스로 이동합니다.자세한 내용은 이쪽

이 말이 옳았듯이

__proto__은 '메서드'를 빌드하기 입니다.프로토타입은 구축에 사용되는 객체입니다.__proto__ :체 with with with with with with with with with with with with 를 사용하여 개체를 작성하는 :

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

알 수 .__proto__함수 생성자 포인트를 사용하여 생성된 객체의 속성은 해당 생성자의 프로토타입 속성이 가리키는 메모리 위치를 가리킵니다.

컨스트럭터 함수의 프로토타입 메모리 위치를 변경하면__proto__원래 주소 공간을 계속 가리킵니다.따라서 상속 체인에서 공통 속성을 사용할 수 있도록 하려면 속성을 다시 초기화하지 않고 항상 생성자 함수 프로토타입에 추가하십시오(메모리 주소가 변경됩니다).

다음 예를 생각해 보겠습니다.

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

언급URL : https://stackoverflow.com/questions/9959727/proto-vs-prototype-in-javascript

반응형
저작자표시

'programing' 카테고리의 다른 글

$(this)와 this(this)의 차이점은 무엇입니까?  (0) 2022.12.09
Linux(Mageia)의 NetBeans에서 Java 애플리케이션에서 MariaDB에 연결  (0) 2022.12.09
mysql - 테이블 간에 행을 이동합니다.  (0) 2022.12.09
각각 Javascript를 중지하는 방법  (0) 2022.12.09
일정 시간 후 페이지 리디렉션 PHP  (0) 2022.12.09

'programing'의 다른글

  • 현재글__proto__ JavaScript의 VS. 프로토타입

관련글

댓글

티스토리툴바