Javascript継承との混乱

Question

JavaScriptの継承について混乱しています。

は、次のコードを考えてみましょう：今すぐ

function parent(firstname, lastname) { 
    this.firstname = firstname || "abc"; 
    this.lastname = lastname || "def"; 
} 

function child() { 
    this.childname = "xys"; 
} 
parent.prototype.Greetings = function() { 
    alert("sayhi"); 
} 
child.prototype = Object.create(parent.prototype); 
var child1 = new child(); 

を、child1オブジェクトがfirstnameとlastnameプロパティへのアクセス権を持っていますか？ Greetingsメソッドにアクセスできます（プロトタイプに含まれているため）。 これらにアクセスしようとすると、undefinedと表示されます。 これらの変数にアクセスするためにはどのような変更を行う必要がありますか？

Answer 1

これらの変数にアクセスするには、どのような変更を行う必要がありますか？あなたは子供のコンストラクタで親コンストラクタを呼び出す必要があり

：

function child() { 
    parent.call(this); 
    this.childname = "xys"; 
} 

---

JavaScriptを「継承」でES6クラスの前に（はるかに少ない（暗黙すなわち）魔法の他の言語よりも少なくとも）。

parentの例では、thisに2つのプロパティを設定しています。しかし、あなたのコードのどこにもparentがあるので、これらのプロパティは決して設定されません。

これらを設定するには、新しいchildインスタンスにparentを適用する必要があります。これはparent.call(this);を呼び出して行います。

parentは引数を受け付けますので、あなたはおそらく最終的にchildを介してそれらを渡したい：

function child(firstname, lastname) { 
    parent.call(this, firstname, lastname); 
    this.childname = "xys"; 
} 

---

関連：これを行うにはBenefits of using `Object.create` for inheritance

Answer 2

良い方法は、より最近のES2015標準を使用しています。構文ははるかに明確になります。

class Parent { 
    constructor(firstname, lastname) { 
     this.firstname = firstname || "abc"; 
     this.lastname = lastname || "def"; 
    } 
    greetings() { 
     alert("sayhi"); 
    } 
} 

class Child extends Parent { 
    constructor(){ 
     super(firstname, lastname); 
     this.childname = "xys"; 
    } 
} 
var child1 = new child(); 

情報はhttps://babeljs.io/docs/learn-es2015/にあります。 さらに、javascriptでのクラス宣言の詳細については、https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classesを参照してください。