JavaScript中兩個相似代碼塊的不同行為

Question

 // Block - 1 var moduleToBind = { name: 42, getName: function() { return this.name; } } var unboundGetName = moduleToBind.getName; console.log(unboundGetName()); var boundGetName = unboundGetName.bind(moduleToBind); console.log(boundGetName()); // End Block -1 // Output : // // 42 

 // Block - 2 having similar code var module = { x: 42, getX: function() { return this.x; } } var unboundGetX = module.getX; console.log(unboundGetX()); var boundGetX = unboundGetX.bind(module); console.log(boundGetX()); // End Block - 2 // Output : // undefined // 42 

我檢查了Chrome版本67.0.3396.87（官方內部版本）（64位）和Firefox 60.0.2（64位）中的JavaScript代碼。

盡管在節點中，這兩個塊的結果相同，均為undefined和42。

Answer 1

因此，這里的問題是此上下文和變量名稱的選擇。

因此，當您運行代碼時， this是window並且窗口具有name屬性 ，但沒有x屬性。

所以this.name === window.name

如果在代碼之前在窗口對象（例如window.x = "foo"上定義屬性x，則將獲得與this.name相同的結果類型。