1. 首页
  2. SEO百科
  3. Web前端

浅析js的工厂函数、构造函数使用帮助_函数零基础入门

首先,说下工厂函数。顾名思义,就好比一个工厂一样,可以批量制造某种类型的东西。其实说白了就是封装了个方法减少重复工作,相信稍微有点码龄的人都懂。上代码:function animal (name,sex) {let obj = new Object()obj.name = nameobj.sex = sexobj.saySex = function () {

浅析js的工厂函数、构造函数使用帮助

首先,说下工厂函数。顾名思义,就好比一个工厂一样,可以批量制造某种类型的东西。其实说白了就是封装了个方法减少重复工作,相信稍微有点码龄的人都懂。上代码:

浅析js的工厂函数、构造函数使用帮助_函数零基础入门

function animal (name,sex) {
        let obj = new Object()
        obj.name = name
        obj.sex = sex
        obj.saySex = function () {
            alert(`我的性别是${this.sex}`)
        }
        return obj
    }
    let monkey = animal('猴子','母')
    console.log(monkey.name)    //猴子
    monkey.saySex()             //我的性别是母

这样写主要是为了解决需要创建大量有属性重叠的对象,如果每个都new一下,然后逐一添加属性。这也是个累人的活。通过上面的代码中,我们声明了一个animal方法,此方法可批量制造动物。这样每次只需要简单的一行代码就可以搞定一个动物的创建。

方便虽然方便,但是还是有缺点。就是每次新建的时候都需要在内部创建一个对象,然后进行一系列操作,最后返回。也就是说创建十次,那么就会创建十次全新的对象,然后返回并赋值。这样创建的十个对象在代码间的关系是没有的,换句话说就是我们都产自动物,但是谁都不知道我们我们产自哪里。

应对某些场景,工厂函数并不能满足我们,如:我需要判断树是不是动物类型,你会发现你并没办法。只能知道他是Object。这时候构造函数就出现了:

function animal (name,sex) {
        this.name = name
        this.sex = sex
        this.saySex = function () {
            alert(`我的性别是${this.sex}`)
        }
    }
    let monkey = new animal('猴子','母')
    console.log(monkey.name)    //猴子
    monkey.saySex()             //我的性别是母

跟工厂函数很像,只是没有了创建对象和return,并且都用this添加属性。声明新对象的时候通过new关键字。这样做的好处是,新建的对象间是有关系的,我们检测下:

console.log(monkey instanceof animal)     //true
console.log(monkey instanceof Object)     //true

我们可以看到,他的类型既是animal也是Object。就好比你是你爸爸的后代,但同时也是你爷爷的后代。

海计划公众号