prototype, Class, Instance
Prototype in JavaScript?
まず、代表的な資料型Objectの原型を撮影します.
ここで、コンストラクション関数は、オブジェクトの作成、初期化、classの作成に必要なコンストラクション関数メソッドです.
オブジェクトのプロトタイプの内部には、クラスのすべてのプロパティとメソッドが表示されます.
言い換えれば、Object.prototypeはJSに内蔵されたオブジェクトを受信し,prototypeはJSに内蔵された関数メソッドであり,他のプロトタイプとなるオブジェクトを指すメソッドでもある.
次にArrayの原型を撮影します.
このとき、
__proto__
はオブジェクトにアクセスするオブジェクトメソッドである.たとえば、
instance
はclass
から派生したオブジェクトであり、__proto__
を使用する必要があります.Array.Protytpeのprotoはオブジェクトを指します.
Arrayのルートは、Objectであってもよいし、Objectオブジェクトの継承クラスであってもよい.
HumanとInstanceとPrototypeの関係
A instanceof B //true
接続スキームの継承(プロトタイプチェーンの作成)
子オブジェクトが親オブジェクトから派生したことを示し、親オブジェクトが親オブジェクト、派生、派生関係を持つprototypeをprototype chainと呼びます.
var Human = function(name){
this.name = name;
}
Human.prototype.sleep = function() { ~~}
var steve = new Human('steve')
----------
var Student = function(name){ //constructor의 this를 전달해줌
Human.call(this, name);
}
Student.prototype = Object.create(Human.prototype)
// 휴먼 프로토타입을 카피해서 새로만든다 라는 뜻
//첫 번째 인자의 prototype을 그대로 상속받은 새로운 객체를 만듬
Student.prototype.constructor = Student;
//그러나 student는 아직도 Human을 바라보고 있기 때문에,
//constructor가 연결이 안되므로 따로 지정해줘야 함. (monkey patch)
student는 아직도 Human을 바라보고 있기 때문이다. 정확한 상속을 위한 방법
Student.prototype.learn = function(){ console.log(~~~)
let john = new Student('john');
john.learn();
john.sleep();
class Human {
constructor(name, age) {
this.name = name;
this.age = age;
}
sleep(){
}
}
var steve = new Human('steve')
----------
class Student extends Human { // extends 키워드로 연결해줌
constructor(name, age){
super(name,age);
// 상위 클래스의 생성자를 호출하여
//super()의 매개변수를 통해 상위 클래스의 멤버를 상속받을 수 있는 코드
// 상위클래스 변수 모두를 사용한다면 내부 전달함수를 생략 가능함.
}
learn() {
}
}
var john = new Student('john')
john.learn();
john.sleep();
Studio(子)でHuman(親)のsleep機能を拡張したい場合は?
Student.prototype.sleep = function() {
Human.prototype.sleep.apply(this);
//이 문장을 선언함으로서(혹은 call) 부모 기능 확장
console.log(‘자면안돼!’); //확장할 기능 작성
}
上書き機能ではなく機能を拡張するには、メソッドのキーワードが
constructor
であるメソッドで他の機能を定義し、メソッドでメソッドを実行し、メソッドで機能を拡張する必要があります.class Human {
constructor(name){
this.name = name;
}
sleep() {
console.log(‘zzz’)
}
}
class Student extends Human {
sleep() { //sleep을 자식에서 다르게(확장하여) 구현하고 싶으므로,
super.sleep()// super 키워드로 해당 메소드를 실행 한 뒤
... // 확장하고자 하는 내용을 추가
}
}
settimeoutとbindの関係
settimeoutはbindメソッドを使用して指定した関数を実行できます.バインドしない場合、グローバル変数
super
が表示されます.したがって、callback関数を渡すときは、子インスタンスから親インスタンスを拡張するためにバインドする必要があります.i.e
step() {//Dancer instance들이 나타나는 시간을 타이머로 설정합니다.
setTimeout(this.step.bind(this), this.timeBetweenSteps) //간격으로 실행!
}
Getter/Setterとは?
生成されたクラスインスタンスの属性値を変更するか、最終値を予測できません.
たとえば、(親:Human)Teacher(子)の科目(因子)が変更されます.
この場合、getterとsetterはペアで動作し、getterが現在の値を返すと、対応するsetterは対応する値を変更します.
サンプルコード)
class Teacher extends Person {
constructor(first, last, age, gender, interests, subject, grade) {
super(first, last, age, gender, interests);
// subject and grade are specific to Teacher
this._subject = subject;
this.grade = grade;
}
get subject() {
return this._subject;
}
set subject(newSubject) {
this._subject = newSubject;
}
}
変数はgetter/setterを区切ります.そうでない場合、get/setを呼び出すたびにエラーが発生します.// Check the default value
console.log(snape._subject) // Returns "Dark arts"
// Change the value
snape._subject="Balloon animals" // Sets subject to "Balloon animals"
// Check it again and see if it matches the new value
console.log(snape._subject) // Returns "Balloon animals"
JavaScriptで継承を使用するのはいつですか?
最初に作成されたコードや、小さなプロジェクトで直接継承されるコードは多くありません.不要ですが、継承に使用するコードを実現するのは時間の無駄です.
ただし,コード量が大きいほど継承が必要となる.同じ機能を持つクラスがもっと多い場合は、これらの機能を組み合わせて共有できます. オブジェクトを作成して特定のオブジェクトに継承する方法が便利で役に立つことがわかります.
継承を実装する場合は、継承レベルを深く設定するのではなく、方法と属性の具体的な実装場所を常に理解してください.最終的に、オブジェクトは別のコードを再使用する方法であり、関数や重複文などの独自の役割と利点があります.
相互に関連付けられた変数と関数を組み合わせる必要がある場合、オブジェクトは良いアイデアです.データセットをある場所から別の場所に転送する場合にも、オブジェクトは便利です.どちらの場合も可能で、関数を構築したり継承したりする必要はありません.インスタンスが1つしか必要ない場合は、オブジェクトは宣言されず、オブジェクトテキストのみが必要です.もちろん継承する必要はありません.
Reference
この問題について(prototype, Class, Instance), 我々は、より多くの情報をここで見つけました https://velog.io/@awesomebylee/2.-Object-Oriented-Programming2テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol