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代码-----展开收起效果示例
Jul 03 Javascript
jquery之超简单的div显示和隐藏特效demo(分享)
Jul 09 Javascript
jQuery中的jQuery()方法用法分析
Dec 27 Javascript
JQuery实现防止退格键返回的方法
Feb 12 Javascript
JS中artdialog弹出框控件之提交表单思路详解
Apr 18 Javascript
浅谈jquery之on()绑定事件和off()解除绑定事件
Oct 26 Javascript
深入理解javascript中的 “this”
Jan 17 Javascript
jQuery实现验证码功能
Mar 17 Javascript
Vue路由history模式解决404问题的几种方法
Sep 29 Javascript
微信小程序实现预览图片功能
Oct 22 Javascript
JavaScript进阶(三)闭包原理与用法详解
May 09 Javascript
js面向对象编程OOP及函数式编程FP区别
Jul 07 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
咖啡的种类和口感
2021/03/03 新手入门
php mysql Errcode: 28 终极解决方法
2009/07/01 PHP
php替换超长文本中的特殊字符的函数代码
2012/05/22 PHP
关于使用key/value数据库redis和TTSERVER的心得体会
2013/06/28 PHP
PHP获取指定函数定义在哪个文件中以及其所在的行号实例
2014/05/08 PHP
麻雀虽小五脏俱全 Dojo自定义控件应用
2010/09/04 Javascript
JavaScript高级程序设计 阅读笔记(十四) js继承机制的实现
2012/08/14 Javascript
jQuery使用之设置元素样式用法实例
2015/01/19 Javascript
javascript二维数组转置实例
2015/01/22 Javascript
jQuery弹出层插件Lightbox_me使用指南
2015/04/21 Javascript
js实现Select列表内容自动滚动效果代码
2015/08/20 Javascript
js+css实现超简洁的二级下拉菜单效果代码
2015/09/07 Javascript
jquery按回车键实现表单提交的简单实例
2016/05/25 Javascript
VUEJS实战之利用laypage插件实现分页(3)
2016/06/13 Javascript
Angular.js中上传指令ng-upload的基本使用教程
2017/07/30 Javascript
JavaScript中Hoisting详解 (变量提升与函数声明提升)
2017/08/18 Javascript
Vue完整项目构建(进阶篇)
2018/02/10 Javascript
egg.js的基本使用和调用数据库的方法示例
2019/05/18 Javascript
详解JWT token心得与使用实例
2019/08/02 Javascript
React实现评论的添加和删除
2020/10/20 Javascript
python实现中文输出的两种方法
2015/05/09 Python
python3实现暴力穷举博客园密码
2016/06/19 Python
Python实现将一个正整数分解质因数的方法分析
2017/12/14 Python
Python基于列表list实现的CRUD操作功能示例
2018/01/05 Python
对pandas的行列名更改与数据选择详解
2018/11/12 Python
Python实战购物车项目的实现参考
2019/02/20 Python
Django使用AJAX调用自己写的API接口的方法
2019/03/06 Python
Django实现分页显示效果
2019/10/31 Python
Python使用configparser读取ini配置文件
2020/05/25 Python
Python datetime模块使用方法小结
2020/06/18 Python
Python使用pycharm导入pymysql教程
2020/09/16 Python
HTML5拖拽文件上传的示例代码
2021/03/04 HTML / CSS
Smashbox英国官网:美国知名彩妆品牌
2017/11/13 全球购物
会计主管岗位职责
2014/01/03 职场文书
领导干部保密承诺书
2014/08/30 职场文书
python中的None与NULL用法说明
2021/05/25 Python