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 相关文章推荐
JavaScript编程的10个实用小技巧
Apr 18 Javascript
jquery列表拖动排列(由项目提取相当好用)
Jun 17 Javascript
SpringMVC返回json数据的三种方式
Dec 10 Javascript
javascript阻止事件冒泡和浏览器的默认行为
Jan 21 Javascript
angular2路由切换改变页面title的示例代码
Aug 23 Javascript
JavaScript 数组去重并统计重复元素出现的次数实例
Dec 14 Javascript
详解VUE中常用的几种import(模块、文件)引入方式
Jul 03 Javascript
Angular5整合富文本编辑器TinyMCE的方法(汉化+上传)
May 26 Javascript
jquery插件懒加载的示例
Oct 24 jQuery
JS如何实现在弹出窗口中加载页面
Dec 03 Javascript
React 高阶组件HOC用法归纳
Jun 13 Javascript
js判断两个数组相等的5种方法
May 06 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
How do I change MySQL timezone?
2008/03/26 PHP
测试php函数的方法
2013/11/13 PHP
PHP CURL 内存泄露问题解决方法
2015/02/12 PHP
CI框架中$this->load->library()用法分析
2016/05/18 PHP
用javascript来实现动画导航效果的代码
2007/12/16 Javascript
JQuery的Alert消息框插件使用介绍
2010/10/09 Javascript
Js操作Select大全(取值、设置选中等等)
2013/10/29 Javascript
javascript实现yield的方法
2013/11/06 Javascript
JavaScript中合并数组的N种方法
2014/09/16 Javascript
javascript设计简单的秒表计时器
2020/09/05 Javascript
Atitit.js的键盘按键事件捆绑and事件调度
2016/04/01 Javascript
微信小程序 ES6Promise.all批量上传文件实现代码
2017/04/14 Javascript
Vue from-validate 表单验证的示例代码
2017/09/26 Javascript
vue2导航根据路由传值,而改变导航内容的实例
2017/11/10 Javascript
原生JS实现网页手机音乐播放器 歌词同步播放的示例
2018/02/02 Javascript
JavaScript设计模式之建造者模式实例教程
2018/07/02 Javascript
JavaScript创建表格的方法
2020/04/13 Javascript
[53:38]OG vs LGD 2018国际邀请赛淘汰赛BO3 第三场 8.26
2018/08/30 DOTA
浅谈python和C语言混编的几种方式(推荐)
2017/09/27 Python
Python编程求质数实例代码
2018/01/31 Python
Pycharm 文件更改目录后,执行路径未更新的解决方法
2019/07/19 Python
修改 CentOS 6.x 上默认Python的方法
2019/09/06 Python
python如何将两张图片生成为全景图片
2020/03/05 Python
Pandas之read_csv()读取文件跳过报错行的解决
2020/04/21 Python
Python建造者模式案例运行原理解析
2020/06/29 Python
html5 移动端视频video的android兼容(去除播放控件、全屏)
2020/03/26 HTML / CSS
全球烹饪课程的领先预订平台:Cookly
2020/01/28 全球购物
晚宴邀请函范文
2014/01/15 职场文书
大学生的创业计划书就该这么写
2014/01/30 职场文书
小学安全教育材料
2014/02/17 职场文书
乡镇务虚会发言材料
2014/10/20 职场文书
金陵十三钗观后感
2015/06/04 职场文书
就业指导讲座心得体会
2016/01/15 职场文书
2020优秀员工演讲稿(三篇)
2019/10/17 职场文书
Win11应用商店打开闪退怎么解决? win11应用商店打不开的多种解决办法
2022/04/05 数码科技
Nginx+Tomcat负载均衡多实例详解
2022/04/11 Servers