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 相关文章推荐
JavaScript.The.Good.Parts阅读笔记(二)作用域&闭包&减缓全局空间污染
Nov 16 Javascript
JavaScript下利用fso判断文件是否存在的代码
Dec 11 Javascript
ASP.NET jQuery 实例8 (动态添加内容到DropDownList)
Feb 03 Javascript
jQuery处理json数据返回数组和输出的方法
Mar 11 Javascript
jQuery实现带延迟的二级tab切换下拉列表效果
Sep 01 Javascript
基于Turn.js 实现翻书效果实例解析
Jun 20 Javascript
深入浅析ES6 Class 中的 super 关键字
Oct 20 Javascript
使用Angular CLI从蓝本生成代码详解
Mar 24 Javascript
使用微信小程序开发弹出框应用实例详解
Oct 18 Javascript
Vue 框架之键盘事件、健值修饰符、双向数据绑定
Nov 14 Javascript
JS解惑之Object中的key是有序的么
May 06 Javascript
Vue内部渲染视图的方法
Sep 02 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
德生PL990的分析评价
2021/03/02 无线电
Mysql中分页查询的两个解决方法比较
2013/05/02 PHP
探讨PHP调用时间格式的参数详解
2013/06/06 PHP
PHP实现的只保留字符串首尾字符功能示例【隐藏部分字符串】
2019/03/11 PHP
更正确的asp冒泡排序
2007/05/24 Javascript
jquery用data方法获取某个元素上的事件
2014/06/23 Javascript
jQuery中:not选择器用法实例
2014/12/30 Javascript
Js与Jq 获取页面元素值的方法和差异对比
2015/04/30 Javascript
jquery插件jquery.nicescroll实现图片无滚动条左右拖拽的方法
2015/08/10 Javascript
javascript高级选择器querySelector和querySelectorAll全面解析
2016/04/07 Javascript
Angular 输入框实现自定义验证功能
2017/02/19 Javascript
解决Vue2.0自带浏览器里无法打开的原因(兼容处理)
2017/07/28 Javascript
微信{"errcode":48001,"errmsg":"api unauthorized, hints: [ req_id: 1QoCla0699ns81 ]"}
2018/10/12 Javascript
Vue Echarts实现可视化世界地图代码实例
2019/05/07 Javascript
[51:05]DOTA2上海特级锦标赛主赛事日 - 5 败者组决赛Liquid VS EG第一局
2016/03/06 DOTA
python中如何正确使用正则表达式的详细模式(Verbose mode expression)
2017/11/08 Python
python正则表达式爬取猫眼电影top100
2018/02/24 Python
python基础教程项目五之虚拟茶话会
2018/04/02 Python
python替换字符串中的子串图文步骤
2019/06/19 Python
简单了解python的break、continue、pass
2019/07/08 Python
Django模板Templates使用方法详解
2019/07/19 Python
Python修改DBF文件指定列
2020/12/19 Python
python 如何上传包到pypi
2020/12/24 Python
浅析HTML5页面元素及属性
2021/01/20 HTML / CSS
巴西网上药房:onofre
2016/11/21 全球购物
FLIR美国官网:热成像, 夜视和红外摄像系统
2018/07/13 全球购物
瑞典度假品牌:OAS
2019/05/28 全球购物
预备党员思想汇报
2014/01/08 职场文书
五年级语文教学反思
2014/01/30 职场文书
部队2014年终工作总结
2014/11/27 职场文书
2014年团工作总结
2014/11/27 职场文书
2015年社区服务活动总结
2015/03/25 职场文书
2015年幼儿园班务工作总结
2015/05/12 职场文书
大学生暑期实践报告
2015/07/13 职场文书
如果用一句诗总结你的上半年,你会用哪句呢?
2019/07/16 职场文书
详解Mysql和Oracle之间的误区
2021/05/18 MySQL