js函数中this是全局变量还是当前对象

最新推荐文章于 2025-09-09 08:15:00 发布

原创最新推荐文章于 2025-09-09 08:15:00 发布 · 3.6k 阅读

1 ·

CC 4.0 BY-SA版权

JavaScript 专栏收录该内容

8 篇文章

订阅专栏

本文探讨了JavaScript中单例模式的几种实现方式，包括直接对象形式、匿名函数及改进后的单例模式。针对匿名函数实现单例时出现的this指向问题，提供了两种解决方案。

问题：在Web项目前端实现时，有两个小功能模块，一方面想自我要求必须面向对象的方式实现，另一方面此功能模块没有相同的模式，不需要用类多次实例化，因此创建一个单例是最好的选择。单例的js实现有多种方式：

1.以对象实现

var singleton = { 
       prop1: "", 
       prop2: [], 
       func1 : function(){}, 
       func2: function(){} 
}

缺陷是没有构造函数，不能执行初始化方法（用为静态类方法使用还行）

2.匿名函数实现：这是最简单的实现方式，不作任何额外处理，定义类然后立即执行。3.单例的高级实现：控制不允许新的实例对象产生没有考虑第三种，是因为它过于麻烦，为创建单例需要额外花些脚本控制实例的唯一性。采用在第2种方法实现如下：

//错误的实现
var singleton = function(){ 
    // ...
    return this; 
}();

后面发现，程序运行时，在同一页面的这两个模块互联测试时页面错乱。这两个模块的实现几乎相同，都是init、createHtml、bindEvent等基础方法。调试时发现，这个方法里面的this不是匿名函数object，而是window。经多次测试，才理解this在function中什么时候是全局对象window，什么时候是当前类对象。将function声明的函数，作为函数调用时，它始终都是全局对象（web页面中是window，如在nodejs那可能就是global了）；它此函数以new实例化时，其中的this就是object对象。与是否匿名函数无关。知道原因，解决方法就简单了，还是用第2种思路上实现修改一：在前面添加new关键字

<pre name="code" class="javascript">var singleton =  new function(){
      // ...
      return this; 
};

修改二：结合思路1的实现，较思路1纯对象实现好的地方是，本方法可以添加初始化逻辑。

var singleton = function(){ 
    var me = { 
        func1: function(){} 
    }; 
    me.func2= function(){} 
    return me; 
}();