浅析js之this --- 一次性搞懂this指向
ES5函数调用三种形式:
func(p1, p2) obj.child.method(p1, p2) func.call(context, p1, p2) // 先不讲 apply
前两种都是语法糖,可以等价地变为 call 形式:转换代码
func(p1, p2) 等价于
func.call(undefined, p1, p2)
obj.child.method(p1, p2) 等价于
obj.child.method.call(obj.child, p1, p2)
func.call(context, p1, p2)
this,就是上面代码中的 context。就这么简单。
this 是你 call 一个函数时传的 context,由于你从来不用 call 形式的函数调用,所以你一直不知道。
浏览器里有一条规则:
如果你传的 context 就 null 或者 undefined,那么 window 对象就是默认的 context(严格模式下默认 context 是 undefined)
因此上面的打印结果是 window。
[ ] 语法
function fn (){ console.log(this) }
var arr = [fn, fn2]
arr[0]() // 这里面的 this 又是什么呢?
我们可以把 arr[0]( ) 想象为arr.0( ),虽然后者的语法错了,但是形式与转换代码里的 obj.child.method(p1, p2) 对应上了,于是就可以愉快的转换了:
arr[0]()
假想为 arr.0()
然后转换为 arr.0.call(arr)
那么里面的 this 就是 arr 了 :)
总结
-
this 就是你 call 一个函数时,传入的 context。
-
如果你的函数调用形式不是 call 形式,请按照「转换代码」将其转换为 call 形式。
-
如果一个函数中有this,但是它没有被上一级的对象所调用,那么this指向的就是window,这里需要说明的是在js的严格版中this指向的不是window,非严格模式为undefined。
-
如果一个函数中有this,这个函数有被上一级的对象所调用,那么this指向的就是上一级的对象。
-
如果一个函数中有this,这个函数中包含多个对象,尽管这个函数是被最外层的对象所调用,this指向的也只是它上一级的对象。
例:
var o = { a:10, b:{ // a:12, fn:function(){ console.log(this.a); //undefined } } } o.b.fn();
尽管对象b中没有属性a,这个this指向的也是对象b,因为this只会指向它的上一级对象,不管这个对象中有没有this要的东西。
4.还有一种比较特殊的情况:这里this指向的是window,this永远指向的是最后调用它的对象
var o = { a:10, b:{ a:12, fn:function(){ console.log(this.a); //undefined console.log(this); //window } } } var j = o.b.fn; j(); //this指向window
5. 构造函数版this:
function Fn(){ this.user = "Caraxiong"; } var a = new Fn(); console.log(a.user); //Caraxiong
这里之所以对象a可以点出函数Fn里面的user是因为new关键字可以改变this的指向,将这个this指向对象a.调用这个函数Fn的是对象a,那么this指向的自然是对象a,那么为什么对象Fn中会有user,因为你已经复制了一份Fn函数到对象a中,用了new关键字就等同于复制了一份。
6.当this碰到return时
function fn() { this.user = 'Caraxiong'; return {}; //返回一个对象 } var a = new fn; console.log(a.user); //undefined
function fn() { this.user = 'Caraxiong'; return function(){}; //返回一个对象
} var a = new fn; console.log(a.user); //undefined
function fn() { this.user = 'Caraxiong'; return 1; //非对象 } var a = new fn; console.log(a.user); //Caraxiong function fn() { this.user = 'Caraxiong'; return undefined; //非对象
}
var a = new fn;
console.log(a.user); //Caraxiong
如果返回值是一个对象,那么this指向的就是那个返回的对象,
如果返回值不是一个对象那么this还是指向函数的实例。
注:还有一点就是虽然null也是对象,但是在这里this还是指向那个函数的实例,因为null比较特殊。
function fn() { this.user = 'Caraxiong'; return null; } var a = new fn; console.log(a.user); //Caraxiong
7. ES6中的this指向
- 函数体内的
this
对象,就是定义时所在的对象,而不是使用时所在的对象。 - 不可以当作构造函数,也就是说,不可以使用
new
命令,否则会抛出一个错误。 - 不可以使用
arguments
对象,该对象在函数体内不存在。如果要用,可以用Rest参数代替。 - 不可以使用
yield
命令,因此箭头函数不能用作Generator函数。 -
function Timer() { this.a1 = 0; this.a2 = 0; // 箭头函数 setInterval(() => this.a1++, 1000); // 普通函数 setInterval(function () { this.a2++; }, 1000); } var timer = new Timer(); setTimeout(() => console.log('a1: ', timer.a1), 3100); setTimeout(() => console.log('a2: ', timer.a2), 3100); // a1: 3 // a2: 0
上面代码中,
Timer
函数内部设置了两个定时器,分别使用了箭头函数和普通函数。前者的this
绑定定义时所在的作用域(即Timer
函数),后者的this
指向运行时所在的作用域(即全局对象)。 this
指向的固定化,并不是因为箭头函数内部有绑定this
的机制,实际原因是箭头函数根本没有自己的this
,导致内部的this
就是外层代码块的this
。正是因为它没有this
,所以也就不能用作构造函数。- 另外,由于箭头函数没有自己的
this
,所以当然也就不能用call()
、apply()
、bind()
这些方法去改变this
的指向
注:
- new操作符会改变函数this的指向问题,为什么this会指向a?
- 首先new关键字会创建一个空的对象,然后会自动调用一个函数apply方法,将this指向这个空对象,这样的话函数内部的this就会被这个空的对象替代。