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]
相关推荐
文心快码BaiduComate1 分钟前
AI界的“超能力”MCP,到底是个啥?
前端·后端·程序员
DarkLONGLOVE3 分钟前
JS魔法中介:Proxy和Reflect为何形影不离?
前端·javascript·面试
D11_12 分钟前
【React】Redux和React
前端·javascript·react.js
卿·静13 分钟前
Node.js轻松生成动态二维码
前端·javascript·vscode·node.js·html5
还要啥名字17 分钟前
elpis NPM包的抽离
前端
成小白18 分钟前
前端实现连词搜索下拉效果
前端·javascript
卸任21 分钟前
从0到1搭建react-native自动更新(OTA和APK下载)
前端·react native·react.js
OpenTiny社区22 分钟前
OpenTiny NEXT 训练营实操体验 | 四步将你的 Web 应用升级为智能应用
前端·开源·ai编程
持续迷茫36 分钟前
lint-staged 中 --verbose 选项的深度解析
前端·git
拜无忧39 分钟前
带有“水波纹”或“扭曲”效果的动态边框,进度条
前端