深入理解JavaScript的创建对象(构造函数、原型对象、实例)

本文介绍了JavaScript中五种创建对象的方式:工厂模式、构造函数模式、原型模式、组合使用构造函数和原型模式及动态原型模式。重点讲解了每种模式的特点、优缺点及适用场景。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.由于JavaScript无法创建类,所以采用函数来封装以特定接口创建对象,采用工厂模式:

function createPerson(name, age, job) {
    var o = new Object();
    o.name = name;
    o.age = age;
    o.job = job;
    o.sayName = function() {
        alert(this.name);
    };
    return o;
}

var person1 = createPerson('Jack', 30, 'Software Engineer');
var person2 = createPerson('Lucy', 22, Writer);

这个模式虽然解决了创建多个相似对象的问题,但是没有解决对象识别(怎么知道一个对象的类型)。

2.构造函数模式

function Person(name, age, job) {
    this.name = name;
    this.age = age;
    this.job = job;
    this.sayName = function() {
        alert(this.name);
    };
}

var person1 = new Person('Jack', 30, 'Software Engineer');
var person2 = new Person('Lucy', 22, 'Writer');

我们看到Person和createPerson有几个不同之处:

  • 没有显式的创建对象;
  • 直接将属性和方法赋给了this对象;
  • 没有return语句。

虽然构造函数不需要创建一个对象,能动态识别对象类型,很好用,但是每次实例化一个对象时,相同的方法都要重新创建一遍。前面的person1和person2都有一个名为sayName的方法,但是这两个方法不是同一个Function实例。创建两个完成同样任务的Function实例是没有必要的,有this对象在,根本不用在执行代码前就把函数绑定到特定对象上面。因此,可以把具有相同方法的函数移动构造函数外面来解决这个问题。

function Person(name, age, job) {
    this.name =name;
    this.age =age;
    this.job = job;
    this.sayName = sayName;
}
function sayName() {
    alert(this.name);
}

var person1 = new Person('Jack', 30, 'Software Engineer');
var person2 = new Person('Lucy', 22, 'Writer');

我们将sayName属性设置成全局函数,sayName包含的是一个指向函数的指针,因此person1和person2共享了在全局作用域中定义的同一个sayName函数,虽然这解决了共享问题,但是新问题又来了:在全局作用域中定义的函数实际上只能被某个对象调用,并且如果对象需要定义很多方法,那么就要定义很多个全局函数,于是我们这个自定义的函数就丝毫没有封装性可言了。接下来使用原型模式来解决。

3.原型模式
我们创建的每个函数都有一个prototype(原型)属性,这个属性是一个指针,指向一个对象,prototype就是构造函数的实例化对象的原型对象。使用原型对象的好处是可以让所有对象实例共享它所包含的属性和方法。换句话说就是:不必在构造函数中定义对象实例的信息(如属性或者方法),而知直接把这些信息添加到原型对象中,如下:

function Person() {
}
Person.prototype.name = 'Jack';
Person.prototype.age = 30;
Person.prototype.job = 'Software Engineer';
Person.prototype.sayName = function() {
    alert(this.name);
}

var person1 = new Person();
person1.sayName(); //Jack

var person2 = new Person();
person2.sayName(); //Jack
alert(person1.sayName == person2.sayName); //true

将sayName和所有属性全部都加到了Person的prototype属性中,构造函数成了空函数。即使如此,仍然可以通过调用构造函数来创建新对象,而且新对象还会具有相同的属性和方法。这些属性和方法是由所有实例共享的。

接下来看看原型模式的工作原理:
创建一个新函数,JavaScript就会为该函数创建一个prototype属性,这个属性指向函数的原型对象。在默认情况下,所有原型对象都会自动获得一个constructor属性,这个属相是一个指向prototype属相所在函数的指针。那上面的例子说Person.prototype.constructor指向Person。而通过这个构造函数,我们还可以继续为原型对象添加其他属性和方法。当调用构造函数创建一个新实例后,该实例的内部将包含一个指针(内部属性),指向构造函数的原型对象。
下图是显示了上面代码的原理:
这里写图片描述

Person.prototype指向了原型对象,Person.prototype.constructor又指回了Person。Person两个实例person1和person2够包含一个内部属性,指向了Person.prototype原型对象,换句话说他们与构造函数没有直接的关系。虽然外部无法访问[[Prototype]],但是可以通过isPrototypeOf()方法确定对象之间是否存在这种关系。该方法的参数是指向参数的[[Prototype]]的原型对象:

alert(Person.prototype.isPrototypeOf(person1)); //true
alert(Person.prototype.isPrototypeOf(person2)); //true

这里使用原型对象的isPrototypeOf方法测试person1和person2。
在ES5新增了个方法Object.getPrototypeOf(),获取[[Prototype]]的值,可以很方便的取得一个对象的原型。

alert(Object.getPrototypeOf(person1) == Person.prototype); //true,确定返回的对象实际就是该对象的原型
alert(Object.getPrototypeOf(person1).name); //Jack,获取原型对象中name属性的值

原型模式中所有属性和方法被多个实例所共享,对于函数非常合适。但是对于包含引用类型值得属相来说,就会有问题:

function Person() {
}
Person.prototype = {
    constructor: Person,
    name: 'Jack',
    age: 30,
    job: 'Writer',
    friends: ['Jay', 'Shen'],
    sayName: function() {
        alert(this.name);
    }
};

var person1 = new Person();
var person2 = new Person();
person1.friends.push('Li');

alert(person1.friends); //Jay,Shen,Li
alert(person2.friends); //Jay,Shen,Li
alert(person1.friends === person2.friends); //true

我们只想要person1.friends添加内容,但是person2.friends也能获取其他实例的内容,这不是我们想要的,实例有共同的东西,也有自己的属性,通过组合使用构造函数模式和原型模式可以解决这个问题并且还支持传递参数:

function Person(name, age, job) {
    this.name = name;
    this.age = age;
    this.job = job;
    this.friends = ['Jay', 'Shen'];
}
Person.prototype = {
    constructor: Person,
    sayName: function() {
        alert(this.name);
    }
}

var person1 = new Person('Jack', 29, 'Doctor');
var person2 = new Person('Greg', 22, 'Engineer');
person1.friends.push('li');
alert(person1.friends); //Jay,Shen,li
alert(person2.friends); //Jay,Shen
alert(person1.friends === person2.friends); //false
alert(person1.sayName === person2.sayName); //true

还有一种模式叫做动态模型模式,就是直接在构造函数中初始化原型,把所有信息都封装在构造函数中,可以在有必要初始化原型的时候进行初始化:

function Person(name, age, job) {
    this.name = name;
    this.age = age;
    this.job = job;

    if(typeof this.sayName != 'function') {
        Person.prototype.sayName = function() {
            alert(this.name);
        };
    }
}

var friend = new Person('Jack', 30, 'Engineer');
friend.sayName();

这里对原型所做的修改,能够立即在所有实例中得到反映。if语句检查的可以是初始化之后应该存在的任何属性或方法,不必用一大堆if语句检查每个属性和每个方法;只要检查其中一个即可。使用动态原型模式时,不能使用对象字面量重写原型,会切断现有实例和新原型之间的联系。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值