工厂顾名思义简单来说就是流水线批量生产
1.普通方法创建对象
var obj = {
name:'小明',
age:'18',
gender:"男",
sayName:function(){
alert(this.name)
}
}
var obj2 = {
name:'小红',
age:'13',
gender:"女",
sayName:function(){
alert(this.name)
}
}
console.log(obj.sayName());//小明
console.log(obj2.sayName());//小红
这种普通方法创建对象,只能创建一次对象,复用性比较差。想要简化那就要采用工厂方法进行创建对象。
2.工厂方法创建对象
function createFactory(name,age,gender){
var obj = new Object()
obj.name = name
obj.age = age
obj.gender = gender
obj.sayName = function(){
alert(this.name)
}
return obj
}
var obj2 = createFactory("小明",18,"男")
var obj3 = createFactory("小红",12,"女")
var obj4 = createFactory("张三",16,"男")
console.log(obj2);
console.log(obj3);
console.log(obj4);
这样就可以批量创建对象了,只需要在调用函数时传递参数即可。
3.工厂方法的缺点
它没有解决对象识别的问题,发现所有的对象类型都是Object,导致我们无法分出多种不同的类型对象。
例如:创建一个动物的对象
function createAnimal(name,age){
var obj = new Object()
obj.name = name
obj.age = age
sayHello = function(){
alert("我是小动物")
}
return obj
}
console.log(createAnimal("小羊",2));
返回的都是Object类型的无法区分。
4.想要区分使用构造函数创建对象
首先我们要了解什么是构造函数,构造函数就是普通的函数,创建方式和普通函数没有区别,不同的是构造函数习惯上首字母大写比如(Abc)
*构造函数和普通函数的区别,普通函数是直接调用(fun())
而构造函数需要使用new关键字来调用(new Fun())
构造函数的执行流程
1.首先创建一个新对象
2.将新建的对象设置为函数中this,在构造函数中可以使用this来引用新建的对象
3.逐行执行函数中的代码
4.将新建的对象作为返回值返回
this的情况:
①当以函数的形式调用时,this是window
function fun(){
console.log(this);
}
fun()//window
②当以方法的形式调用时,谁调用方法就是谁
③当以构造函数的形式调用时,this就是新创建的那个对象
function Factory(name,age,gender){
this.name = name
this.age = age
this.gender = gender
sayName=function(){
console.log(this.name);
}
}
var fac = new Factory("小明",18,"男")
var fac2 = new Factory("小红",12,"女")
console.log(fac);
console.log(fac2);
function Animal(name,age){
this.name = name
this.age = age
sayHello=function(){
console.log("我是小动物");
}
}
var ani = new Animal("旺财",3)
console.log(ani);
</script>
使用同一构造函数创建的对象,我们称为一类对象,也将一个构造函数称为一个类 如上(fac,fac2)就是一类对象
我们将通过一个构造函数创建的对象,称为是该类的实例
如上(fac,fac2就是Factory的实例,ani就是Animal的实例)
看如下打印结果
本质上的区别可以使用instanceof检查是否是一个类的实例
语法:
对象 instanceof 构造函数
如果是返回true,否则返回false
console.log(fac instanceof Factory);//true
console.log(ani instanceof Factory);//false
所有对象都是Object的后代
所以任何对象和Object做instanceof检查时都会返回true(相当于Object是祖宗)
console.log(fac instanceof Object);//true
console.log(ani instanceof Object);//true
5.优化构造函数
创建一个Factory构造函数,在Factory构造函数中,为每一个对象都添加了sayName方法,目前我们的方法是在构造函数内部创建的,也就是构造函数每执行一次就会创建一个新的sayName方法
也就是所有的sayName方法都是唯一的
这样就导致了构造函数执行一次就会创建一个新的方法,这是没有必要的,完全可以使所有的对象共享一个方法
function Factory(name,age,gender){
this.name = name
this.age = age
this.gender = gender
sayName=function(){
console.log(this.name);
}
}
var fac = new Factory("小明",18,"男")
var fac2 = new Factory("小红",12,"女")
fac.sayName()
fac2.sayName()
console.log(fac.sayName==fac2.sayName); //false
优化后
function Factory(name,age,gender){
this.name = name
this.age = age
this.gender = gender
sayName=fun
}
//将sayName方法在全局作用域中定义
function fun(){
console.log(this.name)
}
var fac = new Factory("小明",18,"男")
var fac2 = new Factory("小红",12,"女")
fac.sayName()
fac2.sayName()
console.log(fac.sayName==fac2.sayName); //true
但是这样优化后也有一定的问题
将函数定义在全局作用域,污染了全局作用域的命名空间,别人再使用fun作为函数名的话将会覆盖掉
可以使用向原型中添加sayName方法
function Factory(name,age,gender){
this.name = name
this.age = age
this.gender = gender
}
Factory.prototype.sayName = function(){
console.log(this.name)
}
var fac = new Factory("小明",18,"男")
var fac2 = new Factory("小红",12,"女")
fac.sayName()//小明
fac2.sayName()//小红
这样既可以确保函数只有一个,也不会污染全局作用域
看到这里的小伙伴,不了解原型的我们下篇文章见!