关于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)
相关推荐
爱吃大芒果7 分钟前
Flutter 列表优化:ListView 性能调优与复杂列表实现
开发语言·hive·hadoop·flutter·华为
巴拉巴拉~~13 分钟前
Flutter 通用按钮组件 CommonButtonWidget:多样式 + 多状态 + 交互优化
javascript·flutter·交互
豆苗学前端17 分钟前
Vue 2 vs Vue 3 响应式原理深度对比(源码理解层面,吊打面试官)
前端·javascript·面试
啃火龙果的兔子18 分钟前
Java 学习路线及学习周期
java·开发语言·学习
电饭叔23 分钟前
自定义重载运算符--《python语言程序设计》2018版--第8章20题使用Rational类求和数列之一
开发语言·python
济南壹软网络科技有限公司24 分钟前
高并发电商实战:基于Java生态的多元化盲盒系统技术实现方案
java·开发语言·开源·盲盒源码·盲盒定制开发
獭.獭.27 分钟前
C++ -- 位图与布隆过滤器
开发语言·c++
工具人555528 分钟前
python 环境问题
开发语言·python
小年糕是糕手28 分钟前
【C++】string类(二)
开发语言·数据结构·c++·程序人生·算法·leetcode·数字货币
小鸡吃米…30 分钟前
Python编程语言面试问题三
开发语言·python·面试