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 相关文章推荐
js删除所有的cookie的代码
Nov 25 Javascript
用JS实现一个TreeMenu效果分享
Aug 28 Javascript
表单元素的submit()方法和onsubmit事件应用概述
Feb 01 Javascript
JS实现超精简响应鼠标显示二级菜单代码
Sep 12 Javascript
创建自己的jquery表格插件
Nov 25 Javascript
BootStrap table使用方法分析
Nov 08 Javascript
Easyui Datagrid自定义按钮列(最后面的操作列)
Jul 13 Javascript
Angularjs实现下拉框联动的示例代码
Aug 22 Javascript
React从react-router路由上做登陆验证控制的方法
May 10 Javascript
JS实现的杨辉三角【帕斯卡三角形】算法示例
Feb 26 Javascript
微信小程序学习笔记之获取位置信息操作图文详解
Mar 29 Javascript
详解vue中this.$emit()的返回值是什么
Apr 07 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
PHP $_SERVER详解
2009/01/16 PHP
在laravel中实现事务回滚的方法
2019/10/10 PHP
JQuery 初体验(建议学习jquery)
2009/04/25 Javascript
javascript 动态修改样式和层叠样式表代码
2010/04/27 Javascript
cument.execCommand()用法深入理解
2012/12/04 Javascript
用循环或if语句从json中取数据示例
2014/08/18 Javascript
javascript将url中的参数加密解密代码
2014/11/17 Javascript
JavaScript模拟可展开、拖动与关闭的聊天窗口实例
2015/05/12 Javascript
JS模拟实现Select效果代码
2015/09/24 Javascript
javascript基于prototype实现类似OOP继承的方法
2015/12/16 Javascript
基于JavaScript实现定时跳转到指定页面
2016/01/01 Javascript
javaScript数组迭代方法详解
2016/04/14 Javascript
详解js的延迟对象、跨域、模板引擎、弹出层、AJAX【附实例下载】
2016/12/19 Javascript
原生js实现对Ajax的封装(仿jquery)
2017/01/22 Javascript
JavaScript实现父子dom同时绑定两个点击事件,一个用捕获,一个用冒泡时执行顺序的方法
2017/03/30 Javascript
jQuery正则验证注册页面经典实例
2017/06/10 jQuery
详解webpack自定义loader初探
2018/08/29 Javascript
JS原生瀑布流效果实现
2019/04/26 Javascript
js实现圆形菜单选择器
2020/12/03 Javascript
python里将list中元素依次向前移动一位
2014/09/12 Python
利用Python实现简单的相似图片搜索的教程
2015/04/23 Python
python实现冒泡排序算法的两种方法
2018/03/10 Python
Python实现基于C/S架构的聊天室功能详解
2018/07/07 Python
Python用于学习重要算法的模块pygorithm实例浅析
2018/08/16 Python
通过python实现弹窗广告拦截过程详解
2019/07/10 Python
Omio法国:全欧洲低价大巴、火车和航班搜索和比价
2017/11/13 全球购物
台湾家适得:Homeget
2019/02/11 全球购物
PHP面试题附答案
2015/11/28 面试题
小学生自我评价范例
2013/09/24 职场文书
汽修专业学生自我鉴定
2013/11/16 职场文书
后勤岗位职责
2013/11/26 职场文书
庆七一活动方案
2014/01/25 职场文书
医校毕业生自我鉴定
2014/01/25 职场文书
初中生庆国庆演讲稿范文2014
2014/09/25 职场文书
公司开会通知
2015/04/20 职场文书
bat批处理之字符串操作的实现
2022/03/16 Python