【问题标题】：Why object destructuring in javascript will affect scope? [duplicate]为什么javascript中的对象解构会影响范围？ [复制]
【发布时间】：2021-07-22 07:39:44
【问题描述】：

我想了解为什么对象解构会改变范围？

(function() {
    var o = {
        add: function(a , b) {
            return a + b;
        },
        log: function () {
            console.log(this);
        }
    }
    var { log } = o;
    o.log();
    log();
})();

这段代码将记录两个不同的对象

第一个是预期的对象o，但第二个将记录全局对象

更新（2021 年 5 月 3 日至 5 月）：如果您有同样的问题并正在寻找更详细的答案，请阅读以下内容： How does the "this" keyword work?

【问题讨论】：

这实际上与解构无关，而是与绑定 (o.log()) 与未绑定 (log()) 调用有关。只有前者才能获得正确的this。
????这是一个很好的面试基本问题

标签： javascript node.js ecmascript-6 scope

【解决方案1】：

不完全正确

function log() {
  console.log('na aahh')
}
(function() {
    var o = {
        add: function(a , b) {
            return a + b;
        },
        log: function () {
            console.log('hi, i am locally scoped');
        }
    }
    var { log } = o;
    o.log();
    log();
})();

跑去看看。

但是...当您登录 this 时，它总是采用最近的范围，恰好是全局的，因为它在解构时与 o 分离。

尝试做这样的事情......

function log() {
  console.log('nananana')
}
(function() {
    var o = {
        add: function(a , b) {
            return a + b;
        },
        log: function () {
            console.log(this);
        }
    }
    o.log = o.log.bind(o);
    var { log } = o;
    o.log();
    log();
})();

并注意它如何在解构时保留this。

另外...旁注，您应该使用 let 而不是使用 var 声明时还具有块范围，这非常好。

祝您编码愉快。

【讨论】：

【解决方案2】：

你所做的或多或少相当于

const log = o.log

你已经从一个对象中提取了一个方法，但是试图在不做任何事情的情况下调用它，this 将不会引用原始对象。你需要bind它。

const log = o.log.bind(o)

【讨论】：

【解决方案3】：

这取决于您将this 设置为：

(function() {
var o = {
    add: function(a , b) {
        return a + b;
    },
    log: function () {
        console.log(this);
    }
}
var { log } = o;
o.log();
// equivalent to
log.call(o);
})();

【讨论】：