JavaScript深入剖析this的指向以及如何修改指向
本文深入解析JavaScript中this关键字的指向机制，涵盖全局环境、对象方法、构造函数及严格模式下的不同表现。重点讲解如何利用call、apply和bind三个方法动态修改this指向，并通过代码示例对比三者的执行特性与参数传递差异，帮助开发者掌握函数调用上下文的核心概念。
this
首先分析代码示例：
方法中的this
function test(){
console.log(this);
}
对象中的this
Person={
name:"张三",
eat:function(){
console.log(this)
}
}
在方法内部，this指向该方法所属的对象。若方法挂载于window，则this为window；若为Person的方法，则this指向Person对象。
因此，在控制台直接调用this时，其指向全局对象。
隐式的this
在对象中，可以预先声明一个变量：
var Person1={
name:"张三",
age:18
}
var Person2={
name:"李四",
age:19
}
这种写法较为繁琐，借鉴Java类概念，可采用以下方式：
var Person=function(name,age){
this.name=name,
this.age=age
}
var Person1=new Person("张三",18);
var Person2=new Person("李四",19);
实际上，在new操作时隐含了return this。若不使用new，则不会返回新建的对象。
现补全代码以验证：
var Person=function(name,age){
this.name=name,
this.age=age
return this;
}
var Person1=new Person("张三",18);
var Person2=new Person("李四",19);
据此，可以模拟伪造this的效果：
var Person=function(name,age){
var that={};
that.name=name,
that.age=age
return that;
}
var Person1=new Person("张三",18);
var Person2=new Person("李四",19);
严格模式
this在严格模式与非严格模式下存在差异。
function test() {
return this;
}
# 如果js前面添加"use strict" 代表是严格模式
"use strict";
function test() {
return this;
}
非严格模式下，函数内的this默认绑定到全局对象，故打印全局对象；而在严格模式下，函数未绑定this，此时this为undefined。
修改this指向
首先查看代码示例
var Person=function(name,age){
this.name=name,
this.age=age,
this.fun=function(){
console.log("打印",this.name);
}
}
var Person1=new Person("张三",18);
var Person2=new Person("李四",19);
可见this指向window中的a值，而非方法test内部的值，但部分关键字可修改其指向。
方法调用前的对象即为this的指向，但可通过call、apply、bind等关键字进行修改。
对比上述内容，call与apply相似，而bind不会立即执行函数，需配合()调用。
若传入参数，call与apply仍有区别，但其内部必须为对象，因为this指向始终关联对象。
| 关键字 | 直接调用方法 | 参数 |
|---|---|---|
| call | 会自动运行使用的方法 | 都可以带参数格式如下：obj1.obj1Fun.call( obj2, 参数1, 参数1 ………………)； |
| apply | 会自动运行使用的方法 | 都可以带参数格式如下：obj1.obj1Fun.apply( [ obj2, 参数1, 参数1 ………………])； 对比call的参数其参数用 [ ] 包住 |
| bind | 不会自动运行使用的方法，需要后面+（），进行调用 | 都可以带参数格式如下：都可以带参数格式如下：obj1.obj1Fun.bind( [ obj2, 参数1, 参数1 ………………])（）； 对比apply的参数是一样的，只不过其需要后面+（）才能调用 |
至此，关于JavaScript深入解析this指向及修改方法的介绍结束，更多相关内容请搜索本站历史文章或继续浏览后续文章，感谢支持！
JS大数值转字符串出现科学计数法怎么办
2026-11-05 17:09:21
JS split切割后出现空字符串怎么过滤
2026-11-05 16:00:30
在 React 或 Vue 项目中封装使用 JS 节流防抖
2026-11-05 15:27:29
JavaScript中怎么将带小数的字符串转为整数？
2026-11-05 14:32:38
怎么用JavaScript策略模式重构电商促销计算逻辑？
2026-11-05 14:01:09