생활코딩 JavaScript 객체지향 프로그래밍 (4)

 

---

객체 간의 상속

var superObj = {superVal: 'super'};
var subObj = {subVal: 'sub'};

subObj.__proto__ = superObj;

console.log('subObj.subVal =>', subObj.subVal);
console.log('subObj.superVal =>', subObj.superVal);

//.__proto__ : subObj의 부모를 superObj로!
//             찾았는데 없다면, 부모에서 가져다 씀.

subObj.superVal = 'sub';
console.log('superObj.superVal =>', superObj.superVal);

// 자식 객체값을 바꿔도, 프로토 값은 바뀌지 않음. (얕은 복사같은 느낌!)

 

// .bind()

// bind: 함수의 this 즉 객체가 고정된 새로운 함수를 만들어 낸다.

var kim = {name:'kim', first:10, second:20}
var lee = {name:'lee', first:10, second:10}

function sum(prefix){
    return prefix+(this.first+this.second);
}

// sum();
console.log("sum.call(kim)", sum.call(kim, '=> ')); //apply
console.log("lee.call(kim)", sum.call(lee, ': '));

var kimSum = sum.bind(kim, '-> '); 
// 새로운 함수 생성(sum()에는 영향 X). this값을 ()안의 객체로 고정시킨 채!
console.log('kimSum()', kimSum());

 

// .call()

/*
call: 함수를 호출할때마다 this의 값을 내가 원하는 객체로 지정해서 실행시켜줌.
모든 함수가 가지고 있는 내장 함수.
*/


var kim = {name:'kim', first:10, second:20}
var lee = {name:'lee', first:10, second:10}

function sum(prefix){
    // this => 객체
    return prefix+(this.first+this.second);
}

// sum();
console.log("sum.call(kim)", sum.call(kim, '=> ')); //apply
console.log("lee.call(kim)", sum.call(lee, ': '));

 

prototype vs __proto__

function Person(name, fisrt, second) {
    this.name = name;
    this.first = fisrt;
    this.second -second;
}

// Person, Person's prototype

Person.prototype.sum = function(){};

var kim = new Person('kim', 10, 20);
// => __proto__, name, first, second
var kim = new Person('kim', 10, 10);
// => __proto__, name, first, second

console.log(kim.name);
console.log(kim.sum()); // kim에 없음 => __proto__ => proto

 

 

---

 

객체 간의 상속 - JavaScript 객체 지향 프로그래밍