美文网首页让前端飞Web前端之路网页前端后台技巧(CSS+HTML)
web前端入门到实战:JavaScript 函数作用域、执行环境

web前端入门到实战:JavaScript 函数作用域、执行环境

作者: 大前端世界 | 来源:发表于2019-12-03 16:33 被阅读0次

    什么是函数的作用域

    函数作用域:在 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)
        }
    }
    

    相关文章

      网友评论

        本文标题:web前端入门到实战:JavaScript 函数作用域、执行环境

        本文链接:https://www.haomeiwen.com/subject/lipiwctx.html