js之旅（七）js中this

本文讲述js中this的指向；介绍ES5和ES6中this的不同

一、ES5中this的指向

在js es5中，使用的是function函数，谁在调用function，this就指向谁，有以下几个特点：

this最终指向的是调用它的对象函数被多层对象所包含，如果函数被最外层对象调用，this指向的也只是它上一级的对象构造函数中this指向的是实例对象如果构造函数中有return，如果return的值是对象，this不会指向实例化对象，如果不是对象，则this保持原来的规则，这里null比较特殊

1.1 this最终指向的是调用它的对象

这个特点的就是es5中this的指向，其它特点都是对它的补充，如下示例：

function test(){ console.log(this); } test();//这里实际上是window在调用，所以指向的是window对象 var obj = { data: "data", fun: function (){ console.log(this); } }; obj.fun();//{data: "data", fun: ƒ} 这里指向的是obj对象

1.2 函数被多层对象所包含，如果函数被最外层对象调用，this指向的也只是它上一级的对象

var obj = { tag: "obj", obj1: { tag: "obj1", obj2: { tag: "obj2", fun: function (){ console.log(this); } } } }; obj.obj1.obj2.fun();//{tag: "obj2", fun: ƒ}

从上面的示例中可以看出，不管object有几层，最终this指向的调用它的那级对象。

1.3 构造函数中this指向的是实例对象

function student(name, age){ this.name = name; this.age = age; console.log(this); } var st = new student("js", 10);//student {name: "js", age: 10} console.log(st);//student {name: "js", age: 10}

通过示例可以看到，构造函数中，this指向的就是实例对象

1.4 如果构造函数中有return，如果return的值是对象，this不会指向实例化对象，如果不是对象，则this保持原来的规则，这里null比较特殊

第一种，return一个对象：

function student(name, age){ this.name = name; this.age = age; console.log(this); return {j:"i"}; } var st = new student("js", 10);//student {name: "js", age: 10} console.log(st);//{j: "i"}

第二种，return一个非对象

function student(name, age){ this.name = name; this.age = age; console.log(this); return "string"; } var st = new student("js", 10);//student {name: "js", age: 10} console.log(st);//student {name: "js", age: 10}

第三种，return null

function student(name, age){ this.name = name; this.age = age; console.log(this); return null; } var st = new student("js", 10);//student {name: "js", age: 10} console.log(st);//student {name: "js", age: 10}

二、箭头函数中的this

箭头函数的this指向的上层作用域的this，也可以理解为指向上下文对象，在定义的时候已经确定了，不像es5中需要在运行时才可以判断出来。

test = () =>{ console.log(this); } test();//window var obj = { data: "data", fun: () => { console.log(this); } }; obj.fun();//window var obj1 = { data: "data", fun: function () { return () => { console.log(this); } } }; var fun = obj1 .fun(); fun();//{data: "data", fun: ƒ} var a = obj1.fun; var b = a(); b();//window var obj2 = { data: "data", fun: () => { return () => { console.log(this); } } }; var fun = obj2 .fun(); fun();//window

这里重点关注一个上一层作用域

三、改变this指向

js中用call()、apply()、bind()三个方法可以改变this的指向。

var obj = { tag: "obj" }; var obj1 = { tag: "obj1", fun: function(){ console.log(this); } }; obj1.fun();//{tag: "obj1", fun: ƒ} obj1.fun.call(obj);//{tag: "obj"} obj1.fun.apply(obj);//{tag: "obj"} obj1.fun.bind(obj)();//{tag: "obj"}