this

apply、call 、bind有什么作用,什么区别

作用

  • bind是返回一个新函数,并且使函数内部的this为传入的第一个参数。
  • 而apply和call是调用一个函数,传入函数执行上下文及参数

区别:

  • bind() 最简单的用法是创建一个函数,使这个函数不论怎么调用都有同样的 this 值。还可以配合setTimeout使用。
  • apply()与 call()非常相似,不同之处在于提供参数的方式。就是call()方法接受的是若干个参数的列表,而apply()方法接受的是一个包含多个参数的数组。
function joinstr(){
          console.log( [].join.call(arguments,'-')) //a-b-c
          var join=[].join.bind(arguments)
          console.log(join('-'))//a-b-c
        }
        joinstr('a','b','c')

以下代码输出什么?

var john = { 
  firstName: "John" 
}
function func() { 
  alert(this.firstName + ": hi!")
}
john.sayHi = func
john.sayHi()
输出结果为join:hi!
john.sayHi = func执行完后,join对象为
john{
  fistName:"john"
  sayHi:function func(){.....}
}
所以最后执行john.sayHi()时this.firstName指的是john.firstName值为john

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

func() 
function func() { 
  alert(this)
}
func函数中的this为全局作用域中的this为window

下面代码输出什么

document.addEventListener('click', function(e){
    console.log(this);
    setTimeout(function(){
        console.log(this);
    }, 200);
}, false);
在事件处理程序中this代表事件源DOM对象,所以第一个this为document。
setTimeout、setInterval这两个方法执行的函数this是全局对象所以结果为window

下面代码输出什么,why

var john = { 
  firstName: "John" 
}

function func() { 
  alert( this.firstName )
}
func.call(john)
call作用为调用john对象,并且传入john对象参数,所以alert中的this为john,最终结果为john

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

var module= {
  bind: function(){
    $btn.on('click', function(){
      console.log(this) //this指什么
      this.showMsg();
    })
  },
  
  showMsg: function(){
    console.log('饥人谷');
  }
}

此代码中$btn事件中的this指的是$btnDOM元素,所以this.showMsg这里有问题,因为showMsg函数在module对象中,与this所指的$btn并无关联,修改结果如下

var module= {
  bind: function(){
    var self=this    //将这里的this   module保存为self
    $btn.on('click', function(){
      console.log(this) //this指什么
      self.showMsg();   
    })
  },
  
  showMsg: function(){
    console.log('饥人谷');
  }
}

或者

      var module= {
 bind: function(){
    $btn.on('click', function(){
     console.log(this) //this指什么
     this.showMsg();
   }.bind(this))
 },

 showMsg: function(){
   console.log('饥人谷');
 }
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1. apply、call 、bind有什么作用,什么区别? call ,apply的作用:调用一个函数,传入函数...
    Rising_suns阅读 403评论 0 0
  • apply、call 、bind有什么作用,什么区别 apply:fn.apply( obj,])将fn函数里的t...
    邵志远阅读 549评论 0 0
  • apply、call 有什么作用,什么区别 使用call和apply方法,可以改变对象方法的运行环境。 call ...
    coolheadedY阅读 355评论 0 0
  • 作业 this 相关问题 问题1: apply、call 有什么作用,什么区别apply()和call()函数都可...
    饥人谷_桶饭阅读 402评论 0 0
  • this 相关问题 apply、call 、bind有什么作用,什么区别这三个方法均可以改变调用函数的this指向...
    放风筝的小小马阅读 385评论 0 1