Q&A：
1. apply、call 有什么作用，什么区别？
- apply：
-
定义：
fun.apply(thisArg[, argsArray])，改变当前函数的this指向，这样可以使方法在特定对象中使用，而不需要再特定对象中重新写该方法。 -
参数：
- 第一个参数
thisArg是this的指向，即要指定的调用对象，非严格模式下，当为null或undefined时，默认指向全局对象； - 第二个参数
argsArray是参数数组，在ES5中，可以为类数组对象。该数组传给fun函数以供处理；当无法得知具体有何参数时，可以使用arguments对象代替argsArray；当设置为null或undefined时，表示不需要传入参数。
- 第一个参数
-
eg：
Array.prototype.join.apply(arguments)，让arguments可以使用join方法；补充一点，argument.callee常用于匿名函数，指代函数本身。 -
call：
fun.call(thisArg[, arg1[, arg2[, ...]]])，与apply作用相同。 - 区别：call和apply类似，只有第二个参数不同，apply是传入参数数组或者类数组对象，而call是传入参数列表（nodeList）。
- this：当函数被调用时，this指向调用函数的那个对象。
- 全局作用下，this指向window对象；
- 构造函数的this指向构造的对象；
- apply和call里，指向指定的调用对象；
- 事件绑定中的this，指向调用事件绑定的document对象；
- 函数嵌套中的function的this指向window；
- setTimeout和setInterval中的this指向window；
- eg：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>task33</title>
</head>
<body>
<button type="button" id="button">按钮</button>
<script>
document.getElementById('button').onclick = function() {
console.log(this);
}
function outerTest() {
console.log(this);
function innerTest() {
console.log(this);
}
innerTest();
setTimeout(function() {
console.log(this);
}, 2000);
}
outerTest();
</script>
</body>
</html>
this指向
<script>
var name = 'kevin';
var obj = {
name: 'zhao'
}
function outerTest() {
console.log(this.name);
}
outerTest();
outerTest.apply(obj);
</script>
apply中的this
Coding：
1. 以下代码输出什么?
<script>
var john = {
firstName : "John"
}
function func() {
alert(this.firstName + ": Hi!");
}
john.sayHi = func;
john.sayHi();
</script>
this指向调用其函数的对象，代码中john对象绑定函数，并且调用函数，所以this指向john对象，所以显示john: H1!：
代码1
2. 下面代码输出什么，为什么
<script>
func();
function func() {
alert(this);
}
</script>
默认是全局对象调用函数，所以显示的是window对象：
代码2
3. 下面代码输出什么
<script>
function fn0() {
function fn() {
console.log(this);
}
fn();
}
fn0();
document.addEventListener('click', function(e) {
console.log(this);
setTimeout(function() {
console.log(this);
}, 200);
}, false);
</script>
嵌套函数，在调用的时候，和外层函数一样，也遵循堆栈溢出原则，函数调用时this指向仍然是window；document绑定事件时，this指向document对象，因为调用该方法的是document对象；setTimeout是全局对象window调用的，所以this指向window：
代码3
4. 下面代码输出什么，why
<script>
var john = {
firstName: "John"
}
function func() {
alert(this.firstName);
}
func.call(john);
</script>
call方法的第一个参数是改变调用该方法的this对象，所以显示John：
代码4
5. 代码输出？
<script>
var john = {
firstName: "John",
surName: "Smith"
}
function func(a, b) {
alert(this[a] + ' ' + this[b]);
}
func.call(john, 'firstName', 'surName');
</script>
call方法，第一个参数是改变调用该方法的this对象，后面的参数是传入的参数，this[a]得到的就是john[firstName]的值：
代码4
6. 以下代码有什么问题，如何修改
<script>
var module = {
bind: function() {
$btn.on('click', function() {
console.log(this);
this.showMsg();
});
},
showMsg: function() {
console.log('饥人谷');
}
}
</script>
this只有在函数被调用的时候才能应用，当$btn被点击时，this指向$btn而不是module，所以在bind里调用不了showMsg()方法，应该改成：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>task33</title>
</head>
<body>
<button type="button" id="btn">按钮</button>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
var $btn = $('#btn');
var module = {
bind: function() {
var cur = this; // 保存对象的this
$btn.on('click', function() {
console.log(cur);
cur.showMsg();
});
},
showMsg: function() {
console.log('饥人谷');
}
}
module.bind();
</script>
</body>
</html>
代码6
本文归饥人谷和本人所有，如需转载请注明来源
网友评论