this

apply、call 有什么作用，什么区别？

call() 方法在使用一个指定的this值和若干个指定的参数值的前提下调用某个函数或方法.

    fn.call(context, param1, param2...)
    fn.apply(context, [param1,param2...])

第一个参数是指定的this值，后面的参数为指定的参数列表。apply()方法也可以在调用函数的时候将第一个参数指定为this值，不同之处在于apply第二个参数为传递给调用函数的参数数组。

    function fn(){
            console.log(this);
        }
    fn();
    var a={};
    var fn2=fn.bind(a);
    fn2();
    fn.call({name:"Tom"});
    fn.apply({name:"Tom"});

图片标题

分析上面的代码和控制台输出，bind的作用返回一个新函数，并且使函数内部的this为传入的第一个参数。call和apply都可以在调用函数的时候将第一个参数指定为this值。

代码示例

1.以下代码输出？

var john = {  firstName: "John" };
function func() { 
  alert(this.firstName + ": hi!")
}
john.sayHi = func; //将func函数绑定到john对象的sayHi属性。此时func函数就是john对象的方法，那么在调用函数时，this被自然绑定到这个对象上。
john.sayHi() ;  //谁在调用函数，谁就是this，所以this是john，代码执行后弹出John:hi! 

2.下面代码输出什么，为什么

    func() ;
    function func() { 
      alert(this)
    } //输出object window，在函数被直接调用时this绑定到全局对象。在浏览器中，window 就是该全局对象。

3.下面代码输出什么？

function fn0(){
    function fn(){
        console.log(this);
    }
    fn();
}
fn0();  //此时调用函数的是全局对象window，所以输出window
document.addEventListener('click', function(e){
    console.log(this);  //点击页面，控制台输出document。绑定事件函数时，this表示触发此事件的DOM对象。
    setTimeout(function(){
        console.log(this);  //setTimeout、setInterval这两个方法执行的函数this也是全局对象
    }, 200);
}, false);

4.以下代码输出？

var john = { 
  firstName: "John" 
}
function func() { 
  alert( this.firstName )
}
func.call(john); //输出John.call方法可以在函数调用的时候将第一个参数设置为this值，所以现在的this就是传入的参数john。

5.代码输出？

var john = { 
  firstName: "John",
  surname: "Smith"
}
function func(a, b) { 
  alert( this[a] + ' ' + this[b] )
}
func.call(john, 'firstName', 'surname') //输出John Smith。call方法第一个参数为函数调用时的this值，后面为函数的参数列表。

6.以下代码有什么问题，如何修改

var $btn=$('button');
var module= {
  bind: function(){
    $btn.on('click', function(){
      console.log(this) //这里的this指的是触发此事件的DOM对象，不是module。
      this.showMsg(); //由于this是$btn，所以在执行这句是会报错。
    })
  },
  showMsg: function(){
    console.log('饥人谷');
  }
}
module.bind(); 

将代码修改为：

var $btn=$('button');
var module= {
  bind: function(){
    var me=this; //先将this赋给变量me保存起来。在调用函数bind时，这里的this就是对象module。
    $btn.on('click', function(){
      console.log(this) 
      me.showMsg(); //此时相当于执行module.showMsg().输出：饥人谷。
    })
  },
  showMsg: function(){
    console.log('饥人谷');
  }
}
module.bind();