Как добиться наблюдаемого поведения в vanila JS - PullRequest
Новая
       32

Как добиться наблюдаемого поведения в vanila JS

0 голосов
/ 19 декабря 2018

Я пытаюсь добиться нокаута и наблюдаю вычисленное поведение в vanila js

В реакции вы будете иметь обе эти переменные в состоянии и вычислять полное имя

Как мы можем добиться того же в vanilaJS 

function person(firstname,lastname) {
    this.firstname = firstname;
    this.lastname = lastname;
    this.fullName = `${this.firstname}${this.lastname}`
}

var person1 =new person("abc","k");
Object.defineProperty(person,'firstname',{

  get: () => {
      return person1['firstname'];
  },
  set: (name) => {
      person1['firstname'] = name;
  }
  
});
Object.defineProperty(person,'lastname',{

  get: () => {
      return person1['lastname'];
  },
  set: (name) => {
      person1['lastname'] = name;
  }
});

Object.defineProperty(person,'fullName',{
  
  get: () => { 
    return `${person1['firstname']}-${person1['lastname']}`;
  }
  
});
console.log(person1.firstname, "firstnmae");
person1.firstname ="sah";
console.log(person1.lastname, "lastname");
console.log(person1.fullName, "fullname");

1 Ответ

0 голосов
/ 19 декабря 2018

Посмотрите на этот код: 

var person = {

    firstname: 'abc',
    lastname: 'k'

};

Object.defineProperty(person,'fullName',{
  
    get: function() {
    
        return `${this['firstname']}-${this['lastname']}`;
    
    }

});

var person1 = Object.create( person );

console.log(person1.firstname, "firstnmae");
person1.firstname ="sah";
console.log(person1.lastname, "lastname");
console.log(person1.fullName, "fullname");

  1. нет необходимости определять firstname и lastname с помощью .defineProperty, потому что эти setter и getter будет работать по умолчанию так, как вы их написали.

  2. вам следует использовать этот синтаксис, поскольку впоследствии его легче читать / поддерживать, в противном случае, если вы хотите придерживаться этого конструктор синтаксис, здесь вы идете: 

var person = function() {};

Object.defineProperty(person,'firstname',{

    value: 'abc',
    writable: true

});

Object.defineProperty(person,'lastname',{

    value: 'k',
    writable: true

});

Object.defineProperty(person,'fullName',{
  
    get: function() {
    
        return `${this['firstname']}-${this['lastname']}`;
    
    }

});

var person1 = Object.create( person );

console.log(person1.firstname, "firstnmae");
person1.firstname ="sah";
console.log(person1.lastname, "lastname");
console.log(person1.fullName, "fullname");

Я думаю, вам нужно больше узнать о Object.create(), и MDN - лучшее место .

функции стрелок имейте лексический this, будьте осторожны!

этот синтаксис может прояснить некоторые моменты о Object.create() для вас: 

var person = function() {};

person.prototype.firstname = 'abc';
person.prototype.lastname = 'k';

Object.defineProperty(person.prototype,'fullName',{
  
    get: function() {
    
        return `${this['firstname']}-${this['lastname']}`;
    
    }

});

var person1 = Object.create( person.prototype );

console.log(person1.firstname, "firstnmae");
person1.firstname ="sah";
console.log(person1.lastname, "lastname");
console.log(person1.fullName, "fullname");
...