[생활코딩] JavaScript 객체 지향 프로그래밍 - 2

Jang·2022년 8월 31일

생활코딩

목록 보기

6/7

13.2. __proto__ ~ 13.3 Object.create()

var superObj = { superVal: "super" };

var subObj = { subVal: "sub" };
subObj.__proto__ = superObj; // subObj가 superObj에게 상속받음

console.log("subObj.superVal =>", subObj.superVal); // superVal 출력가능
subObj.superVal = "sub";  // subObj에서만 바뀜
console.log("subObj.superVal =>", subObj.superVal);
console.log("superObj.superVal =>", superObj.superVal); // superObj는 변경되지 않았음.

// 위의 코드중 이 두줄은
var subObj = { subVal: "sub" };
subObj.__proto__ = superObj;

// 이 두줄로 변경 가능하다.
var subObj = Object.create(superObj); // 메소드가 새로운 객체를 만드는데 그 새로운 객체는 superObj를 부모로 하는 새로운 객체다
subObj.subVal = "sub";

debugger;를 이용해 크롬의 개발자 도구에서 객체들의 상태를 탐색할 수 있다.

14.2 call , 14.3 bind

함수.call(object)를 이용해 함수가 메서드처럼 동작하게 할 수 있다.

var kim = { name: "kim", first: 10, second: 20 };
var lee = { name: "lee", first: 10, second: 10 };
function sum(param) {
  return param + (this.first + this.second);
}
// sum();
console.log(sum.call(kim, "=>")); // .call(kim)이 sum의 this.가 kim.이 되게 만듬
console.log(sum.call(lee, ": ")); // call 의 두번째 인자는 원래 함수의 파라미터로 들어감 
// (첫번째 인자는 this.를 바꿀 값)

// bind는 실행할때 this의 값을 영구적으로 바꾼 새로운 함수를 만듬
var kimSum = sum.bind(kim, "-> ");
console.log(kimSum());

call은 그때마다 this.를 바꿔주는 반면
bind는 this.를 영구적으로 바꾼 새로운 함수를 만드는 개념

16. 생성자 함수를 통한 상속

function Person(name, first, second) {
  this.name = name;
  this.first = first;
  this.second = second;
}
Person.prototype.sum = function () {
  return this.first + this.second;
};

function PersonPlus(name, first, second, third) {
  Person.call(this, name, first, second);
  this.third = third;
}

// PersonPlus.prototype.__proto__ = Person.prototype;
PersonPlus.prototype = Object.create(Person.prototype);

PersonPlus.prototype.avg = function () {
  return (this.first + this.second + this.third) / 3;
};

var kim = new PersonPlus("kim", 10, 20, 56);
console.log("kim.sum()", kim.sum());
console.log("kim.avg()", kim.avg());