一个this指向题目记录

LtHm

已于 2022-10-24 16:20:55 修改

阅读量127

点赞数

分类专栏： js基础文章标签： javascript 开发语言 ecmascript 1024程序员节

于 2022-10-20 15:34:40 首次发布

本文链接：https://blog.csdn.net/cjn308408/article/details/127428355

版权

js基础专栏收录该内容

29 篇文章 1 订阅

订阅专栏

这篇博客详细解析了一个涉及JavaScript中this指向的题目，包括显式绑定、异步任务、绑定优先级（new绑定 > 显式绑定 > 隐式绑定 > 默认绑定）等知识点。内容涵盖new操作符的影响、bind、call方法的应用，以及同步与异步任务的执行顺序，强调了在不同场景下this的指向变化。

摘要由CSDN通过智能技术生成

var name = 'global';
var obj = {
    name: 'local',
    foo: function(){
        this.name = 'foo';
        console.log(this.name);
    }.bind(window)
};
var bar = new obj.foo();
setTimeout(function() {
    console.log(window.name);
}, 0);
console.log(bar.name);
 
var bar3 = bar2 = bar;
bar2.name = 'foo2';
console.log(bar3.name);

这个题的整体出题质量还是挺高的，首先咱们来把涉及到的知识罗列一下：

bind 是显式绑定，会修改 this 指向，但 bind() 函数不会立即执行函数，会返回一个新函数
setTimeout 是异步任务，同步任务执行完毕后才会执行异步任务
绑定优先级: new绑定 > 显式绑定 > 隐式绑定 > 默认绑定

解析

obj.foo 将它的 this 通过 bind 显式的绑定为 window，但 bind 不会立即执行
var bar = new obj.foo(): new 绑定优先级大于 bind ，因此 bind 失效了，此时 this 指向 new 实例，因此 obj.foo 内部的 console 打印 foo
bar 是 new obj.foo() 的实例，console.log(bar.name) 打印 foo
setTimeout 异步任务，等到同步执行完毕再来调用它的回调
bar3 = bar2 = bar，将 bar2，bar3，bar 的地址都指向 bar 所指向的空间。
bar2.name = 'foo2'，修改地址指向堆内存的值
console.log(bar3.name): 由于三个变量指向同一块地址，bar3 修改了 name ，bar3 也随之改变，打印 foo2
setTimeout 的回调执行，打印 global

foo

foo

foo2

global

修改1:去除new绑定

var name = 'global';
var obj = {
    name: 'local',
    foo: function(){
        this.name = 'foo';
        console.log(this.name);
    }.bind(window)
};
obj.foo();
setTimeout(function() {
    console.log(this.name);
}, 0);
console.log(name);

obj.foo 没有做修改，它的 this 通过 bind 显式的绑定为 window，但 bind 不会立即执行
obj.foo() 执行，显式绑定优先级大于隐式绑定，因此此时 foo 函数 this -> window
this.name 相当于 window.name，修改了全局的 name 变量值，打印 foo
setTimeout 回调等同步代码执行完毕
全局的 name 已经修改为 foo ，打印 foo
执行 setTimeout 的回调，默认绑定，打印 foo

foo

foo

foo

修改2:bind改为call

var name = 'global';
var obj = {
    name: 'local',
    foo: function(){
        this.name = 'foo';
        console.log(this.name);
    }
};
obj.foo.call(window);
var bar = new obj.foo();
setTimeout(function() {
    console.log(window.name);
}, 0);
console.log(bar.name);
 
var bar3 = bar2 = bar;
bar2.name = 'foo2';
console.log(bar3.name);

call 与 bind 的区别就在于 call 函数会立即执行

因此 obj.foo.call(window) 会立即执行函数，同时也修改了全局的 name 值。其他部分与上面所讲类似，不多做赘述了。