JS自定义对象

目录

• 创建对象的几种方式
• 使用Object或对象字面量创建对象
• 工厂模式创建对象
• 构造函数模式创建对象
• 原型的模式创建对象

创建对象的几种方式

1. 使用Object或对象字面量创建对象
2. 工厂模式创建对象
3. 构造函数创建对象
4. 原型模式创建对象

使用Object或对象字面量创建对象

JS中最基本创建对象的方式：

// Object创建对象
var man = new Object();
man.name = 'zhangsan';
man.age = 18;

// 字面量创建对象
var man = {
    name : 'zhangsan',
    age:18
};

但是当我们要创建同类对象时，我们不得不将以上的代码重复n次....为了解决这个问题，就使用到了工厂模式

工厂模式创建对象

JS中没有类的概念，那么我们使用一种函数将以上对象创建过程封装起来，以便于重复调用，同时可以给出特定接口来初始化对象。

function createMan(name,age) {
    var obj = new Object();
    obj.name = name;
    obj.age = age;
    return obj;
}

var man1 = createMan('zhangsan',18);
var man2 = createMan('lisi',20);

这样我们就通过函数可以不断创建同类对象了。

构造函数模式创建对象

我们不仅希望对象的产生可以像工厂车间一般源源不断，还想知道产生的类型是哪一种类型。在创建原生数组Array类型对象时，我们就使用过其构造函数：

var arr = new Array(10); // 构造一个初识长度为10的数组对象

构造函数和普通函数的区别：

1. 调用方式区别。对于任意函数，使用new操作符调用，那么它就是构造函数；不使用new就是普通函数。
2. 约定俗成，构造函数名以大写字母开头，普通函数以小写字母开头。
3. 使用new操作符调用构造函数时，会经历（1）创建一个新对象；（2）将构造函数作用域赋给新对象（使this指向该对象）；（3）执行构造函数代码；（4）返回新对象；4个阶段。

使用构造函数将工厂模式的函数重写，并添加新方法：

function Student(name,age) {
    this.name = name;
    this.age = age;
    this.alertName = function(){
        alert(this.name)
    };
}

function Fruit(name, color) {
    this.name = name;
    this.color = color;
    this.alertName = function() {
        alert(this.name)
    };
}

这样再分别创建Student和Fruit的对象：

var v1 = new Student('easy',20);
var v2 = new Fruit("apple", "green");

再用instanceof操作符来检测以上对象类型就可以区分出Student以及Fruit了：

alert(v1 instanceof Student); //true
alert(v2 instanceof Student); // false
alert(v1 instanceof Fruit); // false
alert(v2 instanceof Fruit); //true
alert(v1 instanceof Object); // true 所有对象均继承自Object

使用构造器函数通常在js中我们来创建对象。我们会发现Student和Fruit对象中共有同样的方法，当我们进行调用的时候这无疑是内存的消耗。

我们可以在执行该函数的时候再这样做，办法是将对象方法移到构造函数外部：

function Student(name, age) {
    this.name = name;
    this.age = age;
    this.alertName = alerName;
}

function alertName() {
    alert(this.name);
}

var stu1 = new Student("easy", 20);
var stu2 = new Student("easy2", 20);

在调动stu1.alert（）时，this对象才被绑定到stu1上。

通过将alertName（）函数定义为全局函数，这样对象中的alertNAME属性则被设置为指向该全局函数的指针。由此stu1和stu2共享了该全局函数，解决了内存浪费问题。

但是，通过全局函数的方式解决对象内部共享的问题，终究不像一个好的解决方法。如果这样定义的全局函数多了，我们想要将自定义对象封装的初衷便几乎无法实现了。更好的方案是通过原型对象模式来解决。

原型的模式创建对象

原型链甚至原型继承，是整个JS中最难的一部分也是最不好理解的一部分。

function Student() {
    this.name = 'easy';
    this.age = 20;
}


Student.prototype.alertName = function(){
                                alert(this.name);
                              };

var stu1 = new Student();
var stu2 = new Student();

stu1.alertName();  //easy
stu2.alertName();  //easy

alert(stu1.alertName == stu2.alertName);  //true 二者共享同一函数