嗨，你真的懂this吗？ #6

YvetteLau · 2019-03-23T14:02:17Z

this关键字是JavaScript中最复杂的机制之一，是一个特别的关键字，被自动定义在所有函数的作用域中，但是相信很多JavaScript开发者并不是非常清楚它究竟指向的是什么。听说你很懂this,是真的吗？

请先回答第一个问题：如何准确判断this指向的是什么？【面试的高频问题】

——————————————————————————————————————————————
【图片来源于网络，侵删】

再看一道题，控制台打印出来的值是什么？【浏览器运行环境】

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彻底搞明白，是一件很值得事情，不是吗？

本文将细致得讲解this的绑定规则，并在最后剖析前文两道题。

为什么要学习this?

首先，我们为什么要学习this？

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

因此组中结果为:

严格模式下结果，大家根据今天所学，自己分析，巩固一下知识点。

最后，恭喜坚持读完的小伙伴们，你们成功get到了this这个知识点，但是想要完全掌握，还是要多回顾和练习。如果你有不错的this练习题，欢迎在评论区留言哦，大家一起进步！

谢谢您花费宝贵的时间阅读本文，如果本文给了您一点帮助或者是启发，那么不要吝啬你的赞和Star哦，您的肯定是我前进的最大动力。

欢迎关注小姐姐的微信公众号，加入技术交流群。

The text was updated successfully, but these errors were encountered:

gaoxinxiao · 2019-04-09T11:54:32Z

学习了

2460392754 · 2019-04-10T00:34:34Z

学习了

bin61840857 · 2019-04-12T01:14:10Z

niu

zihuasunshine · 2019-04-12T07:28:27Z

厉害

yang1212 · 2019-04-12T09:47:07Z

YvetteLau · 2019-04-12T10:14:12Z

嗯呢，忘记修改了~~其它平台已经更新过~~
非常感谢👍

prprprus · 2019-04-12T10:50:01Z

棒🎉, 期待之后的文章

1537372393 · 2019-04-14T04:04:34Z

非常感谢

james9527 · 2019-04-14T11:58:32Z

有种特殊情况，当this遇到return，如果返回值是一个对象，那么this指向的就是那个返回的对象，如下：
function fn() {
this.name = 'james';
return {};
}
let a = new fn;
console.log(a.name); // undefined

handv · 2019-04-15T09:15:59Z

请问这个题又如何解释？
var value = 1;

var foo = {
value: 2,
bar: function () {
return this.value;
}
}

//示例1
console.log(foo.bar());
//示例2
console.log((foo.bar)());
//示例3
console.log((foo.bar = foo.bar)());
//示例4
console.log((false || foo.bar)());
//示例5
console.log((foo.bar, foo.bar)());

TheHtmler · 2019-04-18T03:18:54Z

请问这个题又如何解释？
var value = 1;

var foo = {
value: 2,
bar: function () {
return this.value;
}
}

//示例1
console.log(foo.bar());
//示例2
console.log((foo.bar)());
//示例3
console.log((foo.bar = foo.bar)());
//示例4
console.log((false || foo.bar)());
//示例5
console.log((foo.bar, foo.bar)());

老哥，你这题有点意思啊

YvetteLau · 2019-04-18T12:27:24Z

请问这个题又如何解释？
var value = 1;

var foo = {
value: 2,
bar: function () {
return this.value;
}
}

//示例1
console.log(foo.bar());
//示例2
console.log((foo.bar)());
//示例3
console.log((foo.bar = foo.bar)());
//示例4
console.log((false || foo.bar)());
//示例5
console.log((foo.bar, foo.bar)());

第一个和第二个比较好理解，都是2。绑定规则+符号优先级可以解释。
示例3/4/5不太理解内部的运行步骤，平时也没遇到过这样的写法。
大佬，解释一下呢~

YvetteLau · 2019-04-18T12:35:50Z

有种特殊情况，当this遇到return，如果返回值是一个对象，那么this指向的就是那个返回的对象，如下：
function fn() {
this.name = 'james';
return {};
}
let a = new fn;
console.log(a.name); // undefined

感谢~
如果return一个对象或者是function的话，this指向的是这个对象或者是function~
非常非常感谢~

clark-maybe · 2019-05-13T02:30:26Z

mark

BellaGuan · 2019-06-07T14:13:52Z

请问这个题又如何解释？
var value = 1;

var foo = {
value: 2,
bar: function () {
return this.value;
}
}

//示例1
console.log(foo.bar());
//示例2
console.log((foo.bar)());
//示例3
console.log((foo.bar = foo.bar)());
//示例4
console.log((false || foo.bar)());
//示例5
console.log((foo.bar, foo.bar)());

感觉可以从运算符优先级下手。后三个示例分别做了赋值运算、逻辑运算、逗号运算，在这过程中对foo.bar求值，这导致丢失this隐式绑定？

icdong · 2019-06-30T10:25:35Z

一道题就涉及到闭包、this作用域、IIFE 赞赞赞赞

negativeentropy9 · 2019-06-30T13:01:02Z

perfect，讲解的很详细了

sunidol · 2019-07-29T11:25:13Z

很受用，非常棒

itagan · 2019-10-04T09:19:36Z

箭头函数的解释第3步解释有误，this还是对象，应该是赋值给全局中的变量时候出现隐式绑定丢失sayHi: function(){
console.log(this);
return function() {
console.log(this);
return ()=>{
console.log(this);
}
}
}
箭头函数前加多一个输出this，输出obj对象

fun4wut · 2019-11-23T06:23:23Z

醍醐灌顶，感谢

mouzhengjie · 2020-04-09T06:43:03Z

讲的很到位，思路很清晰

XieTongXue · 2020-04-29T09:22:24Z

但是如果在node环境中运行，结果就是 Hello,undefined.这是因为node中name并不是挂在全局对象上的。

这个结论不太对，试过了一样的，node6.3.0、10.15.3都试过

nosillytrying · 2020-07-09T08:10:46Z

//示例1
console.log(foo.bar());
//示例2
console.log((foo.bar)());
//示例3
console.log((foo.bar = foo.bar)());
//示例4
console.log((false || foo.bar)());
//示例5
console.log((foo.bar, foo.bar)());

请问这个题又如何解释？
示例 3， 4， 5 都是创建了一个新的函数而不是执行的foo.bar本身

HuanxinHu · 2020-11-11T21:41:05Z

写的太棒了👏

sbzkp · 2021-08-14T16:17:40Z

请问这个题又如何解释？
var value = 1;
var foo = {
value: 2,
bar: function () {
return this.value;
}
}
//示例1
console.log(foo.bar());
//示例2
console.log((foo.bar)());
//示例3
console.log((foo.bar = foo.bar)());
//示例4
console.log((false || foo.bar)());
//示例5
console.log((foo.bar, foo.bar)());

第一个和第二个比较好理解，都是2。绑定规则+符号优先级可以解释。
示例3/4/5不太理解内部的运行步骤，平时也没遇到过这样的写法。
大佬，解释一下呢~

示例2不太明白呢，我的理解是，相当于把foo.bar的值赋值给另一个变量，然后执行这个变量，这个时候，this不是应该指向window了吗

sbzkp · 2021-08-14T16:19:12Z

//示例1
console.log(foo.bar());
//示例2
console.log((foo.bar)());
//示例3
console.log((foo.bar = foo.bar)());
//示例4
console.log((false || foo.bar)());
//示例5
console.log((foo.bar, foo.bar)());

请问这个题又如何解释？
示例 3， 4， 5 都是创建了一个新的函数而不是执行的foo.bar本身

感觉示例2也不是执行foo.bar本身，我知道我这么理解是错误的，但我不知道为啥错，求解释

summerhll · 2021-12-10T03:09:05Z

您好，我是黄丽，您的邮件我已收到，谢谢

seconp · 2021-12-10T03:11:20Z

var value = 1;
var foo = {
value: 2,
bar: function () {
return this.value;
}
}
//示例1
console.log(foo.bar());
//示例2
console.log((foo.bar)());
//示例3
console.log((foo.bar = foo.bar)());
//示例4
console.log((false || foo.bar)());
//示例5
console.log((foo.bar, foo.bar)());

应该是这样：
foo.bar()在执行过程中会将foo作为隐式形参传给this，因此foo.bar()还是(foo.bar)()最终打印出来的都是2。因为编译器会进行优化将(foo.bar)()优化为foo.bar()。
至于(foo.bar = foo.bar)()和(false || foo.bar)()以及(foo.bar, foo.bar)()，或者其他的先对foo.bar进行运算，然后再执行，都会输出同样的结果1，是因为，运算过程中的this一直指向global。
foo.bar()执行过程是，经历两次RHS，找到foo.bar，创建bar作用域，创建bar作用域链，将foo赋值给this，调用[[call]]内部代码。此时this指向foo。
(foo.bar = foo.bar)执行过程是右侧foo.bar进行两次RHS找到bar，左侧foo.bar进行一次RHS，一次LHS找到bar，然后根据右侧找到的bar，给左侧找到的bar赋值，这个过程中的this是指向global的，然后去运行bar()，而不是运行foo.bar()，单独运行函数bar()过程中，this在非严格模式的默认情况下会指向global。这个过程中不存在两次RHS----foo,bar，然后直接运行bar函数的过程。

seconp · 2021-12-10T03:19:50Z

解释器在运行的过程中执行[[call]]的时候判断本次RHS之前经历的也是RHS，然后找前一个RHS得到的结果foo赋值给this。但是执行[[call]]之前的最后一步是赋值操作foo.bar = foo.bar，所以就去找默认的this即global了。

YvetteLau changed the title ~~嗨，听说你很懂this？我不太相信！~~ 嗨，你真的懂this吗？ Mar 24, 2019

YvetteLau mentioned this issue Apr 9, 2019

【面试篇】寒冬求职季之你必须要懂的原生JS(上) #7

Open

yihong0618 mentioned this issue Jul 22, 2019

搞定收藏夹 yihong0618/gitblog#5

Open

20 tasks

swiftwind0405 mentioned this issue Mar 10, 2020

JavaScript 中的 this swiftwind0405/blog#13

Closed

lstoryc mentioned this issue Nov 13, 2020

Q42. This 详解 lstoryc/lstoryc.github.io#42

Open

TimZw mentioned this issue Sep 3, 2021

JavaScript TimZw/personBlog#4

Open

TieMuZhen mentioned this issue Dec 28, 2021

this指向 TieMuZhen/Blog#12

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

嗨，你真的懂this吗？ #6

嗨，你真的懂this吗？ #6

YvetteLau commented Mar 23, 2019 •

edited

Loading

1. 如何准确判断this指向的是什么？

2. 执行过程解析

欢迎关注小姐姐的微信公众号，加入技术交流群。

gaoxinxiao commented Apr 9, 2019

2460392754 commented Apr 10, 2019

bin61840857 commented Apr 12, 2019

zihuasunshine commented Apr 12, 2019

yang1212 commented Apr 12, 2019

YvetteLau commented Apr 12, 2019

prprprus commented Apr 12, 2019

1537372393 commented Apr 14, 2019

james9527 commented Apr 14, 2019

handv commented Apr 15, 2019

TheHtmler commented Apr 18, 2019

YvetteLau commented Apr 18, 2019

YvetteLau commented Apr 18, 2019

clark-maybe commented May 13, 2019

BellaGuan commented Jun 7, 2019 •

edited

Loading

icdong commented Jun 30, 2019

negativeentropy9 commented Jun 30, 2019

sunidol commented Jul 29, 2019

itagan commented Oct 4, 2019

fun4wut commented Nov 23, 2019

mouzhengjie commented Apr 9, 2020

XieTongXue commented Apr 29, 2020

nosillytrying commented Jul 9, 2020 •

edited

Loading

HuanxinHu commented Nov 11, 2020

sbzkp commented Aug 14, 2021

sbzkp commented Aug 14, 2021

summerhll commented Dec 10, 2021 via email

seconp commented Dec 10, 2021

seconp commented Dec 10, 2021

嗨，你真的懂this吗？ #6

嗨，你真的懂this吗？ #6

Comments

YvetteLau commented Mar 23, 2019 • edited Loading

为什么要学习this?

this是什么？

默认绑定

隐式绑定

显式绑定

new 绑定

绑定优先级

绑定例外

箭头函数

你说箭头函数的this是静态的？

总结

1. 如何准确判断this指向的是什么？

2. 执行过程解析

欢迎关注小姐姐的微信公众号，加入技术交流群。

gaoxinxiao commented Apr 9, 2019

2460392754 commented Apr 10, 2019

bin61840857 commented Apr 12, 2019

zihuasunshine commented Apr 12, 2019

yang1212 commented Apr 12, 2019

YvetteLau commented Apr 12, 2019

prprprus commented Apr 12, 2019

1537372393 commented Apr 14, 2019

james9527 commented Apr 14, 2019

handv commented Apr 15, 2019

TheHtmler commented Apr 18, 2019

YvetteLau commented Apr 18, 2019

YvetteLau commented Apr 18, 2019

clark-maybe commented May 13, 2019

BellaGuan commented Jun 7, 2019 • edited Loading

icdong commented Jun 30, 2019

negativeentropy9 commented Jun 30, 2019

sunidol commented Jul 29, 2019

itagan commented Oct 4, 2019

fun4wut commented Nov 23, 2019

mouzhengjie commented Apr 9, 2020

XieTongXue commented Apr 29, 2020

nosillytrying commented Jul 9, 2020 • edited Loading

HuanxinHu commented Nov 11, 2020

sbzkp commented Aug 14, 2021

sbzkp commented Aug 14, 2021

summerhll commented Dec 10, 2021 via email

seconp commented Dec 10, 2021

seconp commented Dec 10, 2021

YvetteLau commented Mar 23, 2019 •

edited

Loading

BellaGuan commented Jun 7, 2019 •

edited

Loading

nosillytrying commented Jul 9, 2020 •

edited

Loading