TIL0510 class, 상속, super,__proto__,Object.create()

Yunji·2020년 5월 10일
0

TIL

목록 보기
46/54

Javascript

class

class 로 객체를 생성할 수 있다
그 안에서 함수를 정의할 때는 function을 쓰지 않는다
객체의 초기 상태를 지정하는 함수의 이름은 constructor() 이다
constructor() 로 값들을 받아서 새로운 객체를 만든다

class Person {
	constructor(name, first, second) {
    	this.name = name;
        this.first = first;
        this.second = second;
    }
  	sum() {
    	return 'prototype : ' + (this.first + this.second);
	}
}
const kim = new Person('kim', 20, 30);
// 따로 매서드를 정할 수도 있다
kim.sum = function(){
	return 'this : ' + (this.first + this.second);
}
console.log('kim', kim, kim.sum());
// 'kim' Person { name: 'kim', first: 20, second: 30, sum: [Function] } 'this : 50'

상속

class 에서 기존의 코드를 수정하지 않고 새로운 식을 추가하고 싶을 때 상속을 쓴다
extends 를 통해 기존의 class 에 상속된 새로운 자식 class 를 추가할 수 있다

class 자식클래스 extends 부모클래스 {
	//추가될 코드
}

상속을 사용하면 중복되는 코드를 삭제해 유지보수가 편해진다

class Person {
	constructor(name, first, second) {
    	this.name = name;
        this.first = first;
        this.second = second;
  }
  sum() {
    	return 'prototype : ' + (this.first + this.second);
	}
}
// 추가될 코드
class PersonPlus extends Person {
  avg() {
    return (this.first + this.second)/2;
  }
}
const kim = new PersonPlus('kim', 20, 30);
console.log('kim.sum()', kim.sum());
console.log('kim.avg()', kim.avg());
// 'kim.sum()' 'prototype : 50'     'kim.avg()' 25

super

super 는 부모 클래스를 베이스로 새로운 기능이나 값을 추가하고 싶을 때 사용한다 super를 사용하면 코드의 중복을 막을 수 있다
super() 는 부모클래스의 생성자를 호출해 초기값을 사용할 수 있고
super. 은 부모 클래스를 통해 메서드를 불러와 사용할 수 있다

class Person {
	constructor(name, first, second) {
    	this.name = name;
      this.first = first;
      this.second = second;
  }
  sum() {
    	return this.first + this.second;
	}
}
class PersonPlus extends Person {
// third 값을 추가로 가져옴
  constructor(name, first, second, third) {
// super 로 부모 클래스의 식을 가져옴
    super(name, first, second);
// 새로 가져온 값 추가
    this.third = third;
  }
// 부모 클래스의 sum 메서드를 가져와서 third 값 추가
  sum() {
    return super.sum() + this.third;
  }
  avg() {
    return (this.first + this.second + this.third)/2;
  }
}
const kim = new PersonPlus('kim', 20, 30, 40);
console.log('kim.sum()', kim.sum());
console.log('kim.avg()', kim.avg());

객체 간의 상속

proto

객체가 prototype link 를 통해 직접 다른 객체에서 상속을 받을 수 있다

const superObj = {superVal:'super'}
const subObj = {subVal:'sub'}
//  __proto 를 통해 연결할 수 있다
subObj.__proto__ = superObj;
console.log('subObj.subVal', subObj.subVal);  // 'subObj.subVal' 'sub'
console.log('subObj.superVal', subObj.superVal);  // 'subObj.superVal' 'super'

Object.create()

proto 와 같은 기능을 하는 Object.create()

const superObj = {superVal:'super'}
// Object.create() 를 통해 superObj 를 부모로 하는 객체를 생성할 수 있다
const subObj = Object.create(superObj);
subObj.subVal = 'sub';
console.log('subObj.subVal', subObj.subVal);  // 'subObj.subVal' 'sub'
console.log('subObj.superVal', subObj.superVal);  // 'subObj.superVal' 'super'

해당 객체에만 동작하는 함수를 따로 지정할 수 있다

const lee = Object.create(kim);
lee.name = 'lee';
lee.first = 20;
lee.second = 40;
// lee 에게만 적용되는 avg()
lee.avg = function() {
  return (this.first + this.second)/2
}
console.log('kim.sum : ', kim.sum())
console.log('lee.sum : ', lee.sum(), 'lee.avg : ', lee.avg())

객체와 함수

call

call 을 사용해 객체에 속한 함수가 아님에도 불러 쓸 수 있다
실행할 때마다 this 가 바뀐다

const pin = {name: 'pin', first:20, second:30}
const jake = {name: 'jake', first:10, second:30}
function sum() {
  return this.first + this.second;
}
console.log('sum.call(pin)', sum.call(pin));
console.log('sum.call(jake)', sum.call(jake));

call 의 첫번째 인자는 그 함수에 내부적으로 적용되는 this 가 들어가고 두번째 부터 호출하려는 함수의 파라미터에 들어갈 인자값이 들어간다

call(그 함수에 내부적으로 적용되는 this , 호출하려는 함수의 인자값이 들어감)
function sum(add) {
  return add + (this.first + this.second);
}
console.log('sum.call(pin)', sum.call(pin, "sum : "));  //'sum.call(pin)' 'sum : 50'
console.log('sum.call(jake)', sum.call(jake,"sum : "));  //'sum.call(jake)' 'sum : 40'

bind

함수의 this 를 영구적으로 바꿔 새로운 함수를 만들 수 있다(기존의 함수는 그대로 있음)

const pinSum = sum.bind(pin, "sum : ");
console.log('pinSum()', pinSum());   // 'pinSum()' 'sum : 50'

0개의 댓글