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 相关文章推荐
全面解析Bootstrap表单使用方法(表单控件)
Nov 24 Javascript
jQuery实现的简单排序功能示例【冒泡排序】
Jan 13 Javascript
jQuery EasyUI Panel面板组件使用详解
Feb 28 Javascript
javascript  数组排序与对象排序的实例
Jul 17 Javascript
微信通过页面(H5)直接打开本地app的解决方法
Sep 09 Javascript
基于input动态模糊查询的实现方法
Dec 12 Javascript
详解Node.js模板引擎Jade入门
Jan 19 Javascript
vue.js轮播图组件使用方法详解
Jul 03 Javascript
如何获取vue单文件自身源码路径
May 06 Javascript
node将geojson转shp返回给前端的实现方法
May 29 Javascript
layui2.0使用table+laypage实现真分页
Jul 27 Javascript
JavaScript canvas绘制圆弧与圆形
Feb 18 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
smarty静态实验表明,网络上是错的~呵呵
2006/11/25 PHP
PHP递归返回值时出现的问题解决办法
2013/02/19 PHP
ThinkPHP3.2.3数据库设置新特性
2015/03/05 PHP
php数字运算验证码的实现代码
2015/07/30 PHP
php版交通银行网银支付接口开发入门教程
2016/09/26 PHP
Lumen timezone 时区设置方法(慢了8个小时)
2018/01/20 PHP
php操作redis数据库常见方法实例总结
2020/02/20 PHP
laravel框架使用FormRequest进行表单验证,验证异常返回JSON操作示例
2020/02/18 PHP
JS定时关闭窗口的实例
2013/05/22 Javascript
实现只能输入数字的input不用replace方法
2013/09/12 Javascript
js设置组合快捷键/tabindex功能的方法
2013/11/21 Javascript
页面实时更新时间的JS实例代码
2013/12/18 Javascript
jQuery1.9.1针对checkbox的调整方法(prop)
2014/05/01 Javascript
JS实现OCX控件的事件响应示例
2014/09/17 Javascript
js使用Array.prototype.sort()对数组对象排序的方法
2015/01/28 Javascript
Javascript数据结构与算法之列表详解
2015/03/12 Javascript
javascript bom是什么及bom和dom的区别
2015/11/26 Javascript
js提交form表单,并传递参数的实现方法
2016/05/25 Javascript
Angular JS 生成动态二维码的方法
2017/02/23 Javascript
关于JSON解析的实现过程解析
2019/10/08 Javascript
Layui数据表格之单元格编辑方式
2019/10/26 Javascript
JavaScript正则表达式验证登录实例
2020/03/18 Javascript
[02:22:36]《加油!DOTA》总决赛
2014/09/19 DOTA
Python中的time模块与datetime模块用法总结
2016/06/30 Python
python MySQLdb使用教程详解
2018/03/20 Python
python 实现矩阵按对角线打印
2019/11/29 Python
双向RNN:bidirectional_dynamic_rnn()函数的使用详解
2020/01/20 Python
python GUI库图形界面开发之PyQt5单选按钮控件QRadioButton详细使用方法与实例
2020/02/28 Python
python是怎么被发明的
2020/06/15 Python
公司开业庆典主持词
2014/03/21 职场文书
企业精细化管理实施方案
2014/03/23 职场文书
党支部综合考察材料
2014/05/19 职场文书
计算机科学与技术专业求职信
2014/09/03 职场文书
四大名著读书笔记
2015/06/25 职场文书
《观察物体》教学反思
2016/02/17 职场文书
导游词之南迦巴瓦峰
2019/11/19 职场文书