Object.create & prototype - Javascript

How to construct an object in Javascript?

자바스크립트에서의 객체들은 그것의 부모 객체와 모두 연결되어 있다. 때문에 부모 객체의 속성을 상속시켜 사용할 수 있게 할 수 있다. 이 때 자식으로 속성을 상속시켜 주는 부모 객체를 "Prototype 객체"라고 한다.

 

Prototype

• Prototype Link와 Prototype Object
  => 자바스크립트에는 Prototype Link와 Prototype Object라는 것이 존재한다. 이 둘을 통틀어서 Prototpye이라고 한다. 
• Prototype Link => 어떤 객체가 참조하고 있는(link 중인) prototype 객체가 무엇인지를 나타낸다.
• Prototype Object => 객체는 언제나 함수를 통해 생성된다. 새롭게 생성시킨 객체는 부모 객체의 prototype을 link 하고 있다.

function Person(age) {this.age;}; // => 함수
const personObject = new Person(); // => 함수 Person으로 객체를 생성

console.log(Person.prototype.constructor === Person) //true
console.log(personObject.__proto__ === Person.prototype) //true
console.log(Person.__proto__ === Function.prototype) //true

 

객체 리터럴로 생성한 객체

: 사실상 let obj = {};와 같은 방식의 객체 생성은 let obj = new Object(); 와 같다.
자바스크립트 엔진은 객체 생성을 리터럴 방식으로 하게 되면, 내부적으로 Object() 생성자 함수를 사용하여 객체를 만든다. Object()는 생성자 함수이므로 일반적인 객체와 달리 prototype 속성이 있다.
Function이나 Array도 마찬가지이다.

 

생성된 객체가 어떤 property를 지니고 있는지 확인할 때에는

=> console.dir(obj)
=> obj라고 하는 객체의 속성들을 콘솔에 나타낸다.

 

__proto__
: 어떤 객체에서, 다른 객체의 멤버변수를 자신이 소유한 것처럼 사용하길 원할 때 이용한다. 어떤 객체의 prototype을 link하여 사용하고 있는지를 나타내준다.

var a = {
    attr1: 'a1'
}

var b = {
    attr2: 'a2'
}

b.__proto__ = a; // __proto__는 멤버 변수나 메서드를 몇가지 제약은 있으나 마치 적용시켜주는 것(b)이 소유한 것처럼 사용할 수 있다.

b.attr1 // 'a1'

 

Object.create

1. Object.create은 첫번째 파라미터로 넣어준 것의 prototype을 복사해온다.

   //console.dir(Object); Object의 속성 중에서 create를 사용할 것.
   //Object.create(prototypeObject, propertyObject) 
   const obj = Object.create(Object.prototype);//Object.prototype이 가지고 있는 속성들을 obj로 가져온다.
   const obj2 = {}; //Object.create와 똑같이 동작.
   

2. Object.create은 복사하고 싶은 protperty를 가진 prototype 객체에 대한 복사 후 새롭게 생성하는 것이 주목적. create한 뒤에, 복사해온 prototype의 constructor가 아닌, 실제로 새로 만든 객체의 constructor를 지정해주어야 한다. 그런 뒤 context도 지정해주어야 한다.

    

   const Car = function (color) {
    this.color = color;
   }
   const car1 = new Car ('red');
   const car2 = Object.create(Object.prototype);
   console.dir(car1); //Car 생성자에 대한 color 값으로 'red' 내포.
   console.dir(car2); //생성자에 대한 정보 없음. Object.prototype의 속성만 가져옴.
   
   
   const Human = function(name) {
   	this.name = name,
   }
   Human.prototype.sleep = function() {
   	console.log('zzz');
   }
   
   const Student = function(name) {
   	Human.call(this, name)
   }
   Student.prototype = Object.create(Human.prototype)
   Student.prototype.sleep.apply(this) // Student에서만 slepp 함수가 다르게 작동하게 하려면?

    

Prototypes in Javascript - FunFunFunFunction #16 (https://www.youtube.com/watch?v=riDVvXZ_Kb4)

const food = {
    init: function (type) {
        this.type = type
    },
    eat: function() {
        console.log('you ate the ' + this.type)
    }
}
const waffle = Object.create(food)
waffle.init('waffle')
waffle.eat() //waffle의 type을 지정중
food.type = 'asldfsahfsaldkhfalkds' //food의 type을 바꾸어 줌
waffle.eat() //food의 type이 바뀌어도 waffle의 type은 바뀌지 않음

//만약, waffle.init('waffle')이 없다면, 
//11의 실행에서는 you ate the undefined. type의 값 자체가 어디에도 없기 때문이다.
//12에서 type 값을 food 내에서 정의하고, 그 type 값을 13에서 그대로 가져다 씀.
console.dir(food)

//prototype을 제대로 참조하였는지 확인할 때에는 'isPrototypeOf()'를 사용한다.

const food = {
    init: function (type) {
        this.type = type
    },
    eat: function() {
        console.log('you ate the ' + this.type)
    }
}

const waffle = Object.create(food)
waffle.init('waffle')

const carrot = Object.create(food)
carrot.init('carrot')

console.log('waffle is food', food.isPrototypeOf(waffle)) // waffle is food true
console.log('123123 is food', food.isPrototypeOf(123123)) // 123123 is food false
console.log('carrot is food', food.isPrototypeOf(carrot)) // carrot is food true

 

 

Constructor

: Prototype 객체는 constructor라고 하는 속성을 갖게 된다. constructor는 객체 입장에서 자신을 생성해준 부모 객체를 가리킨다. 

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

var apple = new Fruit('apple');

console.log(Fruit.prototype.constructor === Fruit) // true
console.log(apple.constructor === Fruit) // true
console.log(Fruit.constructor === Funtion) // true