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判断页面加载状态以及添加遮罩和缓冲动画的代码
Oct 11 Javascript
javascript设置金额样式转换保留两位小数示例代码
Dec 04 Javascript
使用百度地图api实现根据地址查询经纬度
Dec 11 Javascript
jQuery使用empty()方法删除元素及其所有子元素的方法
Mar 26 Javascript
JavaScript取得键盘按下方向键是哪个的方法
Aug 04 Javascript
JavaScript中浅讲ajax图文详解
Nov 11 Javascript
vue-router单页面路由
Jun 17 Javascript
使用vue2实现带地区编号和名称的省市县三级联动效果
Nov 05 Javascript
微信小程序外卖选购页实现切换分类与数量加减功能案例
Jan 15 Javascript
Weex开发之地图篇的具体使用
Oct 16 Javascript
vue跳转同一个组件,参数不同,页面接收值只接收一次的解决方法
Nov 05 Javascript
JavaScript类的继承多种实现方法
May 30 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中3des加密代码(完全与.net中的兼容)
2012/08/02 PHP
php获取YouTube视频信息的方法
2015/02/11 PHP
php面向对象程序设计入门教程
2019/06/22 PHP
javascript 日期时间函数(经典+完善+实用)
2009/05/27 Javascript
js 数组实现一个类似ruby的迭代器
2009/10/27 Javascript
JQuery入门——移除绑定事件unbind方法概述及应用
2013/02/05 Javascript
PHP abstract与interface之间的区别
2013/11/11 Javascript
JS动态加载当前时间的方法
2015/02/09 Javascript
有关Promises异步问题详解
2015/11/13 Javascript
javascript常用经典算法实例详解
2015/11/25 Javascript
javascript事件委托的用法及其好处简析
2016/04/04 Javascript
深入理解Javascript中的观察者模式
2017/02/20 Javascript
原生js实现旋转木马轮播图效果
2017/02/27 Javascript
jQuery自定义元素右键点击事件(实现案例)
2017/04/28 jQuery
JS声明对象时属性名加引号与不加引号的问题及解决方法
2018/02/16 Javascript
python计算最小优先级队列代码分享
2013/12/18 Python
在Python中操作时间之tzset()方法的使用教程
2015/05/22 Python
浅谈Python中的私有变量
2018/02/28 Python
解决Python pandas df 写入excel 出现的问题
2018/07/04 Python
使用python进行波形及频谱绘制的方法
2019/06/17 Python
django如何通过类视图使用装饰器
2019/07/24 Python
pytorch实现Tensor变量之间的转换
2020/02/17 Python
python模拟点击网页按钮实现方法
2020/02/25 Python
scrapy与selenium结合爬取数据(爬取动态网站)的示例代码
2020/09/28 Python
python使用scapy模块实现ping扫描的过程详解
2021/01/21 Python
整理HTML5的一些新特性与Canvas的常用属性
2016/01/29 HTML / CSS
Expedia英国:全球最大的在线旅游公司
2017/09/07 全球购物
幼儿园六一儿童节文艺汇演主持词
2014/03/21 职场文书
终止合同协议书
2014/04/17 职场文书
教师思想作风整顿个人剖析材料
2014/10/10 职场文书
销售会议开幕词
2015/01/28 职场文书
首席执行官观后感
2015/06/03 职场文书
田径运动会通讯稿
2015/07/18 职场文书
高中运动会前导词
2015/07/20 职场文书
python 定义函数 返回值只取其中一个的实现
2021/05/21 Python
Echarts如何重新渲染实例详解
2022/05/30 Javascript