任务33-this

问答

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

在介绍apply和call之前，我们先来看看this，
this的指向：this的指向只有函数调用的时候才能确定。

在全局调用的时候指向的是window
作为对象的方法调用的时候指向的是那个对象
构造函数的时候指向的是构造出来的对象
在事件的回调函数中指的是触发事件的DOM节点（this===e.currentTarget）
只用apply和call调用的时候指向的是第一个参数指定对象, 如果第一个null就指向window
如：
<pre>var name = 'hello' var obj = { name: 'world' } function printName() { console.log(this.name) } //全局调用, 默认指向window printName()//输出'hello' //作为obj的方法调用, 指向obj obj.printName = printName obj.printName()//输出'world' //使用call指定this值 printName.call(obj)//输出'world'</pre>

作用：两者都是在指定this值和参数（参数以数组或类数组对象的形式存在）的情况下调用某个函数。实际上就是说用它可以绑定一个函数然后在另一个环境中（比如另一个函数中）使用新环境给的参数（指定this值、参数）进行运算；
区别：两者的区别在于接受的参数不同，apply接受的是数组（或者是类数组对象），call接受的是多个参数。
如：
<pre>function sum(a,b){ console.log(a+b) } function applySum(a,b){ return sum.apply(this,[a,b]) //使用apply方法，必须传入数组 } function callSum(a,b){ return sum.call(this,a,b)//使用call方法，逐条列举参数 } applySum(3,4)//7 //虽然apply接受的是数组，但是传递给函数的参数还是数组中的元素，而不是整个数组 callSum(3,4)//7</pre>
由于apply接受数组类型的参数，所以就有这么个特别的用法。如：
<pre>var arr =[100,20,300,50] Math.min.apply(null, arr);20//就可以获得数组中的最小值 Math.max.apply(null,arr);300//就可以获得数组中的最大值</pre>

代码

1. 以下代码输出什么?

<pre>var john = { firstName: "John" } function func() { alert(this.firstName + ": hi!") } john.sayHi = func john.sayHi()</pre>

输出 John:hi!
调用对象john下sayHi方法，其this指向john

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

<pre>`
func()

function func() {
alert(this)
}
`</pre>

输出window。
在全局下调用func()函数，这里的this指向全局对象

3. 下面代码输出什么？

<pre>`
function fn0(){
function fn(){
console.log(this);
}
fn();
}
fn0();

document.addEventListener('click', function(e){
console.log(this);
setTimeout(function(){
console.log(this);
}, 200);
}, false);
`</pre>

fn0()执行后输出window，此时的fn0()是在全局环境下调用的，this指向window
事件绑定后第一次输出document 。因为在document上绑定事件，this指document。第二次输出window。因为setTimeout,setInterval两个方法的执行上下文与调用他们的函数的执行上下文是分离的，这两个方法执行的函数this也是全局对象。

4. 下面代码输出什么，why？

<pre>var john = { firstName: "John" } function func() { alert( this.firstName ) } func.call(john)</pre>

输出John,当函数被call方法调用时，其this指向传入的对象，这里函数func的this就指向对象john了。

5. 代码输出？

<pre>var john = { firstName: "John", surname: "Smith" } function func(a, b) { alert( this[a] + ' ' + this[b] ) } func.call(john, 'firstName', 'surname')</pre>

输出John Smith，func.call(context,参数1,参数2) 这里函数执行时传入的this是john对象

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

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

this指什么 ?当$btn被点击的时候, this指向$btn
this.showMsg(); 执行时报错，因为这里的this指向的还是$btn，而$btn下没有showMsg()这个方法，它在对象module上

修改方法：
<pre>var module= { bind: function(){ $btn.on('click', function(){ console.log(this) module.showMsg(); }) }, showMsg: function(){ console.log('饥人谷'); } }</pre>

7. 下面代码输出什么?

<pre>var length = 3; function fa() { console.log(this.length); } var obj = { length: 2, doSome: function (fn) { fn(); arguments[0](); } } obj.doSome(fa);</pre>

输出3,1。
obj.doSome(fa)把fa传进obj的doSome方法的function(fn)内，并将fn赋值为fa，函数内部的fn()变为fa()，由于fa函数是在window下被调用的，所以this为window，它的length为3，所以这里输3。
函数内部的arguments为一个类数组对象，这里它内部只有一个值，即处于数组0位的function fa()，这里arguments0也是执行fa()，但调用的对象不同，这里调用它的是arguments，this即为arguments，由于argument只有一个值，则length为1，所以这里输出1。

版权归本人及饥人谷所有，转载请注明出处。

最后编辑于：2017.12.05 02:18:02