JavaScript的this关键字非常灵活!
var o1={
name:'apple',
age:100,
msg:function(){
return '显示name和age信息:'+'name: '+this.name+', age: '+this.age;
}
};
//针对msg中的this进行研究:
console.log(o1.msg());//this 指向当前对象o1
var o2={
name:'blue',
age:1000
};
o2.msg=o1.msg;
console.log(o2.msg());//this 指向当前对象o2
当o1.msg()时,this指向o1;而o2.msg()时,this指向o2。也就是this指向的是“当前”环境运行时所在的对象。
运行结果:
将函数提出来,更形象的表示:
console.log('---');
function f(){
console.log(this.name1);
}
var o3={
name1:'alice',
info:f
};
var o4={
name1:'boy',
info:f
};
f();//undefined
o3.info();//alice
o4.info();//boy
f():this指向顶层对象window;o3.info():this指向的是o3;o4.info():this指向的是o4。即this总是指向“当前”运行时所在的对象。
运行结果:
如果我们在全局环境中,将对象中的方法赋值给变量。以本文最上面代码o1.msg示例:
var name='abc';
var age=1;
var test1=o1.msg;
console.log(test1());//此时this指向顶层对象window
此时test1():this指向的是window
运行结果:
由上面的这些例子,我们可以“粗略”的认为:每个函数中都存在着this,它总是指向当前运行环境的对象。
全局环境下的this:指向顶层对象window
function test2(){
if(this === window){
console.log('此时this 指向顶层对象window');
}
}
test2();
运行结果:
function Test3(num){
this.num=num;
}
var t3=new Test3(100);
console.log(t3.num);//this 指向t3 Test3.prototype.m=function (){//所有由Test3构造函数生成的实例化对象都共享m方法
return this.num;
};
console.log(t3.m());//this 指向t3
运行结果:
注意下面这种情况:
var o5={
name:'application',
send:function(){
console.log(this
);
}
};
o5.send();//o5
(o5.send=o5.send)();//window
/**
* 相当于
* (o5.send=function(){
* console.log(this);
* })
*/
(false||o5.send)();//window
/**
* 相当于
* (false || function(){
* console.log(this);
* })
*/
(1,o5.send)();//window
/**
* 相当于
* (1,function(){
* console.log(this);
* })
*/
即:除非直接使用o5.send(),结果返回当前对象;否则均返回顶层对象window
运行结果:
如果方法位于多层对象的内部,那么this指向当前对象层,不会继承更上面的层:
var o6={
name:'cat',
f:{
f1:function (){
console.log(this.name);
console.log(this==o6.f);//其实this指向的是o6.f
}
}
};
o6.f.f1();//undefined
//因为此时this指向的是f
上面代码中o6对象中f属性对应的值,是一个对象。该对象里面又存在着一个函数,此时函数里面的this指向o6.f,而不是o6
运行结果:
如果想达到预期的效果:
var o6={
name:'cat',
f:{
f1:function(){
console.log(this.name);
},
name:'cat'
}
}
o6.f.f1();//cat
继续进行变通:
//将o6.f.f1赋值给变量
var v=o6.f.f1;
/**
* 相当于
* var v=function (){
* console.log(this.name);
* }
*/
v();//this指向的对象又指向了顶层对象window
//将o6.f赋值给变量
var v1=o6.f;
v1.f1();//此时返回的结果为'cat'
/**
* 相当于
* var v1={
* f1:function(){
* console.log(this.name);},
* name:'cat'
* };
*/
同时应尽量避免在函数中使用多层this:
//尽量避免在函数中使用多层this
var o7={
name:'apple',
f:function(){
console.log(this);//this指向当前运行环境对象,即o7
var f1=function(){
console.log(this);//this指向顶层对象,即window
}();//IIFE;这是立即调用的函数表达式
}
};
o7.f();
运行结果:
为了让f1中的this也指向该对象:添加一个临时变量作为辅助:固定this。
var o8={
name:'apple',
f:function(){
console.log(this);//this指向o8
var that=this;//使用变量固定this
var f1=function(){
console.log(that);//此时that指向o8
}();
}
};
o8.f();
运行结果:
当然如果采用严格模式,那么函数内部this不能指向顶层对象window!
call():调用函数,指定this指向的对象;第一个参数是this指向的对象,第二个、第三个等是函数调用的参数
var o9={
name:'orange'
};
function test4(){
console.log(this);
}
test4();
test4.call(o9);//指定this的指向
//call方法中如果参数为空、null\undefined,那么默认指向全局对象window
test4(null);
test4(undefined);
//call方法第一个参数是this指向的对象,后面的参数是函数调用时用到的参数
运行结果:
call的一个应用:调用对象原生方法,即使该方法被覆盖
var o10={};
console.log(o10.hasOwnProperty('toString'));
o10.hasOwnProperty=function(){
return true;
};
console.log(o10.hasOwnProperty('toString'));
//this指向o10,这样方法被覆盖,依然能够调用对象的原生方法
console.log(Object.prototype.hasOwnProperty.call(o10,'toString'));
运行结果:
apply():作用与call()类似,第一个参数也是this指向的对象;不同的是函数调用的参数以数组形式传入
//apply与call作用类似,只是apply传入的参数是以数组形式传入
//同理,第一个参数是this指向的对象,空或null或undefined,默认是全局对象window
function test6(a,b){
console.log(a+b);
}
test6.call(null,1,10);//test6(1,10)
test6.apply(null,[10,100]);//test6(10,100)
var arr=[1,2,3,4,5];
console.log(Math.max.apply(null,arr));//this指向window,arr调用Math.max方法
console.log(Array.prototype.slice.apply({0:1,1:100,length:2}));//类似数组的对象调用方法变为数组
运行结果:
bind():将this绑定到某个对象,返回一个新函数(相较于call,apply的函数立即执行)
//bind将this绑定到某个对象,并返回一个函数
var o10={
fruit:'apple',
f:function(){
console.log(this.fruit);
}
};
o10.f();//正常取值
console.log('---');
var a=o10;
a.f();//这样也能正确取值
var b=o10.f;
b();//这样取值就不行了;undefined
/**
* 此时this指向全局对象window,上面相当于
* var b=function (){
* console.log(this.fruit);//this指向window
* }
*/ //绑定this指向o10
var c=o10.f.bind(o10);
c();//此时能够正确取值
运行结果:
bind还能绑定函数的参数:
//bind还可以绑定函数的参数
var o10={
name:'apple',
age:100
};
function test7(x,y){
console.log(x,this.name,y,this.age) ;
}
var t5= test7.bind(o10,'姓名信息: ');//绑定第一个参数,返回t5这个新函数
t5(' 年龄信息: ');
运行结果: