function Runner(name) { console.log(this instanceof Rabbit); // => true this.name = name; } function Rabbit(name, countLegs) { console.log(this instanceof Rabbit); // => true // 间接调用，调用了父级构造器 Runner.call(this, name); this.countLegs = countLegs; } var myRabbit = new Rabbit('White Rabbit', 4); myRabbit; // { name: 'White Rabbit', countLegs: 4 }
5..bind()
对比方法 .apply() 和 .call()，它俩都立即执行了函数，而 .bind() 函数返回了一个新方法，绑定了预先指定好的 this ，并可以延后调用。
.bind() 方法的作用是创建一个新的函数，执行时的上下文环境为 .bind() 传递的第一个参数，它允许创建预先设置好 this 的函数。
var numbers = { array: [3, 5, 10], getNumbers: function() { return this.array; } }; // Create a bound function var boundGetNumbers = numbers.getNumbers.bind(numbers); boundGetNumbers(); // => [3, 5, 10] // Extract method from object var simpleGetNumbers = numbers.getNumbers; simpleGetNumbers(); // => undefined or throws an error in strict mode
使用.bind()时应该注意，.bind() 创建了一个永恒的上下文链并不可修改。一个绑定函数即使使用 .call() 或者 .apply()传入其他不同的上下文环境，也不会更改它之前连接的上下文环境，重新绑定也不会起任何作用。
只有在构造器调用时，绑定函数可以改变上下文，然而这并不是特别推荐的做法。
6.箭头函数
箭头函数并不创建它自身执行的上下文，使得 this 取决于它在定义时的外部函数。
箭头函数一次绑定上下文后便不可更改，即使使用了上下文更改的方法：
var numbers = [1, 2]; (function() { var get = () => { console.log(this === numbers); // => true return this; }; console.log(this === numbers); // => true get(); // => [1, 2] // 箭头函数使用 .apply() 和 .call() get.call([0]); // => [1, 2] get.apply([0]); // => [1, 2] // Bind get.bind([0])(); // => [1, 2] }).call(numbers);
这是因为箭头函数拥有静态的上下文环境，不会因为不同的调用而改变。因此不要使用箭头函数定义方法
function Period (hours, minutes) { this.hours = hours; this.minutes = minutes; } Period.prototype.format = () => { console.log(this === window); // => true return this.hours + ' hours and ' + this.minutes + ' minutes'; }; var walkPeriod = new Period(2, 30); walkPeriod.format(); // => 'undefined hours and undefined minutes'
参考
强烈推荐觉得没弄明白的同学看看上面三篇文章，其中第三篇是第二篇的译文。如果大家对this还有疑问，也欢迎大家一起讨论，交流促进思考，共同进步。
您可能感兴趣的文章: