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常用排序实现代码
Dec 28 Javascript
js点击更换背景颜色或图片的实例代码
Jun 25 Javascript
简单的代码实现jquery定时器
Jan 03 Javascript
javascript操作ul中li的方法
May 14 Javascript
JQuery boxy插件在IE中边角图片不显示问题的解决
May 20 Javascript
如何使用Bootstrap 按钮实例详解
Mar 29 Javascript
详解webpack模块加载器兼打包工具
Sep 11 Javascript
Angular PWA使用的Demo示例
Jan 31 Javascript
vue响应式系统之observe、watcher、dep的源码解析
Apr 09 Javascript
JS桶排序的简单理解与实现方法示例
Nov 25 Javascript
微信小程序后端实现授权登录
Feb 24 Javascript
springboot+vue+对接支付宝接口+二维码扫描支付功能(沙箱环境)
Oct 15 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/20 PHP
php session_start()出错原因分析及解决方法
2013/10/28 PHP
关于js和php对url编码的处理方法
2014/03/04 PHP
PHP+mysql+ajax轻量级聊天室实现方法详解
2016/10/17 PHP
Javascript的常规数组和关联数组对比小结
2012/05/24 Javascript
仿当当网淘宝网等主流电子商务网站商品分类导航菜单
2013/09/25 Javascript
一个很有趣3D球状标签云兼容IE8
2014/08/22 Javascript
js下拉选择框与输入框联动实现添加选中值到输入框的方法
2015/08/17 Javascript
js实现不提交表单获取单选按钮值的方法
2015/08/21 Javascript
微信小程序 Canvas增强组件实例详解及源码分享
2017/01/04 Javascript
Bootstrap table表格简单操作
2017/02/07 Javascript
Vue.directive 自定义指令的问题小结
2018/03/04 Javascript
详解vue组件中使用路由方法
2019/02/12 Javascript
JavaScript深入V8引擎以及编写优化代码的5个技巧
2019/06/24 Javascript
监控Nodejs的性能实例代码
2019/07/02 NodeJs
layer页面跳转,获取html子节点元素的值方法
2019/09/27 Javascript
解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题
2020/08/14 Javascript
Vue实现图书管理小案例
2020/12/03 Vue.js
Python装饰器的函数式编程详解
2015/02/27 Python
python通过openpyxl生成Excel文件的方法
2015/05/12 Python
基于Python pip用国内镜像下载的方法
2018/06/12 Python
在python中利用GDAL对tif文件进行读写的方法
2018/11/29 Python
python opencv实现证件照换底功能
2019/08/19 Python
利用python实现冒泡排序算法实例代码
2019/12/01 Python
详解Python 中的容器 collections
2020/08/17 Python
浅析CSS3 用text-overflow解决文字排版问题
2020/10/28 HTML / CSS
美国女性运动零售品牌:Lady Foot Locker
2017/05/12 全球购物
实习推荐信
2014/05/10 职场文书
大学生活动总结模板
2014/07/02 职场文书
老人再婚离婚协议书范本
2014/10/27 职场文书
二手房购房意向书
2015/05/09 职场文书
值班管理制度范本
2015/08/06 职场文书
2016入党积极分子考察评语
2015/12/01 职场文书
Python源码解析之List
2021/05/21 Python
Go 语言下基于Redis分布式锁的实现方式
2021/06/28 Golang
Android开发手册TextInputLayout样式使用示例
2022/06/10 Java/Android