js函数中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关键字 
  
var singleton =  new function(){
      // ...
      return this; 
}; 
 
  

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

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

你可能感兴趣的:(JavaScript)