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 相关文章推荐
JQuery 返回布尔值Is()条件判断方法代码
May 14 Javascript
探讨JQUERY JSON的反序列化类 using问题的解决方法
Dec 19 Javascript
html dom节点操作(获取/修改/添加或删除)
Jan 23 Javascript
jQuery中delegate和on的用法与区别详细解析
Jan 26 Javascript
实例讲解JS中数组Array的操作方法
May 09 Javascript
采用自执行的匿名函数解决for循环使用闭包的问题
Sep 11 Javascript
jQuery中slideUp 和 slideDown 的点击事件
Feb 26 Javascript
js实现仿京东2级菜单效果(带延时功能)
Aug 27 Javascript
js获取时间精确到秒(年月日)
Mar 16 Javascript
Vue全局loading及错误提示的思路与实现
Aug 09 Javascript
详解ES6数组方法find()、findIndex()的总结
May 12 Javascript
js屏蔽F12审查元素,禁止修改页面代码等实现代码
Oct 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如何抛出异常处理错误
2011/03/02 PHP
PHP写日志的实现方法
2014/11/05 PHP
常用的php图片处理类(水印、等比缩放、固定高宽)分享
2015/06/19 PHP
thinkphp3.2实现上传图片的控制器方法
2016/04/28 PHP
php usort 使用用户自定义的比较函数对二维数组中的值进行排序
2017/05/02 PHP
docker-compose部署php项目实例详解
2019/07/30 PHP
解决Extjs 4 Panel作为Window组件的子组件时出现双重边框问题
2013/01/11 Javascript
图片上传判断及预览脚本的效果实例
2013/08/07 Javascript
js中Math之random,round,ceil,floor的用法总结
2013/12/26 Javascript
ie下$.getJSON出现问题的解决方法
2014/02/12 Javascript
常见的jQuery选择器汇总
2014/11/24 Javascript
javascript实现仿百度图片的瀑布流加载效果
2016/04/20 Javascript
asp.net+jquery.form实现图片异步上传的方法(附jquery.form.js下载)
2016/05/05 Javascript
整理关于Bootstrap排版的慕课笔记
2017/03/29 Javascript
浅谈angular4生命周期钩子
2017/09/05 Javascript
微信网页登录逻辑与实现方法
2019/04/29 Javascript
javascript实现动态时钟的启动和停止
2020/07/29 Javascript
js实现跳一跳小游戏
2020/07/31 Javascript
微信小程序中data-key属性之数据传输(经验总结)
2020/08/22 Javascript
关于element的表单组件整理笔记
2021/02/05 Javascript
用python实现简单EXCEL数据统计的实例
2017/01/24 Python
Python遍历文件夹 处理json文件的方法
2019/01/22 Python
python的pygal模块绘制反正切函数图像方法
2019/07/16 Python
git查看、创建、删除、本地、远程分支方法详解
2020/02/18 Python
Python request中文乱码问题解决方案
2020/09/17 Python
Python导入父文件夹中模块并读取当前文件夹内的资源
2020/11/19 Python
法国高保真音响和家庭影院商店:Son Video
2019/04/26 全球购物
经济与贸易专业应届生求职信
2013/11/19 职场文书
艺术应用与设计个人的自我评价
2013/11/23 职场文书
精通CAD能手自荐书
2014/01/31 职场文书
机电专业大学生职业规划书范文
2014/02/25 职场文书
制作部班长职位说明书
2014/02/26 职场文书
有限责任公司股东合作协议书
2014/12/02 职场文书
学生上课迟到检讨书
2015/01/01 职场文书
创业计划书之韩国烧烤店
2019/09/19 职场文书
nginx常用命令放入shell脚本详解
2021/03/31 Servers