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 相关文章推荐
用window.location.href实现刷新另个框架页面
Mar 07 Javascript
javascript 拷贝节点cloneNode()使用介绍
Apr 03 Javascript
js实现超简单的展开、折叠目录代码
Aug 28 Javascript
jquery实现鼠标点击后展开列表内容的导航栏效果
Sep 14 Javascript
基于JQuery实现仿网易邮箱全屏动感滚动插件fullPage
Sep 20 Javascript
JS随机打乱数组的方法小结
Jun 22 Javascript
jQuery 局部div刷新和全局刷新方法总结
Oct 05 Javascript
详解如何使用nvm管理Node.js多版本
May 06 Javascript
js中位数不足自动补位扩展padLeft、padRight实现代码
Apr 06 Javascript
JS forEach跳出循环2种实现方法
Jun 24 Javascript
vue实践---根据不同环境,自动转换请求的url地址操作
Sep 21 Javascript
如何在Vue项目中添加接口监听遮罩
Jan 25 Vue.js
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
Linux下进行MYSQL编程时插入中文乱码的解决方案
2007/03/15 PHP
openPNE常用方法分享
2011/11/29 PHP
利用PHP+JS实现搜索自动提示(实例)
2013/06/09 PHP
php中动态调用函数的方法
2015/03/16 PHP
深入理解PHP中的empty和isset函数
2016/05/26 PHP
PHP基于socket实现客户端和服务端通讯功能
2017/07/13 PHP
jQuery .attr()和.removeAttr()方法操作元素属性示例
2013/07/16 Javascript
js调用图片隐藏&显示实现代码
2013/09/13 Javascript
jQuery使用CSS()方法给指定元素同时设置多个样式
2015/03/26 Javascript
JS模拟实现Select效果代码
2015/09/24 Javascript
为何JS操作的href都是javascript:void(0);呢
2015/11/12 Javascript
jQuery实现监控页面所有ajax请求的方法
2015/12/10 Javascript
基于jquery实现智能表单验证操作
2016/05/09 Javascript
浅谈Vue.js中的v-on(事件处理)
2017/09/05 Javascript
利用jquery如何从json中读取数据追加到html中
2017/12/01 jQuery
JS脚本实现网页自动秒杀点击
2018/01/11 Javascript
Vue中props的详解
2019/05/16 Javascript
微信小程序实现搜索指定景点周边美食、酒店
2019/05/18 Javascript
Vue v-for循环之@click点击事件获取元素示例
2019/11/09 Javascript
Vue清除定时器setInterval优化方案分享
2020/07/21 Javascript
js实现3D旋转相册
2020/08/02 Javascript
jquery实现广告上下滚动效果
2021/03/04 jQuery
[00:52]DOTA2第二届亚洲邀请赛预选赛宣传片
2017/01/13 DOTA
用python 制作图片转pdf工具
2015/01/30 Python
python实现通过代理服务器访问远程url的方法
2015/04/29 Python
python安装Scrapy图文教程
2017/08/14 Python
python中使用xlrd读excel使用xlwt写excel的实例代码
2018/01/31 Python
selenium+python自动化测试环境搭建步骤
2019/06/03 Python
简单了解python单例模式的几种写法
2019/07/01 Python
深入浅析Python科学计算库Scipy及安装步骤
2019/10/12 Python
Python 词典(Dict) 加载与保存示例
2019/12/06 Python
Pycharm的Available Packages为空的解决方法
2020/09/18 Python
iostream与iostream.h的区别
2015/01/16 面试题
2015暑假社会调查报告
2015/07/13 职场文书
Python OpenGL基本配置方式
2022/05/20 Python
字节飞书面试promise.all实现示例
2022/06/16 Javascript