任务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。
版权归本人及饥人谷所有,转载请注明出处。