问答

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

• 作用：
  在函数原型中定义了两个方法apply和call。它们的作用都是在特定的作用域中调用函数，实际上就是手动设置函数调用时的this值。
• 区别：
  接受的参数不同，首先它们的第一个参数都是函数运行的作用域(this)。
  但是对于apply方法，第二个参数必须是数组（或者是类数组的对象，比如arguments，），而call方法传递给函数的参数必须逐个列举出来。
  举例：

function sum(x,y){
      console.log(x+y)
}

function applySum(x,y){
      return sum.apply(this,[x,y]) //使用apply方法，必须传入数组
}

function callSum(x,y){
      return sum.call(this,x,y)//使用call方法，逐条列举参数
}

applySum(10,10)//20
callSum(10,10)//20

关于apply方法有一个很实用的技巧，之前在实战的时候用过：

var arr =  [100,50，200,150];
Math.min.apply(null,arr);//50

Math.min方法原本是只接受逐个列举的参数，不能接受数组的，而利用apply方法能传递数组形式的参数的特点，使Math.min方法能用在数组上，极为方便。这个小技巧能体现出apply和call方法的区别。

另外关于this我写了一篇文章，记录了我学习this上的一些收获。
学习this

代码

1.以下代码输出什么？

var john = { 
  firstName: "John" 
}
function func() { 
  alert(this.firstName + ": hi!")
}
john.sayHi = func//将函数func绑定给john对象的sayHi方法。
john.sayHi() //输出"John:h1!"，调用对象john下sayHi方法，其this指向john。

2.下面daima

func() //在全局环境下调用func()函数，其this指向全局对象，输出window。

function func() { //函数声明提升
  alert(this)
}

3.下面代码输出什么

function fn0(){
    function fn(){
        console.log(this);
    }
    fn();
}

fn0();//输出window，此时的fn()是在全局环境下调用的，其this指向window。


document.addEventListener('click', function(e){
    console.log(this); //输出document。这是在document上面绑定事件，其this指向document。
    setTimeout(function(){
        console.log(this);//输出window。setTimeout是属于window对象的方法，在这里其this指向window。
    }, 200);
}, false);

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

var john = { 
  firstName: "John" 
}

function func() { 
  alert( this.firstName )
}
func.call(john) 
//输出John,当函数被call方法调用时，其this指向传入的对象，这里函数func的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方法后，函数func的this指向对象john，结果自然是输出John Smith了。

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

var module= {
  bind: function(){
    $btn.on('click', function(){
      console.log(this) //输出$btn
      this.showMsg(); //输出报错，由于在$btn上绑定了事件，这里的this就指向$btn,而$btn上没有showMsg()方法，所以会报错。
    })
  },
  
  showMsg: function(){
    console.log('饥人谷');
  }
}

//修改后
var module= {
  bind: function(){
    var that = this;
    $btn.on('click', function(){
      console.log(this) ;
      that.showMsg();
    })
  },
  
  showMsg: function(){
    console.log('饥人谷');
  }
}

本文版权归本人和饥人谷所有，转载请注明来源。