JS) 객체지향-4 proto link(객체 상속), call vs bind

객체의 상속

proto link

var superObj = { superVal: "super" };

var subObj = { subVal: "sub" };



//sub가 자신이 되는 과정.

subObj.__proto__ = superObj;

console.log(subObj.subVal);

console.log(subObj.superVal);

// 먼저 sub에서 찾음. 없으면 부모에서 찾음



subObj.superVal = "sub";

console.log(superObj.superVal);

객체의 상속은 ___proto___ 로 속성을 줘서 상속받는다

클래스의 상속과 다르다

객체의 프로토를 바꾼다고, 개체의 부모값을 바꾸는 것이 아니다

Object.create

자식 =Object.create(부모)

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

var subObj = Object.create(superObj);
subObj.subVal = "sub";
console.log("subObj.subVal=>", subObj.subVal);
console.log("subObj.superVal=>", subObj.superVal);

원래 오리지날 원형으로 ___proto__ 와 기능이 같다

디버거를 돌리면 object.create과 __proto__와 같다는 것을 알 수 있다.

let kim = {
  name: "kim",
  first: 10,
  second: 20,
  sum: function () {
    return this.first + this.second;
  },
};

let lee = Object.create(kim);
lee.name = "lee";
lee.first = 10;
lee.second = 50;
lee.avg = function () {
  return (this.second + this.first) / 2;
};

console.log("kim.sum()", kim.sum());

// let lee = {
//   name: "lee",
//   first: 10,
//   second: 10,
//   avg: function () {
//     return (this.first + this.second) / 2;
//   },
// };
lee.__proto__ = kim;
console.log("lee.sum()", lee.sum());
console.log("lee.avg()", lee.avg());
console.log("lee.sum()", lee.sum());
console.log("lee.avg()", lee.avg());

call vs bind

call

let kim = { name: "kim", first: 10, second: 20 };
let lee = { name: "lee", first: 10, second: 10 };
function sum() {
  return this.first + this.second;
}
sum.call();
console.log(sum.call(kim));
// ----------------------------------------
let kim = { name: "kim", first: 10, second: 20 };
let lee = { name: "lee", first: 10, second: 10 };
function sum(prefix) {
  return prefix + (this.first + this.second);
}
sum.call();
console.log(sum.call(kim, "=>"));

첫번째 인자는 객체를 불러오고, 두번째 인자는 함수의 인자로 사용할 수 있다

 

Bee.prototype = Object.create(Grub.prototype);
Bee.prototype.constructor = Bee;

 

bind

 

let kim = { name: "kim", first: 10, second: 20 };
let lee = { name: "lee", first: 10, second: 10 };
function sum(prefix) {
  //call로 부르는 순간 this == kim
  return prefix + this.first + this.second;
}

// call은 this를 지정해주는것

var kimSum = sum.bind(kim, "->");

console.log(kimSum());

// 새로운 함수를 만드는 것은 bind

 

함수 표현 방법

'function Person(){}' 와 'let Person = new function()'는 같다

 

class와 객체의 비교

 

class Player {
  constructor(name, firstSc, secondSc) {
    this.name = name;
    this.firstSc = firstSc;
    this.secondSc = secondSc;
  }
  sum() {
    return "His all score is " + (this.firstSc + this.secondSc) + " on class";
  }
}

class newPlayer extends Player {
  constructor(name, first, second, third) {
    super(name, first, second);
    this.third = third;
  }
  sum() {
    return super.sum() + this.third;
  }
  avg() {
    return (this.firstSc + this.secondSc) / 2;
  }
}

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 = Object.create(person.prototype);
Person.prototype.avg = function () {
  return (this.first + this.second + this.third) / 3;
};

console.log(kim.sum());
console.log(kim.avg());

위와 아래 코드에서 super(name,first,second,third)와 person.call(this, name,first,second,third)는 

똑같은 기능으로 상속한다

new Person을 하지 않아도 call을 통해서 호출이 가능하다