javascript - 为什么定义的属性中的 "this"范围错误？

Question

我在我的代码中创建了一个去抖功能，我做了一个非常简单的例子，但是当它与 Object.defineProperty 结合使用时，“this”的值是有问题的。

这是代码:

// Debounce a function call
Object.defineProperty(Function.prototype, "debounce", {
    enumerable: false,
    writable: false,
    value: function(ms, scope) {
        var fn = this,
            time = ms,
            timer;
        function debounced() {
            var args = arguments;
            if (timer) clearTimeout(timer);
            timer = setTimeout(function() { fn.apply(scope, args); }, time);
        }
        return debounced;
    }
});

它被调用(其中 .bind... 作为外部库的一部分完成):

function() {
    console.log(this.something);
}.debounce(300).bind(someObject)();

它可以工作，但是不能使用“this”的值。在值(value)函数中，“this”指向原始函数。无论如何，我可以通过这种设计风格获得绑定(bind)范围吗？

例子

var a = {
    b: function() {
        console.log(this.something);
    }.debounce(300),
};

var c = {
    something: true,
};

// I can't control this code -> 3rd party library
a.b.bind(c)();

Answer 1

调用debounced时需要使用debounced的this

在老派 JS 中

Object.defineProperty(Function.prototype, "debounce", {
    value: function value(ms) {
        var fn = this,
            time = ms,
            timer;
        function debounced() {
            var _this = this;
            var args = arguments;
            if (timer) clearTimeout(timer);
            timer = setTimeout(function () {
                return fn.apply(_this, args);
            }, time);
        }
        return debounced;
    }
});

或在 ES2015+ 中更简单

Object.defineProperty(Function.prototype, "debounce", {
    value: function(ms) {
        var fn = this,
            time = ms,
            timer;
        function debounced() {
            if (timer) clearTimeout(timer);
            timer = setTimeout(() => fn.apply(this, arguments), time);
        }
        return debounced;
    }
});

您还可以删除 enumerable:false、writable:false，因为 false 是这些属性的默认值 - 使代码更小一些:p