js箭头函数与普通函数的this指向问题

js箭头函数与普通函数的this指向问题

总结一句话 普通函数的this指向调用者,箭头函数的this指向拥有者。

例子:

js 复制代码
// 常规函数:
hello = function() {
  document.getElementById("demo").innerHTML += this;
}

// window 对象调用该函数:
window.addEventListener("load", hello);

// button 对象调用该函数:
document.getElementById("btn").addEventListener("click", hello);

输出: 普通函数this指向调用者,第一次是window调用,第二次是button调用。

js 复制代码
[object Window]    [object HTMLButtonElement]
js 复制代码
// 箭头函数:
hello = () => {
  document.getElementById("demo").innerHTML += this;
}

// window 对象调用该函数:
window.addEventListener("load", hello);

// button 对象调用该函数:
document.getElementById("btn").addEventListener("click", hello);

输出: 该例子里 箭头函数不论你调用者是谁,拥有者都是window。

js 复制代码
[object Window]     [object Window]
相关推荐
时雨__7 分钟前
利用AndVX6开发流程图——问题总结
前端
渣哥14 分钟前
当容器里有多个 Bean,@Qualifier 如何精准定位?
javascript·后端·面试
云枫晖30 分钟前
深入浅出npm:现代JavaScript项目基石
前端·javascript·node.js
不一样的少年_33 分钟前
你家孩子又偷玩网页游戏? 试试这个防沉迷工具
前端·javascript·浏览器
春秋半夏33 分钟前
vue2二次封装el-select支持collapse-tags-tooltip
前端
昔人'38 分钟前
css`scrollbar-gutter`防止滚动条可见性变化时发生布局偏移
前端·css
掘金安东尼39 分钟前
前端周刊第436期(2025年10月13日–10月19日)
前端·javascript·github
小叫花子42 分钟前
用 UniApp 开发微信小程序蓝牙通信功能
前端
勤奋菲菲1 小时前
深入理解HTML文本标签:构建网页内容的基础
前端·html