this

作者: 不是我的简书 | 来源:发表于2018-12-03 10:42 被阅读11次

    this 的值到底是什么?一次说清楚

    1、apply、call 、bind的作用与区别?

    call、apply 调用一个函数,传入函数执行上下文及参数
    call、apply 通过设置函数内部的this和函数的参数来调用函数并返回函数的返回结果

    fn.call(context, param1, param2...)   
    fn.apply(context, paramArray)
    

    第一个参数都是希望设置的this对象,不同之处在于call方法接收参数列表,而apply接收参数数组

    fn.bind(thisArg[, arg1[, arg2[, ...]]])
    
    • thisArg 当绑定函数被调用时,该参数会作为原函数运行时的 this 指向。当使用new操作符调用绑定函数时,该参数无效。
    • arg1, arg2, ... 当绑定函数被调用时,这些参数将置于实参之前传递给被绑定的方法。
      返回一个新函数,新函数与被调函数(绑定函数的目标函数)具有相同的函数体,并且指定函数内部的 this 为传入的第一个参数。绑定函数被调用时,bind() 也接受预设的参数提供给原函数。

    bind() 最简单的用法是创建一个函数,使这个函数不论怎么调用都有同样的 this 值。

    红框中的内容是等价的

    bind 把函数的this及部分参数固定为某个值,返回一个新的函数,调用新的函数的时候可以继续传入参数,最终已固定的参数和继续传入的参数会一起传给原函数,并把原函数的返回值返回。

    curry (自动bind)每次都固定剩下的参数,直到传入的参数达到预定数量以后才真正调用原函数并返回。一般来说curry不会传入this

    2、练习

    1: 下面代码输出什么,为什么

    var john = { 
      firstName: "John" 
    }
    function func() { 
      alert(this.firstName + ": hi!")    //弹出 John: hi!
    }
    john.sayHi = func
    john.sayHi()    //等价于john.sayHi.call(john),this指向的是john  
    

    2: 下面代码输出什么,为什么

    func()    //等价于 func.call(undefined),可以简写为 func.call()
    function func() { 
      alert(this)    //弹出window
    }
    

    按理说打印出来的 this 应该就是 undefined 了吧,但是浏览器里有一条规则:

    • 如果你传的 context 是 null 或者 undefined,那么 window 对象就是默认的 context(严格模式下默认 context 是 undefined)

    3:下面代码输出什么

    document.addEventListener('click', function(e){
        console.log(this);    //document,绑定事件中的this指向事件源
        setTimeout(function(){
            console.log(this);    //window,setTimeout、setInterval这两个方法执行的函数this也是全局对象
        }, 200);
    }, false);
    

    4:下面代码输出什么,why

    var john = { 
      firstName: "John" 
    }
    
    function func() { 
      alert( this.firstName )     //弹出John
    }
    func.call(john)    // call()传入的第一个参数是希望设置的this对象,指定了this为john
    

    5: 以下代码有什么问题,如何修改

    var module= {
      bind: function(){
        var _this = this    //保存一个this
        $btn.on('click', function(){
          console.log(this) //this指什么:事件绑定的回调函数中的this是指绑定的元素,这里this指$btn
          _this.showMsg();    //但是$btn上是没有showMsg方法的,需要使用刚才保存的this
        })
      },
      
      showMsg: function(){
        console.log('lalala');
      }
    }
    

    相关文章

      网友评论

          本文标题:this

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