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 相关文章推荐
些很实用且必用的小脚本代码
Jun 26 Javascript
wordpress之js库集合研究介绍
Aug 17 Javascript
JavaScript游戏之是男人就下100层代码打包
Nov 08 Javascript
兼容IE、FireFox、Chrome等浏览器的xml处理函数js代码
Nov 30 Javascript
Jquery中$.post和$.ajax的用法小结
Apr 28 Javascript
深入解析Backbone.js框架的依赖库Underscore.js的作用
May 07 Javascript
用file标签实现多图文件上传预览
Feb 14 Javascript
Node.js发送HTTP客户端请求并显示响应结果的方法示例
Apr 12 Javascript
Js中使用正则表达式验证输入是否有特殊字符
Sep 07 Javascript
小程序云开发初探(小结)
Oct 24 Javascript
通过javascript实现段落的收缩与展开
Jun 26 Javascript
Vue实现指令式动态追加小球动画组件的步骤
Dec 18 Vue.js
在 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
Dedecms V3.1 生成HTML速度的优化办法
2007/03/18 PHP
PHP 超链接 抓取实现代码
2009/06/29 PHP
php+iframe 实现上传文件功能示例
2020/03/04 PHP
解决3.01版的jquery.form.js中文乱码问题的解决方法
2012/03/08 Javascript
dotopAlert 提示用户需安装播放器的代码
2012/09/17 Javascript
ajax处理php返回json数据的实例代码
2013/01/24 Javascript
jQuery scroll事件实现监控滚动条分页示例
2014/04/04 Javascript
iframe实用操作锦集
2014/04/22 Javascript
JavaScript动态改变表格单元格内容的方法
2015/03/30 Javascript
JavaScript轮播图简单制作方法
2017/02/20 Javascript
layer弹窗插件操作方法详解
2017/05/19 Javascript
页面间固定参数,通过cookie传值的实现方法
2017/05/31 Javascript
js学习总结之DOM2兼容处理this问题的解决方法
2017/07/27 Javascript
详解vue.js之绑定class和style的示例代码
2017/08/24 Javascript
在vue项目中使用md5加密的方法
2018/09/14 Javascript
python求素数示例分享
2014/02/16 Python
快速入门python学习笔记
2017/12/06 Python
pandas系列之DataFrame 行列数据筛选实例
2018/04/12 Python
python tools实现视频的每一帧提取并保存
2020/03/20 Python
详解Python3之数据指纹MD5校验与对比
2019/06/11 Python
如何运行.ipynb文件的图文讲解
2019/06/27 Python
python使用flask与js进行前后台交互的例子
2019/07/19 Python
django配置app中的静态文件步骤
2020/03/27 Python
python 实现两个线程交替执行
2020/05/02 Python
查看keras各种网络结构各层的名字方式
2020/06/11 Python
python 多线程中join()的作用
2020/10/29 Python
Forever 21美国官网:美国标志性快时尚品牌
2017/02/20 全球购物
城市观光通行证:The Sightseeing Pass
2018/04/28 全球购物
英国现代家具和装饰网站:PN Home
2018/08/16 全球购物
Mankind美国/加拿大:英国领先的男士美容护发用品公司
2018/12/05 全球购物
数学高效课堂实施方案
2014/03/29 职场文书
故宫导游词
2015/01/31 职场文书
公司出纳岗位职责
2015/03/31 职场文书
入党团支部推荐意见
2015/06/02 职场文书
Python Django框架介绍之模板标签及模板的继承
2021/05/27 Python
vue实现省市区联动 element-china-area-data插件
2022/04/22 Vue.js