关于JS中的this指向问题

全局代码中调用this

全局代码中调用this,this都指向window对象,如果是nodejs 中this指向global

方法内部调用this

在方法内部调用this并不能马上获取this的指向,具体要看当前方法是如何调用的

|---------|------------------------------------------|----------------|
| 调用方式 | 调用示例 | this指向 |
| 通过new调用 | const obj = new Method() | this 指向obj |
| 直接调用 | function obj() { console.log(this) } | this指向window |
| 通过对象调用 | obj.fun = function() {console.log(this)} | this指向调用对象 obj |
| 通过call | fun.call(this, ...args) | 用户手动设置 |
| 通过apply | fun.apply(this, [...args]) | 用户手动设置 |
[ ]

调用示例:👇

javascript 复制代码
const User = function() {
    console.log(this) // 指向 User {}
}
const user = new User()
javascript 复制代码
function user() {
    console.log(this) // 指向 window
}
user()
javascript 复制代码
const user = {
    name: '小妹',
    age: 18,
    sayHello: function() {
        console.log(this) // 指向user 
    }
}

user.hello()
javascript 复制代码
const user = {
    name: '小妹',
    age: 18,
    sayHello: function() {
        console.log(this) // 指向window
    }
}

user.hello.call(this)
user.hello.apply(this)
相关推荐
Joe556几秒前
vue2 + antDesign 下拉框限制只能选择2个
服务器·前端·javascript
旅途中的宽~3 分钟前
【Python】pip install -v e .命令不想自动更新torch版本
开发语言·python·pip
lly2024065 分钟前
Vue3 指令详解
开发语言
WHS-_-202214 分钟前
Tx and Rx IQ Imbalance Compensation for JCAS in 5G NR
javascript·算法·5g
摘星编程14 分钟前
React Native for OpenHarmony 实战:GestureResponderSystem 手势系统详解
javascript·react native·react.js
lili-felicity16 分钟前
React Native for OpenHarmony 实战:加载效果的实现详解
javascript·react native·react.js·harmonyos
_OP_CHEN19 分钟前
【从零开始的Qt开发指南】(二十三)Qt 界面优化之 QSS 实战指南:从入门到精通,让你的界面颜值飙升!
开发语言·c++·qt·前端开发·界面美化·qss·客户端开发
e***985722 分钟前
Java性能优化实战:从原理到案例
java·开发语言·性能优化
HellowAmy24 分钟前
我的C++规范 - 跳跃的对象
开发语言·c++·代码规范
lph00925 分钟前
QtMqtt 的编译与QT环境加载配置
开发语言·qt