JavaScript面向对象设计二 构造函数模式
作者:
在Javascript面向对象设计一——工厂模式 中介绍了使用CreateEmployee()函数创建员工类。ECMAScript中的构造函数可以用来创建特定类型的对象,如Object和Array这样的原生构造函数,在运行时会自动出现在执行环境中,此外也可以创建自定义的构造函数,从而创建自定义对象类型的属性和方法
我们将使用构造函数模式将工厂模式进行改写。
function Employee(name, age, job) {
this.name = name;
this.age = age;
this.job = job;
this.sayName = function () {
alert(this.name);
};
}
var Jim = new Employee("jim", 22, "SoftWare Engineer");
var Sun = new Employee("Sun", 24, "Doctor");
Jim.sayName();
Sun.sayName();
在以上代码中Employee函数取代了CreateEmployee函数,Employee中的代码与CreateEmployee中的代码不同如下:
没有显示的创建对象
直接将属性和方法赋给了this对象
没有return语句
要创建Employee类的新实例,必须使用new操作符,实际会经历四个步骤:
创建一个新对象
将构造函数的作用域赋给新的对象
执行构造函数中代码
返回新对象
以上代码最后Jim和Sun中分别保存着Employee的两个不同实例,这两个实例都有一个constructor(构造函数)属性,该属性指向Employee,可以做如下测试
alert(Jim instanceof Employee); //true
alert(Sun instanceof Employee);//true
同时这两个对象又都是Object类型的,可通过如下代码检测。
alert(Jim instanceof Object); //true
alert(Sun instanceof Object);//true
创建自定义的构造函数意味着将来可以把它的实例标石为一种特定的类型,而这也正是构造函数模式胜过工厂模式的地方。
下面详细讲解一下构造函数:
将构造函数当做函数
构造函数与其他函数的唯一区别就在于调用它们的方式不同。但是构造函数也是函数,不存在定义构造函数的特殊语法。其实,任何函数,只有通过new来调用,那他就可以作为构造函数,例如,Employee除了以上用new方法调用外,还可以用如下方式来调用。
//作为普通函数调用
Employee("Sun", 28, "SoftWare Engineer"); //添加到window中
window.sayName();//Sun
构造函数的问题
使用构造函数的主要问题就是都要在每个实力上重新创建一遍,以上两个对象中的sayName方法其实是不同的Function的实例,可以用如下方法证明:
alert(Jim.sayName == Sun.sayName);//false
但是创建两个完成同样任务的Function实例,所以我们对上面的函数进行改写,如下
function Employee(name, age, job) {
this.name = name;
this.age = age;
this.job = job;
this.sayName =sayName;
}
function sayName() {
alert(this.name);
}
这样就解决了两个函数做同一件事情的问题,但是新的问题又会出现了,这个在全局作用域中定义的函数,实际上只能被某个对象引用,而且最要命的问题是,如果对象需要定义很多方法,那么就需要定义很多个全局函数,所以这个自定义的引用类型,就没有任何封装性可言了.
复制代码 代码如下:
function Employee(name, age, job) {
this.name = name;
this.age = age;
this.job = job;
this.sayName = function () {
alert(this.name);
};
}
var Jim = new Employee("jim", 22, "SoftWare Engineer");
var Sun = new Employee("Sun", 24, "Doctor");
Jim.sayName();
Sun.sayName();
在以上代码中Employee函数取代了CreateEmployee函数,Employee中的代码与CreateEmployee中的代码不同如下:
没有显示的创建对象
直接将属性和方法赋给了this对象
没有return语句
要创建Employee类的新实例,必须使用new操作符,实际会经历四个步骤:
创建一个新对象
将构造函数的作用域赋给新的对象
执行构造函数中代码
返回新对象
以上代码最后Jim和Sun中分别保存着Employee的两个不同实例,这两个实例都有一个constructor(构造函数)属性,该属性指向Employee,可以做如下测试
复制代码 代码如下:
alert(Jim instanceof Employee); //true
alert(Sun instanceof Employee);//true
同时这两个对象又都是Object类型的,可通过如下代码检测。
复制代码 代码如下:
alert(Jim instanceof Object); //true
alert(Sun instanceof Object);//true
创建自定义的构造函数意味着将来可以把它的实例标石为一种特定的类型,而这也正是构造函数模式胜过工厂模式的地方。
下面详细讲解一下构造函数:
将构造函数当做函数
构造函数与其他函数的唯一区别就在于调用它们的方式不同。但是构造函数也是函数,不存在定义构造函数的特殊语法。其实,任何函数,只有通过new来调用,那他就可以作为构造函数,例如,Employee除了以上用new方法调用外,还可以用如下方式来调用。
复制代码 代码如下:
//作为普通函数调用
Employee("Sun", 28, "SoftWare Engineer"); //添加到window中
window.sayName();//Sun
复制代码 代码如下:
//在另一个对象的作用域中调用
var o = new Object();
Employee.call(o, "Sun", 28, "SoftWare Engineer");
o.sayName();//Sum
var o = new Object();
Employee.call(o, "Sun", 28, "SoftWare Engineer");
o.sayName();//Sum
构造函数的问题
使用构造函数的主要问题就是都要在每个实力上重新创建一遍,以上两个对象中的sayName方法其实是不同的Function的实例,可以用如下方法证明:
alert(Jim.sayName == Sun.sayName);//false
但是创建两个完成同样任务的Function实例,所以我们对上面的函数进行改写,如下
复制代码 代码如下:
function Employee(name, age, job) {
this.name = name;
this.age = age;
this.job = job;
this.sayName =sayName;
}
function sayName() {
alert(this.name);
}
这样就解决了两个函数做同一件事情的问题,但是新的问题又会出现了,这个在全局作用域中定义的函数,实际上只能被某个对象引用,而且最要命的问题是,如果对象需要定义很多方法,那么就需要定义很多个全局函数,所以这个自定义的引用类型,就没有任何封装性可言了.
您可能感兴趣的文章:
- Javascript面向对象编程(三) 非构造函数的继承
- Javascript面向对象编程(二) 构造函数的继承
- JS面向对象基础讲解(工厂模式、构造函数模式、原型模式、混合模式、动态原型模式)
- js面向对象之常见创建对象的几种方式(工厂模式、构造函数模式、原型模式)
- js面向对象设计用{}好还是function(){}好(构造函数)
- js实现轮播图的两种方式(构造函数、面向对象)
- 不用构造函数(Constructor)new关键字也能实现JavaScript的面向对象
- 深入理解javascript构造函数和原型对象
- JavaScript 构造函数 面相对象学习必备知识
- js构造函数创建对象是否加new问题
- 浅谈javascript构造函数与实例化对象
- JS面向对象编程基础篇(一) 对象和构造函数实例详解