JavaScript——工厂函数、构造函数、function构造函数

 

工厂函数

理解：可以用来创建实例的函数，这样每一个实例都是独立的，互不影响。

// 如果调用的时候没有传参则默认color为red
function cat(color='red') {
// return一个对象
    return {
        type: 'cat',
        color
    }
}

// 上述是一个带默认参数值的工厂函数

// 实例
const redCat = new Cat() // {type: "cat", color: "red"}
const yellowCat = new Cat('yellow') // {type: "cat", color: "yellow"}

由于实际情况不同，如动物和猫的关系，你可能需要一个动物的工厂函数，但是又不想书写太多的代码，此时可以组合我们的工厂函数：

            function Cat(color='red') {
                return {
                    type: 'cat',
                    color
                }
            }        

            function Animal () {
                return {
                    type: 'animal',
                    // kinds是种类
                    kinds: [
                        Cat()
                        // Dog()
                    ]
                }
            }
            
            // 所以相当于声明动物时候，动物的具体类型也跟着声明
            let animal = new Animal()
            console.log(animal);        

输出结果是：

 

 

优点：解决了创建多个相同属性对象的问题

缺点：无法判断对象的类型，都是object（分不清是哪个函数创建的实例）

 

 

构造函数

demo

//当new去调用一个函数 : 这个时候函数中的this就是创建出来的对象,而且函数的的返回值直接就是this啦(隐式返回)

//new后面调用的函数 : 叫做构造函数

function CreatePerson(name){
    
    this.name = name;
    this.showName = function(){
        alert( this.name );
    };
    
}

var p1 = new CreatePerson('小明');

优点：解决对象类型识别的问题

缺点：如果构造函数中有方法，会存在内存浪费问题。由于方法属于引用数据类型，所以会在内存中为其单独开辟一块空间进行存储，这样当new多个对象实例时就会开辟多个内存空间去存储一个相同的方法，不但浪费内存，还拉低执行效率（用为开辟空间也要时间）。

 

注意：

1. 首字母通常为大写
2. 构造函数调用过程中会经历以下步骤
3. • ①创建一个新的空对象
     ②将构造函数的作用域赋值给此对象(使 this 指向这个新对象)
     ③执行构造函数中的代码(为这个新对象添加属性)
     ④返回新对象
4. 对比于工厂函数，构造函数使用时需要使用 new ，不需要显式的创建一个对象，需要使用 this ，不需要 return 。
5. 构造函数与其他函数的唯一区别，就在于调用它们的方式不同。只要通过new操作符来调用，那它就可以作为构造函数
6. 构造函数的属性和方法又被称为成员，成员分为两类：静态成员和实例成员
   1. 实例成员：构造函数内部通过this添加的成员，只能通过实例化（new出来的）的对象访问
   2. 静态成员：在构造函数本身添加的成员。如Person.hobbies=‘打游戏’；静态成员只能通过构造函数本身来访问。如 console.log(Person.hobbies);使用console.log(person1.hobbies)结果为undefined

 

function构造函数

理解：Function 构造函数创建一个新的 Function 对象。

语法：

new Function ([arg1[, arg2[, ...argN]],] functionBody)

参数：

arg1, arg2, ... argN： 被函数使用的参数的名称必须是合法命名的。参数名称是一个有效的JavaScript标识符的字符串，或者一个用逗号分隔的有效字符串的列表;例如“×”，“theValue”，或“a,b”。

functionBody：一个含有包括函数定义的 JavaScript 语句的字符串。

属性和方法：

全局的 Function 对象没有自己的属性和方法，但是，因为它本身也是一个函数，所以它也会通过原型链从自己的原型链 Function.prototype 上继承一些属性和方法。

　　　　　　  function test(){}
            console.log(test.constructor);
            
            let User = new Function(
                'name',`this.name=name;this.show=function(){console.log(this.name)}`
            )
            let user1 = new User('yui')
            user1.show()
            
            let Book = test.constructor(
                'name','this.name=name;this.show=function(){console.log(this.name)}'
            )
            let book1 = new Book('新青年')
            book1.show()
            
            let a = 'add'
            console.log(a == 'add'?'新增':(a=='edit'?'修改':'查看'));