首先对this的下个定义:this的指向在函数执行时才能确定,即:this是在执行上下文创建时确定的,一个在执行过程中不可更改的变量。
this 实际上是在函数被调用时发生的绑定,它指向什么完全取决于函数在哪里被调用。如果使用箭头函数时再也不用担心this
跳来跳去了。 下文会针对箭头函数进行说明
this是指向最近一次调用的对象(不过也有几种特殊情况,后面会做说明。)
this只在函数调用阶段确定,也就是执行上下文创建的阶段进行赋值,保存在变量对象中。这个特性也导致了this的多变性:即当函数在不同的调用方式下都可能会导致this的值不同:
vara =1;
function fun(){
'use strict';
var a =2;
return this.a;
}
fun(); //报错 Cannot read property 'a' of undefined
严格模式下,this指向undefined;
vara =1;
function fun(){
var a =2;
return this.a;
}
fun();//1
即在不同模式下之所以有不同表现,就是因为this在严格模式,非严格模式下的不同。
结论:当函数独立调用的时候,在严格模式下它的this指向undefined,在非严格模式下,当this指向undefined的时候,自动指向全局对象(浏览器中就是window)
在全局环境下,this就是指向自己:
this.a =1;
var b =1;
c =1;
console.log(this===window) //true
全局上下文的这三种都能得到想要的结果,对象中存在这三个变量
当this不在函数中用的时候,this还是指向了window:
var a =100;
var obj = {
a:1,
b:this.a +1
}
function fun(){
var obj = {
a:1,
c:this.a +2 //严格模式下这块报错 Cannot read property 'a' of undefined
}
return obj.c;
}
console.log(fun());//102
console.log(obj.b);//101
结论:当obj在全局声明的时候,obj内部属性中的this指向全局对象,当obj在一个函数中声明的时候,严格模式下this会指向undefined,非严格模式自动转为指向全局对象。
现在知道了严格模式和非严格模式下this的区别,然而我们日常应用最多的还是在函数中用this,上面也说过了this在函数的不同调用方式还有区别,那么函数的调用方式都有哪些呢?四种:
- 在全局环境或是普通函数中直接调用
- 作为对象的方法
- 使用apply和call
- 作为构造函数
- 隐式调用
下面分别就四种情况展开:
1. 直接调用
fun函数虽然在obj.b方法中定义,但它还是一个普通函数,直接调用在非严格模式下指向undefined,又自动指向了全局对象,正如预料,严格模式会报错undefined.a不成立,a未定义。
var a =1;
var obj = {
a:2,
b:function(){
function fun(){
return this.a
}
console.log(fun());
}
}
obj.b(); //1 this 指向windows 非严格模式
2. 作为对象的方法
b所引用的匿名函数作为obj的一个方法调用,这时候this指向调用它的对象。这里也就是obj:
var a =1;
var obj = {
a:2,
b:function(){
return this.a;
}
}
console.log(obj.b()) //2
那么如果b方法不作为对象方法调用:
var a =1;
var obj = {
a:2,
b:function(){
return this.a;
}
}
var t = obj.b;
console.log(t()); //1
//是因为把obj.b赋值给了全局变量t (并没有执行,所以this还不能确定)
//而t的执行者是window 所以this又指向了window
//这也印证了本文开头的说法:this只有在 执行时 才确定,而this指向 最近一次 调用的对象
如上,t 函数执行结果竟然是全局变量1,为啥呢?这就涉及Javascript的内存空间了,就是说,obj对象的b属性存储的是对该匿名函数的一个引用,可以理解为一个指针。当赋值给t的时候,并没有单独开辟内存空间存储新的函数,而是让t存储了一个指针,该指针指向这个函数。相当于执行了这么一段伪代码:
var a =1;
function fun(){
//此函数存储在堆中
return this.a;
}
var obj = {
a:2,
b: fun //b指向fun函数
}
var t = fun; //变量t指向fun函数
console.log(t()); //1
此时的t就是一个指向fun函数的指针,调用t,相当于直接调用fun,套用以上规则,打印出来1自然很好理解了。
3. 使用apply,call
这是个万能公式,实际上上面直接调用的代码,我们可以看成这样的:
function fun(){
return this.a;
}
fun(); //1
//严格模式
fun.call(undefined)
//非严格模式
fun.call(window)
这时候我们就可以解释下,为啥说在非严格模式下,当函数this指向undefined的时候,会自动指向全局对象,如上,在非严格模式下,当调用fun.call(undefined)的时候打印出来的依旧是1,就是最好的证据。
为啥说是万能公式呢?再看函数作为对象的方法调用:
var a =1;
var obj = {
a:2,
b:function(){
return this.a;
}
}
obj.b()
obj.b.call(obj)
如上,是不是很强大,可以理解为其它两种都是这个方法的语法糖罢了,那么apply和call是不是真的万能的呢?并不是,ES6的箭头函数就是特例,因为箭头函数的this不是在调用时候确定的,这也就是为啥说箭头函数好用的原因之一,因为它的this固定不会变来变去的了。关于箭头函数的this我们稍后再说。
4. 作为构造函数
何为构造函数?所谓构造函数就是用来new对象的函数,像Function、Object、Array、Date等都是全局定义的构造函数。其实每一个函数都可以new对象,那些批量生产我们需要的对象的函数就叫它构造函数罢了。注意,构造函数首字母记得大写。
function Fun() {
this.name = 'Lili';
this.age = 21;
this.sex = 'woman';
this.run = function () {
return this.name + '正在跑步';
}
}
Fun.prototype = {
contructor: Fun,
say: function () {
return this.name + '正在说话';
}
}
var f = newFun();
f.run(); //Lili正在跑步
f.say(); //Lili正在说话
如上,如果函数作为构造函数用,那么其中的this就代表它即将new出来的对象。为啥呢?new做了啥呢?
伪代码如下:
function Fun(){
//new做的事情
varobj = {};
obj.__proto__ = Fun.prototype;
//Base为构造函数
obj.name ='Lili';
//... 一系列赋值以及更多的事
return obj
}
也就是说new做了下面这些事:
创建一个临时对象
给临时对象绑定原型
给临时对象对应属性赋值
将临时对象return
也就是说new其实就是个语法糖,this之所以指向临时对象还是没逃脱上面说的几种情况。
当然如果直接调用Fun(),如下:
function Fun() {
this.name = 'Damonre';
this.age = 21;
this.sex = 'man';
this.run = function () {
return this.name + '正在跑步';
}
}
Fun();
console.log(window)
其实就是直接调用一个函数,this在非严格模式下指向window,你可以在window对象找到所有的变量。
另外还有一点,prototype对象的方法的this指向实例对象,因为实例对象的proto已经指向了原型函数的prototype。这就涉及原型链的知识了,即方法会沿着对象的原型链进行查找。
箭头函数 (箭头函数中的this在函数定义时绑定,而不是在函数执行时绑定!)
var obj = {
name: 'jack',
fn: function(){
console.log(this)
}
}
obj.fn(); //obj 这里是ES5的写法 this指向obj
var obj = {
name: 'jack',
fn: ()=>{
console.log(this)
}
}
obj.fn(); //window
//为什么箭头函数中的this指向了window了呢?
//原因就是this是继承自父执行上下文中的this
// 比如这里的箭头函数中的this,箭头函数本身所在的对象为obj,而obj的父执行上下文就是window
刚刚提到了箭头函数是一个不可以用call和apply改变this的典型。
我们看下面这个例子:
var a = 1;
var obj = { a: 2 };
var fun = () => console.log(this.a);
fun(); //1
fun.call(obj) //1
以上,两次调用都是1。
那么箭头函数的this是怎么确定的呢?箭头函数会捕获其所在上下文的 this 值,作为自己的 this 值,也就是说箭头函数的this在词法层面就完成了绑定。apply,call方法只是传入参数,却改不了this。
var a = 1;
var obj = { a: 2 };
function fun(){
var a = 3;
let f = () => console.log(this.a);
f();
}
fun(); //1
fun.call(obj); //2
如上,fun直接调用,fun的上下文中的this值为window,注意,这个地方有点绕。fun的上下文就是此箭头函数所在的上下文,因此此时f的this为fun的this也就是window。当fun.call(obj)再次调用的时候,新的上下文创建,fun此时的this为obj,也就是箭头函数的this值。
再来一个例子:
function Fun(){
this.name = 'Damonare';
}
Fun.prototype.say = () => {
console.log(this);
}
var f = newFun();
f.say(); //window
有的同学看到这个例子会很懵,感觉上this应该指向f这个实例对象啊。不是的,此时的箭头函数所在的上下文是proto所在的上下文也就是Object函数的上下文,而Object的this值就是全局对象。
那么再来一个例子:
function Fun() {
this.name = 'Damonare';
this.say = () => {
console.log(this);
}
}
var f = newFun();
f.say();//Fun的实例对象
如上,this.say所在的上下文,此时箭头函数所在的上下文就变成了Fun的上下文环境,而因为上面说过当函数作为构造函数调用的时候(也就是new的作用)上下文环境的this指向实例对象。
5. 隐式调用
function test(){
var name = 'tom';
console.log(this.name); //undefined
console.log(this); //window
}
test();
这里乍一看好像并没有某个对象调用test方法,实际上这是一种隐式调用。真正的调用者是全局对象window, 相当于 window.test(); 所以这里的this指向window ,类似的场景还有setTimeout回调、匿名函数自调
function test(){
setTimeout(function(){
console.log(this) //window
},100)
}
//这次this出现在全局函数setTimeout()中的匿名函数里,并没有某个对象显示的调用这个匿名函数,所以this指向window对象
test();
(function(){
console.log(this) //window
})()
还有一种特殊情况值得关注:当this遇上return
function test(){
this.name = 'jack';
return {};
}
var t = new test();
t.name // undefined
function test(){
this.name = 'jack';
return;
}
var t = new test();
t.name // jack
这是怎么回事呢? 原因是当this遇上return时 如果return的是一个对象那么this指向这个return的对象,否则this仍然指向t函数的实例。有一个例外是:
function test() {
this.name = 'jack';
return null;
}
function test2() {
this.name = 'jack';
}
var t = new test(); //{name: 'jack'}
var t2 = new test2(); //{name: 'jack'}
t.name; //jack
t2.name; //jack
null是一个对象但是this仍然指向函数的实例!!!