if(!('bind' in Function.prototype)){ Function.prototype.bind = function(){ var fn = this, context = arguments[0], args = Array.prototype.slice.call(arguments, 1); return function(){ return fn.apply(context, args.concat(arguments)); } } }
bind()方法通常被用在上下文丢失的场景下，例如面向对象和事件处理。之所以要这么做， 是因为节点的addEventListener方法总是为事件处理器所绑定的节点的上下文中执行回调函数， 这就是它应该表现的那样。但是，如果你想要使用高级的面向对象技术，或需要你的回调函数成为某个方法的实例， 你将需要手动调整上下文。这就是bind方法所带来的便利之处：
function MyClass(){ this.element = document.createElement('div'); this.element.addEventListener('click', this.onClick.bind(this), false); } MyClass.prototype.onClick = function(e){ // do something };
回顾上面bind方法的源代码，你可能会注意到有两次调用涉及到了Array的slice方法：
Array.prototype.slice.call(arguments, 1); [].slice.call(arguments);
我们知道，arguments对象并不是一个真正的数组，而是一个类数组对象，虽然具有length属性，并且值也能够被索引， 但是它们不支持原生的数组方法，例如slice和push。但是，由于它们具有和数组类似的行为，数组的方法能够被调用和劫持， 因此我们可以通过类似于上面代码的方式达到这个目的，其核心是利用call方法。
这种调用其他对象方法的技术也可以被应用到面向对象中，我们可以在JavaScript中模拟经典的继承方式：
MyClass.prototype.init = function(){ // call the superclass init method in the context of the "MyClass" instance MySuperClass.prototype.init.apply(this, arguments); }
也就是利用call或apply在子类（MyClass）的实例中调用超类（MySuperClass）的方法。
ES6中的箭头函数
ES6中的箭头函数可以作为Function.prototype.bind()的替代品。和普通函数不同，箭头函数没有它自己的this值， 它的this值继承自外围作用域。
对于普通函数而言，它总会自动接收一个this值，this的指向取决于它调用的方式。我们来看一个例子：
var obj = { // ... addAll: function (pieces) { var self = this; _.each(pieces, function (piece) { self.add(piece); }); }, // ... }
在上面的例子中，最直接的想法是直接使用this.add(piece)，但不幸的是，在JavaScript中你不能这么做， 因为each的回调函数并未从外层继承this值。在该回调函数中，this的值为window或undefined， 因此，我们使用临时变量self来将外部的this值导入内部。我们还有两种方法解决这个问题：
使用ES5中的bind()方法
var obj = { // ... addAll: function (pieces) { _.each(pieces, function (piece) { this.add(piece); }.bind(this)); }, // ... }
使用ES6中的箭头函数
var obj = { // ... addAll: function (pieces) { _.each(pieces, piece => this.add(piece)); }, // ... }
在ES6版本中，addAll方法从它的调用者处获得了this值，内部函数是一个箭头函数，所以它集成了外部作用域的this值。
注意：对回调函数而言，在浏览器中，回调函数中的this为window或undefined（严格模式），而在Node.js中， 回调函数的this为global。实例代码如下：
function hello(a, callback) { callback(a); } hello('weiwei', function(a) { console.log(this === global); // true console.log(a); // weiwei });
小结
在你学习高级的设计模式之前，理解这些概念非常的重要，因为作用域和上下文在现代JavaScript中扮演着的最基本的角色。 无论我们谈论的是闭包、面向对象、继承、或者是各种原生实现，上下文和作用域都在其中扮演着至关重要的角色。 如果你的目标是精通JavaScript语言，并且深入的理解它的各个组成，那么作用域和上下文便是你的起点。
以上内容是小编给大家介绍的JavaScript中的作用域和上下文，希望对大家有所帮助 ！
您可能感兴趣的文章: