简单的构造函数模式

时间:2011-06-28 02:55:44

标签: javascript

之前我曾使用oop样式脚本编写并尝试使用javascript获取某种系统。我想尝试最基本的模式,Constructor Pattern。

所以我设置了一个名为ImageView的js文件,其中的构造函数与js文件的名称相匹配。

    function ImageView(){
    alert( 'this is working');
}

然后我设置另一个名为Main.js的js文件,它将是主实例化类。

    $(document).ready(function(){
    var imageViewer = new ImageView();
    //ImageView();
});

现在我没有得到的是我甚至可以在没有新构造函数调用的情况下调用此对象ImageView。例如ImageView()。从我收集的内容来看,这只是另一个全局函数,而不是封装类。我正试图摆脱全局垃圾并将我的方法和属性分离到他们自己的类。我想念她的是什么

3 个答案:

答案 0 :(得分:1)

其他人已经回答了使用new与不使用它之间的区别,所以我将回答你完全独立的问题:如何避免JS中的全局变量?

答案是你不能完全。你将永远至少有一个,你可以填充你的其他东西。因此,例如,如果您想要xyz的“命名空间”,您可以这样做:

// global:
var xyz = {}; // or, window.xyz = {} if you are in a browser and want to be more explicit.

// "encapsulated" within the xyz "namespace":
xyz.ImageView = function () { alert("This is working"); };

有一个更好的解决方案:使用新兴的JavaScript 模块概念。这些不是语言功能(至少在当前版本的JavaScript中没有),所以它们实际上只是由非常聪明的库引入的黑客,这些库会覆盖几个全局变量,以避免创建超过这些库提供的变量。一个很好的例子是RequireJS,您可以在其中执行以下操作:

// In xyz.js, define the xyz module (name automatically derived from filename).
// Whatever is returned from the function you pass to define is "the xyz module"
define(function () {
    return {
        ImageView: function () { alert("This is working"); }
    };
});

// In other code, in a different file, you can say "I require the xyz module
// to do my work," and pass require a function saying "once you've got the xyz module
// for me, here's the work I will do with it".
require(["xyz"], function (xyz) { // dependency array maps to callback arguments
    // I got the xyz module, including the ImageView function it exported. Use it!
    var imageViewer = new xyz.ImageView();
});

这里聪明的全局变量RequireJS引入的是函数definerequire,但是如果你正确使用它们,你可以避免在这两个之外引入任何进一步的全局变量。

答案 1 :(得分:0)

首先,JavaScript没有内置的命名空间。它只能被模拟。您还必须包含您计划使用的每个javascript文件。

你只是调用ImageView()基本上调用this上构造函数的权利,这是下一级别的范围。

使用new ImageView()创建一个构造函数ImageView的新Object,this指向新实例。

JavaScript是一种松散输入的原型语言。

答案 2 :(得分:0)

ImageView内,如果您使用this调用new,则new的值会有所不同。没有,它只是另一个功能。使用ImageView,它会创建一个新的this实例并将其绑定到变量{{1}}。