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 相关文章推荐
一些常用的JS功能函数(2009-06-04更新)
Jun 04 Javascript
对xmlHttp对象方法和属性的理解
Jan 17 Javascript
JavaScript 图像动画的小demo
May 23 Javascript
Jquery实现自定义弹窗示例
Mar 12 Javascript
sails框架的学习指南
Dec 22 Javascript
window.open()实现post传递参数
Mar 12 Javascript
JS实现仿新浪微博发布内容为空时提示功能代码
Aug 19 Javascript
JS获取当前时间的实例代码(昨天、今天、明天)
Nov 13 Javascript
微信小程序开发之点击按钮退出小程序的实现方法
Apr 26 Javascript
jquery实现手风琴案例
May 04 jQuery
JavaScript代码简化技巧实例解析
Sep 09 Javascript
一定要知道的 25 个 Vue 技巧
Nov 02 Vue.js
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+FLASH实现上传文件进度条相关文件 下载
2007/07/21 PHP
phpmyadmin MySQL 加密配置方法
2009/07/05 PHP
php简单图像创建入门实例
2015/06/10 PHP
浅谈Laravel队列实现原理解决问题记录
2017/08/19 PHP
在IE6下发生Internet Explorer cannot open the Internet site错误
2010/06/21 Javascript
js实现的切换面板实例代码
2013/06/17 Javascript
《JavaScript函数式编程》读后感
2015/08/07 Javascript
JavaScript数组去重由慢到快由繁到简(优化篇)
2016/08/26 Javascript
微信小程序 wxapp内容组件 text详细介绍
2016/10/31 Javascript
简单学习vue指令directive
2016/11/03 Javascript
解决jquery appaend元素中id绑定事件失效的问题
2017/09/12 jQuery
JavaScript体验异步更好的解决办法
2018/01/08 Javascript
详解Vue2.5+迁移至Typescript指南
2019/08/01 Javascript
node中使用log4js4.x版本记录日志的方法
2019/08/20 Javascript
一行JavaScript代码如何实现瀑布流布局
2020/12/11 Javascript
[01:58]最残酷竞争 2016国际邀请赛中国区预选赛积分循环赛回顾
2016/06/28 DOTA
[00:32]2018DOTA2亚洲邀请赛出场——LGD
2018/04/04 DOTA
Python 抓取动态网页内容方案详解
2014/12/25 Python
Python实现的当前时间多加一天、一小时、一分钟操作示例
2018/05/21 Python
详解python分布式进程
2018/10/08 Python
在python中实现求输出1-3+5-7+9-......101的和
2020/04/02 Python
基于python实现matlab filter函数过程详解
2020/06/08 Python
HTML5的结构和语义(3):语义性的块级元素
2008/10/17 HTML / CSS
Too Faced官网:美国知名彩妆品牌
2017/03/07 全球购物
Speedo速比涛中国官方网站:全球领先泳装运动品牌
2018/04/24 全球购物
大学生毕业自我鉴定范文
2013/09/19 职场文书
旅游管理专业生自荐信范文
2014/01/02 职场文书
结婚典礼证婚词
2014/01/08 职场文书
生物科学专业自荐书
2014/06/20 职场文书
私人委托书格式
2014/09/10 职场文书
幼儿园老师个人总结
2015/02/28 职场文书
2015年教师党员自我评价材料
2015/03/04 职场文书
营销策划分析:怎么策划才能更好销量产品?
2019/09/04 职场文书
python爬不同图片分别保存在不同文件夹中的实现
2021/04/02 Python
Node.js实现爬取网站图片的示例代码
2022/04/04 NodeJs
vue @ ~ 相对路径 路径别名设置方式
2022/06/05 Vue.js