java 脚本箭头函数

Question

我制作了一个名为 btn 的按钮，并给了它一个文本

btn = document.createElement('button')
btn.textContent = "Hello World"

我想让它在被点击时提醒它的文本内容。

我知道我可以使用：

btn.onclick = function(){alert(this.textContent)}

但最近我了解了这些箭头函数，我想在这里使用它，所以我做了这个

btn.onclick = ()=>{alert(this.textContent)}

和

btn.onclick = ()=> alert(this.textContent)

但他们都警觉undefined

那我该怎么做呢？

Answer 1

this在箭头函数中表示其父作用域，而在常规函数中表示按钮组件。所以在箭头函数中，你需要使用 btn.textContent 而不是 this.textContent

btn = document.createElement('button')
btn.textContent = "Hello World"
// btn.onclick = function(){alert(this.textContent)}
btn.onclick = (event) => {alert(event.target.textContent)}
document.body.appendChild(btn);

btn = document.createElement('button')
btn.textContent = "Hello World"
btn.onclick = function(){alert(this.textContent)}
// btn.onclick = (event) => {alert(event.target.textContent)}
document.body.appendChild(btn);

Answer 2

箭头函数未绑定到 this 对象，因为它们更像是本地定义的代码块，您可以运行。这就是为什么使用 this 不起作用的原因 - 您在全局上下文中创建了箭头函数，其中 this 被定义为引用 Window。解决这个问题的方法是使用另一个有用的小细节：Event argument:

let i = 0;

document.body.onclick = event => event.target.textContent = i++;

html,body { height: 100%; }
div { position: fixed; top: 0; left: 0; width: 100%; height: 100%; }

<div>0</div>

这种情况下可以使用事件对象，这里用这个记录比依赖一个this要好。 this 在您开始创建原型和类并且需要引用内部内容时最有用。当它们绑定到方法时，要确定它指的是哪个对象有点麻烦，而且有点复杂，所以最好使用你 知道的已经提供的值正确.

java 脚本箭头函数

java script arrow functions

javascript

function

arrow-functions