[TIL] Prototype Chain

JavaScriptはoop向けに書かれた言語ではありません.
しかし、学術的な研究では、oopのように使用するように努力しており、se 5までクラスの概念がなければ、se 6に入ってから「class」という概念が生まれ、oopをうまく利用できることが明らかになった.

いくつかの基本概念

すべての関数にはprototypeという属性があります.(割り当て可能)
-prototypeモデル青写真を作成するためのプロトタイプオブジェクト(元のフォーム)

.コンストラクション関数(コンストラクション関数)->特定のオブジェクトを作成するときに実行されるコード(インスタンス初期化時に実行されるコンストラクション関数)

th->関数を実行するときに、各範囲に作成された一意実行コンテキスト(execution context)の新しいキーワードを使用してインスタンスを作成すると、その値(以下の例)

になります.

function Car(brand,name,color){ // Car는 클래스다
  this.brand = brand; //this 객체 **이 예제에서는 avante === this 같다. 중요
  this.name = name;
  this.color = color;
} // function Car(){} 전체가 constructor(생성자) 함수이다.

Car.prototype.drive = function(){ //여기서 Car.prototype은 prototype의 객체로 속성이나 메서드를 정의 할 수 있다.
	console.log(this.name + '가 운전을 시작');
}

let avante = new Car('hyundai', 'avante', 'black'); //여기서 avante가 인스턴스가 된다.
avante.color; //'black';
avante.drive(); // 'avante가 운전을 시작'
                    

理解を助ける他の例

Prototype chain

Human.protoypeとsteveの関係

steve.__proto__ === Human.prototype //true

  var Array = function(location) {
  	[native code]
  }
  Array.prototype.push = function() {};
  Array.prototype.slice = function() {};
  ...
  var arr = new Array();

配列の作成時にも同様に作成されます.
次に、従来の方法で問題を見て、classを導入した後にコードがどのように変化したかについて説明する.

var Human = function(name) {
	this.name = name;
}
Human.prototype.sleep = function() {};

var steve = new Human('steve');

var Student = function(name) {
}

Student.prototype.learn = function() {};

var john = new Student('john');

john.learn();
john.sleep();

ここの問題はジョンですsleep()を実行できるようにコードを変更する必要があります.(これはプロトコルチェーンでしょうか?)
しかし、SE 5までは、クラスを書くのではなく、このjohn.sleep()を実行するには、いくつかの制約を完了する必要があります.
そのうちの1つ.

Student.prototype = Object.create(Human.prototype); //object.create는 첫 번째 인자로 들어가는 프로토타입 객체를 인자로 프로토타입을 만든다
// 배열도 슬라이스 카피하는 것 처럼 생각
//쉽게 생각하면 인자에 객체를 넣고 이것을 prototype 형태로 만든다(copy한다고 생각하자)
Student.prototype.learn = function () {}

ここまでで終わりですが、100%完璧にOOPを実現することはできません.
プロトタイプチェーンをチェックしたら

Student.__proto__ // __sleep__과 __learn__의 관계가 명확하게 표시가 되지 않는다.
Student.__proto__.constructor  // 원하는 student 함수가 아닌 human의 함수가 출력이되어버림.

今はヒューマンだからPrototypeのコピーはコンストラクション関数をHumanと見なす.
だからこの接続リングを再接続するために.

Student.prototype = Object.create(Human.prototype);
Student.prototype.constructor = Student; // 이 문장을 추가 해준다.
Student.prototype.learn = function () {}

これはあなたを順調に継承することができます.
でももう一つ質問がありますStudentのcontextのみが作成され、contextはHumanに渡されません.
これをHuman(上)にアップロードするために

var Human = function(name) {
	this.name = name;
	}
	Human.prototype.sleep = function() {
		console.log(this.name + ' is sleeping...');
};

var steve = new Human('steve');

var Student = function(name) {
	Human.call(this, name); // Human.apply(this, arguments)
}

Student.prototype = Object.create(Human.prototype);

Student.prototype.constructor = Student;

Student.prototype.learn = function() {};

var john = new Student('john');

john.learn();
john.sleep(); // john is sleeping...

Human.call(this,name)を追加する必要があります.
そうすれば継承が順調に完了する.
そして今世界は発展していて、SE 6のclass(類)が現れて、上の過程は簡単に
解決しました.

class Human {
	constructor(name) {
		this.name = name;
	}
  
	sleep() {
	}
  
}
var steve = new Human('steve');



class Student extends Human { // 예전 방식의 프로토타입 및 컨스트럭트 연결을 extends가 한번에 해결해준다..
	constructor(name) {
           super(name); //this로 전달해야 할 부분을 super로 대체한다.
	}
  	learn() {
    }
  
}

var john = new Student('john');

john.learn();
john.sleep(); // john is sleeping...

class Student extends Human {
  	learn() { //위와 같은 경우 컨스트럭트부분이 같다면 생략이 가능하다 
    }
  
}

var john = new Student('john');

この場合、複数のインスタンスに関連付けられた結果値をどのように指定しますか?
旧バージョン

Human.prototype.sleep = function() { console.log("Zzz") }

Student.prototype.sleep = function() {
   Human.prototype.sleep.apply(this);  //apply이 대신 call해도 인자는 하나라 똑같다. 이 this값에 의해서 Human.prototype.sleep과 값이 공유가 된다.
   console.log("Don't sleep");
}

新しいバージョン

class Human {
	constructor(name) {
            this.name = name;
	}
  
	sleep() {
            console.log("Zzz");
	}
  
}
class Student extends Human {
  	sleep(){
    	   super.sleep(); // super에 의해서 Human의 sleep과 공유 된다.
      	   console.log("Don't sleep");
    }
  
  	learn() {
    }
  
}

現在の書き方は上記と同じです.
どのプロセスに簡単に取って代わられるかを知ることも重要です.