javascript 객체 고급(생활코딩)

● 상속 -> 'extends' 사용

class Person{
    constructor(name,first,second){ 
        this.name = name;
        this.first = first;
        this.second = second;
        console.log('constructor');
    }
class PersonPlus extends Person{ //person이 personPlus에 상속됩니다.
    avg(){
        return (this.first+this.second)/2;
    }
} 

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

1.  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{
    constructor(name, first, second, third){
        super(name, first, second);
        this.third = third;
    }
    sum(){
        return super.sum()+this.third;
    }
    avg(){
        return (this.first+this.second+this.third)/3;
    }
}
 
var kim = new PersonPlus('kim', 10, 20, 30);
console.log("kim.sum()", kim.sum());
console.log("kim.avg()", kim.avg());

2.  __proto__

• 객체가 객체를 상속하도록 할 수 있음
• 객체의 속성을 바꿔도 __proto__의 속성은 바뀌지 않음

var superObj = {superVal:'super'}
var subObj = {subVal:'sub'}
subObj.__proto__ = superObj;
console.log('subObj.subVal => ',subObj.subVal);
console.log('subObj.superVal => ',subObj.superVal);

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

//출력
subObj.subVal =>  sub
subObj.superVal =>  super
superObj.superVal =>  super

 

3. Object.create

• 객체를 상속 받는 객체를 생성

var superObj = {superVal:'super'} 
var subObj = Object.create(superObj);
subObj.subVal = 'sub';

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

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

//출력
subObj.subVal =>  sub
subObj.superVal =>  super
superObj.superVal =>  super

---

● 객체와 함수

1. _call

• 자바스크립트의 모든 함수는 call이라는 메소드를 가짐(자바스크립트에서는 함수도 객체이기 때문)
• call 메소드의 인자로 객체를 지정하게 되면 해당 함수의 this는 인자로 받은 객체가 됨

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

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

//sum();
console.log("sum.call(kim)",sum.call(kim)); //sum.call(kim) 30
console.log("sum.call(lee)",sum.call(lee)); //sum.call(lee) 20

• call은 여러 인자를 가질 수 있음
• 첫번째 인자는 this로 지정할 객체가 오고 그 뒤로는 함수의 인자로 들어갈 값이 들어가게 됨

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

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

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

2. bind

• call 처럼 실행할 때 마다 this를 변경하는 것이 아니라 내부적으로 고정시키고 싶을 때 사용
• 호출한 함수를 변경하는 것이 아니라 인자로 받은 조건을 만족하는 새로운 함수를 리턴

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

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

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

var kimSum = sum.bind(kim, '-> ');
console.log('kimSum()', kimSum());

//출력
sum.call(kim) => 30
sum.call(lee) : 20
kimSum() -> 30

● 생성자를 통한 상속

1. call을 사용해 생성자 함수가 생성자 함수를 상속하도록 함

//__proto 사용

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

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

//Object.create
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, 30);
console.log("kim.sum()", kim.sum());
console.log("kim.avg()", kim.avg());
console.log("kim.constructor",kim.constructor);

→ 이때 constructor를 출력해보면 personPlus가 아닌 Person으로 나옴

constructor라는 프로퍼티는 여러 의미로 사용되는데, 그 중에 하나는 어떠한 객체가 누구로부터를 만들어졌는지를 알려주는 것임

또 new 키워드와 함께 constructor()를 실행하면 constructor를 몰라도 새로운 객체를 생성할 수 있음

d = new Date()
d2 = new d.constructor()
// d2 = new Date()

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.constructor = PersonPlus;

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

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