使用工厂方法和构造函数创建对象的区别

工厂顾名思义简单来说就是流水线批量生产

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()//小红

这样既可以确保函数只有一个,也不会污染全局作用域
看到这里的小伙伴,不了解原型的我们下篇文章见！