在js中使用原型链封装类（一）-定义类和新建对象

　　js（es5）是一门弱类型语言，本身没有类的概念，但在现代编程思想中，类是一个非常重要的概念，有了类和对象才能使用面向对象编程思想。当业务逻辑越来越庞大、越来越复杂的时候，面向对象编程思想将会变得越来越重要，一名优秀的前端应该要掌握且懂得灵活运用它。

 

　　本系列文章将介绍如何在js中使用原型链技术（prototype）来封装类，本文不会介绍原型链技术本身，这里假定读者已经掌握了原型链技术。今天我们首先来介绍如何去定义类和新建对象。

 

　　下面我们来看一个最最基础的类的定义

// 学生类
function Student() {
    // 姓名
    this.name = "";
    // 年龄
    this.age = 0;
}
// 打招呼
Student.prototype.hello = function () {
    alert("你好，我的名字叫" + this.name);
};

　　这是一个非常基础的类，相信大家都可以很容易地看出来它的结构。首先这个类的名称叫"Student"，它有2个成员变量"name"和"age"，它有1个成员函数"hello"，如果调用hello函数它就会弹框说出自己的名字。

 

　　当类定义完后，我们便可以新建对象了

var student1 = new Student();
student1.name = "张三";
student1.age = 18;
student1.hello();

　　上面的代码中我们新建了一个学生对象student1，并将其名字赋值为"张三"，将其年龄赋值为18，最后我们调用了他的hello方法，让他进行了自我介绍。

　　至此，通过上面的两段代码，我们完成了类的定义和对象的新建以及成员函数的调用。

 

　　从类定义的写法上我们可以看到，其实所谓的类归根结底也就是一个function，我们通过在function执行时为其添加成员变量，通过prototype原型链为其添加了成员函数，最初定义类时的function其实也是面向对象编程中的构造函数

　　关于析构函数，js有自己的垃圾收集回收机制，该机制是没有面向对象编程思想的，因此我们不需要定义也没办法定义析构函数。如果你确实有一些类似资源释放的动作要执行，你只能自己写一个成员函数（比如dispose），在这个函数里执行想要的释放操作，然后在合适的时候自己写代码调用这个函数。

 

　　下面我们来看怎么给构造函数增加传参

// 学生类
function Student(name, age) {
    // 姓名
    this.name = name;
    // 年龄
    this.age = age;
}

var student1 = new Student("张三", 18);
student1.hello();

　　其实非常简单，我们直接在function的括号中增加参数名称，然后赋值给成员变量即可。这样在新建对象时，我们可以直接在new的时候传入构造函数的参数。

 

　　当构造函数的参数较多时，建议将参数合并成对象来传入，下面我们来看一个稍微进阶一点的例子

// 弹框类
function Popup(settings) {
    if (!settings) settings = {};
    // 标题
    this.title = settings.title || "提示";
    // 弹框宽度
    this.width = settings.width || 600;
    // 弹框高度
    this.height = settings.height || 400;
    // 弹框内容
    this.content = settings.content || "";
}

var popup1 = new Popup({
    title: "警告",
    height: 200,
    content: "数据无法恢复，确定要删除吗？"
});

var popup2 = new Popup();
popup2.title = "警告";

　　上面的例子中，我们定义了一个弹框类，它有4个成员变量，由于构造函数需要传入的参数较多，我们将这些参数合并到了settings中，这样，新建对象时，我们把需要传入的参数合并成一个对象传入即可。同时为了兼容无参数新建对象，使用了一个if判断，如果没有传入settings则将settings赋值为一个空对象以防止后续代码报错。

　　另外注意一下代码中的"||"符号的作用，详细原理这里就不展开了，只说下它实现的效果：如果settings对象中没有定义title属性，那么构造函数将会默认把title成员变量赋值为"提示"，其他属性同理，如此实现了在新建对象时不需要完整给出所有属性，构造函数会给出默认值的效果。

 

　　ok，至此，你已经学会了如何定义一个类、新建一个对象、调用成员函数、定义带参数的构造函数^_^。应该说起来，这些内容都还是比较简单的，但学会这些已经足够大家在日常开发中以面向对象的思想去解决大部分问题了。后面我会介绍类的继承，函数重载等更进阶的技巧