Javascript函数里的this指向

安禅不必须山水2025-08-13 14:50

this的指向基于函数执行环境动态绑定

函数作为对象的方法，函数里的this指向对象

js 复制代码

var a=3;
var obj ={  
  a:1;   
  getA:function(){alert(this.a);
}
obj.getA(); // 输出 1

函数作为普通函数调用，函数里的this总是指向window

js 复制代码

var name ='globalname';
var myObject ={      
  name:'thisname',      
  getName:function(){return this.name;}    
};
var getName =myObject.getName;
console.log(getName());//输出globalname，当赋值后直接调用getName相当于普通函数调用

js 复制代码

// html
<div id='div1'>我是div1</div>
// js
var  id ='globalid';
document.getElementById('div1').onclick =function(){
alert(this.id);
var callback = function(){ alert(this.id)};}; 
callback();
}
//div1 globalid

作为构造器调用当用new运算符调用函数时，该函数总会返回一个对象，通常情况下，构造器里的this就指向返回的这个对象

js 复制代码

var MyClass = function(){  this.name = 'sven';}
var obj = new MyClass();
alert ( obj.name ); // 输出:sven

如果构造器显式地返回了一个object类型的对象，那么此次运算结果最终会返回这个对象，而不是我们之前期待的this

js 复制代码

var MyClass = function(){  this.name = 'sven';  return {name:'anne'};  }
var obj = new MyClass(); 
alert ( obj.name ); // 输出:anne

如果构造器不显式地返回任何数据，或者是返回一个非对象类型的数据，就不会造成上述问题

js 复制代码

var MyClass = function(){  this.name = 'sven';  return 'anne';  }
var obj = new MyClass(); 
alert ( obj.name ); // 输出:sven

箭头函数的作用域

箭头函数在哪里定义就指向哪里。箭头函数没有自己的 this，会捕获定义时的外层 this（词法绑定）。

js 复制代码

const obj2 = {  
  name: 'Tom', 
  greet: () => console.log(this.name)
};
obj2.greet(); // undefined（因为 this 来自全局）

更改this的指向

主要通过call，apply，bind来更改函数中this的指向