如何优化JavaScript的构造函数
首先看一个构造函数User,我们在调用User创建一个实例的的时候,一般都是要写上new操作符的。在这里说明一下,如果使用new关键字调用构造函数,那么构造函数里面的this总是是指向一个全新的对象(即User的实例),如果不是使用new的话,那么this就指向global对象。User构造函数的定义如下:
function User(name, passwordHash) { this.name = name; this.passwordHash = passwordHash; }
User构造函数的正确的调用方法应该如下:
var u = new User("baravelli", "d8b74df393528d51cd19980ae0aa028e");
但是,假如调用者因为粗心,忘记了加上new关键字来调用,那结果会怎样呢?我们一起来测试一下:
var u = User("baravelli", "d8b74df393528d51cd19980ae0aa028e"); u; // undefined this.name; // "baravelli" this.passwordHash; // "d8b74df393528d51cd19980ae0aa028e"
结果构造函数竟然返回了undefined!!这也很正常的,因为不用new关键字,直接调用他的话,那就跟调用普通函数没有任何区别了,而User里面又没有return语句,所以返回值当然是undefined了。更加糟糕的是,如果不加new调用,User的里面的this就会指向全局对象了,那么它就会破坏全局对象,试想一下,假如全局对象本身就存在了name和passwordHash这两个变量,那么他们的值就会被修改了,这个危害是很大的。
如果,构造函数User里面开启了ES5的严格模式,那么不使用new操作符就会因为this绑定失败而抛出错误(注意:严格模式下是不允许this指向全局对象的),如下:
function User(name, passwordHash) { "use strict"; this.name = name; this.passwordHash = passwordHash; } var u = User("baravelli", "d8b74df393528d51cd19980ae0aa028e"); // error: this is undefined
这样的话,会抛出一个类型错误// error: this is undefined。但是,这个构造函数依然是很脆弱的,因为它只有在加new操作符的时候才可以正常工作。假如我们实现了一个构造函数,加不加new关键字都可以正常工作那就健壮多了!其实,实现起来也并不太难,我们只要在User构造函数里面判断this是否指向User的实例就行了,如果不是就创建一个User实例,如下:
function User(name, passwordHash) { if (!(this instanceof User)) { return new User(name, passwordHash); } this.name = name; this.passwordHash = passwordHash; }
现在,不管你用不用new关键字来调用构造函数,他都可以正常工作了,测试一下:
var x = User("baravelli", "d8b74df393528d51cd19980ae0aa028e"); var y = new User("baravelli", "d8b74df393528d51cd19980ae0aa028e"); x instanceof User; // true y instanceof User; // true
但是上述实现方法还具有一个缺点,因为它两次调用了User构造函数(在不使用new关键字的时候),所以,降低了性能!而且,还有一个问题,就是对于可变参数的构造函数,它实现起来就会很困难的了。一种较优的办法就是借助于ES5的Object.create方法:
function User(name, passwordHash) { var self = this instanceof User ? this : Object.create(User.prototype); self.name = name; self.passwordHash = passwordHash; return self; }
这种方法,借助了Object.create方法,把User.prototype作为参数,创建了一个继承了User的新对象。但是,这种方法也是有缺陷的,我们前面已经说过 了,Object.create是ES5的新标准,在一些旧的环境下可能无法工作。所以,我们还要判断Object.create是否存在。,如果不存在,则手动的去实现它:
if (typeof Object.create === "undefined") { Object.create = function(prototype) { function C() { } C.prototype = prototype; return new C(); }; }
最后,需要提醒的是,如果你的构造函数一定要使用new关键字的,那么必须要写文档说明,以免别人调用的时候没有用new操作符,产生意想不到的结果!
分类:
javascript
标签:
javascript
posted on 2015-11-21 10:53 ChessZhang 阅读(1024) 评论(1) 编辑 收藏 举报
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· 周边上新:园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源!
· 分享 3 个 .NET 开源的文件压缩处理库,助力快速实现文件压缩解压功能!
· Ollama——大语言模型本地部署的极速利器
· DeepSeek如何颠覆传统软件测试?测试工程师会被淘汰吗?