如何在 vanilla js 中实现 Observable 行为

Question

我正在尝试在 vanila js 中实现淘汰观察计算行为

在 react 中，您将拥有这两个状态变量并计算全名

我们如何在 vanila js 中实现同样的效果

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");

Answer 1

看看这段代码：

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. 没有必要通过.defineProperty 定义firstname 和lastname，因为这些setter 和getter 将在您编写它们时默认工作。

2. 你应该使用这个语法，因为它之后更容易阅读/维护，否则，如果你想坚持那个 constructor 语法，你去：

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");

1. 我认为您需要对Object.create() and MDN is the best place进行更多调查。

2. arrow-functions 有词法 this，小心！

3. 这个语法可能会为你澄清一些关于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");