Q&A：
1. apply、call 有什么作用，什么區(qū)別？
- apply：
-
定義：
fun.apply(thisArg[, argsArray])，改變當(dāng)前函數(shù)的this指向，這樣可以使方法在特定對象中使用，而不需要再特定對象中重新寫該方法。 -
參數(shù)：
- 第一個參數(shù)
thisArg是this的指向，即要指定的調(diào)用對象，非嚴(yán)格模式下，當(dāng)為null或undefined時，默認(rèn)指向全局對象； - 第二個參數(shù)
argsArray是參數(shù)數(shù)組，在ES5中，可以為類數(shù)組對象。該數(shù)組傳給fun函數(shù)以供處理；當(dāng)無法得知具體有何參數(shù)時，可以使用arguments對象代替argsArray；當(dāng)設(shè)置為null或undefined時，表示不需要傳入?yún)?shù)。
- 第一個參數(shù)
-
eg：
Array.prototype.join.apply(arguments)，讓arguments可以使用join方法；補(bǔ)充一點，argument.callee常用于匿名函數(shù)，指代函數(shù)本身。 -
call：
fun.call(thisArg[, arg1[, arg2[, ...]]])，與apply作用相同。 - 區(qū)別：call和apply類似，只有第二個參數(shù)不同，apply是傳入?yún)?shù)數(shù)組或者類數(shù)組對象，而call是傳入?yún)?shù)列表（nodeList）。
- this：當(dāng)函數(shù)被調(diào)用時，this指向調(diào)用函數(shù)的那個對象。
- 全局作用下，this指向window對象；
- 構(gòu)造函數(shù)的this指向構(gòu)造的對象；
- apply和call里，指向指定的調(diào)用對象；
- 事件綁定中的this，指向調(diào)用事件綁定的document對象；
- 函數(shù)嵌套中的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指向調(diào)用其函數(shù)的對象，代碼中john對象綁定函數(shù)，并且調(diào)用函數(shù)，所以this指向john對象，所以顯示john: H1!：
代碼1
2. 下面代碼輸出什么，為什么
<script>
func();
function func() {
alert(this);
}
</script>
默認(rèn)是全局對象調(diào)用函數(shù)，所以顯示的是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>
嵌套函數(shù)，在調(diào)用的時候，和外層函數(shù)一樣，也遵循堆棧溢出原則，函數(shù)調(diào)用時this指向仍然是window；document綁定事件時，this指向document對象，因為調(diào)用該方法的是document對象；setTimeout是全局對象window調(diào)用的，所以this指向window：
代碼3
4. 下面代碼輸出什么，why
<script>
var john = {
firstName: "John"
}
function func() {
alert(this.firstName);
}
func.call(john);
</script>
call方法的第一個參數(shù)是改變調(diào)用該方法的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方法，第一個參數(shù)是改變調(diào)用該方法的this對象，后面的參數(shù)是傳入的參數(shù)，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只有在函數(shù)被調(diào)用的時候才能應(yīng)用，當(dāng)$btn被點擊時，this指向$btn而不是module，所以在bind里調(diào)用不了showMsg()方法，應(yīng)該改成：
<!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
本文歸饑人谷和本人所有，如需轉(zhuǎn)載請注明來源
