JavaScript深入剖析this的指向以及如何修改指向

作者:函数茶馆

时间:2026-10-24

浏览:439

本文深入解析JavaScript中this关键字的指向机制,涵盖全局环境、对象方法、构造函数及严格模式下的不同表现。重点讲解如何利用call、apply和bind三个方法动态修改this指向,并通过代码示例对比三者的执行特性与参数传递差异,帮助开发者掌握函数调用上下文的核心概念。

文章目录

this

首先分析代码示例:

方法中的this


function test(){
    console.log(this);
}

this

对象中的this


Person={
  name:"张三",
  eat:function(){
      console.log(this)
  }
}

this

在方法内部,this指向该方法所属的对象。若方法挂载于window,则this为window;若为Person的方法,则this指向Person对象。

因此,在控制台直接调用this时,其指向全局对象。

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);

this

实际上,在new操作时隐含了return this。若不使用new,则不会返回新建的对象。

this

现补全代码以验证:


var Person=function(name,age){
    this.name=name,
    this.age=age
    return this;
}
var Person1=new Person("张三",18);
var Person2=new Person("李四",19);

this

据此,可以模拟伪造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

严格模式

this在严格模式与非严格模式下存在差异。


function test() {
  return this;
}

# 如果js前面添加"use strict" 代表是严格模式
"use strict";
function test() {
  return this;
}

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

可见this指向window中的a值,而非方法test内部的值,但部分关键字可修改其指向。

this

方法调用前的对象即为this的指向,但可通过call、apply、bind等关键字进行修改。

this

this

this

对比上述内容,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指向及修改方法的介绍结束,更多相关内容请搜索本站历史文章或继续浏览后续文章,感谢支持!

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章