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 相关文章推荐
ext监听事件方法[初级篇]
Apr 27 Javascript
javascript,jquery闭包概念分析
Jun 19 Javascript
Jquery响应回车键直接提交表单操作代码
Jul 25 Javascript
Node.js实现Excel转JSON
Apr 24 Javascript
JavaScript中的Math.sin()方法使用详解
Jun 15 Javascript
javascript检查某个元素在数组中的索引值
Mar 30 Javascript
Jquery attr()方法 属性赋值和属性获取详解
Apr 15 Javascript
实用又漂亮的BootstrapValidator表单验证插件
May 30 Javascript
js, jQuery实现全选、反选功能
Mar 08 Javascript
Node.JS循环删除非空文件夹及子目录下的所有文件
Mar 12 Javascript
JS实现简单日历特效
Jan 03 Javascript
通过angular CDK实现页面元素拖放的步骤详解
Jul 01 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
JoshChen_web格式编码UTF8-无BOM的小细节分析
2013/08/16 PHP
php提交post数组参数实例分析
2015/12/17 PHP
[JS源码]超长文章自动分页(客户端版)
2007/01/09 Javascript
JS 判断undefined的实现代码
2009/11/26 Javascript
老鱼 浅谈javascript面向对象编程
2010/03/04 Javascript
常用一些Javascript判断函数
2012/08/14 Javascript
如何使用Javascript正则表达式来格式化XML内容
2013/07/04 Javascript
简单的两种Extjs formpanel加载数据的方式
2013/11/09 Javascript
JS中如何判断传过来的JSON数据中是否存在某字段
2014/08/18 Javascript
微信分享的标题、缩略图、连接及描述设置方法
2014/10/14 Javascript
在JavaScript中操作时间之getUTCDate()方法的使用
2015/06/10 Javascript
jQuery插件datepicker 日期连续选择
2015/06/12 Javascript
简单谈谈node.js 版本控制 nvm和 n
2015/10/15 Javascript
jQuery使用方法
2017/02/04 Javascript
Vue中的v-cloak使用解读
2017/03/27 Javascript
基于vue.js快速搭建图书管理平台
2017/10/29 Javascript
vue系列之requireJs中引入vue-router的方法
2018/07/18 Javascript
微信小程序 slot踩坑的解决
2019/04/01 Javascript
微信小程序非跳转式组件授权登录的方法示例
2019/05/22 Javascript
js tab栏切换代码实例解析
2019/09/03 Javascript
JS数组降维的实现Array.prototype.concat.apply([], arr)
2020/04/28 Javascript
vue+element-ui表格封装tag标签使用插槽
2020/06/18 Javascript
Vue环境搭建+VSCode+Win10的详细教程
2020/08/19 Javascript
[06:53]2018DOTA2国际邀请赛寻真——为复仇而来的Newbee
2018/08/15 DOTA
SublimeText 2编译python出错的解决方法(The system cannot find the file specified)
2013/11/27 Python
介绍Python中的一些高级编程技巧
2015/04/02 Python
Python实现Logger打印功能的方法详解
2017/09/01 Python
Python爬虫解析网页的4种方式实例及原理解析
2019/12/30 Python
Python中qutip用法示例详解
2020/10/02 Python
纯CSS3实现的阴影效果
2014/12/24 HTML / CSS
清明节演讲稿
2014/05/27 职场文书
小学语文教学经验交流材料
2014/06/02 职场文书
治庸问责心得体会
2014/09/12 职场文书
基层干部个人对照检查及整改措施
2014/10/28 职场文书
初中差生评语
2014/12/29 职场文书
vue封装数字翻牌器
2022/04/20 Vue.js