window.onblur和console.log部分应用程序与bind

Question

我正在阅读一些javascript帖子，我遇到了this answer。

基本上，在答案中，海报说你可以设置

window.onblur = myBlurFunction

仅当myBlurFunction是一个不需要传递任何参数的函数时。

我即将发表评论说可以使用bind为需要参数的函数执行部分应用程序，但是当我尝试时

var myBlurFunction = console.log.bind(console,'blur'); 
window.onblur = myBlurFunction;

模糊窗口没有打印字符串“模糊”，而是打印出似乎是模糊对象的内容

  

模糊模糊{target：Window→window-onblur-not-working，...

有谁知道为什么这种方法不起作用？

我真正想要的是我的问题是为什么事件处理函数将事件作为参数给出？

window.onblur = function(event){console.log(event)}

我从未见过任何提及或解释事件参数的文档。

另外，如何重写绑定参数？通常，一旦将值绑定到函数参数，任何其他参数都将分配给后续参数：

var f = function(arg1,arg2){console.log(arg1,arg2)}; 
g = f.bind(null,1);
g();            // 1 undefined
g(2);           // 1 2
g.call(null,2); // 1 2

Answer 1

引用bind() page on MDN：

  

bind（）方法创建一个新函数，在调用时，将其this关键字设置为提供的值，并在调用新函数时提供任何前面提供的给定参数序列。

让我们分开这两个概念，然后在你的例子中一起解释它们。

更改此上下文

这是对MDN页面中示例的改编（我保证很简单！）：

// This assignment is equivalent to 'window.x' or 'var x' in the global scope
this.x = "global!";

var obj = {
    x: "not global!",
    getX: function() {
        return this.x;
    }
};


// Running inside the object's scope, returns obj.x
obj.getX();
//=> "not global!"



// Assign the scoped function (obj.getX) to a global variable
var retrieveX = obj.getX;

// Running in the global scope, returns window.x
retrieveX();
//=> "global!"



// Binds the 'retrieveX' function to run inside the object's scope
var boundedRetrieveX = retrieveX.bind(obj);

// Running inside the specified 'obj' scope, returns obj.x
boundedRetrieveX();
//=> "not global!"

由此，我们收集通过obj作为参数更改了this引用的上下文。

在你的例子中，你正在做这样的事情：

console.log.bind(console);  // The second argument doesn't matter for now

因此，您告诉console.log this的任何实例都是对console上下文的引用。我认为这很好，不应该造成太大的伤害。

预先填充参数

再次，从MDN页面示例进行调整：

function list() {
    // Simply convers the arguments list into an Array, then returns it
    return Array.prototype.slice.call(arguments);
}

// Example usage
list(1, 2, 3);
//=> [1, 2, 3]

// Using 'bind' to prepend to (append to the start of) the arguments list
// Note that, because 'this' context doesn't matter, the first argument is null
var betterList = list.bind(null, 98);

// Passing no arguments, it returns an array with only 98
// This is similar to '[98].concat([])'
betterList();
//=> [98]

// Passing arguments, it appends 98 to the start of the array
// Again, this is similar to '[98].concat([1,2,3])'
betterList(1, 2, 3);
// [98, 1, 2, 3]

// The parameters can go on indefinitely. They will all be added to the start of the arguments list in order
var bestList = list.bind(null, 98, 99, 100);

bestList(1, 2, 3);
//=> [98, 99, 100, 1, 2, 3]

函数list将类似于数组的对象arguments转换为实际数组，该对象包含传递给函数的所有参数。

使用bind()，我们将值附加到该参数列表的开头，这样对于函数来说，好像它们首先以这种方式传递。

您的代码如下所示：

console.log.bind(console, "blur");

忽略第一个参数，您将使用console.log添加发送到"blur"的参数（在本例中为事件响应）。这也没有害处，只是没有用处。

最后的想法

所以，这是我玩弄参数的截图。第一个参数表示this的上下文，设置为null，就像上面的示例一样，因为它在这里实际上并不重要。之后我通过了一长串论证，以便在onblur事件回复之前做好准备。

正如您所看到的，即使我在回复中添加了大量内容，Event object（不是模糊对象！哈哈）仍然存在。

这就是它“不”起作用的原因。它以自己的方式工作。这可能不是你所期待的。

您仍然可以选择与您关联的问题中提供的方法，例如

window.onblur = () => console.log("blur");

解决方案不那么复杂，实际上做了你期望的解决方案