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()	

オブジェクトを作成するための関数

再利用可能なオブジェクト生成コード

一括変更可能

prototypeがメソッドを個別に定義する場合、オブジェクトを作成するたびに関数(x)を作成する必要があります.
->1つの関数を共有することでメモリを節約し、管理が容易

クラスとメソッド

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

https://babeljs.io/:クラスベースのコードをプロトタイプベースのコードに変換するサイト

class {...}

クラスで関数を宣言するときに関数を使用しない

constructor(…){...} はい.

メンバー変数の保存作成者と同じ

メソッド定義プロトタイプ

classに同名の関数が存在する場合、外部から原型

と再定義できません.

クラス継承

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

継承は、既存のクラスにコンテンツを追加する際に使用できる機能です.

継承されていない場合は、このクラスを変更するか、重複要素を含むクラスを作成する必要があります.

super親クラスのコンストラクタまたはメソッドの使用を許可
->親機能を使用して、コードを繰り返すことなく新しい機能を作成します.

オブジェクトの継承

// 객체 상속
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

JavaScriptでは、関数はオブジェクト

すべての関数にcallメソッドがあります

callの最初のパラメータは、この目的のためのオブジェクト

callの2番目のパラメータがパラメータとして使用され始めた

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

内部固定パラメータを返す新しい関数

bind呼び出しの円関数は影響を受けません

callと同様に、1番目のパラメータはこの値を受け入れ、2番目のパラメータから

への書き込みを開始します.

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

オブジェクトに継承を定義することをprototylinkと呼びます.

prototype linkはproto定義を使用します.

newキーワードを使用して関数をオブジェクトとして作成すると、作成者オブジェクトとプロトタイプオブジェクトが作成されます.

prototypeオブジェクトは、同じ関数を使用して作成されたすべてのオブジェクトによって共有されます.

作成者のプロトタイプは自分のプロトタイプを指し、プロトタイプオブジェクトのコンストラクション関数は作成者を指す.(+prototypeのproto指向オブジェクト)

newでオブジェクトを作成する場合は、その作成者のプロトタイプをprotoに指します.

オブジェクトが値または関数でナビゲートされると、まず内部を参照し、そうでない場合はprotoに沿って検索を繰り返します.
ex) kim.sum() : kim.sum (x) -> kim.__proto__.sum (o)

constructor使用例

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

n/a.結論

1番コードの内部には2番コードが使用されます.

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