关于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)
相关推荐
广师大-Wzx1 分钟前
JavaWeb:前端部分
java·前端·javascript·css·vue.js·前端框架·html
M ? A4 分钟前
你的 Vue v-memo 与 v-once,VuReact 会编译成什么样的 React 代码?
前端·javascript·vue.js·经验分享·react.js·面试·vureact
耿雨飞4 分钟前
Python 后端开发技术博客专栏 | 第 03 篇 面向对象编程进阶 -- 从 SOLID 原则到 Python 特色 OOP
开发语言·python·面向对象·oop
charlie1145141915 分钟前
嵌入式现代C++工程实践——第14篇:第二次重构 —— 模板登场,编译时绑定端口和引脚
开发语言·c++·stm32·安全·重构
源码站~7 分钟前
基于python的校园代跑(跑腿)系统
开发语言·python
BugShare8 分钟前
一个用 Rust 编写的、速度极快的 Python 包和项目管理器
开发语言·python·rust
耿雨飞13 分钟前
Python 后端开发技术博客专栏 | 第 04 篇 Python 内存管理与垃圾回收 -- 从引用计数到分代回收
开发语言·python·垃圾回收
雾岛听蓝16 分钟前
Qt 输入与多元素控件详解
开发语言·经验分享·笔记·qt
执笔画流年呀19 分钟前
多线程及其特性
java·服务器·开发语言
良木生香20 分钟前
【C++初阶】C++编程基石:编码表&&STL的入门指南
c语言·开发语言·数据结构·c++·算法