Javascript中构造函数要注意的一些坑


Posted in Javascript onJanuary 23, 2017

前言

最近在家看书:《你不知道的Javascript》,看到构造函数调用时会绑定this,就顺便打开控制台输了一些代码,详细测试了一下。

构造函数简单的讲,即定义出来专供new 式调用的函数。

如:

function A(b) {
 this.b = b || 'bbb';
}

然后你就可以通过new ,来构建一个 A 的实例:

var a = new A('B')

但是,一个首要的坑是,构造函数与一个普通函数并无不同,如果你故意不使用new,或忘记用new,都会得到奇怪的错误:

var aa = A('adadada');

这样调用,并不会显式地报错,但实际上隐患深埋:

  1. aa并不是A的实例,而变成了 undefined
  2. 多了一个名为 b 的全局变量,值是 ‘adadada'

这就是无new 调用构造函数的坑。

下面说其他的:

构造函数自身有返回值

比如:

function A(b) {
 this.b = b || 'bbb';
 return {b: '0000'};
}

这个时候,无论是否使用new来调用A,得到的结果都会相同,即得到一个普通对象:{b:'0000′}

当然,此时是否带 new 调用,还是有一个不同点的,即:不带new时,依然会莫名声明一个 叫 b 的全局变量。

既然,构造函数有显式返回值时,会代替默认应该返回的this,成为返回值,那么,是不是所有返回值都能覆盖this呢?

测试显式返回值

众所周知,函数都是有返回值的,只是如果没有 return,则会返回undefined.

那么,我就在构造函数里显式返回一个undefined,会怎么样?

var a = function (){this.b = 'b'; return undefined};
new a(); // {b:'b'}

显式返回一个 undefined ,并不能阻止构造函数式调用的默认行为。

下图是更多测试:

Javascript中构造函数要注意的一些坑

简单的总结:

显式的返回以下值:undefined, null, boolean, number等基础类型,并不会代替 new 式调用的默认行为。

但显式返回以下值:{},[],RegExp, Date, Function,均会代替 new 调用的默认返回值 this.

大家都看到了,后者,全都是 对象,是复杂类型。

随手一记

前面说过,本该进行 new 式调用的构造函数,被当作普通函数调用,那么,如果函数体中,有 this.x = xxx 这样的赋值语句,则会被赋值给全局对象(即 windows),从而变成一个全局变量。

原因相信大家都知道,而本书中也专门讲过:函数调用时,默认的this就是绑定至全局对象。

而本书还提到:如果函数体是严格模式,则不会绑定 this 至全局对象,如:

var a = function (){'use strict';this.b = 'b'; return /111/g};
a(); // 直接报错

因为严格模式下,默认的 this 指向 undefined

所以说,有两点要提一下:

  1. 严格模式真不错
  2. 如果你想声明一个构造函数,那么严格模式是非常必要的

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

Javascript 相关文章推荐
Javascript 获取链接(url)参数的方法[正则与截取字符串]
Feb 09 Javascript
Javascript实现简单的富文本编辑器附演示
Jun 16 Javascript
js 动态修改css文件用到了cssRule
Aug 20 Javascript
详解AngularJS Filter(过滤器)用法
Dec 28 Javascript
JavaScript中数组slice和splice的对比小结
Sep 22 Javascript
完美解决IE不支持Data.parse()的问题
Nov 24 Javascript
Angular2 Service实现简单音乐播放器服务
Feb 24 Javascript
async/await地狱该如何避免详解
May 10 Javascript
Vue项目全局配置页面缓存之按需读取缓存的实现详解
Aug 01 Javascript
JavaScript实现美化滑块效果
May 17 Javascript
Javascript地址引用代码实例解析
Feb 25 Javascript
小程序开发之模态框组件封装
Apr 23 Javascript
在 Angular2 中实现自定义校验指令(确认密码)的方法
Jan 23 #Javascript
jQuery.cookie.js实现记录最近浏览过的商品功能示例
Jan 23 #Javascript
利用JS实现简单的日期选择插件
Jan 23 #Javascript
获取IE浏览器Cookie信息的方法
Jan 23 #Javascript
jQuery实现的简单悬浮层功能完整实例
Jan 23 #Javascript
原生和jQuery的ajax用法详解
Jan 23 #Javascript
基于MVC方式实现三级联动(JavaScript)
Jan 23 #Javascript
You might like
PHP 模拟$_PUT实现代码
2010/03/15 PHP
apache php模块整合操作指南
2012/11/16 PHP
PHP+AJAX 投票器功能
2017/11/11 PHP
JQuery AJAX提交中文乱码的解决方案
2010/07/02 Javascript
一些有用的JavaScript和jQuery的片段分享
2011/08/23 Javascript
读jQuery之十三 添加事件和删除事件的核心方法
2011/08/23 Javascript
javaScript实现浮点数转十六进制字符
2013/10/29 Javascript
js读取json的两种常用方法示例介绍
2014/10/19 Javascript
JavaScript实现向OL列表内动态添加LI元素的方法
2015/03/21 Javascript
jQuery插件animateSlide制作多点滑动幻灯片
2015/06/11 Javascript
Express的路由详解
2015/12/10 Javascript
JavaScript实现数据类型的相互转换
2016/03/06 Javascript
基于vue2.0+vuex+localStorage开发的本地记事本示例
2017/02/28 Javascript
vue上传图片组件编写代码
2017/07/26 Javascript
删除table表格行的实例讲解
2017/09/21 Javascript
基于substring()和substr()的使用以及区别(实例讲解)
2017/12/28 Javascript
微信小程序progress组件使用详解
2018/01/31 Javascript
微信小程序页面间传递数组对象方法解析
2019/11/06 Javascript
koa-passport实现本地验证的方法示例
2020/02/20 Javascript
Python获取电脑硬件信息及状态的实现方法
2014/08/29 Python
Python爬虫设置代理IP的方法(爬虫技巧)
2018/03/04 Python
利用pandas进行大文件计数处理的方法
2018/07/25 Python
3分钟学会一个Python小技巧
2018/11/23 Python
Python爬虫动态ip代理防止被封的方法
2019/07/07 Python
Python实现微信小程序支付功能
2019/07/25 Python
python针对mysql数据库的连接、查询、更新、删除操作示例
2019/09/11 Python
对tensorflow中cifar-10文档的Read操作详解
2020/02/10 Python
使用Python第三方库pygame写个贪吃蛇小游戏
2020/03/06 Python
Python的控制结构之For、While、If循环问题
2020/06/30 Python
Godiva巧克力英国官网:比利时歌帝梵巧克力
2018/08/28 全球购物
九年级英语教学反思
2014/01/31 职场文书
售后求职信范文
2014/03/15 职场文书
无偿献血倡议书
2014/04/14 职场文书
PyTorch dropout设置训练和测试模式的实现
2021/05/27 Python
python实现会员管理系统
2022/03/18 Python
部分武汉产收音机展览
2022/04/07 无线电