JavaScriptオブジェクト向け

オブジェクト

コンストラクタ

// 생성자 함수 예시
function Person(name,first,second,third){
    this.name = name;
    this.first = first;
    this.second = second;
    this.third = third;
}

// prototype을 이용해 Person의 메소드를 정의
Person.prototype.sum = function(){ 
    return this.first+this.second+this.third;
}

var kim = new Person('kim',10,20,30);
var lee = new Person('lee',10,10,10);
console.log("kim.sum()",kim.sum());
console.log("lee.sum()",lee.sum()); // 탐색 순서 : lee.sum() ->  Person.prototype.sum()	

クラスとメソッド

// class를 이용한 객체 생성 예시
class Person{
    constructor(name,first,second){
        this.name = name;
        this.first = first;
        this.second = second;
    }
	
    sum(){  // class 내부에 method 정의하기
        return 'sum : ' + (this.first+this.second);
    }
} 

// prototype을 이용한 method 정의하기
Person.prototype.sub = function(){ 
    return 'prototype : ' + (this.first-this.second);
}

クラス継承

// class 상속
// Person이 PersonPlus에 상속됨(PersonPlus가 Person을 이어받고 확장시킴)
class PersonPlus extends Person{
    constructor(name, first, second, third){
        super(name, first, second); // super() : 부모의 constructor를 호출
        this.third = third;
    }
    sum(){
        return super.sum()+this.third; // super.~ : 부모의 멤버에 접근
    }
    avg(){
        return (this.first+this.second+this.third)/3;
    }
}

オブジェクトの継承

// 객체 상속
var superObj = {superVal:'super'}

// 방법 1
subObj.__proto__ = superObj;  // subObj가 superObj를 상속

// 방법 2
var subObj2 = Object.create(superObj); // 내부적으로는 방법 2와 동일

call

// call 사용 예시
var kim = {name:'kim',first:10,second:20}
var lee = {name:'lee',first:10,second:10}

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

sum.call(kim, "result: ");

console.log(kimSum()); // result: 30

bind

// bind 사용 예시
var kim = {name:'kim',first:10,second:20}

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

kimSum = sum.bind(kim, "kim result: ");
console.log(kimSum()); // kim result: 30

prototype vs __proto__

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

Person.prototype.sum = function(){}

var kim = new Person('kim',10,20);
var lee = new Person('lee',10,10);

console.log(d.constructor); // 객체의 생성자를 알아냄
var e = d.constructor() // 객체의 생성자를 호출

n/a.結論

// 1번 코드 : class 기반

class Person{
    constructor(name,first,second){
        this.name = name;
        this.first = first;
        this.second = second;
    }
	
    getName (){
        return this.name;
    }
} 

class PersonPlus extends Person{
    constructor(name, first, second, third){
        super(name, first, second); // super() : 부모의 constructor를 호출
        this.third = third;
    }
 
    avg(){
        return (this.first+this.second+this.third)/3;
    }
}

// 2번 코드 : prototype 기반

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

Person.prototype.getName  = function(){
    return this.name;
}

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;
}