Question

我的一位同事和我多次进行了这次讨论。有两种方法可以定义类方法。第一种方法是使用函数声明：

class Action {
    public execute(): void {
        this.doSomething();
    }
    ...
}

函数声明往往更容易阅读。 Action的每个实例只使用一个函数对象，因此它们对内存更友好。

第二个是函数表达式：

class Action {
    public execute: () => void = () => {
        this.doSomething();
    };
    ...
}

函数表达式需要更多的输入（尤其是类型定义），更难以阅读，并为Action的每个实例生成一个新的函数对象。如果你生成了大量的物品，那就太糟糕了。

但是，函数表达式有一个小的好处：它们保留this的上下文（即Action实例），无论谁调用它们：

var instance = new Action();
setTimeout(instance.execute);

声明为函数表达式的方法在这种情况下按预期工作。函数声明失败了，但是通过这样做可以很容易地修复它们：

var instance = new Action();

setTimeout(() => instance.execute());
// or
setTimeout(instance.execute.bind(instance));

那么，一个被认为是比另一个更好的实践，还是纯粹的情境/优先？

Answer 1

在我看来，只有当您确定可以使用this的不同上下文调用该函数时，才应将箭头函数用作类方法（如果它作为事件处理程序传递，例如）并且您希望避免使用Function.prototype.bind。

有几个原因，包括，正如您所写，代码可读性，但主要原因是继承。如果您使用箭头功能，那么您只需将一个函数作为成员分配给实例，但该函数不会被添加到原型中：

// ts
class A {
    fn1() {}

    fn2 = () => {}
}

// js
var A = (function () {
    function A() {
        this.fn2 = function () { };
    }
    A.prototype.fn1 = function () { };
    return A;
}());

那么如果你想扩展这个类并覆盖fn2方法会发生什么呢？因为它是属性而不是原型的一部分，所以您需要执行以下操作：

class B extends A {
    private oldFn2 = this.fn2;

    fn2 = () => {
        this.fn2();
    }
}

与以下相比，这看起来很糟糕：

class A {
    fn1() {}

    fn2() {}
}

class B extends A {
    fn2() {
        super.fn2();
    }
}

有一些理由希望在匿名函数上使用bind方法。我发现它更隐含，因为它是精确相同的函数，但绑定到特定的this。另一方面，在匿名函数中，除了调用实际函数之外，还可以添加更多代码。

另一件事是bind函数不仅可以绑定哪个对象被视为this，还可以绑定参数：

function fn(one, two, three) {}
fn.bind(null, 1, 2)(3);
fn(1, 2, 3);

这里fn的两次调用是相同的您可以使用匿名函数执行此操作，但并非总是如此：

var a = ["zero", "one", "two", "three", "four", "five"];
function fn(value, index) {
    console.log(value, index);
}

// works
a.forEach((item, index) => {
    setTimeout(() => {
        fn(item, index);
    }, 45);
});

// works
for (let i = 0; i < a.length; i++) {
    setTimeout(() => {
        fn(a[i], i);
    }, 45);
}

// doesn't work as i is undefined when the function is invoked
for (var i = 0; i < a.length; i++) {
    setTimeout(() => {
        fn(a[i], i);
    }, 45);
}

// works because the value of i and the value of a[i] are bound
for (var i = 0; i < a.length; i++) {
    setTimeout(fn.bind(null, a[i], i), 45);
}

类方法的函数声明或表达式？

1 个答案: