#18 Object.create and Object.assign [33 Concepts Every JavaScript Developer Should Know ]

http://adripofjavascript.com/blog/drips/basic-inheritance-with-object-create.html

Basic Inheritance with Object.create - A Drip of JavaScript

전 포스팅에 생성자 함수를 이용하여 상속 기능을 하는걸 봤었다.

// 함수를 만든다
function SuperHuman (name, superPower) {
    this.name = name;
    this.superPower = superPower;
}

// 생성자 함수의 prototype기능을 사용하여 SuperHuman함수에 usePower메서드를 만든다.
SuperHuman.prototype.usePower = function () {
    console.log(this.superPower + "!");
};

// banshee가 SuperHuman함수를 상속(?) 받았다.
var banshee = new SuperHuman("Silver Banshee", "sonic wail");

// 상속받은 속성인 usePower() 메서드를 쓸 수 있다.
banshee.usePower();  //  sonic wail!

 

위의 코드를 Object.create()를 통해 구현하면

// 메서드를 포함한 함수를 만든다.
var superHuman = {
    usePower: function () {
        console.log(this.superPower + "!");
    }
};

// Object.create()를 사용하여 superHuman()함수를 상속 받는다.
var banshee = Object.create(superHuman, {
    name: { value: "Silver Banshee" },
    superPower: { value: "sonic wail" }
});

// 상속 받음.
banshee.usePower(); // sonic wail!

모든 객체는 Prototype으로서 사용될수 있기 때문에 Object.create()를 사용하면 체인처럼 상속을 계속 할 수 있다.  

 

생성자 함수와의 차이점은 Object.create()는 instanceOf에서 발견되지 않는다는 점이다. 대신에 isPrototypeOf 메서드를 써야한다.

superHuman.instaceOf( superHero ) // false
superHuman.isPrototypeOf( superHero )  // true

superHuman은 superHero의 상속 고리기 때문이다. ( part of superHero's prototype chain ) 

Object.create()는 IE8에서 동작하지 않는다. 이상 버전에서만 작동한다. 크롬은 되겠지 아마도..

 

 

- Objcet.assign() 

이건 타겟 객체에 기존의 객체들을 병합한다.

// 더미 객체 생성
var obj1 = {a:1};
var obj2 = {b:2};
var obj3 = {c:3};

// newObj에 객체들 할당
var newObj = Object.assign(obj1, obj2, obj3);


console.log(newObj); // {a: 1, b: 2, c: 3}
console.log(obj1); // {a: 1, b: 2, c: 3}


----------------------------------------------
var obj1 = {a:1};
var obj2 = {b:2};
var obj3 = {c:3};

var newObj = Object.assign({}, obj1, obj2, obj3);

console.log(newObj); // {a: 1, b: 2, c: 3}

첫 번째 인자에 빈 객체를 넣으면 newObj에 인자로 받은 객체들을 복사한다. 

첫 번째 인자의 객체가 값이 있다면 해당 객체의 값도 바뀐다.

 

참조 사이트

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

Object.assign()