一分钟搞懂this指向

独立函数调用------默认绑定!this指向全局对象(浏览器中就是Window)

scss 复制代码
function fire() {
  console.log(this); // 浏览器中: Window
}
fire(); // 函数直接调用

通过对象调用------隐式绑定!this指向调用它的对象

javascript 复制代码
const weapon = {
  name: "AK47",
  shoot() {
    console.log(this.name); // AK47
  }
};
weapon.shoot(); // 通过对象调用

call/apply/bind------显式绑定!强行指定this指向

scss 复制代码
function reload() {
  console.log(this.bullet); 
}

const gun = { bullet: 30 };
reload.call(gun);   // 30
reload.apply(gun);  // 30
const bindReload = reload.bind(gun);
bindReload();       // 30

new实例化------构造函数模式!this指向新创建的对象

javascript 复制代码
function Sniper(name) {
  this.name = name; // this指向新对象
}
const awp = new Sniper("AWM"); 
console.log(awp.name); // AWM

箭头函数是例外!没有自己的this,继承外层上下文

js复制代码

javascript 复制代码
const obj = {
  timer: function() {
    setTimeout(() => {
      console.log(this); // obj(继承外层this)
    }, 100);
  }
};
obj.timer();

记住口诀:谁调用指向谁,new对象最优先,箭头继承看外层!

相关推荐
对岸住着星星33 分钟前
vue3+ts实现拖拽缩放,全屏
前端·javascript
珍宝商店1 小时前
原生 JavaScript 方法实战指南
开发语言·前端·javascript
C++chaofan2 小时前
游标查询在对话历史场景下的独特优势
java·前端·javascript·数据库·spring boot
cg.family2 小时前
Vue3 v-slot 详解与示例
前端·javascript·vue.js
_AaronWong2 小时前
多页面应用登录状态共享:基于弹出窗口的通用解决方案
前端·javascript·vue.js
陈卿然3 小时前
一文通关JavaScript:从基本语法到TypeScript
javascript
小菜全3 小时前
《WebAssembly:前端开发的新可能》
前端·javascript
南风木兮丶3 小时前
Vue 项目安装 @antfu/eslint-config 保姆级教程
前端·javascript·vue.js
Mintopia4 小时前
🚀 Cesium-Kit:10 秒为你的 Cesium 项目添加动态光效标记
前端·javascript·cesium
Mintopia4 小时前
🌩️ 云边协同架构下的 WebAI 动态资源调度技术
前端·javascript·aigc