Javascript学习笔记之函数篇(五) : 构造函数


Posted in Javascript onNovember 23, 2014

Javascript 中的构造函数与其他语言相比也是不同的。任何通过关键字 new 调用的函数都可以当做构造函数。
在构造函数体内,this 指向新创建的对象。如果构造函数体内没有显示的 return 表达式,那么我们就默认返回 this,也就是新建的对象。

function Foo() {

    this.bla = 1;

}

Foo.prototype.test = function() {

    console.log(this.bla);

};

var test = new Foo();

上面的代码将 Foo 作为构造函数进行调用,并将新建对象的原型(__proto__)指向了 Foo.prototype。
如果我们在构造函数内定义返回的 return 表达式,构造函数就会返回整个表达式,但这个返回表达式必须为一个对象。

function Bar() {

    return 2;

}

new Bar(); // a new object

function Test() {

    this.value = 2;

    return {

        foo: 1

    };

}

new Test(); // the returned object

如果 new 被省略,那么函数将不能返回一个新的对象。

function Foo() {

    this.bla = 1; // gets set on the global object

}

Foo(); // undefined

上面的例子可能在某些场景下也可以运行,但由于 Javascript 中 this 的工作机制,这里 this 将指向全局对象。

工厂模式

为了能够不使用关键字 new,构造函数将不得不显示返回一个值。

function Bar() {

    var value = 1;

    return {

        method: function() {

            return value;

        }

    }

}

Bar.prototype = {

    foo: function() {}

};

new Bar();

Bar();

上例中使不使用 new 来调用函数 Bar 达到的效果是一样的,将会返回一个新建的包含 method 方法的对象,这里实际上就是一个闭包。
这里需要注意一点,new Bar() 将不会返回 Bar.prototype,而是在 return 表达式内函数 method 的原型对象。
上例中,使用 new 与否在功能上是无差异的。

通过工厂模式创建新的对象

我们经常被提醒不要使用 new,因为一旦忘记了它的使用将导致错误。
为了创建一个对象,我们更愿意使用工厂模式并在工厂模式内构造一个新的对象。

function Foo() {

    var obj = {};

    obj.value = 'blub';
    var private = 2;

    obj.someMethod = function(value) {

        this.value = value;

    }
    obj.getPrivate = function() {

        return private;

    }

    return obj;

}

尽管上例代码比使用 new 时更不容易出错,而且在使用私有变量时将更加方便,但同时也有一些不好的地方:

因为不能共享原型对象,所以需要更多的内存。
为了实现继承,工厂模式需要拷贝另一个对象的所有方法或者将其作为新对象的原型。
放弃原型链只是为了避免使用 new,这似乎与 Javascript 语言的精神相悖。

总结

尽管使用 new 可能比较容易产生错误,但这并不能成为放弃使用原型链的原因。至于最后采取哪种方式,这需要根据应用的需求而定。最好的方式就是选择一种风格并坚持下去。

简单的说构造函数就是初始化一个实例对象,对象的prototype属性是继承一个实例对象。

Javascript 相关文章推荐
zeroclipboard复制到剪切板的flash
Aug 04 Javascript
jQuery UI的Dialog无法提交问题的解决方法
Jan 11 Javascript
JavaScript cookie的设置获取删除详解
Feb 11 Javascript
jQuery学习笔记之总体架构
Jun 03 Javascript
js从外部获取图片的实现方法
Aug 05 Javascript
JavaScript实现设置默认日期范围为最近40天的方法分析
Jul 12 Javascript
JavaScript Math对象和调试程序的方法分析
May 13 Javascript
浅谈laytpl 模板空值显示null的解决方法及简单的js表达式
Sep 19 Javascript
小程序点击图片实现png转jpg
Oct 22 Javascript
jquery实现上传图片功能
Jun 29 jQuery
解决vue axios跨域 Request Method: OPTIONS问题(预检请求)
Aug 14 Javascript
WebWorker 封装 JavaScript 沙箱详情
Nov 02 Javascript
Javascript学习笔记之函数篇(四):arguments 对象
Nov 23 #Javascript
Javascript学习笔记之 函数篇(三) : 闭包和引用
Nov 23 #Javascript
js实例属性和原型属性示例详解
Nov 23 #Javascript
JS常用函数使用指南
Nov 23 #Javascript
浅谈JSON和JSONP区别及jQuery的ajax jsonp的使用
Nov 23 #Javascript
理解jQuery stop()方法
Nov 21 #Javascript
JS中三目运算符和if else的区别分析与示例
Nov 21 #Javascript
You might like
PHP 伪静态技术原理以及突破原理实现介绍
2013/07/12 PHP
php目录拷贝实现方法
2015/07/10 PHP
PHP7.0安装笔记整理
2015/08/28 PHP
PHP常见字符串处理函数用法示例【转换,转义,截取,比较,查找,反转,切割】
2016/12/24 PHP
form表单传递数组数据、php脚本接收的实例
2017/02/09 PHP
thinkphp5框架实现数据库读取的数据转换成json格式示例
2019/10/10 PHP
IE与FireFox的兼容性问题分析
2007/04/22 Javascript
js数组操作学习总结
2013/11/04 Javascript
javascript函数重载解决方案分享
2014/02/19 Javascript
使用AngularJS 应用访问 Android 手机的图片库
2015/03/24 Javascript
Jquery幻灯片特效代码分享--打开页面随机选择切换方式(3)
2015/08/15 Javascript
JS运动相关知识点小结(附弹性运动示例)
2016/01/08 Javascript
jQuery插件HighCharts实现2D柱状图、折线图的组合多轴图效果示例【附demo源码下载】
2017/03/09 Javascript
Vue.set()实现数据动态响应的方法
2018/02/07 Javascript
Vue cli3 库模式搭建组件库并发布到 npm的流程
2018/10/12 Javascript
JS利用prototype给类添加方法操作详解
2019/06/21 Javascript
js对象属性名驼峰式转下划线的实例代码
2020/09/17 Javascript
Vue+axios封装请求实现前后端分离
2020/10/23 Javascript
在实例中重学JavaScript事件循环
2020/12/03 Javascript
python实现数独算法实例
2015/06/09 Python
python利用paramiko连接远程服务器执行命令的方法
2017/10/16 Python
Python cookbook(数据结构与算法)将多个映射合并为单个映射的方法
2018/04/19 Python
python 字典中文key处理,读取,比较方法
2018/07/06 Python
python tornado微信开发入门代码
2018/08/24 Python
在python中实现将一张图片剪切成四份的方法
2018/12/05 Python
Python设计模式之备忘录模式原理与用法详解
2019/01/15 Python
Python操作rabbitMQ的示例代码
2019/03/19 Python
python实现websocket的客户端压力测试
2019/06/25 Python
利用pandas合并多个excel的方法示例
2019/10/10 Python
基于python及pytorch中乘法的使用详解
2019/12/27 Python
深入理解css中vertical-align属性
2017/04/18 HTML / CSS
幸福家庭事迹材料
2014/02/03 职场文书
住院医师规范化培训实施方案
2014/06/12 职场文书
常务副县长“三严三实”对照检查材料思想汇报
2014/10/05 职场文书
道路交通事故人身损害赔偿协议书
2014/11/19 职场文书
教师旷工检讨书
2015/08/15 职场文书