📜  不同的getter js - Javascript(1)

📅  最后修改于: 2023-12-03 15:21:31.094000             🧑  作者: Mango

不同的Getter Js - Javascript

在JavaScript中,getter是一种方法,它允许我们访问对象的属性而不需要直接引用该属性。本文将介绍几种常见的getter方法。

1. 属性访问器

属性访问器是getter和setter的组合,它允许您在访问属性时执行特定的代码。

const user = {
  firstName: 'John',
  lastName: 'Doe',
  
  get fullName() {
    return `${this.firstName} ${this.lastName}`;
  },
  
  set fullName(name) {
    const parts = name.split(' ');
    this.firstName = parts[0];
    this.lastName = parts[1];
  }
}

console.log(user.fullName); // John Doe

user.fullName = 'Jane Doe';
console.log(user.firstName); // Jane
console.log(user.lastName); // Doe
2. Object.defineProperty()

Object.defineProperty()方法可以定义对象的属性,并为其指定getter和setter函数。

const person = {
  name: 'John',
  age: 30
};

Object.defineProperty(person, 'fullName', {
  get: function() {
    return `${this.name} Smith`;
  },
  set: function(value) {
    const parts = value.split(' ');
    this.name = parts[0];
  }
});

console.log(person.fullName); // John Smith

person.fullName = 'Jane Smith';
console.log(person.name); // Jane
console.log(person.fullName); // Jane Smith
3. Proxy

Proxy对象允许您拦截并自定义目标对象上的操作。您可以使用Proxy来为目标对象添加getter方法。

const person = {
  name: 'John',
  age: 30
};

const handler = {
  get: function(target, prop, receiver) {
    if (prop === 'fullName') {
      return `${target.name} Smith`;
    } else {
      return Reflect.get(target, prop, receiver);
    }
  }
};

const proxy = new Proxy(person, handler);

console.log(proxy.fullName); // John Smith

以上是JavaScript中常用的getter方法。每种方法都有其自己的用途和优缺点,具体取决于您的实际需求。