Question

给予：

 var box5 = {
    color: 'green',
    position: 1,
    clickMe: function() {
       console.log{this)
    }
 }

console.log = {color: "green", position: 1, clickMe: ƒ} 换句话说，指向对象“ box5”。

但是添加以下代码：

document.querySelector('.green').addEventListener('click', function() {
    var str = 'This is box number ' + this.position + ' and it is ' + this.color;
    alert(str);
});

您会收到警报：“这是箱号undefined，现在是undefined”

问题：当我记录该对象时，为什么“ this”显然指向该对象，尝试使用“ this.property”打印对象值时不会出现

这里有“ hack” self = this和带有self的引用属性，而不是此属性。

Answer 1

可能是因为this是一个HtmlElement，并且HtmlElement没有名为position的属性或名为color的属性。

this是调用当前函数的对象的表示。并且，如果触发了事件，则事件发生的对象将调用回调函数。在这种情况下，一个HtmlElement。

如果您想从html元素中获取值，可以尝试将它们添加到元素的数据集中。您可以使用Vanilla Javascript，而jQuery有自己的method implementation

Answer 2

JavaScript知道在调用函数的同时提供this值，同时又从对象中取消引用。如果调用了一个函数，但未同时取消对某个对象的取消引用，则其this的值将是全局对象（对于浏览器为window）。

例如，考虑以下对象：

let obj = {
  name: 'amazing obj',
  func: function() { console.log(this); }
};

如果我们现在说：

obj.func();

我们将看到控制台输出obj本身。

但是，如果我们说：

let func = obj.func;
func();

我们将看到控制台输出全局对象。

obj.func()和func()之间的区别在于，JavaScript认为在obj.func的情况下，该函数已从obj取消引用，因此使{ {1}}的值obj。

JavaScript：了解ES5和ES6中“ this”的工作原理时遇到问题

2 个答案: