js中this理解(浏览器环境下）

最新推荐文章于 2025-04-24 22:56:01 发布

原创最新推荐文章于 2025-04-24 22:56:01 发布 · 262 阅读

CC 4.0 BY-SA版权

文章标签：

48 篇文章

订阅专栏

40 篇文章

订阅专栏

本文深入探讨了JavaScript中this关键字的五种常见用法，包括全局执行、函数中执行、作为对象方法调用、构造函数使用及定时器中this的指向。通过具体代码示例，帮助读者理解不同上下文中this的具体指向。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在学习js时，this的指向理解无疑是一大难点。最近，本人阅读了一些书籍跟知识点，知识点具体出处已不大记清。对this有了更深入的理解。下面是this的几种常见用法：
一、全局执行

console.log(this);//window

全局作用域中的this指向当前的全局对象window
二、函数中执行
1.非严格模式中

//1.非严格模式
function func(){
      console.log(this);
}
func(); //window

//2.严格模式
"use strict";
function func(){
   console.log(this);
}
func(); //undefined

三、作为对象的方法调用
当一个函数被当做一个对象的方法调用的时候，this指向当前的obj

var obj={
         name:'feifei',
         func:function(){
             console.log(this.name); 
         }
     }
obj.func(); //feifei

如果把对象的方法赋给一个变量，调用该方法时，this指向window

var obj={
       name:'feifei',
         func:function(){
             console.log(this);
         }
}
var test=obj.func;
test();//window

四、作为一个构造函数使用
在js中，为了实现类，我们需要定义一些构造函数，在调用一个构造函数的时候加上new这个关键字。

function Person(name){
            this.name=name;
            console.log(this);
            }
var p1=new Person('feifei');//Person

此时，this指向这个构造函数调用的时候实例化出来的对象

构造函数也是函数，若将构造函数当做普通函数来调用，this指向window

function Person(name){
    this.name=name;
    console.log(this);  //window
}
var p2=Person('feifei');

五、在定时器中使用

 setInterval(function(){
     console.log(this);  //window
 },2000);


 setTimeout(function(){
     console.log(this); //window
 },0);

如果没有特殊指向，setInterval和setTimeout的回调函数中this的指向都是window,这是因为js的定时器是定义在window下的。

以上是关于this的五种常见用法，后续还会补充其他用法。