Question

计算属性功能在流行的JS框架（React，VueJS）中很常见，但是如何在香草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

是否“更好”是样式/意见的问题，但是如果要使用属性而不是方法，则可以创建 accessor属性，在这种情况下，可以使用 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。

Vanilla Javascript类中的“计算属性”

2 个答案: