绑定这个和参数

Version >= 5.1

当你在 JavaScript 中引用方法(属性是一个函数)时,它通常不记得它最初附加到的对象。如果该方法需要将该对象称为 this,则无法将其调用,并且调用它可能会导致崩溃。

你可以在函数上使用 .bind() 方法来创建包含 this 值和任意数量的前导参数的包装器。

var monitor = {
  threshold: 5,
  check: function(value) {
    if (value > this.threshold) {
      this.display("Value is too high!");
    }
  },
  display(message) {
    alert(message);
  }
};

monitor.check(7); // The value of `this` is implied by the method call syntax.

var badCheck = monitor.check;
badCheck(15); // The value of `this` is window object and this.threshold is undefined, so value > this.threshold is false

var check = monitor.check.bind(monitor);
check(15); // This value of `this` was explicitly bound, the function works.

var check8 = monitor.check.bind(monitor, 8);
check8(); // We also bound the argument to `8` here. It can't be re-specified.

当不处于严格模式时,函数使用全局对象(浏览器中的 window)作为 this,除非使用方法 .call 语法将函数作为方法调用,绑定或调用。

window.x = 12; 

function example() {
  return this.x;
}

console.log(example()); // 12

在严格模式下,this 默认为 undefined

window.x = 12; 
    
function example() {
  "use strict";
  return this.x;
}

console.log(example()); // Uncaught TypeError: Cannot read property 'x' of undefined(…)

Version >= 7

绑定运算符

双冒号绑定运算符可用作上述概念的缩写语法:

var log = console.log.bind(console); // long version
const log = ::console.log; // short version

foo.bar.call(foo); // long version
foo::bar(); // short version

foo.bar.call(foo, arg1, arg2, arg3); // long version
foo::bar(arg1, arg2, arg3); // short version

foo.bar.apply(foo, args); // long version
foo::bar(...args); // short version

这种语法允许你正常编写,而不用担心在任何地方绑定 this

将控制台功能绑定到变量

var log = console.log.bind(console);

用法:

log('one', '2', 3, [4], {5: 5});

输出:

one 2 3 [4] Object {5: 5}

为什么要这么做?

一个用例可以是你有自定义记录器,并且你想决定运行时使用哪一个。

var logger = require('appLogger');

var log = logToServer ? logger.log : console.log.bind(console);