嗨，你真的懂this吗？ about blog

[handv]

请问这个题又如何解释？
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)());

[yang1212]

[gaoxinxiao]

学习了

[2460392754]

学习了

[bin61840857]

niu

[zihuasunshine]

厉害

[YvetteLau]

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

[prprprus]

棒🎉, 期待之后的文章

[1537372393]

非常感谢

[james9527]

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

[TheHtmler]

请问这个题又如何解释？
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]

请问这个题又如何解释？
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]

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

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

[clark-maybe]

mark

[BellaGuan]

请问这个题又如何解释？
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]

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

[negativeentropy9]

perfect，讲解的很详细了

[sunidol]

很受用，非常棒

[itagan]

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

[fun4wut]

醍醐灌顶，感谢

[mouzhengjie]

讲的很到位，思路很清晰

[XieTongXue]

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

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

[nosillytrying]

//示例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]

写的太棒了👏

[sbzkp]

请问这个题又如何解释？
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]

//示例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]

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

[seconp]

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]

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