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 相关文章推荐
动态表格Table类的实现
Aug 26 Javascript
利用cookie记住背景颜色示例代码
Nov 04 Javascript
javascript的parseFloat()方法精度问题探讨
Nov 26 Javascript
jQuery使用hide方法隐藏页面上指定元素的方法
Mar 30 Javascript
jQuery平滑旋转幻灯片特效代码分享
Sep 07 Javascript
使用node+vue.js实现SPA应用
Jan 28 Javascript
jquery操作select元素和option的实例代码
Feb 03 Javascript
AJAX和jQuery动态加载数据的实现方法
Dec 05 Javascript
详解axios在vue中的简单配置与使用
May 10 Javascript
Vue通过ref父子组件拿值方法
Sep 12 Javascript
微信小程序开发之map地图组件定位并手动修改位置偏差
Aug 17 Javascript
JS中的算法与数据结构之字典(Dictionary)实例详解
Aug 20 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 静态化实现代码
2009/03/20 PHP
dedecms 批量提取第一张图片最为缩略图的代码(文章+软件)
2009/10/29 PHP
PHP filter_var() 函数 Filter 函数
2012/04/25 PHP
Smarty日期时间操作方法示例
2016/11/15 PHP
jQuery UI Dialog控件中的表单无法正常提交的解决方法
2010/12/19 Javascript
Jquery通过Ajax方式来提交Form表单的具体实现
2013/11/07 Javascript
取消选中单选框radio的三种方式示例介绍
2013/12/23 Javascript
Javascript学习笔记之 对象篇(三) : hasOwnProperty
2014/06/24 Javascript
PhotoShop给图片自动添加边框及EXIF信息的JS脚本
2015/02/15 Javascript
详解JavaScript中的4种类型识别方法
2015/09/14 Javascript
javascript实现动态标签云
2015/10/16 Javascript
JS实现状态栏跑马灯文字效果代码
2015/10/24 Javascript
莱鸟介绍window.print()方法
2016/01/06 Javascript
浅谈JavaScript对象与继承
2016/07/10 Javascript
JS 实现 ajax 异步浏览器兼容问题
2017/01/21 Javascript
JS实现的缓冲运动效果示例
2018/04/30 Javascript
对angularjs框架下controller间的传值方法详解
2018/10/08 Javascript
微信小程序图片加载失败时替换为默认图片的方法
2019/12/09 Javascript
extjs图形绘制之饼图实现方法分析
2020/03/06 Javascript
JS原型对象操作实例分析
2020/06/06 Javascript
JavaScript 闭包的使用场景
2020/09/17 Javascript
DWR内存兼容及无法调用问题解决方案
2020/10/16 Javascript
Python实现约瑟夫环问题的方法
2016/05/03 Python
django中send_mail功能实现详解
2018/02/06 Python
Python3实现配置文件差异对比脚本
2019/11/18 Python
详解canvas drawImage()方法绘制图片不显示的问题
2018/10/08 HTML / CSS
HTML5 Canvas绘制圆点虚线实例
2015/01/01 HTML / CSS
html svg生成环形进度条的实现方法
2019/09/23 HTML / CSS
Space NK美国站:英国高端美妆护肤商城
2017/05/22 全球购物
PHP如何删除一个Cookie值
2012/11/15 面试题
this关键字的作用
2016/01/30 面试题
法律顾问服务方案
2014/05/15 职场文书
活动总结模板大全
2015/05/11 职场文书
珍爱生命主题班会
2015/08/13 职场文书
Python实现打乒乓小游戏
2021/09/25 Python
在HTML中引入CSS的几种方式介绍
2021/12/06 HTML / CSS