JS prototype 활용
prototype chaining
개념
- 해당 객체에 property가 없을 경우, prototype에서 이를 탐색 & 반복(proto의 proto...)
const func1 = function() {
this.a = 10;
this.b = 20;
}
const obj1 = new func1();
func1.prototype.b = 21;
func1.prototype.c = 30;
console.log(obj1.a); //10
console.log(obj1.b); //20. func1의 생성시 존재하므로 chaining 미발생
console.log(obj1.c); //30. func1의 생성자에 없으므로 chaining 발생, prototype에서 찾아 리턴
주의점
- proto의 depth가 많을 경우, 많은 chaining이 발생
- hasOwnProperty 메서드를 통해 방지 필요
if (obj1.hasOwnProperty()) {
console.log(obj1.c);
}
prototype 활용
function Person(name, age) {
this.name = name;
this.age = age;
}
Person.prototype = {
showInformation: function() {
console.log(`${this.name}의 나이는 ${this.age}입니다.`);
}
};
const kim = new Person('kim', 30);
const cu = new Person('cu', 28);
kim.showInformation(); //kim의 나이는 30입니다.
cu.showInformation(); //cu의 나이는 28입니다.
기타 : 상속
const a = {v: 1};
const b = Object.create(a);
const c = Object.create(b);
console.log(b.v); //1
console.log(c.v); //1
Author And Source
이 문제에 관하여(JS prototype 활용), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://velog.io/@k2hyun4/JS-prototype-활용
저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
const func1 = function() {
this.a = 10;
this.b = 20;
}
const obj1 = new func1();
func1.prototype.b = 21;
func1.prototype.c = 30;
console.log(obj1.a); //10
console.log(obj1.b); //20. func1의 생성시 존재하므로 chaining 미발생
console.log(obj1.c); //30. func1의 생성자에 없으므로 chaining 발생, prototype에서 찾아 리턴
if (obj1.hasOwnProperty()) {
console.log(obj1.c);
}
function Person(name, age) {
this.name = name;
this.age = age;
}
Person.prototype = {
showInformation: function() {
console.log(`${this.name}의 나이는 ${this.age}입니다.`);
}
};
const kim = new Person('kim', 30);
const cu = new Person('cu', 28);
kim.showInformation(); //kim의 나이는 30입니다.
cu.showInformation(); //cu의 나이는 28입니다.
기타 : 상속
const a = {v: 1};
const b = Object.create(a);
const c = Object.create(b);
console.log(b.v); //1
console.log(c.v); //1
Author And Source
이 문제에 관하여(JS prototype 활용), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://velog.io/@k2hyun4/JS-prototype-활용
저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
const a = {v: 1};
const b = Object.create(a);
const c = Object.create(b);
console.log(b.v); //1
console.log(c.v); //1
Author And Source
이 문제에 관하여(JS prototype 활용), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@k2hyun4/JS-prototype-활용저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)