'this.name' в классе Javascript ES6, может это просто «имя»?

Question

У меня этот класс, который хорошо работает, но мне было просто любопытно, можно ли его изменить, чтобы в моем шаблоне я мог ввести name вместо this.name. С классом класса ES5, я думаю, вы можете сделать что-то вроде this.template = function(content, i) {}, но я не получил this.template(content, i) {} для работы. Это даже возможно сделать, или я застрял писать this.name каждый раз, когда я хочу вернуть ключ от моего json?

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> 
    `); 
    } 
};