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 相关文章推荐
写了10年的Javascript也未必全了解的连续赋值运算
Mar 25 Javascript
精心挑选的12款优秀的基于jQuery的手风琴效果插件和教程
Aug 22 Javascript
终于解决了IE8不支持数组的indexOf方法
Apr 03 Javascript
为什么要在引入的css或者js文件后面加参数的详细讲解
May 03 Javascript
jQuery实现鼠标滑过点击事件音效试听
Aug 31 Javascript
require.js 加载 vue组件 r.js 合并压缩的实例
Oct 14 Javascript
javascript中闭包概念与用法深入理解
Dec 15 Javascript
从零学习node.js之文件操作(三)
Feb 21 Javascript
AngularJS使用ng-class动态增减class样式的方法示例
May 18 Javascript
vuex 中插件的编写案例解析
Jun 10 Javascript
es6函数name属性功能与用法实例分析
Apr 18 Javascript
Vue 数据绑定的原理分析
Nov 16 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开启与关闭错误提示适用于没有修改php.ini的权限
2014/10/16 PHP
详解PHP中array_rand函数的使用方法
2016/09/11 PHP
php策略模式简单示例分析【区别于工厂模式】
2019/09/25 PHP
Laravel 实现添加多语言提示信息
2019/10/25 PHP
IE6 弹出Iframe层中的文本框“经常”无法获得输入焦点
2009/12/27 Javascript
将HTMLCollection/NodeList/伪数组转换成数组的实现方法
2011/06/20 Javascript
Javascript 检测键盘按键信息及键码值对应介绍
2013/01/03 Javascript
jquery实现简单易懂的图片展示小例子
2013/11/21 Javascript
解析Javascript中难以理解的11个问题
2013/12/09 Javascript
jQuery中extend函数详解
2015/07/13 Javascript
jquery中键盘事件小结
2016/02/24 Javascript
简单的vue-resourse获取json并应用到模板示例
2017/02/10 Javascript
详解JS获取HTML DOM元素的8种方法
2017/06/17 Javascript
实例解析Vue.js下载方式及基本概念
2018/05/11 Javascript
Node.js之readline模块的使用详解
2019/03/25 Javascript
vue cli使用融云实现聊天功能的实例代码
2019/04/19 Javascript
解决vue-cli webpack打包开启Gzip 报错问题
2019/07/24 Javascript
17道题让你彻底理解JS中的类型转换
2019/08/08 Javascript
浅谈layer弹出层按钮颜色修改方法
2019/09/11 Javascript
javascript中contains是否包含功能实现代码(扩展字符、数组、dom)
2020/04/07 Javascript
浅谈Python的异常处理
2016/06/19 Python
对numpy下的轴交换transpose和swapaxes的示例解读
2019/06/26 Python
django之使用celery-把耗时程序放到celery里面执行的方法
2019/07/12 Python
django 多对多表的创建和插入代码实现
2019/09/09 Python
python中怎么表示空值
2020/06/19 Python
css3之UI元素状态伪类选择器实例演示
2017/08/11 HTML / CSS
HTML5语义化元素你真的用对了吗
2019/08/22 HTML / CSS
意大利消费电子产品购物网站:SLG Store
2019/12/26 全球购物
美国在线家具网站:GDFStudio
2021/03/13 全球购物
校园报刊亭创业计划书
2014/01/02 职场文书
生日邀请函范文
2014/01/13 职场文书
教师个人教学反思
2016/02/23 职场文书
关于html选择框创建占位符的问题
2021/06/09 HTML / CSS
html5+实现plus.io进行拍照和图片等获取
2022/06/01 HTML / CSS
Java实现简单小画板
2022/06/10 Java/Android