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工具_Form 封装
Aug 21 Javascript
js动态设置鼠标事件示例代码
Oct 30 Javascript
JavaScript使用encodeURI()和decodeURI()获取字符串值的方法
Aug 04 Javascript
jQuery焦点图轮播特效代码分享(3款)
Sep 05 Javascript
使用CSS+JavaScript或纯js实现半透明遮罩效果的实例分享
May 09 Javascript
js对字符串进行编码的方法总结(推荐)
Nov 10 Javascript
Vue模拟数据,实现路由进入商品详情页面的示例
Aug 31 Javascript
Vue中多个元素、组件的过渡及列表过渡的方法示例
Feb 13 Javascript
js获取form表单中name属性的值
Feb 27 Javascript
vue 获取视频时长的实例代码
Aug 20 Javascript
vue3.0 的 Composition API 的使用示例
Oct 26 Javascript
详解微信小程序(Taro)手动埋点和自动埋点的实现
Mar 02 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
什么是调频(FM)、调幅(AM)、短波(SW)、长波(LW)
2021/03/01 无线电
php数组函数序列之array_unique() - 去除数组中重复的元素值
2011/10/29 PHP
php对象在内存中的存在形式分析
2015/02/03 PHP
js prototype截取字符串函数
2010/04/01 Javascript
table行随鼠标移动变色示例
2014/05/07 Javascript
jQuery实现高亮显示的方法
2015/03/10 Javascript
javascript匀速动画和缓冲动画详解
2016/10/20 Javascript
通过命令行创建vue项目的方法
2017/07/20 Javascript
jQuery实现碰到边缘反弹的动画效果
2018/02/24 jQuery
一个Vue页面的内存泄露分析详解
2018/06/25 Javascript
Bootstrap模态对话框用法简单示例
2018/08/31 Javascript
Vue加载json文件的方法简单示例
2019/01/28 Javascript
JS实现点击li标签弹出对应的索引功能【案例】
2019/02/18 Javascript
微信小程序云开发实现增删改查功能
2019/05/17 Javascript
解析原来浏览器原生支持JS Base64编码解码
2019/08/12 Javascript
vue element 关闭当前tab 跳转到上一路由操作
2020/07/22 Javascript
[44:51]2018DOTA2亚洲邀请赛 4.4 淘汰赛 VP vs Liquid 第二场
2018/04/05 DOTA
Python中的__SLOTS__属性使用示例
2015/02/18 Python
简介Python的collections模块中defaultdict类型的用法
2016/07/07 Python
使用python获取csv文本的某行或某列数据的实例
2018/04/03 Python
python多维数组切片方法
2018/04/13 Python
对Python协程之异步同步的区别详解
2019/02/19 Python
python中的反斜杠问题深入讲解
2019/08/12 Python
解决pyinstaller打包运行程序时出现缺少plotly库问题
2020/06/02 Python
基于html5 DeviceOrientation 实现微信摇一摇功能
2015/09/25 HTML / CSS
HTML5 Canvas实现放大镜效果示例
2020/03/25 HTML / CSS
Madewell美德威尔美国官网:美国休闲服饰品牌
2016/11/25 全球购物
初中生期末考试的自我评价
2013/12/17 职场文书
库房主管岗位职责
2013/12/31 职场文书
专家推荐信模板
2014/05/09 职场文书
我为党旗添光彩演讲稿
2014/09/10 职场文书
四风专项整治工作情况汇报
2014/10/28 职场文书
导游词之上饶龟峰
2019/10/25 职场文书
Python基础之Socket通信原理
2021/04/22 Python
python 经纬度求两点距离、三点面积操作
2021/06/03 Python
PostgreSQL并行计算算法及参数强制并行度设置方法
2022/04/06 PostgreSQL