你真的理解this吗
阮一峰 ES6 地址连接
java
this关键字是JavaScript中最复杂的机制之一，是一个特别的关键字，被自动定义在全部函数的做用域中，可是相信不少JvaScript开发者并非很是清楚它究竟指向的是什么。据说你很懂this,是真的吗？
node
请先回答第一个问题：如何准确判断this指向的是什么？【面试的高频问题】es6
再看一道题，控制台打印出来的值是什么？【浏览器运行环境】面试
var number = 5;
var obj = {
number: 3,
fn1: (function () {
var number;
this.number *= 2;
number = number * 2;
number = 3;
return function () {
var num = this.number;
this.number *= 2;
console.log(num);
number *= 3;
console.log(number);
}
})()
}
var fn1 = obj.fn1;
fn1.call(null);
obj.fn1();
console.log(window.number);复制代码
若是你思考出来的结果，与在浏览中执行结果相同，而且每一步的依据都很是清楚，那么，你能够选择继续往下阅读，或者关闭本网页，愉快得去玩耍。若是你是连猜带蒙的，或者对本身的答案并不那么肯定，那么请继续往下阅读。浏览器
毕竟花一两个小时的时间，把this完全搞明白，是一件很值得事情，不是吗？bash
本文将细致得讲解this的绑定规则，并在最后剖析前文两道题。闭包
为何要学习this?
首先，咱们为何要学习this？app
- this使用频率很高，若是咱们不懂this，那么在看别人的代码或者是源码的时候，就会很吃力。
- 工做中，滥用this，却没明白this指向的是什么，而致使出现问题，可是本身殊不知道哪里出问题了。【在公司，我至少帮10个以上的开发人员处理过这个问题】
- 合理的使用this，可让咱们写出简洁且复用性高的代码。
- 面试的高频问题，回答很差，抱歉，出门右拐，不送。
无论出于什么目的，咱们都须要把this这个知识点整的明明白白的。函数
OK，Let's go!学习
this是什么？
言归正传，this是什么？首先记住this不是指向自身！this 就是一个指针，指向调用函数的对象。这句话咱们都知道，可是不少时候，咱们未必可以准确判断出this究竟指向的是什么？这就好像咱们听过不少道理 却依然过很差这一辈子。今天我们不探讨如何过好一辈子的问题，可是呢，但愿阅读完下面的内容以后，你可以一眼就看出this指向的是什么。
为了可以一眼看出this指向的是什么，咱们首先须要知道this的绑定规则有哪些？
- 默认绑定
- 隐式绑定
- 硬绑定
- new绑定
上面的名词，你也许听过，也许没听过，可是今天以后，请紧紧记住。咱们将依次来进行解析。
默认绑定
默认绑定，在不能应用其它绑定规则时使用的默认规则，一般是独立函数调用。
function sayHi(){
console.log('Hello,', this.name);
}
var name = 'YvetteLau';
sayHi();复制代码
在调用Hi()时，应用了默认绑定，this指向全局对象（非严格模式下），严格模式下，this指向undefined，undefined上没有this对象，会抛出错误。
上面的代码，若是在浏览器环境中运行，那么结果就是 Hello,YvetteLau
可是若是在node环境中运行，结果就是 Hello,undefined.这是由于node中name并非挂在全局对象上的。
本文中，如不特殊说明，默认为浏览器环境执行结果。
隐式绑定
函数的调用是在某个对象上触发的，即调用位置上存在上下文对象。典型的形式为 XXX.fun().咱们来看一段代码：
function sayHi(){
console.log('Hello,', this.name);
}
var person = {
name: 'YvetteLau',
sayHi: sayHi
}
var name = 'Wiliam';
person.sayHi();复制代码
打印的结果是 Hello,YvetteLau.
sayHi函数声明在外部，严格来讲并不属于person，可是在调用sayHi时,调用位置会使用person的上下文来引用函数，隐式绑定会把函数调用中的this(即此例sayHi函数中的this)绑定到这个上下文对象（即此例中的person）
须要注意的是：对象属性链中只有最后一层会影响到调用位置。
function sayHi(){
console.log('Hello,', this.name);
}
var person2 = {
name: 'Christina',
sayHi: sayHi
}
var person1 = {
name: 'YvetteLau',
friend: person2
}
person1.friend.sayHi();复制代码
结果是：Hello, Christina.
由于只有最后一层会肯定this指向的是什么，无论有多少层，在判断this的时候，咱们只关注最后一层，即此处的friend。
隐式绑定有一个大陷阱，绑定很容易丢失(或者说容易给咱们形成误导，咱们觉得this指向的是什么，可是实际上并不是如此).
function sayHi(){
console.log('Hello,', this.name);
}
var person = {
name: 'YvetteLau',
sayHi: sayHi
}
var name = 'Wiliam';
var Hi = person.sayHi;
Hi();复制代码
结果是: Hello,Wiliam.
这是为何呢，Hi直接指向了sayHi的引用，在调用的时候，跟person没有半毛钱的关系，针对此类问题，我建议你们只需紧紧继续这个格式:XXX.fn();fn()前若是什么都没有，那么确定不是隐式绑定，可是也不必定就是默认绑定，这里有点小疑问，咱们后来会说到。
除了上面这种丢失以外，隐式绑定的丢失是发生在回调函数中(事件回调也是其中一种)，咱们来看下面一个例子:
function sayHi(){
console.log('Hello,', this.name);
}
var person1 = {
name: 'YvetteLau',
sayHi: function(){
setTimeout(function(){
console.log('Hello,',this.name);
})
}
}
var person2 = {
name: 'Christina',
sayHi: sayHi
}
var name='Wiliam';
person1.sayHi();
setTimeout(person2.sayHi,100);
setTimeout(function(){
person2.sayHi();
},200);
复制代码
结果为:
Hello, Wiliam
Hello, Wiliam
Hello, Christina复制代码
第一条输出很容易理解，setTimeout的回调函数中，this使用的是默认绑定，非严格模式下，执行的是全局对象
第二条输出是否是有点迷惑了？说好XXX.fun()的时候，fun中的this指向的是XXX呢，为何此次却不是这样了！Why?
其实这里咱们能够这样理解: setTimeout(fn,delay){ fn(); },至关因而将person2.sayHi赋值给了一个变量，最后执行了变量，这个时候，sayHi中的this显然和person2就没有关系了。
第三条虽然也是在setTimeout的回调中，可是咱们能够看出，这是执行的是person2.sayHi()使用的是隐式绑定，所以这是this指向的是person2，跟当前的做用域没有任何关系。
读到这里，也许你已经有点疲倦了，可是答应我，别放弃，好吗？再坚持一下，就能够掌握这个知识点了。
显式绑定
显式绑定比较好理解，就是经过call,apply,bind的方式，显式的指定this所指向的对象。(注意:《你不知道的Javascript》中将bind单独做为了硬绑定讲解了)
call,apply和bind的第一个参数，就是对应函数的this所指向的对象。call和apply的做用同样，只是传参方式不一样。call和apply都会执行对应的函数，而bind方法不会。
function sayHi(){
console.log('Hello,', this.name);
}
var person = {
name: 'YvetteLau',
sayHi: sayHi
}
var name = 'Wiliam';
var Hi = person.sayHi;
Hi.call(person); //Hi.apply(person)复制代码
输出的结果为: Hello, YvetteLau. 由于使用硬绑定明确将this绑定在了person上。
那么，使用了硬绑定，是否是意味着不会出现隐式绑定所遇到的绑定丢失呢？显然不是这样的，不信，继续往下看。
function sayHi(){
console.log('Hello,', this.name);
}
var person = {
name: 'YvetteLau',
sayHi: sayHi
}
var name = 'Wiliam';
var Hi = function(fn) {
fn();
}
Hi.call(person, person.sayHi); 复制代码
输出的结果是 Hello, Wiliam. 缘由很简单，Hi.call(person, person.sayHi)的确是将this绑定到Hi中的this了。可是在执行fn的时候，至关于直接调用了sayHi方法(记住: person.sayHi已经被赋值给fn了，隐式绑定也丢了)，没有指定this的值，对应的是默认绑定。
如今，咱们但愿绑定不会丢失，要怎么作？很简单，调用fn的时候，也给它硬绑定。
function sayHi(){
console.log('Hello,', this.name);
}
var person = {
name: 'YvetteLau',
sayHi: sayHi
}
var name = 'Wiliam';
var Hi = function(fn) {
fn.call(this);
}
Hi.call(person, person.sayHi);复制代码
此时，输出的结果为: Hello, YvetteLau，由于person被绑定到Hi函数中的this上，fn又将这个对象绑定给了sayHi的函数。这时，sayHi中的this指向的就是person对象。
至此，革命已经快胜利了，咱们来看最后一种绑定规则: new 绑定。
new 绑定
javaScript和Ｃ＋＋不同，并无类，在javaScript中，构造函数只是使用new操做符时被调用的函数，这些函数和普通的函数并无什么不一样，它不属于某个类，也不可能实例化出一个类。任何一个函数均可以使用new来调用，所以其实并不存在构造函数，而只有对于函数的“构造调用”。
使用new来调用函数，会自动执行下面的操做：
- 建立一个新对象
- 将构造函数的做用域赋值给新对象，即this指向这个新对象
- 执行构造函数中的代码
- 返回新对象
所以，咱们使用new来调用函数的时候，就会新对象绑定到这个函数的this上。
function sayHi(name){
this.name = name;
}
var Hi = new sayHi('Yevtte');
console.log('Hello,', Hi.name);复制代码
输出结果为 Hello, Yevtte, 缘由是由于在var Hi = new sayHi('Yevtte');这一步，会将sayHi中的this绑定到Hi对象上。
绑定优先级
咱们知道了this有四种绑定规则，可是若是同时应用了多种规则，怎么办？
显然，咱们须要了解哪种绑定方式的优先级更高，这四种绑定的优先级为:
new绑定 > 显式绑定 > 隐式绑定 > 默认绑定
这个规则时如何获得的，你们若是有兴趣，能够本身写个demo去测试，或者记住上面的结论便可。
绑定例外
凡事都有例外，this的规则也是这样。
若是咱们将null或者是undefined做为this的绑定对象传入call、apply或者是bind,这些值在调用时会被忽略，实际应用的是默认绑定规则。
var foo = {
name: 'Selina'
}
var name = 'Chirs';
function bar() {
console.log(this.name);
}
bar.call(null); //Chirs 复制代码
输出的结果是 Chirs，由于这时实际应用的是默认绑定规则。
箭头函数
箭头函数是ES6中新增的，它和普通函数有一些区别，箭头函数没有本身的this，它的this继承于外层代码库中的this。箭头函数在使用时，须要注意如下几点:
（1）函数体内的this对象，继承的是外层代码块的this。
（2）不能够看成构造函数，也就是说，不可使用new命令，不然会抛出一个错误。
（3）不可使用arguments对象，该对象在函数体内不存在。若是要用，能够用 rest 参数代替。
（4）不可使用yield命令，所以箭头函数不能用做 Generator 函数。
（5）箭头函数没有本身的this，因此不能用call()、apply()、bind()这些方法去改变this的指向.
OK，咱们来看看箭头函数的this是什么？
var obj = {
hi: function(){
console.log(this);
return ()=>{
console.log(this);
}
},
sayHi: function(){
return function() {
console.log(this);
return ()=>{
console.log(this);
}
}
},
say: ()=>{
console.log(this);
}
}
let hi = obj.hi(); //输出obj对象
hi(); //输出obj对象
let sayHi = obj.sayHi();
let fun1 = sayHi(); //输出window
fun1(); //输出window
obj.say(); //输出window复制代码
那么这是为何呢？若是你们说箭头函数中的this是定义时所在的对象，这样的结果显示不是你们预期的，按照这个定义，say中的this应该是obj才对。
咱们来分析一下上面的执行结果：
- obj.hi(); 对应了this的隐式绑定规则，this绑定在obj上，因此输出obj，很好理解。
- hi(); 这一步执行的就是箭头函数，箭头函数继承上一个代码库的this，刚刚咱们得出上一层的this是obj，显然这里的this就是obj.
- 执行sayHi();这一步也很好理解，咱们前面说过这种隐式绑定丢失的状况，这个时候this执行的是默认绑定，this指向的是全局对象window.
- fun1(); 这一步执行的是箭头函数，若是按照以前的理解，this指向的是箭头函数定义时所在的对象，那么这儿显然是说不通。OK，按照箭头函数的this是继承于外层代码库的this就很好理解了。外层代码库咱们刚刚分析了，this指向的是window，所以这儿的输出结果是window.
- obj.say(); 执行的是箭头函数，当前的代码块obj中是不存在this的，只能往上找，就找到了全局的this，指向的是window.
你说箭头函数的this是静态的？
依旧是前面的代码。咱们来看看箭头函数中的this真的是静态的吗？
我要说：非也
var obj = {
hi: function(){
console.log(this);
return ()=>{
console.log(this);
}
},
sayHi: function(){
return function() {
console.log(this);
return ()=>{
console.log(this);
}
}
},
say: ()=>{
console.log(this);
}
}
let sayHi = obj.sayHi();
let fun1 = sayHi(); //输出window
fun1(); //输出window
let fun2 = sayHi.bind(obj)();//输出obj
fun2(); //输出obj复制代码
能够看出，fun1和fun2对应的是一样的箭头函数，可是this的输出结果是不同的。
因此，请你们紧紧记住一点: 箭头函数没有本身的this，箭头函数中的this继承于外层代码库中的this.
总结
关于this的规则，至此，就告一段落了，可是想要一眼就能看出this所绑定的对象，还须要不断的训练。
咱们来回顾一下，最初的问题。
1. 如何准确判断this指向的是什么？
- 函数是否在new中调用(new绑定)，若是是，那么this绑定的是新建立的对象。
- 函数是否经过call,apply调用，或者使用了bind(即硬绑定)，若是是，那么this绑定的就是指定的对象。
- 函数是否在某个上下文对象中调用(隐式绑定)，若是是的话，this绑定的是那个上下文对象。通常是obj.foo()
- 若是以上都不是，那么使用默认绑定。若是在严格模式下，则绑定到undefined，不然绑定到全局对象。
- 若是把Null或者undefined做为this的绑定对象传入call、apply或者bind，这些值在调用时会被忽略，实际应用的是默认绑定规则。
- 若是是箭头函数，箭头函数的this继承的是外层代码块的this。
2. 执行过程解析
var number = 5;
var obj = {
number: 3,
fn: (function () {
var number;
this.number *= 2;
number = number * 2;
number = 3;
return function () {
var num = this.number;
this.number *= 2;
console.log(num);
number *= 3;
console.log(number);
}
})()
}
var myFun = obj.fn;
myFun.call(null);
obj.fn();
console.log(window.number);复制代码
咱们来分析一下，这段代码的执行过程。
- 在定义obj的时候，fn对应的闭包就执行了，返回其中的函数，执行闭包中代码时，显然应用不了new绑定(没有出现new 关键字)，硬绑定也没有(没有出现call,apply,bind关键字),隐式绑定有没有？很显然没有，若是没有XX.fn()，那么能够确定没有应用隐式绑定，因此这里应用的就是默认绑定了，非严格模式下this绑定到了window上(浏览器执行环境)。【这里很容易被迷惑的就是觉得this指向的是obj，必定要注意，除非是箭头函数，不然this跟词法做用域是两回事，必定要牢记在心】
window.number * = 2; //window.number的值是10(var number定义的全局变量是挂在window上的)
number = number * 2; //number的值是NaN;注意咱们这边定义了一个number，可是没有赋值，number的值是undefined;Number(undefined)->NaN
number = 3; //number的值为3复制代码
- myFun.call(null);咱们前面说了，call的第一个参数传null，调用的是默认绑定;
fn: function(){
var num = this.number;
this.number *= 2;
console.log(num);
number *= 3;
console.log(number);
}复制代码
执行时:
var num = this.number; //num=10; 此时this指向的是window
this.number * = 2; //window.number = 20
console.log(num); //输出结果为10
number *= 3; //number=9; 这个number对应的闭包中的number;闭包中的number的是3
console.log(number); //输出的结果是9复制代码
- obj.fn();应用了隐式绑定，fn中的this对应的是obj.
var num = this.number;//num = 3;此时this指向的是obj
this.number *= 2; //obj.number = 6;
console.log(num); //输出结果为3;
number *= 3; //number=27;这个number对应的闭包中的number;闭包中的number的此时是9
console.log(number); //输出的结果是27复制代码
- 最后一步console.log(window.number);输出的结果是20
所以组中结果为:
10
9
3
27
20复制代码
严格模式下结果，你们根据今天所学，本身分析，巩固一下知识点。
- 1. 嗨，你真的懂this吗？
- 2. 你真的了解this指向吗？
- 3. 你真的理解==和===吗
- 4. 你真的理解setState吗？
- 5. 你真的理解Java吗
- 6. Base64 你真的理解吗
- 7. JavaScript的this，你真的懂了吗
- 8. 你真的理解Java 注解吗？
- 9. 你真的理解ES6的Class吗
- 10. 你真的理解 flex 布局吗？
- 更多相关文章...
- • MyBatis的工作原理 - MyBatis教程
- • ARP协议的工作机制详解 - TCP/IP教程
- • Docker 清理命令
- • 再有人问你分布式事务，把这篇扔给他
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 嗨，你真的懂this吗？
- 2. 你真的了解this指向吗？
- 3. 你真的理解==和===吗
- 4. 你真的理解setState吗？
- 5. 你真的理解Java吗
- 6. Base64 你真的理解吗
- 7. JavaScript的this，你真的懂了吗
- 8. 你真的理解Java 注解吗？
- 9. 你真的理解ES6的Class吗
- 10. 你真的理解 flex 布局吗？