工厂模式
【1】定义
工厂模式是一种软件工程领域一种广为人知的设计模式,这种模式抽象了创建对象的过程,因为ECMAScript无法穿类,所以开发人员就发明一个函数,用函数来封装以特定的接口创建对象。简单理解:通过函数封装对象,并通过调用函数来调用封装的对象。通过调用多次函数从而创建多次不同的对象。
【2】代码
工厂模式有返回值,因为通过调用函数会把把函数返回值(这里就是函数封装的对象obj)给返回,然后我们通过声明一个变量person1去接收,此时变量person1里面存的就是对象,然后通过对象调用属性与方法,如果没有返回值就会报错。
function person(name, age) {
let obj = new Object();
obj.name = name;
obj.age = age;
obj.sayHi = function () {
console.log("您好");
};
return obj;
}
let person1 = person("Demi", 18)
console.log(person1.name) // Demi
console.log(person1.age) // 18
person1.sayHi() // 您好
构造函数
【1】定义
构造函数 ,是一种特殊的方法。主要用来在创建对象时初始化对象, 即为对象成员变量赋初始值,总与new运算符一起使用在创建对象的语句中。特别的一个类可以有多个构造函数 ,可根据其参数个数的不同或参数类型的不同来区分它们,即构造函数的重载。在 JavaScript 中,用 new 关键字来调用的函数,称为构造函数。构造函数首字母一般大写
【2】代码
构造函数的首字母必须大写(这里的构造函数是Person),用来区分于普通函数,内部使用的this对象,来指向即将要生成的实例对象,使用New来生成实例对象
function Person(name, age) {
this.name = name;
this.age = age;
this.sayHi = function () {
console.log("您好");
};
}
let person2 = new Person("dingFY", 20);
console.log(person2.name) // dingFY
console.log(person2.age) // 20
person2.sayHi() // 您好
new实例化过程
通过上面代码比较,我们会发现工厂模式创建了一个空对象obj,并且返回了这个对象,但是构造函数没有这一步,那是因为new实例化对象已经帮我们做了以下操作
- 创建一个空对象 obj;
- 将新创建的空对象的隐式原型指向其构造函数的显示原型。
- 使用 call 改变 this 的指向
- 如果无返回值或者返回一个非对象值,则将 obj 返回作为新对象;如果返回值是一个新对象的话那么直接直接返回该对象。
let person2 = new Person("dingFY", 20);
// new Person() 实例化过程
new Person("dingFY", 20) {
var obj = {};
obj.__proto__ = Person.prototype;
var result = Person.call(obj, "dingFY", 20);
return typeof result === 'obj' ? result : obj;
}
区别总结
共同点:都是函数,都可以创建对象,都可以传入参数
不同点:
工厂模式:
- 函数名是小写
- 有new
- 有返回值
- new之后的对象是当前的对象
- 直接调用函数就可以创建对象
自定义构造函数:
- 函数名是大写(首字母)
- 没有new
- 没有返回值
- this是当前的对象
- 通过new的方式来创建对象
文章每周持续更新,可以微信搜索「 前端大集锦 」第一时间阅读,回复【视频】【书籍】领取200G视频资料和30本PDF书籍资料