如何在 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");

不需要用.defineProperty定义firstname和lastname因为那些setter和getter 将在您编写时默认工作。
你应该使用这个语法，因为它更容易 read/maintain 之后，否则，如果你想坚持 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");

我认为您需要对 Object.create() and MDN is the best place 进行更多调查。
arrow-functions有词法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");

如何在 vanilla js 中实现 Observable 行为

How to achieve Observable behaviour in vanila js

javascript

oop

prototype

observable