JavaScript中工厂函数与构造函数示例详解


Posted in Javascript onMay 06, 2019

前言

当谈到JavaScript语言与其他编程语言相比时,你可能会听到一些令人困惑东西,其中之一是工厂函数和构造函数。

工厂函数

所谓工厂函数,就是指这些内建函数都是类对象,当你调用他们时,实际上是创建了一个类实例”。意思就是当我调用这个函数,实际上是先利用类创建了一个对象,然后返回这个对象。由于 Javascript 本身不是严格的面向对象的语言(不包含类),实际上来说,Javascript 并没有严格的“工厂函数”,但是在 Javascript中,我们能利用函数模拟类。来看下面一个例子:

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

上述代码,创建一个新对象,并将传递参数作为属性附加到该对象上并返回新对象。 这是一个简单的 JavaScript 工厂函数。

实际上工厂函数也很好理解了:

  • 它是一个函数。
  • 它用来创建对象。
  • 它像工厂一样,“生产”出来的函数都是“标准件”(拥有同样的属性)

构造函数

不同于其它的主流编程语言,JavaScript的构造函数并不是作为类的一个特定方法存在的;当任意一个普通函数用于创建一类对象时,它就被称作构造函数,或构造器。一个函数要作为一个真正意义上的构造函数,需要满足下列条件:

  • 在函数内部对新对象(this)的属性进行设置,通常是添加属性和方法。
  • 构造函数可以包含返回语句(不推荐),但返回值必须是this,或者其它非对象类型的值。
function Person(firstName, lastName, age) {
 this.firstName = firstName;
 this.lastName = lastName;
 this.age = age;
}

使用 new 关键字创建对象

正如上面所说的,我们可以使用 new 来类或者对象,那么你可能会有以下几个问题:

  • 我们可以在工厂函数中使用 new 关键字吗?
  • 如果我们在工厂和构造函数中使用new关键字会发生什么
  • 如果在使用构造函数创建对象实例时不使用new关键字会发生什么

好的,试着找出以上问题的答案之前,我们先做一个小练习来理解这里面发生了什么。

使用new关键字同时使用工厂和构造函数创建两个对象,接着在控制台打印这两个对象。

使用工厂函数

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);

JavaScript中工厂函数与构造函数示例详解

正如我们在上述所看到的,这里的__proto__ 指向其原型对象的指针,让我们试着找出原型对象是什么。为了找出上面mike对象的指向原型对象,让我们做简单的===等式检查。

JavaScript中工厂函数与构造函数示例详解

嗯,有趣的是,它指向 Object.prototype。好的,让我们用构造函数做同样的实验。

理解 JavaScript 的原型

理解原型之前,需要记住以下几点知识:

  • 所有的引用类型(数组、对象、函数),都具有对象特性,即可自由扩展属性(null除外)
  • 所有的引用类型(数组、对象、函数),都有一个__proto__属性,属性值是一个普通的对象
  • 所有的函数,都有一个prototype属性,属性值也是一个普通的对象
  • 所有的引用类型(数组、对象、函数),__proto__属性值指向它的构造函数的prototype属性值

通过代码解释一下:

// 要点一:自由扩展属性
var obj = {}; obj.a = 100;
var arr = []; arr.a = 100;
function fn () {}
fn.a = 100;

// 要点二:__proto__
console.log(obj.__proto__);
console.log(arr.__proto__);
console.log(fn.__proto__);

// 要点三:函数有 prototype
console.log(fn.prototype)

// 要点四:引用类型的 __proto__ 属性值指向它的构造函数的 prototype 属性值
console.log(obj.__proto__ === Object.prototype)

使用构造函数

注意:在JavaScript中,这些构造函数也被称为 constructor,因为它们用于创建对象。

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

JavaScript中工厂函数与构造函数示例详解

当我们展开第一层的的__proto__时,它内部还有另一个__proto__,我们再次扩展它。

JavaScript中工厂函数与构造函数示例详解

现在让我们试着弄清楚原型对象是否像上面一样。

JavaScript中工厂函数与构造函数示例详解

他们是不同的。 当我们使用工厂函数创建对象时,它的__proto__指向Object.prototype,而当从构造函数创建对象时,它指向它的构造函数原型对象。 那么这里发生了什么?

new 背后所做的事

当我们在创建对象时使用带有构造函数的new关键字时,new 背后所做的事不多。

new 运算符创建一个用户自定义的对象类型的实例或具有构造函数的内置对象的实例。 new 关键字会进行如下操作:

  • 创建一个空的简单 JavaScript 对象 (即 {})
  • 链接该对象(即设置该对象的构造函数)到另一个对象
  • 将步骤1新创建的对象作为 this 的上下文
  • 如果该函数没有返回对象,则返回 this

注释行是伪代码,表示在 new 关键字,JS 背后帮我们做的事情。

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

 this.firstName = firstName;
 this.lastName = lastName;
 this.age = age;
 
 // return this;
}

另外,让我们看看如果将上面的隐式代码添加到工厂函数中会发生什么。

function person(firstName, lastName, age) {
 // this = {};
 // this.__proto__ = Person.prototype; 
 
 
 const person = {};
 person.firstName = firstName;
 person.lastName = lastName;
 person.age = age;
 return person;
 
 // return this;
}

即使使用new关键字调用时将隐式代码添加到工厂函数中,也不会对结果产生任何影响。这是因为,由于我们没有在函数中使用 this 关键字,而且我们显式地返回了一个除this之外的自定义对象,因此没有必要使用隐式代码。无论我们是否对工厂函数使用new关键字,对输出都没有影响。

如果忘记了 new 关键字怎么办

JavaScript 中有许多概念,有时难以掌握。 new 操作符就是其中之一。 如果你不能正确理解它,那么在运行 JavaScript 应用程序时会产生令人讨厌的后果。 在像 Java这 样的语言中,严格限制了如何使用 new 关键字。 但是在 javascript 中,并不是那么严格,如果你不能正确理解它们可能会导致很多问题。

在 JavaScript 中:

  • 可以对任何函数使用 new 运算符
  • 可以使用或不使用 new 关键字将函数作为构造函数调用

让我们看看上面的例子,使用和不使用 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);

然后,如果查看创建的对象实例,你希望看到什么?

JavaScript中工厂函数与构造函数示例详解

发生了什么? 使用 new 运算符,正如我们所期待的一样输出正确的对象,但没有new运算符,结果是undefined 怎么可能呢?

如果你对 JavaScript 作用域 和 this 关键字的工作原理有所了解,那么你可以猜到这里发生了什么? 让我们来看看。

JavaScript中工厂函数与构造函数示例详解

看起来我们传递给没有new关键字的函数的所有属性都已设置为window对象。 那是因为到那个时候函数内部的这个变量引用了global 或 window 对象,基本上我们在这里做的就是污染了全局对象。

这是你可以对你的JavaScript程序做的非常讨厌的事情。 因此,使用new运算符,JavaScript引擎将this 变量设置为引用新创建的对象实例,这就是为什么我们可以看到传递给构造函数的所有属性都已设置为 mike。

但是在没有new运算符的情况下调用构造函数的情况下,JavaScript 引擎会将 this 解释为常规函数调用,而没有显式返回语句时返回undefined。 这就是理解new 运算符在JavaScript中的工作原理非常关键的原因。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
js控制div弹出层实现方法
May 11 Javascript
Bootstrap每天必学之标签与徽章
Nov 27 Javascript
JavaScript遍历求解数独问题的主要思路小结
Jun 12 Javascript
JS求Number类型数组中最大元素方法
Apr 08 Javascript
Vue中的字符串模板的使用
May 17 Javascript
vue.js实现插入数值与表达式的方法分析
Jul 06 Javascript
JS Object.preventExtensions(),Object.seal()与Object.freeze()用法实例分析
Aug 25 Javascript
jQuery+vue.js实现的多选下拉列表功能示例
Jan 15 jQuery
vue实现的微信机器人聊天功能案例【附源码下载】
Feb 18 Javascript
JQuery animate动画应用示例
May 14 jQuery
微信小程序实现滚动加载更多的代码
Dec 06 Javascript
JS实现选项卡插件的两种写法(jQuery和class)
Dec 30 jQuery
微信小程序登录数据解密及状态维持实例详解
May 06 #Javascript
一文了解Vue中的nextTick
May 06 #Javascript
angular 服务随记小结
May 06 #Javascript
详解如何使用nvm管理Node.js多版本
May 06 #Javascript
关于AOP在JS中的实现与应用详解
May 06 #Javascript
JS使用iView的Dropdown实现一个右键菜单
May 06 #Javascript
一文读懂ES7中的javascript修饰器
May 06 #Javascript
You might like
PHP用正则匹配form表单中所有元素的类型和属性值实例代码
2017/02/28 PHP
Javascript里使用Dom操作Xml
2007/01/22 Javascript
ajax不执行success回调而是执行了error回调
2012/12/10 Javascript
解决JS浮点数运算出现Bug的方法
2013/03/12 Javascript
JS动态添加与删除select中的Option对象(示例代码)
2013/12/25 Javascript
javascript中取前n天日期的两种方法分享
2014/01/26 Javascript
一个检测表单数据的JavaScript实例
2014/10/31 Javascript
jQuery实现跨域
2015/02/03 Javascript
JavaScript事件委托实例分析
2015/05/26 Javascript
JS实现六位字符密码输入器功能
2016/08/19 Javascript
vue实现页面加载动画效果
2017/09/19 Javascript
微信小程序中实现手指缩放图片的示例代码
2018/03/13 Javascript
Python and、or以及and-or语法总结
2015/04/14 Python
深入理解Python中字典的键的使用
2015/08/19 Python
Python如何通过subprocess调用adb命令详解
2017/08/27 Python
Python Numpy 数组的初始化和基本操作
2018/03/13 Python
python email smtplib模块发送邮件代码实例
2018/04/26 Python
Python pygorithm模块用法示例【常见算法测试】
2018/08/16 Python
Pandas统计重复的列里面的值方法
2019/01/30 Python
Python函数定义及传参方式详解(4种)
2019/03/18 Python
用python实现学生管理系统
2020/07/24 Python
Python将字典转换为XML的方法
2020/08/01 Python
HTML5 CSS3给网站设计带来出色效果
2009/07/16 HTML / CSS
ProBikeKit英国:在线公路自行车之家
2017/02/10 全球购物
全球最大的游戏市场:G2A
2018/07/05 全球购物
HEMA法国:荷兰原创设计
2019/02/21 全球购物
Oracle中delete,truncate和drop的区别
2016/05/05 面试题
求职信的要素有哪些呢
2013/12/26 职场文书
担保书怎么写
2014/04/01 职场文书
幼儿园开学寄语
2014/04/03 职场文书
优秀教师演讲稿
2014/05/06 职场文书
竞聘上岗演讲稿
2014/05/16 职场文书
办公室主任个人对照检查材料思想汇报
2014/10/11 职场文书
表扬通报怎么写
2015/01/16 职场文书
春节慰问简报
2015/07/21 职场文书
css3应用示例:新增的选择器
2022/03/16 HTML / CSS