JS this关键字

前言

this这个话题，学习、工作、面试，绕不开的难点。

先来看个题目：

var name = "小红";
function a() {var name = "小白";console.log(this.name);
}
function d(i) {return i();
}
var b = {name: "小黄",detail: function() {console.log(this.name);},show: function() {return function() {console.log(this.name);}}
}
var c = b.detail;
b.a = a;
var e = b.show();
a();
c();
b.a();
d(b.detail);
e();

先自己做一下，再把这段代码放进控制台输出一下结果查看答案。

如果有不对的，下面我就来讲个故事，带你梳理一下this关键字绑定的考点。

默认绑定

小明是个吹牛大王，每当人家问他有没有女朋友时，他看到哪个女孩就说这就是他的女朋友。

没有明确到具体说哪一个是他的，他的女朋友在这儿就是全局范围的，似乎全世界的女孩子都属于他一样。

例如以下代码：

function girl() {console.log(this);
}
girl();

定义一个girl 函数，直接输出this ，在全局环境下调用这个函数。查看控制台能看到结果输出的是Window 。

隐式绑定

过来几年又有人问小明的女朋友，这时候小明真的有女朋友了，给人介绍了具体的姓名，身高，体重等信息。

这就相当于一个对象里面的属性值都是明确的，例如以下代码：

var girl = {name: "小红",height: 170,weight: 55,detail: function() {console.log(`姓名：${this.name}`);console.log(`身高：${this.height}`);console.log(`体重：${this.weight}`);}
}
girl.detail();

创建一个girl对象，里面分别有姓名，身高，体重和一个函数，也就是girl对象的方法，这个方法输出小红的信息。每当调用这个方法时，就会出现隐式绑定。这里调用是girl对象里的方法，输出的里面的this就会绑定girl对象。

硬绑定

时间过了两年，小明变得很花心了，同时拥有三个女朋友，除了原本的小红，还有小白和小黄。但是小明并不想介绍小红给别人认识，只想介绍小白和小黄。

例如以下代码：

var girlName = {name: "小红",sayName: function() {console.log(`My girlfriend is ${this.name}`);}
}
var mistress_one = {name: "小白"
}
var mistress_two = {name: "小黄"
}
girlName.sayName.call(mistress_one);
girlName.sayName.call(mistress_two);

创建一个girlName对象，里面有个输出名字的方法。再创建两个对象，分别记录各自的姓名，最后用call分别调用对象的方法。

讲到call，就不得不提到apply，最后输出换成apply，输出的结果是一样的。

girlName.sayName.apply(mistress_one);
girlName.sayName.apply(mistress_two);

apply 和 call

JS中，每一个Function对象都有一个apply()方法和一个call()方法。

apply

调用一个对象的一个方法，用另一个对象替换当前对象。

语法：

function.apply(thisObj[, argArray]);

call

调用一个对象的一个方法，用另一个对象替换当前对象。

语法：

function.call(thisObj[, arg1[, arg2[, [,...argN]]]]);

从上就可以看出它们的异同之处，相同的就是它们的定义，也就是作用是一样的，不同就是它们的使用语法不一样，具体就是传入的参数列表形式不同。

最常用的例子就是函数继承：

function Animal(name) {this.name = name;this.show = function() {console.log(this.name);}
}
function Cat(name) {Animal.apply(this, [name]);// animal.call(this, name);
}
var myCat = new Cat("一天");
myCat.show();

还有个apply的妙用，实现两数组的合并。

var a = [1,2,3];
var b = [4,5,6];
Array.prototype.push.apply(a, b);

输出结果是一个数组的长度，但打印a查看就发现a被修改成合并之后的值了。a调用了push方法，参数是通过apply将数组转换为参数列表的集合。

可以试试这里采用call会是什么样结果。

构造函数绑定

又过去一段时间，小明幡然悔悟，将自己脚踏三只船的行为告诉了小红恳求原谅，没成想小红竟然原谅了他，两人步入婚姻修成正果。

例如以下代码：

function Lover(name) {this.name = name;this.sayName = function() {console.log(`my wife is ${this.name}`)}
}
var name = "小白";
var hostess = new Lover("小红");
hostess.sayName();

创建一个构造函数，用小红这个变量名进行对象的实例化，这时候this就会和实例化后的新对象小红进行绑定，即使出现了同名变量name小白，也不会有影响，查看输出结果仍是小红。

总结

this是因为函数出现而出现，函数在调用的时候就会自动获取this，不管函数声明是在哪个位置，this都能动态指向实际调用的对象。

除了以上四种绑定规则，更重要的就是理解this引用是函数执行的环境对象，也就是说实际上是哪个对象执行的this，该对象当前执行环境是什么。