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. 은 부모 클래스를 통해 메서드를 불러와 사용할 수 있다
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());
객체가 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'
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 을 사용해 객체에 속한 함수가 아님에도 불러 쓸 수 있다
실행할 때마다 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'
함수의 this 를 영구적으로 바꿔 새로운 함수를 만들 수 있다(기존의 함수는 그대로 있음)
const pinSum = sum.bind(pin, "sum : ");
console.log('pinSum()', pinSum()); // 'pinSum()' 'sum : 50'