this指向问题

最新推荐文章于 2025-12-03 13:04:04 发布

原创最新推荐文章于 2025-12-03 13:04:04 发布 · 102 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #vue.js

本文介绍了JavaScript中this的关键概念，包括在不同环境下的指向（浏览器环境为window，Node.js环境为global），函数调用方式如何影响this（如方法调用、事件绑定），以及箭头函数的特殊性。同时，详细讲解了call、apply和bind方法，它们分别用于动态指定函数调用的对象，以及改变this的指向和预设参数。

this指向

在浏览器环境this指向window、nodeJs环境下this指向global
```
function bar(){console.log(this)}
window.bar() //window
```

方法调用中谁调用this指向谁

const person={run(){console.log(this)} }
person.run() //person调用了run this指向了person
//事件绑定
btn.addEventListener(type,function(){console.log(this)})
//this指向btn

箭头函数的this指向父级作用域this
new可以改变改变this指向,this指向内存中实例对象
call、apply可以改变this的指向(了解)
1. call用法
  1. 所有函数中内置了call函数
  2. call函数动态指定了当前函数调用权利
  3. 格式：fn.call(ObjectTarget,实参1,实参2,…)
    const obj={name:'wt'} function fn(a){console.log(${this.name} is ${a})} fn.call(obj,'good')
  4. 主要作用：改变构造函数中this的指向
```
function Father(name,age){
this.name=name;
this.age=age;
}
function Son(name,age){
Father(this,name,age) //给this赋值
}
```
2. apply用法
  1. apply用法和call同
  2. apply调用格式：fn.apply(ObjectTarget,数组)
  3. 传递参数为数组时，可以直接使用apply
    const arr = [2,4,9]; Math.max.apply(Math,arr) //没有使用this
3. bind用法
  1. bind方法改变内部this指向，但不会立即调用函数，返回一个改变this指向和初始化参数构造的原函数拷贝
  2. 应用：如果有的函数不需要立即调用，但是又想改变这个函数内部指向：按钮点击置灰，3s后开启
```
btn.click=function(e){
this.disable=true;
setTimeout(fn.bind(this),3000)
function fn(){
this.disable=false;
}
}
//bind方法绑定
const o={name:'andy'}  function fn(){console.log(this.name)}
const fCopy=fn.bind(o)
```