JavaScript构造函数封装插件 js 构造函数

转载

mob64ca1405d568 2023-11-30 10:30:54

文章标签 JavaScript构造函数封装插件 javascript 构造函数类 new 文章分类 JavaScript 前端开发

在绝大多数的编程语言中，均存在函数这一概念，其含义大概可以归纳为：包含一定语句，用于完成某些有意义的工作，如处理文本、控制输入输出或计算数值等。通过在程序代码中引入函数名称和所需的参数，可在该程序中执行（或称调用）该函数[1]。
而构造函数一词，顾名思义，是要构造一些东西，是一种特殊的方法，与普通函数有着质的区别。其作用是：在创建对象时，主要用来初始化对象，即为对象成员变量赋初始值[2]。其特征是总与new运算符一起使用。

1 javascript中的普通函数与构造函数

同样，javascript（以下称js）这一脚本语言，也借鉴上述定义，并加以扩展改造。在js，普通函数和构造函数表面上没什么两样，都是使用关键字function来定义：

function WebSite(name, addr)
{
    this.name = name;
    this.address = addr;
}

function createObject(obj){
    var o = {};
    if (obj){
    o = window[obj] = {}; 
    }
  delete window[obj];
    return o;
}

var csdnSite = new WebSite("csdn", ""); 
var site = createObject("csdn");
site.name = "csdn";
site.address = "";

csdnSite    // WebSite { name="csdn", address=""}
site // Object { name="csdn", address=""}

由上面例子，细心的读者会发现我们使用new进行操作的WebSite首字母大写，也就是说这时候我们期望WebSite是实现构造函数的行为。这是默认的一个编程规范，即构造函数使用首字母大写方式来与普通函数区分，尽管普通函数也可以首字母大写，但既然它们无法从表面来区分，我们不妨参照Java中构造函数命名规则来这样来做，以便开发中快速发现问题。
如果这时我们使用typeof关键字去检测csdnSite，会发现其类型就是“object”，

typeof csdnSite;    // "object"

也就是说

csdnSite instanceof Object; // true
csdnSite instanceof WebSite; // true

csdnSite的实例类型即是object，又是WebSite类的实例。
再去检验site，发现，

site instanceof Object; // true
site instanceof WebSite; // false

site只是Object的一个实例，但不是WebSite的一个实例，从这一侧面进一步验证了WebSite就是一个类。代码中我们使用的字面量{}来创建一个类Object的一个实例，其实它的效果和“new Object();”一样，这是js专门为创建普通对象打造的一个快捷方法。自定义类WebSite只能老老实实new出来。

2 js中构造函数与类的关系

由于js是一种弱类型语言，所以它没有Java中那样严格的关键字（class）来区分类和实例。但是我们从1中结论可以得出，WebSite就是实例csdnSite的类。

public class WebSite
{
    private String name;
    private String address;

    public WebSite(String name, String addr)
    {
        this.name = name;
        this.address = addr;
    }
    public void setName(String name) {
        this.name = name;
    }
    public String getAddress() {
        return address;
    }
    public static void main(String[] args) {
        WebSite csdnSite = new WebSite("csdn", ""); 
        System.out.println(csdnSite.name);
    }
}

而在Java中，如上例所示，我们将很容易区分出Java中构造函数WebSite和普通函数setName，并且很容易区分出构造函数和它所对应的类。但是在js中我们去没办法这样去区分构造函数和类，好像他们合二为一了。
唯一能区分的时候就是我们在使用new关键字时，

var csdnSite = new WebSite("csdn", "");

即new紧跟的标识符代表的就是其对应的类，而其对应的构造函数在new出来之时，函数WebSite就转身一变，成为名副其实的构造函数，因为它完成了构造函数的使命——初始化对象，对象成员变量赋初始值。
到此，我们不得不惊叹js的世界就是这么神奇，让人激动，也让人困惑。
在函数WebSite中，我们使用到了this关键字，其意义和Java中一样，指向当前创建的对象csdnSite，其中csdnSite.name的值为“csdn”。
读者读到这，我很乐意分享我的一个心得，就是：当某一函数中出现this关键字，则设计该函数的童鞋（同学）十有八九希望在哪个地方生成其实例，并通过this引用该实例。（PS：研究别人代码，这是一个关键信息，本人亲身体会，百试不爽！）

3 总结

最后我们总结出以下几点，望对大家有益：
1. 使用首字母大写的标识符作为区分构造函数与普通函数的标识；在构造函数中使用this进行对象的引用，并进行赋值操作；
2. 通过new操作符生成的对象，我们将认为其标识符就是该对象对应的类名；该对象即为该类的一个实例；
3. 字面量{}将生成一个Object类的实例，其效果就是new Object()，Java中无此语法；其他类Number、String、Array都有对应的字面量，注意区分。