本文讲述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 一样