Javascript 构造函数详解


Posted in Javascript onOctober 22, 2014

一、什么是构造函数

在一些面向对象的语言,如Java、C++、PHP中,构造函数是很常见的。在Javascript中构造函数首先是一个普通的函数,它可以使用new 操作符来调用,并生成一个特殊类型的对象。

// "Benjamin" is a constructor

var benjamin = new Benjamin("zuojj", "male");

在上面这个实例中benjamin是一个Benjamin对象,那么它是如何来实例化的呢?

function Benjamin(username, sex) {

    this.username = username;

    this.sex = sex;

}

var benjamin = new Benjamin("zuojj", "male");

//Outputs: Benjamin{sex: "male",username: "zuojj"}

console.log(benjamin);

正如我们所看到的,“Benjamin”构造函数仅仅是接收传递过来的参数,并把它们赋值给this对象。这是因为当构造函数被new操作符调用时,构造函数的this对象赋值为new操作返回的对象。
这意味着上面的代码等同于:

benjamin = {

 "username": "zuojj",

 "sex": "male"

}

二、为什么使用构造函数

为什么使用构造函数,有以下几个方面的原因:
1.使用构造函数,意味着所有的这些对象,都可以使用相同的基本结构创建
2.使用构造函数,意味着“benjamin”对象被明确的标记为“Benjamin”函数的实例

function Benjamin(username, sex) {

    this.username = username;

    this.sex = sex;

}

var benjamin = new Benjamin("zuojj", "male");

var ben = {

 "username": "zuojj",

 "sex": "male"

}

//Outputs: true

console.log(benjamin instanceof Benjamin);

//Outputs: false

console.log(ben instanceof Benjamin);

3.使用构造函数,意味着我们可以在原型上定义公共方法,供多个实例共享

function Benjamin(username, sex) {

    this.username = username;

    this.sex = sex;

}

Benjamin.prototype.getName = function() {

 return this.username;

}

var benjamin = new Benjamin("zuojj", "male");

var ben = new Benjamin("lemon", "female");

//Outputs: zuojj

console.log(benjamin.getName());

//Outputs: lemon

console.log(ben.getName());

三、注意事项

1.new 关键字
在实例化构造函数的时候一定不要忘了使用new关键字,是否使用new关键字,对this对象的影响很大,不用new关键字的情况下,this对象会指向全局对象(window in browser and global in node)。因此定义构造函数时,建议函数名称首字母大写。
2.如果被调用的函数没有显式的 return 表达式,则隐式的会返回 this 对象 ? 也就是新创建的对象,否则将会影响返回的结果,但仅限于返回的是一个对象

function Bar() {

    return 2;

}

var bar = new Bar();

//返回新创建的对象

//Outputs: Bar {} 

console.log(bar);

function Test() {

    this.value = 2;

    return {

        foo: 1

    };

}

var test = new Test();

//返回的对象

//Outputs: Object {foo: 1} 

console.log(test);

我们需要注意的是:
a) new Bar() 返回的是新创建的对象,而不是数字的字面值 2。 因此 new Bar().constructor === Bar,但是如果返回的是数字对象,结果就不同了;
b) 这里得到的 new Test()是函数返回的对象,而不是通过new关键字新创建的对象,如下所示:

function Bar() {

    return 2;

}

var bar = new Bar();

function BarN() {

 return new Number(2);

}

var barn = new BarN();

//Outputs: true

console.log(bar.constructor === Bar);

//Outputs: Number {} 

console.log(barn);

//Ouputs: false

console.log(barn.constructor === BarN);

//Outputs: true

console.log(barn.constructor === Number);

/* -------------------------------------- */

function Test() {

    this.value = 2;

    return {

        foo: 1

    };

}

var test = new Test();

//Outputs: undefined

console.log(test.value);

//Ouputs: 1

console.log(test.foo);

以上就是对构造函数的总结,希望对初学者有所帮助,文中不妥之处,望批评、斧正。

Javascript 相关文章推荐
经常用到的JavasScript事件的翻译
Apr 09 Javascript
限制文本框输入N个字符的js代码
May 13 Javascript
js身份证判断方法支持15位和18位
Mar 18 Javascript
浅析javascript操作 cookie对象
Dec 26 Javascript
javascript日期计算实例分析
Jun 29 Javascript
jquery实现可横向和竖向展开的动态下滑菜单效果
Aug 24 Javascript
AngularJS实践之使用NgModelController进行数据绑定
Oct 08 Javascript
jQuery.cookie.js实现记录最近浏览过的商品功能示例
Jan 23 Javascript
axios全局请求参数设置,请求及返回拦截器的方法
Mar 05 Javascript
vue.js实现的幻灯片功能示例
Jan 18 Javascript
JS中的一些常用的函数式编程术语
Jun 15 Javascript
微信小程序picker组件两列关联使用方式
Oct 27 Javascript
Javascript中Array.prototype.map()详解
Oct 22 #Javascript
javascript数组详解
Oct 22 #Javascript
Javascript 数组排序详解
Oct 22 #Javascript
Javascript中arguments对象详解
Oct 22 #Javascript
Javascript中的默认参数详解
Oct 22 #Javascript
js style动态设置table高度
Oct 21 #Javascript
js读写json文件实例代码
Oct 21 #Javascript
You might like
实现“上一页”和“下一页按钮
2006/10/09 PHP
PHP 面向对象实现代码
2009/11/11 PHP
PHP 获取远程文件大小的3种解决方法
2013/07/11 PHP
php实现有趣的人品测试程序实例
2015/06/08 PHP
php封装的page分页类完整实例
2016/10/18 PHP
[原创]PHP实现字节数Byte转换为KB、MB、GB、TB的方法
2017/08/31 PHP
Laravel 使用查询构造器配合原生sql语句查询的例子
2019/10/12 PHP
PHP程序守护进程化实现方法详解
2020/07/16 PHP
HTML IMG标签 onload 内存溢出导致浏览器CPU占用过高
2021/03/09 Javascript
jQuery中的bind绑定事件与文本框改变事件的临时解决方法
2010/08/13 Javascript
javascript数组去重方法汇总
2015/04/23 Javascript
js操作table元素实现表格行列新增、删除技巧总结
2015/11/18 Javascript
微信小程序开发之视频播放器 Video 弹幕 弹幕颜色自定义实例
2016/12/08 Javascript
微信小程序实现签到功能
2018/10/31 Javascript
使用gulp构建前端自动化的方法示例
2018/12/25 Javascript
javascript移动端 电子书 翻页效果实现代码
2019/09/07 Javascript
vue 实现 rem 布局或vw 布局的方法
2019/11/13 Javascript
在Windows系统上搭建Nginx+Python+MySQL环境的教程
2015/12/25 Python
详解python中TCP协议中的粘包问题
2019/03/22 Python
如何为Python终端提供持久性历史记录
2019/09/03 Python
Django 自动生成api接口文档教程
2019/11/19 Python
有趣的Python图片制作之如何用QQ好友头像拼接出里昂
2020/04/22 Python
PyCharm中如何直接使用Anaconda已安装的库
2020/05/28 Python
python中tkinter窗口位置\坐标\大小等实现示例
2020/07/09 Python
Python读取Excel一列并计算所有对象出现次数的方法
2020/09/04 Python
香港草莓网土耳其网站:Strawberrynet TR
2017/03/02 全球购物
Funko官方商店:源自美国,畅销全球搪胶收藏玩偶
2018/09/15 全球购物
为什么要用EJB
2014/04/17 面试题
餐厅销售主管职责范本
2014/02/19 职场文书
《美丽的公鸡》教学反思
2014/02/25 职场文书
调解协议书
2014/04/16 职场文书
大学生英语演讲稿
2014/04/24 职场文书
2014法院干警廉洁警示教育思想汇报
2014/09/13 职场文书
2015年复活节活动总结
2015/02/27 职场文书
开会通知
2015/04/20 职场文书
导游词之四川武侯祠
2019/10/21 职场文书