如果你从其他语言转到javascript语言的开发,你会发现有很多让你晕掉的术语,其中工厂函数(factory function)和构造函数(constructor function)就是其中的一个。本文试图理顺这两者之间的区别.

Factory functions

工厂函数是将返回一个新的object的任何不是类或者构造函数的函数。在js中,任何函数都能够返回一个object.如果我们不是通过new function()的方式来获得这个对象的,那么她就是一个factory工厂函数.

function person(firstName, lastName, age) {
const person = {};
person.firstName = firstName;
person.lastName = lastName;
person.age = age;
return person;
}

上面的js代码会创建一个new object并且将传入的参数赋值给到该object的属性上,并且返回该new object.

Constructor functions

工厂函数和构造函数区别仅仅在于其用户场景use case以及约定俗成的convention不同,基本上两者是相似的。对于构造函数,人们惯例convention使用首字母大写方式来表示这是一个constructor构造函数.构造函数往往其use case是需要需要通过 new 关键字调用返回类似对象的场景,并且随后我们可以通过 instanceof 关键字来做实例类型检查的场景。

function Person(firstName, lastName, age) {
this.firstName = firstName;
this.lastName = lastName;
this.age = age;
}

通过new关键字来创建新的对象objects

如上面所说,工厂函数和构造函数基本上是一样的,你现在估计有以下问题:

1. 我们可以对工厂函数来使用 new 关键字吗?

2.如果针对工厂函数和构造函数,我们使用 new 关键字将会发生什么呢?

3. 如果针对构造函数并不使用 new 关键字去创造对象会怎么样呢?

下面我们将试图回答上面的几个问题.

我们先使用new关键,应用到工厂函数和构造函数身上,并且console.log打印以下,看看有什么不同.

使用 new factory 函数

function person(firstName, lastName, age) {
const person = {};
person.firstName = firstName;
person.lastName = lastName;
person.age = age;
return person;
}
const mike = new person('mike', 'grand' 23);

使用constructor function

function Person(firstName, lastName, age) {
this.firstName = firstName;
this.lastName = lastName;
this.age = age;
}
const mike = new Person('mike', 'grand', 23);

new操作符的背后

通过 new 构造函数方式创建object时有以下几个过程发生:

function Person(firstName, lastName, age) {
// this = {};
// this.__proto__ = Person.prototype;
// Set up logic such that: if
// there is a return statement
// in the function body that
// returns anything EXCEPT an
// object, array, or function:
// return this (the newly
// constructed object)
// instead of that item at
// the return statement;
this.firstName = firstName;
this.lastName = lastName;
this.age = age;
// return this;
}

上面的// 注释行内容就是当使用new ConstructFunction()创建新对象时js引擎自动增加的部分伪代码。

1.创建一个新的空object并且bind到this关键字

2.设置该对象的__proto__指向为构造函数的prototype.

3.增加以下逻辑:如果函数体中有return语句,但是返回的如果不是Object,array,或者function的话,则直接返回this指针

4.返回this object

我们把上面的逻辑增加到普通的函数体内,看看new factory调用时的结果:

function person(firstName, lastName, age) {
// this = {};
// this.__proto__ = Person.prototype; // Set up logic such that: if
// there is a return statement
// in the function body that
// returns anything EXCEPT an
// object, array, or function:
// return this (the newly
// constructed object)
// instead of that item at
// the return statement;
const person = {};
person.firstName = firstName;
person.lastName = lastName;
person.age = age;
return person;
// return this;
}

我们看到由于person是一个object,因此return this就会被忽略,而是直接返回person对象。

如果使用构造函数时,忘记使用 new 关键字,会怎样?

function Person(firstName, lastName, age) {
this.firstName = firstName;
this.lastName = lastName;
this.age = age;
}
const mike = new Person('mike', 'grand', 23);
const bob = Person('bob', 'grand', 23);

我们可以看到bob为undefined,原因是Person函数本身并没有返回任何内容,因此bob就为undefined.

但是我们会发现firstName,lastName和age这几个属性都被添加到了window全局对象上了。

https://medium.com/@chamikakasun/javascript-factory-functions-vs-constructor-functions-585919818afe

javascript工厂函数(factory function)vs构造函数(constructor function)的更多相关文章

  1. JavaScript中的类(class)、构造函数(constructor)、原型(prototype)

    类 Class 类的概念应该是面向对象语言的一个特色,但是JavaScript并不像Java,C++等高级语言那样拥有正式的类,而是多数通过构造器以及原型方式来仿造实现.在讨论构造器和原型方法前,我可 ...

  2. js工厂函数创建对象与对象构造函数的理解

    工厂函数,顾名思义,就是通过一个"工厂的加工" 来创建一个对象的函数 //工厂函数 function createPerson(name,sex){ sex = sex == '男' ? '女' : ...

  3. JavaScript中的工厂函数

    所谓工厂函数,就是指这些内建函数都是类对象,当你调用他们时,实际上是创建了一个类实例. 在学习jQuery的时候,我们经常会看到“工厂函数”这个概念,那么究竟什么是“工厂函数”呢?我们来看看概念,“所 ...

  4. javascript匿名函数应用

    1.给指定对象新增一些属性的写法: /*给一个对象增加属性*/ var myDate=(function(obj){ obj.addName=function(name){ this.name=nam ...

  5. 关于props default 数组/对象的默认值应当由一个工厂函数返回

    export default {props: { xAxisData: {   type: Array,   default: [] }, },这是我的代码 报错是Invalid default va ...

  6. Javascript我学之六对象工厂函数与构造函数

    本文是金旭亮老师网易云课堂的课程笔记,记录下来,以供备忘. 概述 使用对象字面量,或者向空对象中动态地添加新成员,是最简单易用的对象创建方法. 然而,除了这两种常用的对象创建方式,JavaScript ...

  7. JavaScript中的构造函数和工厂函数说明

    在cnblog上看到一篇文章,讲解JS中的构造函数和工厂函数,觉得讲的真好 JavaScript中的工厂函数和构造函数都能用来创建一个对象,我们可以来看看下面的例子 构造函数 function cre ...

  8. Invalid default value for prop "value": Props with type Object/Array must use a factory function to return the default value.(props default 数组/对象的默认值应当由一个工厂函数返回)

    Invalid default value for prop "value": Props with type Object/Array must use a factory fu ...

  9. [从jQuery看JavaScript]-匿名函数与闭包(Anonymous Function and Closure)【转】

    (function(){ //这里忽略jQuery所有实现 })(); 半年前初次接触jQuery的时候,我也像其他人一样很兴奋地想看看源码是什么样的.然而,在看到源码的第一眼,我就迷糊了.为什么只有 ...

随机推荐

  1. React中ref的三种用法 可以用来获取表单中的值 这一种类似document.getXXId的方式

    import React, { Component } from "react" export default class MyInput extends Component { ...

  2. linux (04) linux安装mysql

    https://www.cnblogs.com/pyyu/p/9467289.html mysql博客 一.mysql (分支 mariadb) 1.安装mariadb ​ -yum ​ -源码编译安 ...

  3. Codeforces 1278F: Cards

    题目传送门:CF1278F. 题意简述: 有 \(n\) 个独立随机变量 \(x_i\),每个随机变量都有 \(p = 1/m\) 的概率取 \(1\),有 \((1-p)\) 的概率取 \(0\). ...

  4. Linux 怎样更改locale语言设置

    推荐使用UTF8编码,因为这是国际标准,能兼容任何语言的编码.在CentOS VPS下修改语言编码: localedef -c -f UTF-8 -i zh_CN zh_CN.utf8 export ...

  5. 【Spring IoC】Spring Bean(三)

    一.Spring Bean的定义 被称作 bean 的对象是构成应用程序的支柱也是由 Spring IoC 容器管理的.bean 是一个被实例化,组装,并通过 Spring IoC 容器所管理的对象. ...

  6. Gson:

  7. 单交换机VLAN划分(基于Cisco模拟器)

    实验目的: (1)掌握交换机配置的几种模式及基本配置命令. (2)掌握VLAN的原理及基于交换机端口的VLAN划分方法. 实验设备: 交换机一台,主机四台,直通线四根 实验步骤: 1.给交换机划分VL ...

  8. [LeetCode] 92. Reverse Linked List II 倒置链表之二

    Reverse a linked list from position m to n. Do it in one-pass. Note: 1 ≤ m ≤ n ≤ length of list. Exa ...

  9. ros wifi把信号弱的客户端踢出去的脚本

    以下脚本为小于75强度的都踢出去 非capman脚本: /interface wireless registration-table :do {:foreach i in=[find] do={:lo ...

  10. Windows10 64位部署odoo12开发环境

    预装Windows10 64位家庭版电脑一台 2019年7月 安装Python,这里的版本选择上有个坑,不要装最新的Python 3.7.x,原因是odoo12依赖pillow 4.0.0库,而这个4 ...