一分钟搞懂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对象最优先,箭头继承看外层!

相关推荐
芭拉拉小魔仙13 分钟前
【Vue3+TypeScript】H5项目实现企业微信OAuth2.0授权登录完整指南
javascript·typescript·企业微信
吃饭睡觉打豆豆嘛2 小时前
深入剖析 Promise 实现:从原理到手写完整实现
前端·javascript
Spider_Man2 小时前
从 “不会迭代” 到 “面试加分”:JS 迭代器现场教学
前端·javascript·面试
小高0072 小时前
🧙‍♂️ 老司机私藏清单:从“记事本”到“旗舰 IDE”,我只装了这 12 个插件
前端·javascript·vue.js
EveryPossible2 小时前
终止异步操作
前端·javascript·vue.js
Stringzhua3 小时前
setup函数相关【3】
前端·javascript·vue.js
neon12043 小时前
解决Vue Canvas组件在高DPR屏幕上的绘制偏移和区域缩放问题
前端·javascript·vue.js·canva可画
Sammyyyyy3 小时前
Node.js 做 Web 后端优势为什么这么大?
开发语言·前端·javascript·后端·node.js·servbay
Bling_Bling_14 小时前
面试常考:js中 Map和 Object 的区别
开发语言·前端·javascript
前端小巷子4 小时前
JS实现丝滑文字滚动
前端·javascript·面试