'this.name'はJavascriptのES6クラスでは、単に '名前'にすることはできますか？

Question

私はこのクラスをうまく使っていますが、私のテンプレートでは、の代わりにthis.nameと入力できるように変更することができれば不思議でした。 ES5クラスのスタイルでは、this.template = function(content, i) {}のようなことができますが、this.template(content, i) {}は動作しませんでした。これは可能ですか？私は自分のjsonから名前キーを返すたびに、this.nameという文章を書きましたか？

person = class { 
    constructor(data) { Object.assign(this, data); } 
    template(content, i) { 
    content.push(` 
     <div class="card"> 
     <div class="card-block"> 
      ${key('<h4 class="card-title">', this.name, '</h4>')} 
      ${key('<h6 class="card-subtitle text-muted">', this.title, '</h6>')} 
     </div> 
     <ul class="list-group list-group-flush"> 
      ${each('<li class="list-group-item">', this.school.reverse(), '</li>')} 
     </ul> 
     <div class="card-block"> 
      <a class="btn btn-secondary" href="#" role="button">Bio</a> 
     </div> 
     </div> 
    `); 
    } 
}; 

Answer 1

はい。

template(content, i) { 
    const {name, title, ...} = this; 
    content.push(` 
     <div class="card"> 
     <div class="card-block"> 
      ${key('<h4 class="card-title">', name, '</h4>')} 
      ... 

これが十分に短くない場合は、カスタムテンプレートシステムに固執してください。

this.templateについては、比較が正しくありません。 template(content, i) { ... }はクラスメソッドの構文です。のショートカットです。

Answer 2

Use desctructing Es6 

person = class { 
    constructor(data) { Object.assign(this, data); } 
    template(content, i) { 
    let {name} = this; 
    content.push(` 
     <div class="card"> 
     <div class="card-block"> 
      ${key('<h4 class="card-title">', name, '</h4>')} 
      ${key('<h6 class="card-subtitle text-muted">', this.title, '</h6>')} 
     </div> 
     <ul class="list-group list-group-flush"> 
      ${each('<li class="list-group-item">', this.school.reverse(), '</li>')} 
     </ul> 
     <div class="card-block"> 
      <a class="btn btn-secondary" href="#" role="button">Bio</a> 
     </div> 
     </div> 
    `); 
    } 
};