JAvascript-継承


継承は、親論理を再利用できるため、オブジェクト向けプログラミングにおける重要な概念です.
function Person(name){
    this.name = name
    this.introduce = function(){
      return "my name is "+this.name
    }
}
const person1 = new Person("dongha")
console.log(person1.introduce()) // my name is dongha
上のコードを少し変えるとこうなります.

function Person(name){
  this.name = name
}

Person.prototype.name = null
Person.prototype.introduce = function(){
  return "My name is "+this.name
}

const person1 = new Person("dongha")
console.log(person1.introduce()) // my name is dongha
結果は同じです.Personという名前の関数を作成し、関数の外部にPerson関数(=オブジェクト)にprototypeという名前のpropertyを与え、名前propertyを与えます.

継承

function Person(name){
    this.name = name;
}
Person.prototype.name=null;
Person.prototype.introduce = function(){
    return 'My name is '+this.name; 
}
 
function Programmer(name){
    this.name = name;
}

Programmer.prototype = new Person();
 
const person1 = new Programmer('dongha');
console.log(person1.introduce())
Programmerという関数(ジェネレータ)が追加されました.次にperson 1という変数にプログラムジェネレータを割り当て,パラメータとして「dongha」を与える.そしてパーソンinspection()を実行するとMy name is donghaが出力されます.Programmerジェネレータにはinspectionというメソッドはありませんが、出力されます.ProgrammerのprototypeにPersonコンストラクション関数が割り当てられているためです.
JavaScriptでは、Personコンストラクション関数にprototypeというpropertyがあるかどうかを確認し、コンストラクション関数内のオブジェクトと同じオブジェクトを作成して、コンストラクション関数の結果を返します.プロトタイプにはnameという名前のPropertyとinspectionという名前のメソッドがあるので、new Person()で作成したオブジェクトにはこの2つのメソッドがあります.

オブジェクトへの機能の追加

function Person(name){
    this.name = name;
}
Person.prototype.name=null;
Person.prototype.introduce = function(){
    return 'My name is '+this.name; 
}
 
function Programmer(name){
    this.name = name;
}
Programmer.prototype = new Person();
Programmer.prototype.coding = function(){
    return "hello world";
}
 
const person1 = new Programmer('dong');
console.log(person1.introduce())
console.log(person1.coding())
PersonとProgrammerという名前のオブジェクトがありますが、符号化方法はProgrammerという名前のオブジェクトにのみ存在します.
Programmer.prototype.coding = function(){
    return "hello world";
}
だからProgrammerのprototype propertyに符号化方法をあげて、その中で関数を作成すればいいです.
ソース:https://www.inflearn.com/course/%EC%A7%80%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%96%B8%EC%96%B4-%EA%B8%B0%EB%B3%B8/lecture/2563?tab=note&mm=close