第2章this霹肝、call和apply
2.1 this
2.1.1 this的去向
1作為對象方法調(diào)用
var obj = {
a:1,
getA:function(){
console.log(this === obj); //true
console.log(this.a); //1
}
}
obj.getA();
2作為普通函數(shù)調(diào)用
//瀏覽器
window.name = 'globalName'
var getName = function(){
return this.name;
}
console.log(getName()); //globalName
//或者
window.name = 'globalName'
var myObject = {
name:'sven',
getName:function(){
return this.name;
}
}
var getName = myObject.getName;
console.log(getName()); //globalName
<!DOCTYPE html>
<html lang="en">
<body>
<div id="div1">我是一個div</div>
<script>
window.id = 'window';
document.getElementById('div1').onclick = function(){
alert(this.id); //div1
var callback = function(){
alert(this.id); //window
}
callback();//被作為普通函數(shù)調(diào)用
}
</script>
</body>
</html>
保存div結(jié)點(diǎn)的引用
document.getElementById('div1').onclick = function(){
var that = this;
var callback = function(){
alert(this.id); //div1
}
callback();
}
es5的strict模式下叉袍，這種情況下的this已經(jīng)被規(guī)定為不會指向全局對象，而是undefined
function func() {
'use strict'
alert(this); //undefined
}
func
3構(gòu)造器調(diào)用
var Mycalss = function(){
this.name = 'sven'
return 'anne';
}
var obj = new Mycalss();
alert(obj.name); //sven
顯式地返回一個object類型
var Mycalss = function(){
this.name = 'sven';
return {
name:'anne'
}
}
var obj = new Mycalss();
alert(obj.name); //anne
4Function.prototype.call或者Function.prototype.apply調(diào)用可以動態(tài)傳入函數(shù)this
var ob1 = {
name:'sven',
getName:function(){
return this.name;
}
}
var obj2 = {
name:'anne'
}
console.log(obj1.getName());//sven
console.log(obj1.getName(obj2));//anne
2.1.2丟失的this
var myObject = {
name:'sven',
getName:function(){
return this.name;
}
}
console.log(myObject.getName());//sven
var getName2 = myObject.getName;
console.log(getName2());//undefined
<html>
<body>
<div id="div1">我是一個div</div>
</body>
<script>
var getId = document.getElementById;
getId('div1'); //異常
</script>
</html>
document.getElementById = (function(func){
return function(){
return func.apply(document,arguments);
}
})(document.getElementById);
var getId = document.getElementById;
var div = getId('div1');
alert(div.id); //div1
2.2call和apply
2.2.1call和apply的區(qū)別
apply接受兩個參數(shù)叨橱，第一個參數(shù)指定了函數(shù)體內(nèi)的this對象的指向典蜕，第二個參數(shù)為一個帶下標(biāo)的集合，這個集合可以為數(shù)組罗洗，也可以為類數(shù)組愉舔，apply方法把集合中的元素作為參數(shù)傳遞給被調(diào)用的函數(shù)：
var func = function(a,b,c){
alert([a,b,c]); //[1,2,3]
}
func.apply(null,[1,2,3]);
call傳入的參數(shù)不固定，跟apply相同的是伙菜，第一個參數(shù)也是代表函數(shù)體內(nèi)的this指向轩缤，從第二個參數(shù)開始往后，每個參數(shù)被依次傳人函數(shù)
var func = function(a,b,c){
alert([a,b,c]); //[1,2,3]
}
func.call(null,1,2,3);
call是包裝在apply上面的語法糖，明確知道函數(shù)接受多少參數(shù)火的，而且想一目了然的表達(dá)形參與實(shí)參的對應(yīng)關(guān)系壶愤，那么也可以用call來傳遞參數(shù)。
當(dāng)使用call和apply的時候馏鹤，如果我們傳人的第一個參數(shù)為null征椒，函數(shù)體內(nèi)的this會指向默認(rèn)的宿主對象，在瀏覽器中則是window：
var func = function(a,b,c){
alert(this == window); //true
}
func.call(null,1,2,3);
嚴(yán)格模式還是null
var func = function(a,b,c){
alert(this === null); //true
}
func.call(null,1,2,3);
傳人null來代替某個具體的對象
Math.max.apply(null,[1,2,3,5,4]) //5
2.2.2call和apply的用途
1改變this指向
var obj1 = {
name:'sven'
}
var obj2 = {
name:'anne'
}
window.name = 'window'
var getName = function(){
alert(this.name);
}
getName();
getName.call(obj1);
getName.call(obj2);
document.getElementById('div1').onclick = function(){
var func = function(){
alert(this.id) //div1
}
func.call(this);
}
2Function.prototype.bind
Function.prototype.bind = function(content){
var self = this;
return function(){
return self.apply(context,arguments);
}
};
var obj = {
name:'sven'
}
var func = function(){
alert(this.name); //sven
}.bind(obj);
func();
復(fù)雜
Function.prototype.bind = function(){
var self = this,
context = [].shift.call(arguments),
args = [].slice.call(arguments);
return function(){
return self.apply(context,[].concat.call(args,[].slice.call(arguments)));
}
};
var obj = {
name:'sven'
}
var func = function(a,b,c,d){
console.log(this.name); //sven
console.log([a,b,c,d]); //[1,2,3,4]
}.bind(obj,1,2);
func(3,4);
3借用其他對象的方法
var A = function(name){
this.name = name;
}
var B = function(){
A.apply(this,arguments);
}
B.proto.getName = function(){
return this.name;
}
var b = new B('sven');
console.log(b.getName()) //sven
往arguments中添加一個新的元素湃累，通常會借用Array.prototype.push:
(function(){
Array.prototype.push.call(arguments,3);
console.log(arguments); //[1,2,3]
})(1,2)
arguments轉(zhuǎn)成真正的數(shù)組Array.prototype.slice;
截去頭一個元素Array.prototype.shift;
V8引擎源碼Array.prototype.push
function ArrayPush(){
var n = TO_UINT32(this.length); //被push的對象的length
var m = %_ArgumentsLength(); //push的參數(shù)個數(shù)
for(var i = 0; i < m; i++){
this[i+n] = %_Arguments(i); //復(fù)制元素
}
this.length = n + m;
return this.length;
}
對象是數(shù)組還是類數(shù)組一點(diǎn)都不重要勃救，可以把“任意”對象傳人
var a = {}
Array.prototype.push.call(a,'first');
alert(a.length);//1
alert(a[0]); //first
在低版本IE瀏覽器中執(zhí)行，必須顯式地給對象a設(shè)置length屬性
var a = {
length:0
};
對象本身要可以存取屬性
對象的length屬性可讀寫
var a = 1;
Array.prototype.push.call(a.'first');
alert(a.length);//undefined
alert(a[0]);//undefined
var func = function(){};
Array.prototype.push.call(func,'first');
alert(func.length)//報(bào)錯