学习JS面向对象基础(3)

101 阅读2分钟

四、构造函数创建对象

面向对象的三大特性:封装、继承和多态。本文将通过学习构造函数创建对象,深刻理解面向对象编程的特性。

1、基础键值对方式创建

学习JS面向对象基础(2)一文中,知道JS基本的创建对象点的方式就是通过使用键值对的方式简单创建对象。

var obj = {
    name: 'zhangsan',
    age: 18,
    showInfo: function () {
        console.log(this.name,this.age);
    }
}

2、内置构造函数方式创建

JS可以通过内置的构造函数与关键字new来创建对象。

var obj = new Object();
obj.name = 'zhangsan';
obj.age = '18';
obj.showInfo = function() {
    console.log(this.name,this.age);
};

当然,这种方式与键值对方式创建的原理一致,如果需要大量创建相同结构但数值不同的对象时,就会出现大量重复的代码,此时就可以通过封装成复用函数的方式来简化代码。

function creatObject(name, age) {
    var obj = new Object();
    obj.name = name;
    obj.age = age;
    obj.showInfo = function() {
        console.log(this.name,this.age);
    }
    return obj;
}
var obj1 = creatObject('lisi', 10);
console.log(obj1);

这种封装复用函数,当需要不同的对象,就调用复用函数,传入不同的形态即可实现。这种针对定义对象的函数,可以称为“工厂函数”。

3、自定义构造函数方式创建

除了JS的内置构造函数外,JS也允许自定义构造函数,自定义的方式与普通的函数定义基本一致。

function CreatObject() {
    this.name = name;
    this.age = age;
    this.showInfo = function() {
        console.log(this.name,this.age);
    }
}
var obj2 = new CreatObject('wangwu', 12);
console.log(obj2);

从上面的例子中,可以看出自定义构造函数与工厂函数虽有相似之处,但一些地方也有很大的区别。可以通过这些不同区分两者,这些区别是:

  1. 函数名,自定义构造函数名必须首字母大写,用于说明;
  2. 使用自定义构造函数时,需要一起使用new关键字;
  3. 在函数体中,自定义构造函数无需像工厂函数一样,需要使用new关键字,创建对象并使用return关键字返回创建的对象。

其实,自定义构造函数的创建流程,就是在首字母大写的自定义函数定义成自定义构造函数,然后内部会与工厂函数一样,会默认创建一个new Object(),并通过this关键字,添加属性和方法,并自动return返回。