浅析js的工厂函数、构造函数

_DangJin 发布于2019-08-26 10:10 / 1329人阅读

摘要：首先，说下工厂函数。应对某些场景，工厂函数并不能满足我们，如我需要判断树是不是动物类型你会发现你并没办法。这时候构造函数就出现了我的性别是猴子母猴子我的性别是母跟工厂函数很像，只是没有了创建对象和，并且都用添加属性。

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

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。就好比你是你爸爸的后代，但同时也是你爷爷的后代。

海外云主机服务器托管 JS构造函数工厂函数 js视频 ava类中的构造函数构造函数

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/105716.html

js面向对象浅析---对象创建的几种常见方式

摘要：前言虽然使用构造函数或者使用对象字面量可以很方便的用来创建一个对象，但这种方式有一个明显的缺点使用一个接口创建多个对象会产生很多冗余的代码。即调用构造函数所创建的那个对象的原型对象好处是可以让所有对象的实例共享他的属性的方法。前言虽然使用Object构造函数或者使用对象字面量可以很方便的用来创建一个对象，但这种方式有一个明显的缺点：使用一个接口创建多个对象会产生很多冗余的代码。因此...

Invoker 2019-08-21 10:46 评论0 收藏0
Vue源码浅析之异步组件注册

showImg(https://segmentfault.com/img/bVba39I?w=400&h=400); Vue的异步组件注册 Vue官方文档提供注册异步组件的方式有三种: 工厂函数执行 resolve 回调工厂函数中返回Promise 工厂函数返回一个配置化组件对象工厂函数执行 resolve 回调我们看下 Vue 官方文档提供的示例: Vue.component(asyn...

Shonim 2019-08-23 18:07 评论0 收藏0
JS或Jquery

摘要：大潮来袭前端开发能做些什么去年谷歌和火狐针对提出了的标准，顾名思义，即的体验方式，我们可以戴着头显享受沉浸式的网页，新的标准让我们可以使用语言来开发。 VR 大潮来袭 --- 前端开发能做些什么去年谷歌和火狐针对 WebVR 提出了 WebVR API 的标准，顾名思义，WebVR 即 web + VR 的体验方式，我们可以戴着头显享受沉浸式的网页，新的 API 标准让我们可以使用 ...

CatalpaFlat 2019-08-22 11:17 评论0 收藏0
JavaScript系列--浅析原型链与继承

摘要：综上所述有原型链继承，构造函数继承经典继承，组合继承，寄生继承，寄生组合继承五种方法，寄生组合式继承，集寄生式继承和组合继承的优点于一身是实现基于类型继承的最有效方法。一、前言继承是面向对象（OOP）语言中的一个最为人津津乐道的概念。许多面对对象（OOP）语言都支持两种继承方式:：接口继承和实现继承。接口继承只继承方法签名,而实现继承则继承实际的方法。由于js中方法没有签名...

draveness 2019-08-23 18:06 评论0 收藏0
浅析Vue响应式原理（一）

摘要：浅析响应式原理一的特点之一是响应式，视图随着数据的更新而更新，在视图中修改数据后实例中的数据也会同步更新。对于每个响应式数据，会有两个实例，第一个是在中的闭包遍历，用途显而易见。接收一个回调函数，会在重新求值且值更新后执行。浅析Vue响应式原理（一） Vue的特点之一是响应式，视图随着数据的更新而更新，在视图中修改数据后Vue实例中的数据也会同步更新。内部借助依赖(下文中的Dep类)...

lookSomeone 2019-08-23 13:42 评论0 收藏0