JavaScript [[ProtoType]] __proto__

agnusdei·2023년 7월 6일
0

JavaScript의 객체는 프로토타입 기반으로 동작합니다. 객체의 프로토타입은 [[Prototype]]이라는 내부 슬롯으로 표현됩니다. [[Prototype]]은 해당 객체를 생성한 생성자 함수의 prototype 프로퍼티를 가리킵니다. 이것은 JavaScript에서 상속과 프로토타입 체인을 구현하는 데 중요한 역할을 합니다.

자세한 설명을 위해 코드 예시를 사용하겠습니다. 아래의 예시에서 Person이라는 생성자 함수를 정의하고, name 프로퍼티를 가지는 객체를 생성합니다. 그리고 greet 메서드를 Person.prototype에 추가합니다.

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

Person.prototype.greet = function() {
  console.log(`Hello, my name is ${this.name}`);
};

const john = new Person('John');
john.greet();

위의 코드에서 Person 함수를 사용하여 john 객체를 생성하였습니다. 이때 Person 함수의 prototype 프로퍼티에는 greet 메서드가 정의되어 있습니다.

이제 john 객체의 [[Prototype]]을 살펴보면 Person.prototype 객체를 가리키고 있습니다. 이는 john 객체가 Person.prototype 객체로부터 상속받은 프로퍼티와 메서드에 접근할 수 있게 해줍니다.

실제로 john.greet()을 호출하면, john 객체에 greet 메서드가 없음에도 불구하고 상속 체인을 통해 Person.prototypegreet 메서드를 실행합니다. 따라서 출력은 "Hello, my name is John"이 됩니다.

이와 같이 [[Prototype]]을 사용하여 JavaScript는 객체 간의 상속과 프로토타입 체인을 구현합니다. [[Prototype]]을 통해 객체는 프로토타입에서 프로퍼티와 메서드를 상속받을 수 있고, 이를 통해 코드의 재사용성과 유지보수성이 높아집니다.

__proto__[[Prototype]] 내부 슬롯에 직접 접근하기 위한 프로퍼티입니다. 이 프로퍼티를 통해 객체의 프로토타입에 접근하거나 수정할 수 있습니다. __proto__는 비표준이며 오래된 방식이므로 표준으로 권장되는 방법은 아니지만, 일부 환경에서 여전히 사용되고 있습니다.

아래의 코드 예시를 통해 __proto__를 사용하는 방법을 보여드리겠습니다.

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

Person.prototype.greet = function() {
  console.log(`Hello, my name is ${this.name}`);
};

const john = new Person('John');

console.log(john.__proto__ === Person.prototype); // true
console.log(john.__proto__.constructor === Person); // true

john.__proto__.greet(); // "Hello, my name is John"

위의 코드에서 john.__proto__를 사용하여 john 객체의 프로토타입에 접근합니다. john.__proto__Person.prototype 객체를 가리키고 있으며, 이를 통해 프로토타입 체인을 따라 상속된 프로퍼티와 메서드에 접근할 수 있습니다.

john.__proto__ === Person.prototypejohn 객체의 프로토타입이 Person.prototype과 일치하는지 확인하는 것입니다.

john.__proto__.constructor === Person는 프로토타입 객체의 constructor 프로퍼티를 통해 해당 객체를 생성한 생성자 함수에 접근하는 것입니다.

마지막으로, john.__proto__.greet()를 호출하여 john 객체의 프로토타입에 정의된 greet 메서드를 실행합니다.

__proto__를 사용하여 객체의 프로토타입에 직접 접근하고 조작하는 것은 비표준이므로 권장되지 않습니다. 대신에 Object.getPrototypeOf()Object.setPrototypeOf() 메서드를 사용하여 표준 방식으로 프로토타입에 접근하고 설정하는 것이 좋습니다. 아래의 예시 코드를 통해 보여드리겠습니다.

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

Person.prototype.greet = function() {
  console.log(`Hello, my name is ${this.name}`);
};

const john = new Person('John');

console.log(Object.getPrototypeOf(john) === Person.prototype); // true

const newPrototype = {
  goodbye: function() {
    console.log(`Goodbye from ${this.name}`);
  }
};

Object.setPrototypeOf(john, newPrototype);

john.goodbye(); // "Goodbye from John"

위의 코드에서 Object.getPrototypeOf(john)을 사용하여 john 객체의 프로토타입을 가져옵니다. 이는 john.__proto__와 동일한 결과를

JavaScript의 __proto__ 프로퍼티는 객체의 프로토타입에 직접 접근하기 위한 프로퍼티입니다. __proto__를 사용하여 객체의 프로토타입을 설정하거나 가져올 수 있습니다. 그러나 이는 비표준이며, 공식적으로 권장되지 않는 방법입니다. 대신에 Object.getPrototypeOf()Object.setPrototypeOf() 메서드를 사용하여 프로토타입에 접근하고 설정하는 것이 권장됩니다.

아래의 예시 코드를 통해 __proto__의 사용법과 다른 기능을 설명하겠습니다.

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

Person.prototype.greet = function() {
  console.log(`Hello, my name is ${this.name}`);
};

const john = new Person('John');

console.log(john.__proto__ === Person.prototype); // true
console.log(john.__proto__.constructor === Person); // true

john.__proto__.greet(); // "Hello, my name is John"

위의 코드에서 john.__proto__를 사용하여 john 객체의 프로토타입에 접근합니다. john.__proto__Person.prototype 객체를 가리키며, 이를 통해 프로토타입 체인을 따라 상속된 프로퍼티와 메서드에 접근할 수 있습니다.

john.__proto__ === Person.prototypejohn 객체의 프로토타입이 Person.prototype과 일치하는지 확인하는 것입니다.

john.__proto__.constructor === Person는 프로토타입 객체의 constructor 프로퍼티를 통해 해당 객체를 생성한 생성자 함수에 접근하는 것입니다.

마지막으로, john.__proto__.greet()를 호출하여 john 객체의 프로토타입에 정의된 greet 메서드를 실행합니다.

그러나 __proto__는 비표준이므로 권장되지 않는 방법입니다. 대신에 Object.getPrototypeOf()Object.setPrototypeOf() 메서드를 사용하여 표준 방식으로 프로토타입에 접근하고 설정하는 것이 좋습니다. 아래의 예시 코드를 통해 보여드리겠습니다.

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

Person.prototype.greet = function() {
  console.log(`Hello, my name is ${this.name}`);
};

const john = new Person('John');

console.log(Object.getPrototypeOf(john) === Person.prototype); // true

const newPrototype = {
  goodbye: function() {
    console.log(`Goodbye from ${this.name}`);
  }
};

Object.setPrototypeOf(john, newPrototype);

john.goodbye(); // "Goodbye from John"

위의 코드에서 Object.getPrototypeOf(john)을 사용하여 john 객체의 프로토타입을 가져옵니다. 이는 john.__proto__와 동일한 결과를 반환합니다.

JavaScript에서의 __proto__는 객체의 프로토타입에 직접 접근하기 위한 프로퍼티입니다. __proto__는 비표준이며, 공식적으로 권장되는 방법은 아닙니다. 대신 Object.getPrototypeOf()Object.setPrototypeOf() 메서드를 사용하여 프로토타입에 접근하고 설정하는 것이 권장됩니다.

__proto__의 사용 예시를 코드로 보여드리겠습니다.

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

Person.prototype.greet = function() {
  console.log(`Hello, my name is ${this.name}`);
};

const john = new Person('John');

console.log(john.__proto__ === Person.prototype); // true
console.log(john.__proto__.constructor === Person); // true

john.__proto__.greet(); // "Hello, my name is John"

위의 코드에서 john.__proto__를 사용하여 john 객체의 프로토타입에 접근합니다. john.__proto__Person.prototype 객체를 가리키며, 이를 통해 프로토타입 체인을 따라 상속된 프로퍼티와 메서드에 접근할 수 있습니다.

john.__proto__ === Person.prototypejohn 객체의 프로토타입이 Person.prototype과 일치하는지 확인합니다.

john.__proto__.constructor === Person는 프로토타입 객체의 constructor 프로퍼티를 통해 해당 객체를 생성한 생성자 함수에 접근하는 것입니다.

마지막으로, john.__proto__.greet()를 호출하여 john 객체의 프로토타입에 정의된 greet 메서드를 실행합니다.

그러나 __proto__는 비표준이므로 권장되지 않는 방법입니다. 대신에 Object.getPrototypeOf()Object.setPrototypeOf() 메서드를 사용하여 표준 방식으로 프로토타입에 접근하고 설정하는 것이 좋습니다. 아래의 예시 코드를 통해 보여드리겠습니다.

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

Person.prototype.greet = function() {
  console.log(`Hello, my name is ${this.name}`);
};

const john = new Person('John');

console.log(Object.getPrototypeOf(john) === Person.prototype); // true

const newPrototype = {
  goodbye: function() {
    console.log(`Goodbye from ${this.name}`);
  }
};

Object.setPrototypeOf(john, newPrototype);

john.goodbye(); // "Goodbye from John"

위의 코드에서 Object.getPrototypeOf(john)을 사용하여 john 객체의 프로토타입을 가져옵니다. 이는 john.__proto__와 동일한 결과를 반환합니다. Object.setPrototypeOf(john, newPrototype)를 사용하여 john 객체의 프로토타입을 newPrototype 객체로 설정합니다. 이렇게 함으로써 john 객체는

JavaScript의 __proto__는 객체의 프로토타입에 직접 접근하는 프로퍼티입니다. 이 프로퍼티를 사용하여 객체의 프로토타입에 접근하거나 수정할 수 있습니다. 그러나 __proto__는 비표준이며, 표준에서 권장되는 방법은 아닙니다. 대신에 Object.getPrototypeOf()Object.setPrototypeOf() 메서드를 사용하여 프로토타입에 접근하고 설정하는 것이 권장됩니다.

아래는 __proto__의 사용 예시입니다.

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

Person.prototype.greet = function() {
  console.log(`Hello, my name is ${this.name}`);
};

const john = new Person('John');

console.log(john.__proto__ === Person.prototype); // true
console.log(john.__proto__.constructor === Person); // true

john.__proto__.greet(); // "Hello, my name is John"

위의 코드에서 john.__proto__를 사용하여 john 객체의 프로토타입에 접근합니다. john.__proto__Person.prototype 객체를 가리키며, 이를 통해 프로토타입 체인을 따라 상속된 프로퍼티와 메서드에 접근할 수 있습니다.

john.__proto__ === Person.prototypejohn 객체의 프로토타입이 Person.prototype과 일치하는지 확인하는 것입니다.

john.__proto__.constructor === Person는 프로토타입 객체의 constructor 프로퍼티를 통해 해당 객체를 생성한 생성자 함수에 접근하는 것입니다.

마지막으로, john.__proto__.greet()를 호출하여 john 객체의 프로토타입에 정의된 greet 메서드를 실행합니다.

그러나 __proto__는 비표준이므로 권장되지 않는 방법입니다. 대신에 Object.getPrototypeOf()Object.setPrototypeOf() 메서드를 사용하여 표준 방식으로 프로토타입에 접근하고 설정하는 것이 좋습니다. 아래는 이를 보여주는 예시 코드입니다.

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

Person.prototype.greet = function() {
  console.log(`Hello, my name is ${this.name}`);
};

const john = new Person('John');

console.log(Object.getPrototypeOf(john) === Person.prototype); // true

const newPrototype = {
  goodbye: function() {
    console.log(`Goodbye from ${this.name}`);
  }
};

Object.setPrototypeOf(john, newPrototype);

john.goodbye(); // "Goodbye from John"

위의 코드에서 Object.getPrototypeOf(john)을 사용하여 john 객체의 프로토타입을 가져옵니다. 이는 john.__proto__와 동일한 결과를 반환합니다. Object.setPrototypeOf(john, newPrototype)를 사용하여 john 객체의 프로

JavaScript에서의 __proto__는 객체의 프로토타입에 직접 접근하기 위한 프로퍼티입니다. __proto__를 사용하여 객체의 프로토타입을 설정하거나 가져올 수 있습니다. 그러나 이는 비표준이며, 공식적으로 권장되는 방법은 아닙니다. 대신에 Object.getPrototypeOf()Object.setPrototypeOf() 메서드를 사용하여 프로토타입에 접근하고 설정하는 것이 권장됩니다.

아래의 예시 코드를 통해 __proto__의 사용법과 다른 기능을 설명하겠습니다.

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

Person.prototype.greet = function() {
  console.log(`Hello, my name is ${this.name}`);
};

const john = new Person('John');

console.log(john.__proto__ === Person.prototype); // true

const newPrototype = {
  goodbye: function() {
    console.log(`Goodbye from ${this.name}`);
  }
};

john.__proto__ = newPrototype;

john.goodbye(); // "Goodbye from John"

위의 코드에서 john.__proto__를 사용하여 john 객체의 프로토타입에 접근합니다. john.__proto__Person.prototype 객체를 가리키고 있습니다. 이제 우리는 john 객체의 프로토타입을 newPrototype 객체로 설정하고 있습니다.

john.__proto__ === Person.prototype를 사용하여 john 객체의 프로토타입이 Person.prototype과 일치하는지 확인합니다.

그런 다음 john.__proto__ = newPrototype을 사용하여 john 객체의 프로토타입을 newPrototype 객체로 설정합니다. 이제 john 객체는 newPrototype 객체의 프로퍼티와 메서드에 접근할 수 있습니다.

john.goodbye()를 호출하여 john 객체의 프로토타입에 정의된 goodbye 메서드를 실행합니다. 출력은 "Goodbye from John"이 됩니다.

__proto__를 사용하여 객체의 프로토타입에 직접 접근하고 조작하는 것은 비표준이므로 권장되지 않습니다. 대신에 Object.getPrototypeOf()Object.setPrototypeOf() 메서드를 사용하여 표준 방식으로 프로토타입에 접근하고 설정하는 것이 좋습니다.

0개의 댓글