this指向

最新推荐文章于 2025-06-22 17:32:33 发布

alitterboy

最新推荐文章于 2025-06-22 17:32:33 发布

阅读量328

点赞数

CC 4.0 BY-SA版权

分类专栏：前端记述文章标签：函数 this

本文链接：https://blog.youkuaiyun.com/alitterboy/article/details/55223952

16 篇文章

订阅专栏

本文详细解析了JavaScript中this关键字的不同应用场景及其指向问题，包括默认情况、对象调用、构造函数、箭头函数及ES7提案中的表现。

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

js中的this指向是一个让人迷惑的问题，有时候即便有经验的开发者也会弄错。

    function fn(){
        console.log(this);
    }
    fn();//window

函数直接调用的时候非严格模式下this是指向window的。这是js设计的一个bug，在严格模式下，this默认的情况下是指向undefined的。

    var obj={
        key:function(){
            console.log(this);
        }
    };
    obj.key();//obj

当函数是一个对象的属性的时候，通过对象调用。这是函数中的this指向对象。

当我们通过new调用构造函数的时候，构造函数中的this是指向通过构造函数生成的实例的。

    function Person(name){
        this.name=name;
        console.log(this);
    }
    var person1=new Person("qi");//person1

ES6提供了箭头函数，其中的this指向箭头函数的外层作用域中的this

    var obj={
        fn:function(){
            console.log(this);
            setIntervalue(()=>(console.log(this)),1000);
         }
    }

从上面可以看出两个打印的结果是一样的。这是因为箭头函数中是没有this的，所以会随着作用域链，向外查找。箭头函数内部的this和外部的this是一样的。

在ES7中有一种提案，就是双冒号语法，但是浏览器是不支持的。但babel编译器已经支持。

    foo::bar;
//  等同于
    bar.bind(foo);

总结：this的情况大致就是上面的几种。