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 相关文章推荐
网页常用特效代码整理
Jun 23 Javascript
JS IE和FF兼容性问题汇总
Feb 09 Javascript
Javascript 文件夹选择框的两种解决方案
Jul 01 Javascript
跟着JQuery API学Jquery 之三 筛选
Apr 09 Javascript
JS仿flash上传头像效果实现代码
Jul 18 Javascript
巧用jQuery选择器提高写表单效率的方法
Aug 19 Javascript
javascript prototype原型详解(比较基础)
Dec 26 Javascript
JavaScript控制输入框中只能输入中文、数字和英文的方法【基于正则实现】
Mar 03 Javascript
w3c编程挑战_初级脚本算法实战篇
Jun 23 Javascript
react-router v4如何使用history控制路由跳转详解
Jan 09 Javascript
Node.js实现简单管理系统
Sep 23 Javascript
antd多选下拉框一行展示的实现方式
Oct 31 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
全国FM电台频率大全 - 13 福建省
2020/03/11 无线电
微信开发之网页授权获取用户信息(二)
2016/01/08 PHP
Yii2中DropDownList简单用法示例
2016/07/18 PHP
PHP实现的DES加密解密封装类完整实例
2017/04/29 PHP
PHP扩展mcrypt实现的AES加密功能示例
2019/01/29 PHP
用jscript实现新建和保存一个word文档
2007/06/15 Javascript
JavaScript 编程引入命名空间的方法与代码
2007/08/13 Javascript
有效的捕获JavaScript焦点的方法小结
2009/10/08 Javascript
js动态设置div的值下例子
2013/10/29 Javascript
Node.js编码规范
2014/07/14 Javascript
jQuery实现的一个自定义Placeholder属性插件
2014/08/11 Javascript
jQuery中[attribute=value]选择器用法实例
2014/12/31 Javascript
JavaScript严格模式详解
2017/01/16 Javascript
angular2中Http请求原理与用法详解
2018/01/11 Javascript
小程序中设置缓存过期的实现方法
2020/01/14 Javascript
解决vue+ element ui 表单验证有值但验证失败问题
2020/01/16 Javascript
JS实现表单中点击小眼睛显示隐藏密码框中的密码
2020/04/13 Javascript
[01:04:14]VP vs TNC 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
[01:59]翻天覆地,因你而变,7.20版本地图更新速览
2018/11/24 DOTA
50行代码实现贪吃蛇(具体思路及代码)
2013/04/27 Python
利用Python爬取微博数据生成词云图片实例代码
2017/08/31 Python
python3+PyQt5实现自定义窗口部件Counters
2018/04/20 Python
python实现爬取百度图片的方法示例
2019/07/06 Python
python flask 如何修改默认端口号的方法步骤
2019/07/12 Python
Python字符串格式化输出代码实例
2019/11/22 Python
python mysql中in参数化说明
2020/06/05 Python
详解基于python的图像Gabor变换及特征提取
2020/10/26 Python
IE8下CSS3选择器nth-child() 不兼容问题的解决方法
2016/11/16 HTML / CSS
HTML5计时器小例子
2013/10/15 HTML / CSS
将"引用"作为函数参数有哪些特点
2013/04/05 面试题
毕业实习个人鉴定范文
2013/12/10 职场文书
酒店经理职责
2014/01/30 职场文书
《一本男孩子必读的书》教学反思
2014/02/19 职场文书
妈妈再爱我一次观后感
2015/06/08 职场文书
HTML5基础学习之文本标签控制
2022/03/25 HTML / CSS
MySQL创建管理子分区
2022/04/13 MySQL