IMMERSIVE #7 - prototype, Object.create()

geonhwiยท2019๋…„ 7์›” 29์ผ
0
post-thumbnail

2์ฃผ์ฐจ๊ฐ€ ์‹œ์ž‘๋˜์—ˆ์Šต๋‹ˆ๋‹ค.๐Ÿคฃ

Sprint03.Inheritance Pattern์„ ์ง„ํ–‰ํ•˜๊ธฐ ์ „์— ์ค‘์š”ํ•œ ์š”์†Œ๋“ค์„ ๊ณต๋ถ€ํ•ฉ๋‹ˆ๋‹ค.

๐Ÿ„๐Ÿปโ€โ™‚๏ธ Solo Part

1. Object.prototype

JavaScript๋Š” ํ”„๋กœํ† ํƒ€์ž… ๊ธฐ๋ฐ˜์˜ ๊ฐ์ฒด ์ง€ํ–ฅํ˜• ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด์ž…๋‹ˆ๋‹ค.

์ด์ œ OOP(๊ฐ์ฒด ์ง€ํ–ฅ ํ”„๋กœ๊ทธ๋ž˜๋ฐ)์— ๋Œ€ํ•ด์„  ์กฐ๊ธˆ ์•Œ๊ฒ ๋Š”๋ฐ์š”, prototype ๊ธฐ๋ฐ˜์€ ๋ฌด์—‡์„ ์˜๋ฏธํ• ๊นŒ์š”?

prototype์„ ํ•ด์„ํ•ด๋ณด๋ฉด ์›ํ˜• ์ด๋ผ๋Š” ์˜๋ฏธ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. ์•„ ๊ทธ๋ ‡๊ตฌ๋‚˜, ์ผ๋‹จ ๋„˜์–ด๊ฐ‘์‹œ๋‹ค.

ES6 ๋ฌธ๋ฒ•์ด ๋„์ž…๋˜๊ธฐ ์ „์—๋Š” JavaScript์—๋Š” ํด๋ž˜์Šค(Class)๊ฐ€ ์—†์—ˆ์Šต๋‹ˆ๋‹ค.

๊ทธ๋ž˜์„œ ๊ฐ์ฒด ์ƒ์„ฑ์„ ์œ„ํ•ด์„œ prototype์„ ์‚ฌ์šฉํ•˜์˜€๋Š”๋ฐ์š”.

์ฝ”๋“œ ๋ถ€ํ„ฐ ํ•œ๋ฒˆ ๋ด…์‹œ๋‹ค!

// EX.01
let singer = {
    name: '๋‹คํ˜„',
    age: 22,
}

// ํฌ๋กฌ ์ฝ˜์†”์—์„œ ํ…Œ์ŠคํŠธํ•˜๋ฉด ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค.
singer {name: "๋‹คํ˜„", age: 22}
  > age: 22
  > name: "๋‹คํ˜„"
  > __proto__: Object

// people๊ฐ์ฒด์˜ __proto__๋Š” Object๊ฐ์ฒด์˜ ํ”„๋กœํ† ํƒ€์ž…๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค.
console.log(singer.__proto__ === Object.prototype) // true

๊ฐ์ฒด๋ฅผ ์ƒ์„ฑํ•˜๋ฉด, ํ”„๋กœํ† ํƒ€์ž…์ด ๊ฒฐ์ •๋˜๊ณ , ์šฐ๋ฆฌ๋Š” ๊ทธ ํ”„๋กœํ† ํƒ€์ž…์„ ๋ณ€๊ฒฝํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค!

๊ทธ๋ ‡๋‹ค๋ฉด ์ด๋ฅผ ์ €ํฌ ์ž…๋ง›์— ๋งž๊ฒŒ ๋ณ€๊ฒฝํ•˜์—ฌ, ์ƒ์†์„ ๊ตฌํ˜„ํ•˜๋Š” ๊ฒƒ์ด์ฃ !

์ด๋ฒˆ์—” ์ผ๋ฐ˜ ๊ฐ์ฒด๊ฐ€ ์•„๋‹Œ ํ•จ์ˆ˜ ๊ฐ์ฒด๋ฅผ ์•Œ์•„๋ณผ๊นŒ์š”? ์—ฌ๊ธฐ์„œ๋ถ€ํ„ฐ ์กฐ๊ธˆ ํ—ท๊ฐˆ๋ฆฝ๋‹ˆ๋‹ค!

// EX.02
function People(name, age) {
	this.name = name;
	this.age = age;
}

// ํฌ๋กฌ ์ฝ˜์†”์—์„œ ํ…Œ์ŠคํŠธํ•˜๋ฉด ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค. (๋ถ€๋ถ„ ์ƒ๋žต)
console.dir(People);
People(name, age)
  > name: "People"
  > prototype: {constructor: ฦ’}
  > __proto__: ฦ’ ()

// People ๊ฐ์ฒด์˜ ์ธ์Šคํ„ด์Šค๋ฅผ ์ƒ์„ฑํ•ฉ๋‹ˆ๋‹ค.
const dahyun = new People('๋‹คํ˜„', 22);

// ํฌ๋กฌ ์ฝ˜์†”์—์„œ ํ…Œ์ŠคํŠธํ•˜๋ฉด ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค.
console.dir(dahyun);
People
  > age: 22
  > name: "๋‹คํ˜„"
  > __proto__: Object

ํ•จ์ˆ˜ ๊ฐ์ฒด People() ์•ž์— newํ‚ค์›Œ๋“œ๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ์ƒ์„ฑ์ž๊ฐ€ ๋˜๊ณ , ์ด๊ฒƒ์œผ๋กœ ์ƒ์„ฑํ•œ ๊ฐ์ฒด๋ฅผ ์ธ์Šคํ„ด์Šค๋ผ๊ณ  ํ•ฉ๋‹ˆ๋‹ค.

ํ•จ์ˆ˜ ๊ฐ์ฒด์˜ ์ถœ๋ ฅ๊ณผ ์ธ์Šคํ„ด์Šค ๊ฐ์ฒด์˜ ์ถœ๋ ฅ์„ ๋ณด๋ฉด, ์ธ์Šคํ„ด์Šค ๊ฐ์ฒด์— prototype์ด ์—†์Šต๋‹ˆ๋‹ค!

๊ทธ๋ ‡๋‹ค๋ฉด __proto__๋Š” ๋ฌด์—‡์ด๊ณ , prototype๊ณผ ๋ฌด์—‡์ด ๋‹ค๋ฅธ๊ฑธ๊นŒ์š”?

๋จผ์ € [[prototype]]์„ ์ดํ•ดํ•˜์…”์•ผ ํ•ฉ๋‹ˆ๋‹ค! ๐Ÿ‘ˆ๐Ÿป

[[prototype]]

  • JavaScript์˜ ๋ชจ๋“  ๊ฐ์ฒด์—๋Š” [[prototype]]์ด๋ผ๋Š” ๋‚ด๋ถ€ ์Šฌ๋กฏ์ด ์กด์žฌํ•ฉ๋‹ˆ๋‹ค.
  • ํ•จ์ˆ˜ ๊ฐ์ฒด๋ฅผ ํฌํ•จํ•œ ๋ชจ๋“  ๊ฐ์ฒด๊ฐ€ ๊ฐ€์ง€๊ณ  ์žˆ๋Š” ํ”„๋กœํผํ‹ฐ์ž…๋‹ˆ๋‹ค.
  • [[prototype]]์˜ ๊ฐ’์€ ํ”„๋กœํ† ํƒ€์ž… ๊ฐ์ฒด๋กœ์„œ, __proto__๋กœ ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

__proto__

  • ๊ฐ์ฒด ์ž…์žฅ์—์„œ ์ž์‹ ์˜ ๋ถ€๋ชจ ์—ญํ• ์ธ ํ”„๋กœํ† ํƒ€์ž… ๊ฐ์ฒด๋ฅผ ๊ฐ€๋ฆฌํ‚ต๋‹ˆ๋‹ค.
  • __proto__์— ์ ‘๊ทผํ•˜๋ฉด ๋‚ด๋ถ€์ ์œผ๋กœ Object.getPropertyOf()๊ฐ€ ํ˜ธ์ถœ๋˜์–ด ํ”„๋กœํ† ํƒ€์ž… ๊ฐ์ฒด๋ฅผ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค.
  • People์ด ํ•จ์ˆ˜ ๊ฐ์ฒด์ด๋ฉด ํ•จ์ˆ˜์˜ ํ”„๋กœํ† ํƒ€์ž…์„ ๊ฐ€๋ฆฌํ‚ต๋‹ˆ๋‹ค.

prototype

  • ํ•จ์ˆ˜ ๊ฐ์ฒด๋งŒ์ด ๊ฐ€์ง€๋Š” ํ”„๋กœํผํ‹ฐ์ž…๋‹ˆ๋‹ค.
  • ํ•จ์ˆ˜ ๊ฐ์ฒด๊ฐ€ ์ƒ์„ฑ์ž(ํด๋ž˜์Šค)๋กœ ์‚ฌ์šฉ๋  ๋•Œ ์ธ์Šคํ„ด์Šค์˜ ๋ถ€๋ชจ ์—ญํ• ์„ ํ•˜๋Š” ๊ฐ์ฒด๋ฅผ ๊ฐ€๋ฆฌํ‚ต๋‹ˆ๋‹ค.

๊ทธ๋Ÿผ, ์œ„์—์„œ ์ƒ์„ฑํ•œ ๊ฐ์ฒด๋“ค์„ ๋น„๊ตํ•ด๋ด…์‹œ๋‹ค!

// ๋Œ€๋žต์ ์ธ ๋ณ€์ˆ˜ ์„ค๋ช…
let singer = { ... }
let People = function { ... }
let dahyun = new Person( ... )

// singer : ์ผ๋ฐ˜ ๊ฐ์ฒด
singer.__proto__ === Object.prototype   // true
singer.__proto__ === Function.prototype // false

// People : ํ•จ์ˆ˜ ๊ฐ์ฒด
People.__proto__ === Object.prototype   // false
People.__proto__ === Function.prototype // true

// dahyun : ์ธ์Šคํ„ด์Šค ๊ฐ์ฒด
dahyun.__proto__ === Object.prototype   // false
dahyun.__proto__ === Function.prototype // false
dahyun.__proto__ === People.prototype   // true

2. constructor

๋‹ค๋ฅธ ์–ธ์–ด๋ฅผ ๊ณต๋ถ€ํ•˜์…จ๋‹ค๋ฉด class๋ฅผ ๋ฐฐ์šฐ์‹ค ๋•Œ constructor๋ผ๋Š” ๊ฐœ๋…์„ ๋ฐฐ์šฐ์…จ์„ ํ…๋ฐ์š”. ์ด์™€ ๋น„์Šทํ•ฉ๋‹ˆ๋‹ค.

ํ”„๋กœํ† ํƒ€์ž… ๊ฐ์ฒด๋Š” constructor ํ”„๋กœํผํ‹ฐ๋ฅผ ๊ฐ€์ง€๋ฉฐ, ์ด๋Š” ๊ฐ์ฒด์˜ ์ž…์žฅ์—์„œ ์ž์‹ ์„ ์ƒ์„ฑํ•œ ๊ฐ์ฒด๋ฅผ ๊ฐ€๋ฆฌํ‚ต๋‹ˆ๋‹ค.

์—ญ์‹œ ๋ง๋ณด๋‹จ ์ฝ”๋“œ๋กœ ์ดํ•ดํ•ด ๋ด…์‹œ๋‹ค. ๐Ÿ‘๐Ÿป

์ฃผ์„์— ์„ค๋ช…์„ ์ ๊ฒ ์Šต๋‹ˆ๋‹ค :)

// ํ•จ์ˆ˜ ๊ฐ์ฒด๋ฅผ ์ƒ์„ฑํ•ฉ๋‹ˆ๋‹ค.
function People(name, age) {
	this.name = name;
	this.age = age;
}

// ์ธ์Šคํ„ด์Šค ๊ฐ์ฒด๋ฅผ ์ƒ์„ฑํ•ฉ๋‹ˆ๋‹ค.
const sohee = new People('์†Œํฌ', 29);

// ํฌ๋กฌ ์ฝ˜์†”์—์„œ ์ถœ๋ ฅํ•ฉ๋‹ˆ๋‹ค.
console.dir(People)
People
  > age: 29
  > name: "์†Œํฌ"
  > __proto__:
    > constructor: ฦ’ People(name, age)
    > __proto__: Object
    
// ๊ฒฐ๊ณผ 1 : People ์ƒ์„ฑ์ž ํ•จ์ˆ˜์— ์˜ํ•ด ์ƒ์„ฑ๋œ ๊ฐ์ฒด๋ฅผ ์ƒ์„ฑํ•œ ๊ฐ์ฒด๋Š” People ์ƒ์„ฑ์ž ํ•จ์ˆ˜์ž…๋‹ˆ๋‹ค.
console.log(People.prototype.constructor === People) // true

// ๊ฒฐ๊ณผ 2 : ์ธ์Šคํ„ด์Šค๋ฅผ ์ƒ์„ฑํ•œ ๊ฐ์ฒด๋Š” People์ž…๋‹ˆ๋‹ค.
console.log(sohee.constructor === People)            // true

// ๊ฒฐ๊ณผ 3 : ํ•จ์ˆ˜ ๊ฐ์ฒด๋ฅผ ์ƒ์„ฑํ•œ ๊ฐ์ฒด๋Š” Function ๊ฐ์ฒด์ž…๋‹ˆ๋‹ค.
console.log(People.constructor === Function)         // true

3. Prototype Chain ๐Ÿ”—

JavaScript์—์„œ ํŠน์ • ๊ฐ์ฒด๋‚˜ ํ”„๋กœํผํ‹ฐ์— ์ ‘๊ทผํ•  ๋•Œ, ํ•ด๋‹น ๊ฐ์ฒด์— ๋Œ€์ƒ์ด ์—†๋‹ค๋ฉด [[prototype]]์„ ํ†ตํ•ด ๋Œ€์ƒ์„ ๊ฒ€์ƒ‰ํ•ฉ๋‹ˆ๋‹ค.

์ด๊ฒƒ์ด ์‚ฌ์Šฌ ์ฒ˜๋Ÿผ ์—ฐ๊ฒฐ ๋˜์–ด ์žˆ๋‹ค๊ณ  ํ•˜์—ฌ Prototype Chain ์ด๋ผ๊ณ  ํ•ฉ๋‹ˆ๋‹ค.

๋ญ”๊ฐ€ ๋ง์ด ์–ด๋ ค์šด ๊ฒƒ๊ฐ™์ง€๋งŒ, ์ €ํฌ๋Š” ์ด๋ฏธ ์ž์ฃผ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค!

๊ฐ€์žฅ ์ž์ฃผ ์‚ฌ์šฉํ•˜๋Š” ๋ฐฐ์—ด์„ ์˜ˆ๋กœ ๋“ค์–ด๋ณผ๊นŒ์š”?

// Array
Array.prototype
  > concat: ฦ’ concat()
  > constructor: ฦ’ Array()
  > copyWithin: ฦ’ copyWithin()
  > entries: ฦ’ entries()
  > every: ฦ’ every()
  > fill: ฦ’ fill()
  > filter: ฦ’ filter()
  > find: ฦ’ find()
  > findIndex: ฦ’ findIndex()
  > flat: ฦ’ flat()
  ...

๋ฐฐ์—ด์—์„œ ์ž์ฃผ ์‚ฌ์šฉํ•˜๋Š” ๋ฉ”์†Œ๋“œ์ธ concat, every, fill ๋“ฑ์ด ๋ชจ๋‘ prototype์— ๋“ค์–ด ์žˆ์Šต๋‹ˆ๋‹ค.

๊ทธ๋Ÿฐ๋ฐ ์ €ํฌ๋Š” [1,2,3].prototype.concat ์ด ์•„๋‹Œ [1,2,3].concat์„ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.

์ด๋Ÿฐ ๊ฒƒ๋“ค๋„ ๋ชจ๋‘ ํ”„๋กœํ† ํƒ€์ž… ์ฒด์ธ์ž…๋‹ˆ๋‹ค.

ํ”„๋กœํ† ํƒ€์ž…์„ ์—ด์‹ฌํžˆ ๊ณต๋ถ€ํ•˜์…จ๋‹ค๋ฉด, ํ”„๋กœํ† ํƒ€์ž… ์ฒด์ธ์€ ์˜ˆ์ œ๋กœ ๊ฐ„๋‹จํ•˜๊ฒŒ ์ดํ•ดํ•˜์‹ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค!

// prototype chain
const A = function() {}
A.prototype.log = "I'm here";

const B = function() {};
B.prototype = new A();

const C = function() {};
C.prototype = new B();

const message = new C();
console.log(message.log) // I'm here

๋งˆ์ง€๋ง‰ ์ค„์„ ๋จผ์ € ๋ณด๋ฉด, C ์ƒ์„ฑ์ž๋กœ ๋งŒ๋“  ์ธ์Šคํ„ด์Šค๊ฐ€ A.prototype.log๋ฅผ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค?!

์˜ˆ์ƒํ•˜์…จ๊ฒ ์ง€๋งŒ, C์˜ prototype์— log๊ฐ€ ์—†์–ด ์ฐจ๋ก€์ฐจ๋ก€ ์˜ฌ๋ผ๊ฐ€๋ฉด์„œ ํ™•์ธํ•˜์—ฌ ๊ฐ€์ ธ์˜ค๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค.

๋„ˆ๋ฌด ๊ฐ„๋‹จํ•œ๋ฐ, ์ฃผ์˜ํ•  ์  ํ•˜๋‚˜๋งŒ ์งš๊ณ  ํ”„๋กœํ† ํƒ€์ž… ์ฒด์ธ์„ ๋งˆ์น˜๊ฒ ์Šต๋‹ˆ๋‹ค.

// prototype chain
const A = function() {}
A.prototype.log = "I'm here";

const B = function() {};
B.prototype = new A();

const C = function() {};
C.prototype = new B();
C.prototype.log = 1;

const message = new C();
console.log(message.log) // 1

C์˜ prototype์— ๋‹ค๋ฅธ ๊ฐ’์„ ์ถ”๊ฐ€ ํ•˜์˜€์Šต๋‹ˆ๋‹ค.

๋งˆ์ง€๋ง‰ ์ค„์˜ ๊ฒฐ๊ณผ์™€ ๊ฐ™์ด, C์˜ prototype์— log๊ฐ€ ์กด์žฌํ•˜๋ฏ€๋กœ 1 ์„ ๋ฐ”๋กœ ๊ฐ€์ ธ์˜ต๋‹ˆ๋‹ค.

4. Object.create()

๊ฐ์ฒด๋ฅผ ์ƒ์„ฑํ•œ๋‹ค...์ธ๊ฐ€์š”? ๐Ÿ˜…

์ž˜ ๋ชจ๋ฅด๊ฒ ์œผ๋‹ˆ MDN์—์„œ ์˜ˆ์ œ ์ฝ”๋“œ๋ฅผ ๊ฐ€์ ธ์™€๋ด…์‹œ๋‹ค!

// MDN : Object.create() - example
const person = {
  isHuman: false,
  printIntroduction: function () {
    console.log(`My name is ${this.name}. Am I human? ${this.isHuman}`);
  }
};

const me = Object.create(person);

me.name = "Matthew"; // "name" is a property set on "me", but not on "person"
me.isHuman = true; // inherited properties can be overwritten

me.printIntroduction();
// expected output: "My name is Matthew. Am I human? true"

๋ญ”๊ฐ€ ๋ณต์‚ฌํ•˜๋Š” ๋Š๋‚Œ์ด ๋“ญ๋‹ˆ๋‹ค. ์ž์„ธํžˆ ์‚ดํŽด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.

// person
person {isHuman: false, printIntroduction: ฦ’}

// me
me {}
  > __proto__:
  > isHuman: false
  > printIntroduction: ฦ’ ()
  > __proto__: Object
  
// prototype check
me.__proto__ === person // true

๋นˆ ๊ฐ์ฒด๋ฅผ ์ƒ์„ฑํ•˜๋Š” ๊ฒƒ ๊ฐ™์ง€๋งŒ, me ๊ฐ์ฒด์˜ prototype์€ person ๊ฐ์ฒด๋ฅผ ๊ฐ€๋ฆฌํ‚ต๋‹ˆ๋‹ค.

๊ฐ์„ ์žก์€ ์ฑ„๋กœ, ์ •์˜๋ฅผ ์‚ดํŽด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.

Object.create()

  1. ๊ฐ์ฒด์—์„œ ๋‹ค๋ฅธ ๊ฐ์ฒด๋กœ ์ง์ ‘ ์ƒ์†์„ ๊ตฌํ˜„ํ•ฉ๋‹ˆ๋‹ค.
  2. ํด๋ž˜์Šค ํŒจํ„ด๊ณผ ๋‹ค๋ฅด๊ฒŒ new ํ‚ค์›Œ๋“œ๋ฅผ ์‚ฌ์šฉํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.
  3. ๊ฐ์ฒด ๋ฆฌํ„ฐ๋Ÿด ํŒจํ„ด์—๋„ ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค.

์˜ˆ๋ฅผ ๋“ค์–ด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.

// Object.create() - example1
const animal = {
  log: function() {
    console.log(this.sound)
  }
}
const dog = Object.create(animal);
console.log(dog) // {}
dog.sound = '๋ฉ๋ฉ'
dog.log(); // ๋ฉ๋ฉ

const cat = Object.create(animal);
console.log(cat) // {}
cat.sound = '๋ƒฅ๋ƒฅ'
cat.log(); // ๋ƒฅ๋ƒฅ

animal.isPrototypeOf(dog) // true
animal.isPrototypeOf(cat) // true

animal ๊ฐ์ฒด๋ฅผ ์ƒ์„ฑํ•˜์—ฌ log๋ฉ”์†Œ๋“œ๋ฅผ ์ถ”๊ฐ€ํ•˜์˜€์Šต๋‹ˆ๋‹ค.

Object.create(animal)์˜ ๋ฆฌํ„ด๊ฐ’์„ dog์— ์ถ”๊ฐ€ํ•˜์˜€์Šต๋‹ˆ๋‹ค.

console์„ ์ฐ์–ด๋ณด๋ฉด ๊ฒ‰์œผ๋กœ ๋ณด๊ธฐ์—” ๋นˆ ๊ฐ์ฒด์ด์ง€๋งŒ, __proto__์— animal ๊ฐ์ฒด๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

๊ทธ๋ž˜์„œ animal๊ฐ์ฒด์˜ log๋ฅผ ์ƒ์†๋ฐ›์•„ dog.log ๋กœ '๋ฉ๋ฉ', '๋ƒฅ๋ƒฅ'์„ ์ถœ๋ ฅํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๊ทธ๋Ÿผ Object.create()์˜ ๋‚ด๋ถ€๋ฅผ ํ™•์ธํ•ด๋ด…์‹œ๋‹ค.

// MDN Object.create() - Polyfill
Object.create = function (proto) {
  // ์˜ˆ์™ธ ์ฒ˜๋ฆฌ ์ƒ๋žต
  function F() {}
  F.prototype = proto;
  return new F();
};

์˜ˆ์™ธ ์กฐ๊ฑด์„ ์ƒ๋žตํ•˜๋‹ˆ ๋งค์šฐ ์งง์•„์กŒ์Šต๋‹ˆ๋‹ค! โœŒ๐Ÿป

์ธ์ž๋กœ proto๋ฅผ ๋ฐ›์•„์„œ ์ƒ์„ฑ์ž์˜ prototype์— proto๋ฅผ ๋„ฃ๊ณ  ๋ฆฌํ„ดํ•˜๊ณ  ์žˆ๋Š” ๊ฒƒ์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค!

๋‹ค์Œ ์ฝ”๋“œ์—์„œ Object.create()์˜ ๋ฌธ์ œ์ ์„ ๊ณ ์น˜๊ณ  ๋งˆ๋ฌด๋ฆฌํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.

// Object.create() - example2
// 1. Human ํด๋ž˜์Šค๋ฅผ ์ƒ์„ฑํ•ฉ๋‹ˆ๋‹ค.
let Human = function(name) {
  this.name = name;
}

// 2. Human์˜ prototype์— sleep๋ฉ”์†Œ๋“œ๋ฅผ ์ถ”๊ฐ€ํ•ฉ๋‹ˆ๋‹ค.
Human.prototype.sleep = function() {
  console.log('zzz...')
};

// 3. ์ธ์Šคํ„ด์Šค ์ƒ์„ฑ
let steve = new Human('steve');

// 4. Student ํด๋ž˜์Šค๋ฅผ ์ƒ์„ฑํ•ฉ๋‹ˆ๋‹ค. ์ด๋•Œ, Human.call()๋กœ this๋ฅผ ์—ฐ๊ฒฐ์‹œ์ผœ์ฃผ์–ด์•ผํ•ฉ๋‹ˆ๋‹ค.
let Student = function(name) {
  Human.call(this, name)
}

// 5. Object.create()์˜ ๊ฒฐ๊ณผ๋ฅผ Student.prototype์œผ๋กœ ๋„ฃ์–ด์ค๋‹ˆ๋‹ค.
Student.prototype = Object.create(Human.prototype)

// 6. Student.prototype์˜ constructor๋ฅผ Student๊ฐ์ฒด๋กœ ๋งŒ๋“ค์–ด์ค๋‹ˆ๋‹ค.
Student.prototype.constructor = Student;

// 7. learn ๋ฉ”์†Œ๋“œ๋ฅผ ์ถ”๊ฐ€ํ•ฉ๋‹ˆ๋‹ค.
Student.prototype.learn = function() {
  console.log('๋ฐฐ์šฐ๋Š”์ค‘...')
};

// 8. john ์ธ์Šคํ„ด์Šค๋ฅผ ์ƒ์„ฑํ•ฉ๋‹ˆ๋‹ค.
let john = new Student('john');

john.learn() // ๋ฐฐ์šฐ๋Š”์ค‘...
john.sleep() // zzz...

๋งŒ์•ฝ 6๋ฒˆ ๊ณผ์ •์„ ์ƒ๋žตํ•˜๋ฉด Student.prototype์—๋Š” constructor๊ฐ€ ์กด์žฌํ•˜์ง€์•Š์Šต๋‹ˆ๋‹ค.

๊ทธ๋ž˜์„œ Student.prototype.constructor๋Š” Student๋ฅผ ๊ฐ€๋ฆฌ์ผœ์•ผ ํ•˜๋ฏ€๋กœ ์ง์ ‘ ๋„ฃ์–ด์ค๋‹ˆ๋‹ค.

๊ทธ๋ฆฌ๊ณ  4๋ฒˆ์€, new ํ‚ค์›Œ๋“œ๋กœ ์ธ์Šคํ„ด์Šค๋ฅผ ์ƒ์„ฑํ•  ๋•Œ Human์˜ this๋Š” Human์„ ๊ฐ€๋ฆฌํ‚ค์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

๋”ฐ๋ผ์„œ ์ง์ ‘ Human๊ณผ this๋ฅผ ์—ฐ๊ฒฐ์‹œ์ผœ ์ฃผ๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค.

ํ—ท๊ฐˆ๋ฆฌ์‹ ๋‹ค๋ฉด ํ•„์š”ํ•˜์‹ค ๋•Œ ์ง์ ‘ ๋„ฃ์–ด๋ณด์‹œ๋ฉด ๊ธˆ๋ฐฉ ์ดํ•ด๊ฐ€ ๋  ๊ฒƒ์ž…๋‹ˆ๋‹ค ๐ŸคŸ๐Ÿป


profile
ggit

0๊ฐœ์˜ ๋Œ“๊ธ€