关于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)
相关推荐
草莓熊Lotso1 分钟前
《算法闯关指南:优选算法--前缀和》--27.寻找数组的中心下标,28.除自身以外数组的乘积
开发语言·c++·算法·rpc
想不明白的过度思考者4 分钟前
Rust——Trait 定义与实现:从抽象到实践的深度解析
开发语言·后端·rust
凤年徐6 分钟前
Rust async/await 语法糖的展开原理:从表象到本质
开发语言·后端·rust
江城开朗的豌豆12 分钟前
webpack了解吗,讲一讲原理,怎么压缩代码
前端·javascript·微信小程序
江城开朗的豌豆15 分钟前
Webpack配置魔法书:从入门到高手的通关秘籍
前端·javascript·微信小程序
AnalogElectronic20 分钟前
vue3 实现记事本手机版01
开发语言·javascript·ecmascript
江城开朗的豌豆20 分钟前
玩转小程序生命周期:从入门到上瘾
前端·javascript·微信小程序
Cx330❀21 分钟前
《C++ 继承》三大面向对象编程——继承:派生类构造、多继承、菱形虚拟继承概要
开发语言·c++
晨陌y23 分钟前
从 “不会” 到 “会写”:Rust 入门基础实战,用一个小项目串完所有核心基础
开发语言·后端·rust
筱砚.24 分钟前
【STL——set与multiset容器】
开发语言·c++·stl