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比较特殊（typeof 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 () {
		console.log(this);
		return () => {
			console.log(this);
		}
	}
};
var fun = obj1.fun();//{data: "data", fun: ƒ}
fun();//{data: "data", fun: ƒ}
var a = obj1.fun;
var b = a();//window
b();//window

var obj2 = {
	data: "data",
	fun: () => {
		return () => {
			console.log(this);
		}
	}
};
var fun = obj2.fun();
fun();//window

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

三、改变this指向

3.1 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"}

3.2 call()、apply()、bind()传参区别

function myFun(fr, to) {
	console.log(this.name + ' 年龄 ' + this.age + ' 来自 ' + fr + ' 去往 ' + to);
}
var db = {
	name: 'testName',
	age: 25,
};
myFun.call(db,'成都','上海');　　　　  // testName 年龄 25 来自 成都 去往 上海
myFun.apply(db,['成都','上海']);      // testName 年龄 25 来自 成都 去往 上海 
myFun.bind(db,'成都','上海')();       // testName 年龄 25 来自 成都 去往 上海

• call 、bind 、 apply 这三个函数的第一个参数都是 this 的指向对象
• call 的参数是直接放进去的，第二第三第 n 个参数全都用逗号分隔
• apply 的所有参数都必须放在一个数组里面传进去
• bind 除了返回是函数以外，它 的参数和 call 一样