프로토타입 상속

다른 데이터 유형과 마찬가지로 객체가 기본 제공 Object 프로토타입에서 속성과 메서드를 상속합니다. 즉 결과 객체에 사용자가 정의한 속성과 프로토타입에서 상속된 메서드가 포함된 프로토타입 속성입니다.

let myObject = {
   
'booleanValue' : true
};

myObject
;
> Object { booleanValue: true }
    booleanValue
: true
   
[[prototype]]: Object { }
            __defineGetter__
: function __defineGetter__()
            __defineSetter__
: function __defineSetter__()
            __lookupGetter__
: function __lookupGetter__()
            __lookupSetter__
: function __lookupSetter__()
            __proto__
:
                constructor
: function Object()
                hasOwnProperty
: function hasOwnProperty()
                isPrototypeOf
: function isPrototypeOf()
                propertyIsEnumerable
: function propertyIsEnumerable()
                toLocaleString
: function toLocaleString()
                toString
: function toString()
                valueOf
: function valueOf()
               
<get __proto__()>: function __proto__()
               
<set __proto__()>: function __proto__()

프로토타입 속성은 속성 키로 직접 액세스할 수 없습니다. 따라서 이전 예에서 알 수 있듯이 [[prototype]] 또는 <prototype> 표기법을 사용하여 브라우저에서 개발자 콘솔과 프로토타입의 속성 키에 대한 문서를 참조하세요.

// Chrome:
let emptyObject
= {};

emptyObject
;
> {}
 
[[prototype]]: Object
// Firefox:
let emptyObject
= {};

emptyObject
;
> Object {  }
 
<prototype>: Object { }

모든 일반적인 브라우저에서는 사실상의 표준으로 __proto__를 사용하지만 이는 프로덕션 코드에서는 피해야 합니다.

let emptyObject = {};

emptyObject
.__proto__;
> Object { }
    __defineGetter__
: function __defineGetter__()
    __defineSetter__
: function __defineSetter__()
    __lookupGetter__
: function __lookupGetter__()
    __lookupSetter__
: function __lookupSetter__()
    __proto__
:
        constructor
: function Object()
        hasOwnProperty
: function hasOwnProperty()
        isPrototypeOf
: function isPrototypeOf()
        propertyIsEnumerable
: function propertyIsEnumerable()
        toLocaleString
: function toLocaleString()
        toString
: function toString()
        valueOf
: function valueOf()
       
<get __proto__()>: function __proto__()
       
<set __proto__()>: function __proto__()

대신 객체의 [[Prototype]]에 직접 액세스하고 수정할 수 있습니다. 내장된 Object.getPrototypeOf()Object.setPrototypeOf() 사용 메서드:

let myObj = { "value" : 5 };
let protoParent
= { "protoValue" : true };

myObj
;
Object { value: 5 }
    value
: 5
   
<prototype>: Object { }

Object.getPrototypeOf( myObj );
> Object { }
    __defineGetter__
: function __defineGetter__()
    __defineSetter__
: function __defineSetter__()
    __lookupGetter__
: function __lookupGetter__()
    __lookupSetter__
: function __lookupSetter__()
    __proto__
:
    constructor
: function Object()
    hasOwnProperty
: function hasOwnProperty()
    isPrototypeOf
: function isPrototypeOf()
    propertyIsEnumerable
: function propertyIsEnumerable()
    toLocaleString
: function toLocaleString()
    toString
: function toString()
    valueOf
: function valueOf()
   
<get __proto__()>: function __proto__()
   
<set __proto__()>: function __proto__()

Object.setPrototypeOf( myObj, protoParent );
> Object { value: 5 }
    value
: 5
   
<prototype>: Object { protoValue: true }

상속된 속성과 작성자 정의 속성을 구분하려면 후자는 일반적으로 객체의 '자체 속성'이라고 합니다.

지정된 속성이 지정된 경우 내장 Object.hasOwn() 메서드는 true를 반환합니다. 는 객체의 직접 속성이며 false 속성이 상속되었거나 존재하지 않습니다. 가능하면 Object.hasOwn() 사용 다음 메서드를 지원하지 않는 상속된 hasOwnProperty() 메서드 대신 Object.create()입니다.

let myObject = {
   
'myValue' : 100
};

Object.hasOwn( myObject, 'myValue' );
> true

myObject
.__proto__; // The Object prototype inherited by `myObject` is present:
> Object { }

Object.hasOwn( myObject, '__proto__' ); // The Object prototype inherited by `myObject` is not an "own property:"
> false

이해도 확인

__proto__를 사용하면 안 되는 이유는 무엇인가요?

많은 브라우저에서 지원되지 않습니다.
표준화되지 않았습니다.
코드의 향후 유지관리자에게 혼란을 야기할 수 있습니다.