Vanilla Javascript 类中的“计算属性”

Question

计算属性 特性在流行的 JS 框架（React、VueJS）中很常见，但是我们如何在 vanilla JS 中实现它呢？

假设给定一个User 类，具有dateOfBirth 属性，我们想计算它的age，有没有比下面的代码更好的方法来执行此任务？

function User(name, dateOfBirth) {
    this.name = name;
    this.dateOfBirth = dateOfBirth;

    this.age = function() {
        return now() - this.dateOfBirth;
    }
}

var driver = new User('Steve', new Date('12 December, 1990'))
driver.age()

在上面的代码中，我们通过调用一个方法来检索age 值。但是，是否可以仅使用driver.age 检索值？

Answer 1

它是否“更好”是风格/意见的问题，但如果你想要一个属性而不是方法，你可以创建一个访问器属性，在你的情况下一个访问器具有getter 但没有 setter。

对您的代码进行最少的更改，您可以这样做：

function User(name, dateOfBirth) {
    this.name = name;
    this.dateOfBirth = dateOfBirth;

    Object.defineProperty(this, "age", {
        get() {
            return now() - this.dateOfBirth;
        }
    });
}

现场示例：

function now() { return Date.now(); }
function User(name, dateOfBirth) {
    this.name = name;
    this.dateOfBirth = dateOfBirth;

    Object.defineProperty(this, "age", {
        get() {
            return now() - this.dateOfBirth;
        }
    });
}

var steve = new User("Steve", new Date(1990, 11, 12));
console.log(steve.age);

您可以使用对象初始化器更简洁地定义这些对象（请注意，此示例丢弃通过 new User 创建的对象并返回一个不同的对象，它没有 User.prototype 作为其原型）：

function User(name, dateOfBirth) {
    return {
        name,
        dateOfBirth,
        get age() {
            return now() - this.dateOfBirth;
        }
    };
}

现场示例：

function now() { return Date.now(); }
function User(name, dateOfBirth) {
    return {
        name,
        dateOfBirth,
        get age() {
            return now() - this.dateOfBirth;
        }
    };
}

var steve = new User("Steve", new Date(1990, 11, 12));
console.log(steve.age);

我还为name 和dateOfBirth 使用了新的（ES2015+）速记属性语法。

这也兼容 ES2015 的 class 语法：

class User {
    constructor(name, dateOfBirth) {
        this.name = name;
        this.dateOfBirth = dateOfBirth;
    }
    get age() {
        return now() - this.dateOfBirth;
    }
}

现场示例：

function now() { return Date.now(); }
class User {
    constructor(name, dateOfBirth) {
        this.name = name;
        this.dateOfBirth = dateOfBirth;
    }
    get age() {
        return now() - this.dateOfBirth;
    }
}

var steve = new User("Steve", new Date(1990, 11, 12));
console.log(steve.age);

Answer 2

是的。您可以使用 getter 返回计算值，如下所示：

class User {
  constructor(name, dateOfBirth) {
    this.name = name;
    this.dateOfBirth = dateOfBirth;
  }

  get age() {
    return new Date() - this.dateOfBirth;
  }
}

var driver = new User('Steve', new Date('12 December, 1990'));
console.log(driver.age);

更多信息here。