关于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)
相关推荐
m0_565611133 分钟前
Java Stream流操作全解析
java·开发语言·算法
_OP_CHEN14 分钟前
从零开始的Qt开发指南:(三)信号与槽的概念与使用
开发语言·c++·qt·前端开发·qt creator·信号与槽·gui开发
艾小码28 分钟前
别再只会用默认插槽了!Vue插槽这些高级用法让你的组件更强大
前端·javascript·vue.js
@老蝴1 小时前
Java EE - 线程安全的产生及解决方法
java·开发语言·java-ee
没有bug.的程序员3 小时前
Spring Cloud Alibaba 生态总览
java·开发语言·spring boot·spring cloud·alibaba
快乐非自愿3 小时前
Java垃圾收集器全解:从Serial到G1的进化之旅
java·开发语言·python
树在风中摇曳4 小时前
Java 静态成员与继承封装实战:从报错到彻底吃透核心特性
java·开发语言
芳草萋萋鹦鹉洲哦6 小时前
【Windows】tauri+rust运行打包工具链安装
开发语言·windows·rust
权泽谦6 小时前
R Shiny 交互式网页实战:从零到上线可视化应用
开发语言·信息可视化·r语言
hweiyu007 小时前
Go Fiber 简介
开发语言·后端·golang