社区首页 >专栏 >javascript 面向对象（多种创建对象的方式）

javascript 面向对象（多种创建对象的方式）

柴小智

发布于 2018-04-10 09:20:11

98900

代码可运行

文章被收录于专栏：菜鸟计划菜鸟计划

运行总次数：0

代码可运行

创建对象

第一种：基于Object对象

var person = new Object();
person.name = 'My Name';
person.age = 18;
person.getName = function(){
    return this.name;
}

第二种：对象字面量方式（比较清楚的查找对象包含的属性及方法）

var person = {
    name : 'My name',
    age : 18,
    getName : function(){
        return this.name;
    }
}

使用Object构造函数或对象字面量都可以创建对象，但缺点是创建多个对象时，会产生大量的重复代码，因此下面介绍可解决这个问题的创建对象的方法

1、工厂模式

function createPerson(name, age) {
    var o = new Object();
    o.name = name;
    o.age = age;
    o.getAge = function () {
        return this.age;
    };
    return o;
}
var person = createPerson('张三', 23);　　
console.log(person.name);    　//'张三'
console.log(person.age);　　　　//23
console.log(person.getAge());　　//23

缺点：创建对象交给一个工厂方法来实现，可以传递参数，但主要缺点是无法识别对象类型，因为创建对象都是使用Object的原生构造函数来完成的。

2、构造函数模式

function Person(name, age) {
    this.name = name;
    this.age = age;
    this.getAge = function () {
        return this.age;
    };
}
var person = new Person('张三', 23);
console.log(person.name);　　//'张三'
console.log(person.age);　　 //23
console.log(person.getAge());　　//23

2.1 使用自定义的构造函数（与普通函数一样，只是用它来创建对象），定义对象类型（如：Person）的属性和方法。它与工厂方法区别在于：

没有显式地创建对象
直接将属性和方法赋值给this对象；
没有return语句；

此外，要创建Person的实例，必须使用new关键字，以Person函数为构造函数，传递参数完成对象创建；

2.2 要创建 Person 的新实例，必须使用 new 操作符。以这种方式调用构造函数实际上会经历以下 4个步骤：

(1) 创建一个新对象； (2) 将构造函数的作用域赋给新对象（因此 this 就指向了这个新对象）； (3) 执行构造函数中的代码（为这个新对象添加属性）； (4) 返回新对象。

在前面例子的最后， person1 和 person2 分别保存着 Person 的一个不同的实例。这两个对象都有一个 constructor （构造函数）属性，该属性指向 Person ，如下所示。 alert(person1.constructor == Person); //true alert(person2.constructor == Person); //true

对象的 constructor 属性最初是用来标识对象类型的。

创建自定义的构造函数意味着将来可以将它的实例标识为一种特定的类型；而这正是构造函数模式胜过工厂模式的地方。

function Person(name, age) {
    this.name = name;
    this.age = age;
    this.getAge =  new Function ("return this.age");　　//和上面是一样的，会重复创建多个函数
}

缺点：上述代码，创建多个实例时，会重复调用new Function();创建多个函数实例，这些函数实例还不是一个作用域中，当然这一般不会有错，但这会造成内存浪费。

3、原型模式

function Person(name) {
    this.name = name;
}
Person.prototype.age = 23;
Person.prototype.getAge = function () {
    return this.age;
};
var person = new Person('张三');
console.log(person.name);　　//'张三'
console.log(person.age);　　//23
console.log(person.getAge());　　//23

JS每个函数都有一个prototype(原型)属性，这个属性是一个指针，指向一个对象，它是所有通过new操作符使用函数创建的实例的原型对象。

原型对象最大特点是，所有对象实例共享它所包含的属性和方法，也就是说，所有在原型对象中创建的属性或方法都直接被所有对象实例共享。

实例属性或方法的访问过程是一次搜索过程：

首先从对象实例本身开始，如果找到属性就直接返回该属性值；
如果实例本身不存在要查找属性，就继续搜索指针指向的原型对象，在其中查找给定名字的属性，如果有就返回；

基于以上分析，原型模式创建的对象实例，其属性是共享原型对象的；但也可以自己实例中再进行定义，在查找时，就不从原型对象获取，而是根据搜索原则，得到本实例的返回；简单来说，就是实例中属性会屏蔽原型对象中的属性；

可以通过使用hasOwnProperty()方法来判断，属性是实例本身的，还是原型上的。

person.hasOwnProperty("name");    //true        
person.hasOwnProperty("age");       //false

缺点：最主要是当对象的属性是引用类型时，它的值是不变的，总是引用同一个外部对象，所有实例对该对象任何一个地方产生的改动会引起其他实例的变化。

function Person(name) {
    this.name = name;
}
Person.prototype.age = 23;
Person.prototype.color = ['red', 'yellow']; 
var person1 = new Person('张三');
console.log(person1.name);　　//'张三'
console.log(person1.color);　　//["red", "yellow"]
person1.color.push('black');　　
var person2 = new Person('李四');
console.log(person2.name);　　//'李四'
console.log(person2.color);　　//["red", "yellow", "black"]　　//person1的修改影响了person2

4、组合使用构造函数模式及原型模式

目前最为常用的定义类型方式，是组合使用构造函数模式与原型模式。

构造函数模式用于定义实例的属性，而原型模式用于定义方法和共享的属性。结果，每个实例都会有自己的一份实例属性的副本，但同时又共享着对方方法的引用，最大限度的节约内存。

此外，组合模式还支持向构造函数传递参数，可谓是集两家之所长。

function Person(name, age) {
    this.name = name;
    this.age = age;
    this.color = ['red', 'yellow'];
}
Person.prototype = {
    constructor : Person,　　//原型字面量形式会将对象的constructor变Object，此外强制指回Person；
    getAge : function () {
        return this.age;
    }
};
var person1 = new Person('张三', 23);
person1.color.push('black');
console.log(person1.name);　　//张三
console.log(person1.color);　　//["red", "yellow", "black"]
console.log(person1.getAge());　　//23
var person2 = new Person('李四', 24);
console.log(person2.name);　　//李四
console.log(person2.color);　　//['red','yellow']　　
console.log(person2.getAge());　　//24

5、动态原型模式

组合模式中实例属性与共享方法（由原型定义）是分离的，这与纯面向对象语言不太一致；动态原型模式将所有构造信息都封装在构造函数中，又保持了组合的优点。其原理就是通过判断构造函数的原型中是否已经定义了共享的方法或属性，如果没有则定义，否则不再执行定义过程。该方式只原型上方法或属性只定义一次，且将所有构造过程都封装在构造函数中，对原型所做的修改能立即体现所有实例中：

function Person(name, age, job) {
    this.name = name;
    this.age = age;
    this.job = job;
    this.lessons = ['Math', 'Physics'];
}
if (typeof this.getName != 'function') {//通过判断实例封装
　　Person.prototype = {
　　　　constructor: Person,//原型字面量方式会将对象的constructor变为Object，此外强制指回Person
　　　　getName: function () {
　　　　　　return this.name;
　　　　}
　　}
}
var person1 = new Person('Jack', 19, 'SoftWare Engneer');
person1.lessons.push('Biology');
var person2 = new Person('Lily', 39, 'Mechanical Engneer');
alert(person1.lessons);//Math,Physics,Biology
alert(person2.lessons);//Math,Physics
alert(person1.getName === person2.getName);//true,//共享原型中定义方法