嗨，你真的懂this吗？

\u003cp\u003ethis关键字是JavaScript中最复杂的机制之一，是一个特别的关键字，被自动定义在所有函数的作用域中，但是相信很多JavaScript开发者并不是非常清楚它究竟指向的是什么。听说你很懂this,是真的吗？\u003c/p\u003e\n\u003cp\u003e请先回答第一个问题：如何准确判断this指向的是什么？【面试的高频问题】\u003c/p\u003e\n\u003cp\u003e\u003cimg src=\"https://static.geekbang.org/infoq/5c9f21b65f210.png\" alt=\"\" /\u003e\u003c/p\u003e\n\u003cp\u003e再看一道题，控制台打印出来的值是什么？【浏览器运行环境】\u003c/p\u003e\n\u003cpre\u003e\u003ccode class=\"language-javascript\"\u003evar number = 5;\nvar obj = {\n number: 3,\n fn1: (function () {\n var number;\n this.number *= 2;\n number = number * 2;\n number = 3;\n return function () {\n var num = this.number;\n this.number *= 2;\n console.log(num);\n number *= 3;\n console.log(number);\n }\n })()\n}\nvar fn1 = obj.fn1;\nfn1.call(null);\nobj.fn1();\nconsole.log(window.number);\n\u003c/code\u003e\u003c/pre\u003e\n\u003cp\u003e如果你思考出来的结果，与在浏览中执行结果相同，并且每一步的依据都非常清楚，那么，你可以选择继续往下阅读，或者关闭本网页，愉快得去玩耍。如果你有一部分是靠蒙的，或者对自己的答案并不那么确定，那么请继续往下阅读。\u003c/p\u003e\n\u003cp\u003e毕竟花一两个小时的时间，把this彻底搞明白，是一件很值得事情，不是吗？\u003c/p\u003e\n\u003cp\u003e本文将细致得讲解this的绑定规则，并在最后剖析前文两道题。\u003c/p\u003e\n\u003ch2\u003e为什么要学习this?\u003c/h2\u003e\n\u003cp\u003e首先，我们为什么要学习this？\u003c/p\u003e\n\u003cp\u003e1.this使用频率很高，如果我们不懂this，那么在看别人的代码或者是源码的时候，就会很吃力。\u003c/p\u003e\n\u003cp\u003e2.工作中，滥用this，却没明白this指向的是什么，而导致出现问题，但是自己却不知道哪里出问题了。【在公司，我至少帮10个以上的开发人员处理过这个问题】\u003c/p\u003e\n\u003cp\u003e3.合理的使用this，可以让我们写出简洁且复用性高的代码。\u003c/p\u003e\n\u003cp\u003e4.面试的高频问题，回答不好，抱歉，出门右拐，不送。\u003c/p\u003e\n\u003cp\u003e不管出于什么目的，我们都需要把this这个知识点整的明明白白的。\u003c/p\u003e\n\u003cp\u003eOK，Let’s go!\u003c/p\u003e\n\u003ch2\u003ethis是什么？\u003c/h2\u003e\n\u003cp\u003e言归正传，this是什么？首先记住this不是指向自身！this 就是一个指针，指向调用函数的对象。这句话我们都知道，但是很多时候，我们未必能够准确判断出this究竟指向的是什么？这就好像我们听过很多道理 却依然过不好这一生。今天咱们不探讨如何过好一生的问题，但是呢，希望阅读完下面的内容之后，你能够一眼就看出this指向的是什么。\u003c/p\u003e\n\u003cp\u003e为了能够一眼看出this指向的是什么，我们首先需要知道this的绑定规则有哪些？\u003c/p\u003e\n\u003cp\u003e1.默认绑定\u003c/p\u003e\n\u003cp\u003e2.隐式绑定\u003c/p\u003e\n\u003cp\u003e3.硬绑定\u003c/p\u003e\n\u003cp\u003e4.new绑定\u003c/p\u003e\n\u003cp\u003e上面的名词，你也许听过，也许没听过，但是今天之后，请牢牢记住。我们将依次来进行解析。\u003c/p\u003e\n\u003ch3\u003e默认绑定\u003c/h3\u003e\n\u003cp\u003e默认绑定，在不能应用其它绑定规则时使用的默认规则，通常是独立函数调用。\u003c/p\u003e\n\u003cpre\u003e\u003ccode class=\"language-javascript\"\u003efunction sayHi(){\n console.log('Hello,', this.name);\n}\nvar name = 'YvetteLau';\nsayHi();\n\u003c/code\u003e\u003c/pre\u003e\n\u003cp\u003e在调用Hi()时，应用了默认绑定，this指向全局对象（非严格模式下），严格模式下，this指向undefined，undefined上没有this对象，会抛出错误。\u003c/p\u003e\n\u003cp\u003e上面的代码，如果在浏览器环境中运行，那么结果就是 Hello,YvetteLau\u003c/p\u003e\n\u003cp\u003e但是如果在node环境中运行，结果就是 Hello,undefined.这是因为node中name并不是挂在全局对象上的。\u003c/p\u003e\n\u003cp\u003e本文中，如不特殊说明，默认为浏览器环境执行结果。\u003c/p\u003e\n\u003ch3\u003e隐式绑定\u003c/h3\u003e\n\u003cp\u003e函数的调用是在某个对象上触发的，即调用位置上存在上下文对象。典型的形式为 XXX.fun().我们来看一段代码：\u003c/p\u003e\n\u003cpre\u003e\u003ccode class=\"language-javscript\"\u003efunction sayHi(){\n console.log('Hello,', this.name);\n}\nvar person = {\n name: 'YvetteLau',\n sayHi: sayHi\n}\nvar name = 'Wiliam';\nperson.sayHi();\n\u003c/code\u003e\u003c/pre\u003e\n\u003cp\u003e打印的结果是 Hello,YvetteLau.\u003c/p\u003e\n\u003cp\u003esayHi函数声明在外部，严格来说并不属于person，但是在调用sayHi时,调用位置会使用person的上下文来引用函数，隐式绑定会把函数调用中的this(即此例sayHi函数中的this)绑定到这个上下文对象（即此例中的person）\u003c/p\u003e\n\u003cp\u003e需要注意的是：对象属性链中只有最后一层会影响到调用位置。\u003c/p\u003e\n\u003cpre\u003e\u003ccode class=\"language-javacript\"\u003efunction sayHi(){\n console.log('Hello,', this.name);\n}\nvar person2 = {\n name: 'Christina',\n sayHi: sayHi\n}\nvar person1 = {\n name: 'YvetteLau',\n friend: person2\n}\nperson1.friend.sayHi();\n\u003c/code\u003e\u003c/pre\u003e\n\u003cp\u003e结果是：Hello, Christina。\u003c/p\u003e\n\u003cp\u003e因为只有最后一层会确定this指向的是什么，不管有多少层，在判断this的时候，我们只关注最后一层，即此处的friend。\u003c/p\u003e\n\u003cp\u003e隐式绑定有一个大陷阱，绑定很容易丢失(或者说容易给我们造成误导，我们以为this指向的是什么，但是实际上并非如此).\u003c/p\u003e\n\u003cpre\u003e\u003ccode class=\"language-javascript\"\u003efunction sayHi(){\n console.log('Hello,', this.name);\n}\nvar person = {\n name: 'YvetteLau',\n sayHi: sayHi\n}\nvar name = 'Wiliam';\nvar Hi = person.sayHi;\nHi();\n\u003c/code\u003e\u003c/pre\u003e\n\u003cp\u003e结果是: Hello,Wiliam.\u003c/p\u003e\n\u003cp\u003e这是为什么呢，Hi直接指向了sayHi的引用，在调用的时候，跟person没有半毛钱的关系，针对此类问题，我建议大家只需牢牢继续这个格式:XXX.fn();fn()前如果什么都没有，那么肯定不是隐式绑定，但是也不一定就是默认绑定，这里有点小疑问，我们后来会说到。\u003c/p\u003e\n\u003cp\u003e除了上面这种丢失之外，隐式绑定的丢失是发生在回调函数中(事件回调也是其中一种)，我们来看下面一个例子:\u003c/p\u003e\n\u003cpre\u003e\u003ccode class=\"language-javascript\"\u003efunction sayHi(){\n console.log('Hello,', this.name);\n}\nvar person1 = {\n name: 'YvetteLau',\n sayHi: function(){\n setTimeout(function(){\n console.log('Hello,',this.name);\n })\n }\n}\nvar person2 = {\n name: 'Christina',\n sayHi: sayHi\n}\nvar name='Wiliam';\nperson1.sayHi();\nsetTimeout(person2.sayHi,100);\nsetTimeout(function(){\n person2.sayHi();\n},200);\n\n\u003c/code\u003e\u003c/pre\u003e\n\u003cp\u003e结果为:\u003c/p\u003e\n\u003cpre\u003e\u003ccode class=\"language-shell\"\u003eHello, Wiliam\nHello, Wiliam\nHello, Christina\n\u003c/code\u003e\u003c/pre\u003e\n\u003cul\u003e\n\u003cli\u003e\n\u003cp\u003e第一条输出很容易理解，setTimeout的回调函数中，this使用的是默认绑定，非严格模式下，执行的是全局对象；\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e第二条输出是不是有点迷惑了？说好XXX.fun()的时候，fun中的this指向的是XXX呢，为什么这次却不是这样了！Why?\u003c/p\u003e\n\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003e其实这里我们可以这样理解: setTimeout(fn,delay){ fn(); },相当于是将person2.sayHi赋值给了一个变量，最后执行了变量，这个时候，sayHi中的this显然和person2就没有关系了。\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e第三条虽然也是在setTimeout的回调中，但是我们可以看出，这是执行的是person2.sayHi()使用的是隐式绑定，因此这是this指向的是person2，跟当前的作用域没有任何关系。\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003e读到这里，也许你已经有点疲倦了，但是答应我，别放弃，好吗？再坚持一下，就可以掌握这个知识点了。\u003c/p\u003e\n\u003cp\u003e\u003cimg src=\"https://static.geekbang.org/infoq/5c9f275a3a888.png\" alt=\"\" /\u003e\u003c/p\u003e\n\u003ch3\u003e显式绑定\u003c/h3\u003e\n\u003cp\u003e显式绑定比较好理解，就是通过call,apply,bind的方式，显式的指定this所指向的对象(注意:《你不知道的Javascript》中将bind单独作为了硬绑定讲解了)。\u003c/p\u003e\n\u003cp\u003ecall,apply和bind的第一个参数，就是对应函数的this所指向的对象。call和apply的作用一样，只是传参方式不同。call和apply都会执行对应的函数，而bind方法不会。\u003c/p\u003e\n\u003cpre\u003e\u003ccode class=\"language-javascript\"\u003efunction sayHi(){\n console.log('Hello,', this.name);\n}\nvar person = {\n name: 'YvetteLau',\n sayHi: sayHi\n}\nvar name = 'Wiliam';\nvar Hi = person.sayHi;\nHi.call(person); //Hi.apply(person)\n\u003c/code\u003e\u003c/pre\u003e\n\u003cp\u003e输出的结果为: Hello, YvetteLau. 因为使用硬绑定明确将this绑定在了person上。\u003c/p\u003e\n\u003cp\u003e那么，使用了硬绑定，是不是意味着不会出现隐式绑定所遇到的绑定丢失呢？显然不是这样的，不信，继续往下看。\u003c/p\u003e\n\u003cpre\u003e\u003ccode class=\"language-javascript\"\u003efunction sayHi(){\n console.log('Hello,', this.name);\n}\nvar person = {\n name: 'YvetteLau',\n sayHi: sayHi\n}\nvar name = 'Wiliam';\nvar Hi = function(fn) {\n fn();\n}\nHi.call(person, person.sayHi); \n\u003c/code\u003e\u003c/pre\u003e\n\u003cp\u003e输出的结果是 Hello, Wiliam. 原因很简单，Hi.call(person, person.sayHi)的确是将this绑定到Hi中的this了。但是在执行fn的时候，相当于直接调用了sayHi方法(记住: person.sayHi已经被赋值给fn了，隐式绑定也丢了)，没有指定this的值，对应的是默认绑定。\u003c/p\u003e\n\u003cp\u003e现在，我们希望绑定不会丢失，要怎么做？很简单，调用fn的时候，也给它硬绑定。\u003c/p\u003e\n\u003cpre\u003e\u003ccode class=\"language-javascript\"\u003efunction sayHi(){\n console.log('Hello,', this.name);\n}\nvar person = {\n name: 'YvetteLau',\n sayHi: sayHi\n}\nvar name = 'Wiliam';\nvar Hi = function(fn) {\n fn.call(this);\n}\nHi.call(person, person.sayHi);\n\u003c/code\u003e\u003c/pre\u003e\n\u003cp\u003e此时，输出的结果为: Hello, YvetteLau，因为person被绑定到Hi函数中的this上，fn又将这个对象绑定给了sayHi的函数。这时，sayHi中的this指向的就是person对象。\u003c/p\u003e\n\u003cp\u003e至此，革命已经快胜利了，我们来看最后一种绑定规则: new 绑定。\u003c/p\u003e\n\u003ch3\u003enew 绑定\u003c/h3\u003e\n\u003cp\u003ejavaScript和Ｃ＋＋不一样，并没有类，在javaScript中，构造函数只是使用new操作符时被调用的函数，这些函数和普通的函数并没有什么不同，它不属于某个类，也不可能实例化出一个类。任何一个函数都可以使用new来调用，因此其实并不存在构造函数，而只有对于函数的“构造调用”。\u003c/p\u003e\n\u003cblockquote\u003e\n\u003cp\u003e使用new来调用函数，会自动执行下面的操作：\u003c/p\u003e\n\u003c/blockquote\u003e\n\u003cp\u003e1.创建一个新对象；\u003c/p\u003e\n\u003cp\u003e2.将构造函数的作用域赋值给新对象，即this指向这个新对象；\u003c/p\u003e\n\u003cp\u003e3.执行构造函数中的代码；\u003c/p\u003e\n\u003cp\u003e4.返回新对象。\u003c/p\u003e\n\u003cp\u003e因此，我们使用new来调用函数的时候，就会新对象绑定到这个函数的this上。\u003c/p\u003e\n\u003cpre\u003e\u003ccode class=\"language-javascript\"\u003efunction sayHi(name){\n this.name = name;\n\t\n}\nvar Hi = new sayHi('Yevtte');\nconsole.log('Hello,', Hi.name);\n\u003c/code\u003e\u003c/pre\u003e\n\u003cp\u003e输出结果为 Hello, Yevtte, 原因是因为在var Hi = new sayHi(‘Yevtte’);这一步，会将sayHi中的this绑定到Hi对象上。\u003c/p\u003e\n\u003ch3\u003e绑定优先级\u003c/h3\u003e\n\u003cp\u003e我们知道了this有四种绑定规则，但是如果同时应用了多种规则，怎么办？\u003c/p\u003e\n\u003cp\u003e显然，我们需要了解哪一种绑定方式的优先级更高，这四种绑定的优先级为:\u003c/p\u003e\n\u003cp\u003enew绑定 \u0026gt; 显式绑定 \u0026gt; 隐式绑定 \u0026gt; 默认绑定\u003c/p\u003e\n\u003cp\u003e这个规则时如何得到的，大家如果有兴趣，可以自己写个demo去测试，或者记住上面的结论即可。\u003c/p\u003e\n\u003ch3\u003e绑定例外\u003c/h3\u003e\n\u003cp\u003e凡事都有例外，this的规则也是这样。\u003c/p\u003e\n\u003cp\u003e如果我们将null或者是undefined作为this的绑定对象传入call、apply或者是bind,这些值在调用时会被忽略，实际应用的是默认绑定规则。\u003c/p\u003e\n\u003cpre\u003e\u003ccode class=\"language-javascript\"\u003efunction sayHi(){\n console.log('Hello,', this.name);\n}\nvar person = {\n name: 'YvetteLau',\n sayHi: sayHi\n}\nvar name = 'Wiliam';\nvar Hi = function(fn) {\n fn();\n}\nHi.call(null, person.sayHi); \n\u003c/code\u003e\u003c/pre\u003e\n\u003cp\u003e输出的结果是 Hello, Wiliam，因为这时实际应用的是默认绑定规则。\u003c/p\u003e\n\u003ch3\u003e箭头函数\u003c/h3\u003e\n\u003cp\u003e箭头函数是ES6中新增的，它和普通函数有一些区别，箭头函数没有自己的this，它的this继承于外层代码库中的this。箭头函数在使用时，需要注意以下几点:\u003c/p\u003e\n\u003cp\u003e（1）函数体内的this对象，继承的是外层代码块的this。\u003c/p\u003e\n\u003cp\u003e（2）不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。\u003c/p\u003e\n\u003cp\u003e（3）不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。\u003c/p\u003e\n\u003cp\u003e（4）不可以使用yield命令，因此箭头函数不能用作 Generator 函数。\u003c/p\u003e\n\u003cp\u003e（5）箭头函数没有自己的this，所以不能用call()、apply()、bind()这些方法去改变this的指向.\u003c/p\u003e\n\u003cp\u003eOK，我们来看看箭头函数的this是什么？\u003c/p\u003e\n\u003cpre\u003e\u003ccode class=\"language-javascript\"\u003evar obj = {\n hi: function(){\n console.log(this);\n return ()=\u0026gt;{\n console.log(this);\n }\n },\n sayHi: function(){\n return function() {\n console.log(this);\n return ()=\u0026gt;{\n console.log(this);\n }\n }\n },\n say: ()=\u0026gt;{\n console.log(this);\n }\n}\nlet hi = obj.hi(); //输出obj对象\nhi(); //输出obj对象\nlet sayHi = obj.sayHi();\nlet fun1 = sayHi(); //输出window\nfun1(); //输出window\nobj.say(); //输出window\n\u003c/code\u003e\u003c/pre\u003e\n\u003cp\u003e那么这是为什么呢？如果大家说箭头函数中的this是定义时所在的对象，这样的结果显示不是大家预期的，按照这个定义，say中的this应该是obj才对。\u003c/p\u003e\n\u003cp\u003e我们来分析一下上面的执行结果：\u003c/p\u003e\n\u003cp\u003e1.obj.hi(); 对应了this的默认绑定规则，this绑定在obj上，所以输出obj，很好理解。\u003c/p\u003e\n\u003cp\u003e2.hi(); 这一步执行的就是箭头函数，箭头函数继承上一个代码库的this，刚刚我们得出上一层的this是obj，显然这里的this就是obj。\u003c/p\u003e\n\u003cp\u003e3.执行sayHi();这一步也很好理解，我们前面说过这种隐式绑定丢失的情况，这个时候this执行的是默认绑定，this指向的是全局对象window。\u003c/p\u003e\n\u003cp\u003e4.fun1(); 这一步执行的是箭头函数，如果按照之前的理解，this指向的是箭头函数定义时所在的对象，那么这儿显然是说不通。OK，按照箭头函数的this是继承于外层代码库的this就很好理解了。外层代码库我们刚刚分析了，this指向的是window，因此这儿的输出结果是window。\u003c/p\u003e\n\u003cp\u003e5.obj.say(); 执行的是箭头函数，当前的代码块obj中是不存在this的，只能往上找，就找到了全局的this，指向的是window。\u003c/p\u003e\n\u003ch3\u003e你说箭头函数的this是静态的？\u003c/h3\u003e\n\u003cp\u003e依旧是前面的代码。我们来看看箭头函数中的this真的是静态的吗？\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003e我要说：非也\u003c/strong\u003e\u003c/p\u003e\n\u003cpre\u003e\u003ccode class=\"language-javascript\"\u003evar obj = {\n hi: function(){\n console.log(this);\n return ()=\u0026gt;{\n console.log(this);\n }\n },\n sayHi: function(){\n return function() {\n console.log(this);\n return ()=\u0026gt;{\n console.log(this);\n }\n }\n },\n say: ()=\u0026gt;{\n console.log(this);\n }\n}\nlet sayHi = obj.sayHi();\nlet fun1 = sayHi(); //输出window\nfun1(); //输出window\n\nlet fun2 = sayHi.bind(obj)();//输出obj\nfun2(); //输出obj\n\u003c/code\u003e\u003c/pre\u003e\n\u003cp\u003e可以看出，fun1和fun2对应的是同样的箭头函数，但是this的输出结果是不一样的。\u003c/p\u003e\n\u003cp\u003e所以，请大家牢牢记住一点: 箭头函数没有自己的this，箭头函数中的this继承于外层代码库中的this.\u003c/p\u003e\n\u003ch2\u003e总结\u003c/h2\u003e\n\u003cp\u003e关于this的规则，至此，就告一段落了，但是想要一眼就能看出this所绑定的对象，还需要不断的训练。\u003c/p\u003e\n\u003cp\u003e我们来回顾一下，最初的问题。\u003c/p\u003e\n\u003cblockquote\u003e\n\u003col\u003e\n\u003cli\u003e如何准确判断this指向的是什么？\u003c/li\u003e\n\u003c/ol\u003e\n\u003c/blockquote\u003e\n\u003cp\u003e1.函数是否在new中调用(new绑定)，如果是，那么this绑定的是新创建的对象。\u003c/p\u003e\n\u003cp\u003e2.函数是否通过call,apply调用，或者使用了bind(即硬绑定)，如果是，那么this绑定的就是指定的对象。\u003c/p\u003e\n\u003cp\u003e3.函数是否在某个上下文对象中调用(隐式绑定)，如果是的话，this绑定的是那个上下文对象。一般是obj.foo()。\u003c/p\u003e\n\u003cp\u003e4.如果以上都不是，那么使用默认绑定。如果在严格模式下，则绑定到undefined，否则绑定到全局对象。\u003c/p\u003e\n\u003cp\u003e5.如果把Null或者undefined作为this的绑定对象传入call、apply或者bind，这些值在调用时会被忽略，实际应用的是默认绑定规则。\u003c/p\u003e\n\u003cp\u003e6.如果是箭头函数，箭头函数的this继承的是外层代码块的this。\u003c/p\u003e\n\u003cblockquote\u003e\n\u003col start=\"2\"\u003e\n\u003cli\u003e执行过程解析\u003c/li\u003e\n\u003c/ol\u003e\n\u003c/blockquote\u003e\n\u003cpre\u003e\u003ccode class=\"language-javscript\"\u003evar number = 5;\nvar obj = {\n number: 3,\n fn: (function () {\n var number;\n this.number *= 2;\n number = number * 2;\n number = 3;\n return function () {\n var num = this.number;\n this.number *= 2;\n console.log(num);\n number *= 3;\n console.log(number);\n }\n })()\n}\nvar myFun = obj.fn;\nmyFun.call(null);\nobj.fn();\nconsole.log(window.number);\n\u003c/code\u003e\u003c/pre\u003e\n\u003cp\u003e我们来分析一下，这段代码的执行过程。\u003c/p\u003e\n\u003cp\u003e1.在定义obj的时候，fn对应的闭包就执行了，返回其中的函数，执行闭包中代码时，显然应用不了new绑定(没有出现new 关键字)，硬绑定也没有(没有出现call,apply,bind关键字),隐式绑定有没有？很显然没有，如果没有XX.fn()，那么可以肯定没有应用隐式绑定，所以这里应用的就是默认绑定了，非严格模式下this绑定到了window上(浏览器执行环境)。【这里很容易被迷惑的就是以为this指向的是obj，一定要注意，除非是箭头函数，否则this跟词法作用域是两回事，一定要牢记在心】\u003c/p\u003e\n\u003cpre\u003e\u003ccode class=\"language-javascript\"\u003ewindow.number * = 2; //window.number的值是10(var number定义的全局变量是挂在window上的)\n\nnumber = number * 2; //number的值是NaN;注意我们这边定义了一个number，但是没有赋值，number的值是undefined;Number(undefined)-\u0026gt;NaN\n\nnumber = 3; //number的值为3\n\u003c/code\u003e\u003c/pre\u003e\n\u003cp\u003e2.myFun.call(null);我们前面说了，call的第一个参数传null，调用的是默认绑定；\u003c/p\u003e\n\u003cpre\u003e\u003ccode class=\"language-javascript\"\u003efn: function(){\n var num = this.number;\n this.number *= 2;\n console.log(num);\n number *= 3;\n console.log(number);\n}\n\u003c/code\u003e\u003c/pre\u003e\n\u003cp\u003e执行时:\u003c/p\u003e\n\u003cpre\u003e\u003ccode class=\"language-javascript\"\u003evar num = this.number; //num=10; 此时this指向的是window\nthis.number * = 2; //window.number = 20\nconsole.log(num); //输出结果为10\nnumber *= 3; //number=9; 这个number对应的闭包中的number;闭包中的number的是3\nconsole.log(number); //输出的结果是9\n\u003c/code\u003e\u003c/pre\u003e\n\u003cp\u003e3.obj.fn();应用了隐式绑定，fn中的this对应的是obj。\u003c/p\u003e\n\u003cpre\u003e\u003ccode class=\"language-javascript\"\u003evar num = this.number;//num = 3;此时this指向的是obj\nthis.number *= 2; //obj.number = 6;\nconsole.log(num); //输出结果为3;\nnumber *= 3; //number=27;这个number对应的闭包中的number;闭包中的number的此时是9\nconsole.log(number);//输出的结果是27\n\u003c/code\u003e\u003c/pre\u003e\n\u003cp\u003e4.最后一步console.log(window.number);输出的结果是20；\u003c/p\u003e\n\u003cp\u003e因此组中结果为:\u003c/p\u003e\n\u003cpre\u003e\u003ccode class=\"language-shell\"\u003e10\n9\n3\n27\n20\n\u003c/code\u003e\u003c/pre\u003e\n\u003cp\u003e严格模式下结果，大家根据今天所学，自己分析，巩固一下知识点。\u003c/p\u003e\n\u003cp\u003e最后，恭喜坚持读完的小伙伴们，你们成功get到了this这个知识点，但是想要完全掌握，还是要多回顾和练习。如果你有不错的this练习题，欢迎在评论区留言哦，大家一起进步！\u003c/p\u003e\n\u003cp\u003e\u003cimg src=\"http://img30.360buyimg.com/njmobilecms/jfs/t1/22772/21/12288/9470/5c963ab1E0ef35a94/6a97fdab99cec5a0.jpg\" alt=\"\" /\u003e\u003c/p\u003e\n\u003cp\u003e谢谢您花费宝贵的时间阅读本文，如果本文给了您一点帮助或者是启发，那么不要吝啬你的赞和Star哦(\u003ca href=\"https://github.com/YvetteLau/Blog\"\u003ehttps://github.com/YvetteLau/Blog\u003c/a\u003e)，您的肯定是我前进的最大动力。\u003c/p\u003e\n\u003cp\u003e更多内容，请关注前端之巅。\u003c/p\u003e\n\u003cp\u003e\u003cimg src=\"https://static.geekbang.org/infoq/5ca0f3faca602.png\" alt=\"\" /\u003e\u003c/p\u003e\n