谈谈JavaScript中的function constructor和new关键字
您是否曾困惑于 Javascript 中的new关键字呢?是否曾想理解关于 function 和 constructor 的区别是什么呢?
大多数 Javascript 的新开发者不太想要使用new关键字,因为这会让代码写的像是 Java 并且在使用上会造成一点混乱;在这篇文章我会尽量尝试着去理清这些东西,并解释它是如何运作的。
谈谈function constructor
constructor
翻为构造器但为了让您之后更好地理解,会直接使用 constructor
;在 Javascript 中任何一个函数(function
)都可以被当作 constructor
;Javascript 并没有明确的区分两者,也就是说 function
可以被当作 constructor
或者当作一般函数调用。
而 constructor
的用法就是 function
搭配new
关键字:
function Person ( ) { this . firstName = 'Jay' ; this . lastName = 'Chou' ;
}var person = new Person ( ) ;
console . log ( person ) ;
复制代码
接着我们把person
呼叫出来看,会得到如下的结果,通过new
它会帮我们建立一个对象,然后里面有Person
这个function
里面的内容,并且变成了属性名称和属性值:
进一步来看new 让这个过程发生了什么
当使用new
命令时,它后面的函数依次执行下面的4个步骤:
- 创建一个空对象,作为将要返回的对象实例。
- 将这个空对象的原型,指向构造函数的
prototype
属性。 - 将这个空对象赋值给函数内部的
this
关键字。 - 开始执行构造函数内部的代码。
也就是说,当我们使用new
这个关键字时,实际上会先有一个空的对象被建立。
接着People
这个构造函数会被执行,这个空对象的原型,指向了People.prototype
。
我们知道当函数执行的时候,在execution context
中会有this
被建立,而当我们使用new
的时候,函数里面的this
会被指定成刚刚所建立的那个空对象。
所以当执行People
这个function
,执行到this.firstName
和this.lastName
时,因为this
现在指称的是那个空对象,所以实际上是在帮这个空对象赋予属性名称和属性值。
在这样的过程中,只要这个构造函数People
没有指定return
为其他对象,它就会直接返回给我们这个新建立的对象。
接着让我们通过一段代码来更清楚的了解这个执行的过程:
function Person ( ) { this . firstName = 'Jay' ; this . lastName = 'Chou' ; console . log ( '这个函数有被执行' ) ;
}var person = new Person ( ) ;
console . log ( person ) ;
复制代码
这时候在chrome 中呼叫出来的结果如下,说明了当我们使用new
在构造对象的时候People
这个function
确实有被执行:
通过new 会帮我们建立一个空的对象
现在我把我们上面的代码改成这样:
function Person ( ) { console . log ( this ) ;
}var person = new Person ( ) ;
// console.log(person);
复制代码
这时候代码返回的结果如下,表示的确在执行这段代码的过程中帮我们建立了一个新的空对象:
函数的最后若return其他对象,则原新对象内容会被覆盖
现在,让我们把原本的代码稍微做如下修改:
function Person ( ) { this . firstName = 'Jay' ; this . lastName = 'Chou' ; return { "RETURN" : "原本this的内容就不会被返回" } ;
}var person = new Person ( ) ;
console . log ( person ) ;
复制代码
构造函数的内部若return
其他对象,new
命令会返回return
语句指定的对象,将原新对象内容覆盖掉;否则,就会不管return
语句,返回this
对象。返回的结果如下:
function constructor 的实际应用
由上面的方法,我们可以通过function
的方式来建立一个新的对象,如果我们想要建立出同属性名称但不同属性值的对象内容,我们可以把对象的属性值变成参数,如此就能通过此function constructor
建立出许多不同的对象:
function Person ( firstName , lastName ) { this . firstName = firstName ; this . lastName = lastName ;
}var person1 = new Person ( 'Jay' , 'chou' ) ;
console . log ( person1 ) ;
var person2 = new Person ( 'Jane' , 'chou' ) ;
console . log ( person2 ) ;
复制代码
如此,我们就可以通过同一个构造函数建立出很多不同的对象:
此外,我们会把根据构造器(constructor
)所建立出来的对象称作是实例(instance
),这在之前的文章里也有提过。
注意!如果我们忘了加上new关键字
这里有一个地方我们需要非常留意,如果你在撰写代码的过程当中,忘记加上new
这个关键字的话,比如:
function Person ( ) { this . firstName = 'Jay' ; this . lastName = 'Chou' ;
}var person = Person ( ) ;
console . log ( person ) ;
复制代码
如此,因为JavaScript不知道你是要执行这个函数,还是要根据这个function
去建立object
,因次最后会返回undefined
的结果。
小结
- 其实构造函数(function constructor)就是普通的function,只是我们可以通过这个function 来建立对象。
- 通过在function 前面加上new 这个运算符,它会把函数中this 这个关键字建立成一个新的对象,然后如果你没有在该函数的内部指定返回出其它对象的话,它就会自动返回这个新的对象给你。
那又是如何通过function constructors
来设定我们的原型(prototype
)呢?让我们在下一篇文章来谈吧!
如果觉得文章对你有些许帮助,欢迎在我的GitHub博客点赞和关注,感激不尽!
转载于:https://juejin.im/post/5cff7de8f265da1ba647e30e
谈谈JavaScript中的function constructor和new关键字相关推荐
- 谈谈JavaScript中function多重理解
JavaScript 中的 function 有多重意义.它可能是一个构造器(constructor),承担起对象模板的作用: 可能是对象的方法(method),负责向对象发送消息.还可能是函数,没错 ...
- 也谈谈Javascript中的几个怪异特性(上)
2019独角兽企业重金招聘Python工程师标准>>> Andy Croxall在Ten Oddities And Secrets About JavaScript罗列了他认为的10 ...
- this调用语句必须是构造函数中的第一个可执行语句_谈谈JavaScript中的函数构造式和new关键字...
您是否曾困惑于 Javascript 中的new关键字呢?是否曾想理解关于 function 和 constructor 的区别是什么呢? 大多数 Javascript 的新开发者不太想要使用new关 ...
- Javascript 中的 Function对象
在 js 中 函数 Function(大写) 就是一个对象.在 javascript 中没有函数 reload (重载)的概念. 我们看下面这个,结果应该是什么呢? <html><h ...
- javascript 分号_让我们谈谈JavaScript中的分号
javascript 分号 要使用它们,还是不使用它们- (To use them, or not to use them-) Semicolons in JavaScript divide the ...
- 三、悟透javascript中的function
除了方法,function还可以用来声明"类",就是C#中的class.通过伪装的方式.代码如下: <script type="text/javascript&qu ...
- javascript 无法修改 数组中对象_谈谈JavaScript中对象建立(Object)
在这篇文章中我将会着重说明如何创建JavaScript里的对象(Object). 对象(Object)是什么? 在开始介绍如何创建对象前,我们要知道对象是什么.对象(Object)简单地来说,就是一堆 ...
- 谈谈javascript中的多线程
不存在的,javascript中根本不存在多线程...... 先不要慌,没有多线程我们可以模仿多线程呀!定时器.web workder等等. 存在即合理,为啥javascript需要多线程? java ...
- Javascript中typeof instanceof constructor的区别
typeof typeof,是一个运算符,运算中需要一个操作数,运算的结果就是这个操作数的类型,运算的结果是一个字符串.他有一定的局限性,对于对象类型的值,只能得到一个object结果,却不能精确得到 ...
最新文章
- java实现图片对比功能_Java 照片对比功能的实现
- java:1221是一个非常特殊的数,它从左边读和从右边读是一样的,编程求所有这样的四位十进制数。
- 【转载】静态时序分析
- Unix环境高级编程学习笔记(七) 多线程
- Windows 10 使用 Kali Linux子系统
- 西门子 S7-200以太网模块连接MCGS组态软件方法
- AutoCAD Electrical(ACE)的基本操作——新建项目、绘制电气原理图、线路标号
- 机器学习:最小二乘支持向量机(Least Squares Support Vector Machine)
- 浅谈SAP顾问未来十年在中国的发展前景
- STM32cubeide代码自动补全教程
- 电脑怎么图片转文字?建议收藏这几个方法
- 最简单有效的Win10清理C盘的多个方法
- [ARM入门]消失的飞思卡尔:MKV30 16位AD采集
- 赵小楼《天道》《遥远的救世主》深度解析(56)芮小丹的“精神绝症”和“心之地狱”
- 有关阿里云服务器ping不通解决办法(云服务器搭建完环境访问不了ip解决办法)
- Mathworks MATLAB for Mac (强大的商业数学软件) v9.11
- 2022牛客多校 C Grab the Seat!
- jsonObject.toBean
- 局域网协议分类(计算机网络)
- config类和config助手函数
热门文章
- EF CodeFirst下的自动迁移
- 3(1)-字符缓冲流
- [转]Formatting the detail section to display multiple columns (水晶报表 rpt 一页多列)
- 深度优先算法解决有向有权图的最短路径问题
- 搭建高性能计算环境(七)、应用软件的安装之MS
- OpenResty 简单编写一个Module
- PHP分页类的实现,返回结果未渲染,更容易在HTML中使用
- 混乱的Comcast
- C# Object.Equals方法深入研究
- Linux -- 以root权限安装QT5.8.0