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文件中调用js的实现方法小结
Oct 23 Javascript
JavaScript Event学习第十章 一些可替换的事件对
Feb 10 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(三)情景对话中仿打字机输出文字
Jan 23 Javascript
深入document.write()与HTML4.01的非成对标签的详解
May 08 Javascript
jQuery动画效果-slideUp slideDown上下滑动示例代码
Aug 28 Javascript
js拼接html注意问题示例探讨
Jul 14 Javascript
JavaScript弹窗基础篇
Apr 27 Javascript
详解jquery validate实现表单验证 (正则表达式)
Jan 18 Javascript
js+html5生成自动排列对话框实例
Oct 09 Javascript
vue实现可视化可拖放的自定义表单的示例代码
Mar 20 Javascript
小程序实现搜索界面 小程序实现推荐搜索列表效果
May 18 Javascript
Vue的v-model的几种修饰符.lazy,.number和.trim的用法说明
Aug 05 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自定义函数返回多个值
2006/11/26 PHP
php安全配置 如何配置使其更安全
2011/12/16 PHP
js简单实现让文本框内容逐个字的显示出来
2013/10/22 Javascript
Jquery自定义button按钮的几种方法
2014/06/11 Javascript
基于jQuery实现的文字按钮表单特效整理
2014/12/07 Javascript
js实现下拉框选择要显示图片的方法
2015/02/16 Javascript
javascript常用的方法整理
2015/08/20 Javascript
Bootstrap的图片轮播示例代码
2015/08/31 Javascript
js根据手机客户端浏览器类型,判断跳转官网/手机网站多个实例代码
2016/04/30 Javascript
动态加载权限管理模块中的Vue组件
2018/01/16 Javascript
bootstrap fileinput插件实现预览上传照片功能
2018/01/23 Javascript
Angular 封装并发布组件的方法示例
2018/04/19 Javascript
解决layer弹层遮罩挡住窗体的问题
2018/08/17 Javascript
vue如何获取自定义元素属性参数值的方法
2019/05/14 Javascript
js打开word文档预览操作示例【不是下载】
2019/05/23 Javascript
微信小程序 导入图标实现过程详解
2019/10/11 Javascript
Python THREADING模块中的JOIN()方法深入理解
2015/02/18 Python
Python网络爬虫项目:内容提取器的定义
2016/10/25 Python
浅谈django rest jwt vue 跨域问题
2018/10/26 Python
Python 中Django验证码功能的实现代码
2019/06/20 Python
Django 开发环境与生产环境的区分详解
2019/07/26 Python
python解析yaml文件过程详解
2019/08/30 Python
Python 面向对象之封装、继承、多态操作实例分析
2019/11/21 Python
python实现贪吃蛇游戏源码
2020/03/21 Python
python中os包的用法
2020/06/01 Python
若通过ObjectOutputStream向一个文件中多次以追加方式写入object,为什么用ObjectInputStream读取这些object时会产生StreamCorruptedException?
2016/10/17 面试题
如何写毕业求职自荐信
2013/11/06 职场文书
市场营销专科应届生求职信
2013/11/24 职场文书
大学生的网络创业计划书
2013/12/26 职场文书
十佳青年个人事迹材料
2014/01/28 职场文书
一年级班主任感言
2014/03/08 职场文书
常务副总经理任命书
2014/06/05 职场文书
2014年国庆节庆祝建国65周年比赛演讲稿
2014/09/21 职场文书
廉政党课工作报告案例
2019/06/21 职场文书
tensorflow学习笔记之tfrecord文件的生成与读取
2021/03/31 Python
Java实现斗地主之洗牌发牌
2021/06/14 Java/Android