web前端入门到实战：JavaScript 函数作用域、执行环境(this)、call、apply、bind 的用法

什么是函数的作用域 函数作用域：在 JavaScript 中，作用域为可访问变量，对象，函数的集合。JavaScript 函数作用域: 作用域在函数内修改。 this 与函数又有什么关系呢？ this对象是在运行时基于函数的执行环境绑定的。比如：在全局函数中，this 等同于 window 或者 global，而当函数被作为方法调用时，this 等于那个对象。特别需要注意的是在执行诸如:setInterval、setTimeout 等函数的回调时，此时的 this 其实是指向全局 window 的，因为类似这样的方法其实是 window 的属性方法。所以我们经常会看到类似下面的代码： var a = { age: 21, addAge: function() { var that = this setInterval(function() { that.age += 1 }, 1000) } web前端开发学习Q-q-u-n： 731771211，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频，PDF） 那我们想改变函数执行时绑定的 this 怎么办呢？ call、apply、bind 可以用来干这个事情，哈哈~ call、apply 的用法： 每个函数都有两个非继承而来的方法： apply ( ) 和 call ( )。这两个方法的用途都是在特定的作用域中调用函数，实际上就是用来设置函数体内的 this对象 的值。两个方法的作用是相同的，唯一的区别是接收参数的方式不一样。两个方法的第一个参数是接收一个对象或者 null，区别是 apply 接收两个参数，第二个参数可以是 数组或者类数组的对象（arguments）这样。ES6 的 Set 实例也可以。call 方法就比较厉害了，它接收多个参数，除第一个对象参数外，其余的参数要一个一个列出来。 function sum(num1, num2) { return num1 + num2 } sum.apply(this, [1, 2]) // 3 sum.call(this, 1, 2) // 3 其实，call 和 apply 方法的强大在于，能扩充函数运行的运用域： var color = 'yellow' var obj = { color: 'blue' } function checkColor () { console.log(this.color) } checkColor() // yellow checkColor.call(this) // yellow checkColor.call(window) // yellow，此处 this === window checkColor.call(obj) // blue 那 bind 可以用来干点啥好事儿呢？ ES 5 为函数定义了一个 bind 方法。这个方法会创建一个函数的实例，实例执行时的 this 值会被绑定到传给 bind ( ) 函数的值。举个： var color = 'yellow' var obj = { color: 'blue' } function checkColor () { console.log(this.color) } checkColor.bind(obj)() // blue web前端开发学习Q-q-u-n： 731771211，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频，PDF） 它的实现原理也比较简单，类似于下面这样： function bind(fn, context) { return function() { return fn.apply(context, arguments) } }

本文章由javascript技术分享原创和收集