JavaScript中的prototype和constructor简明总结


Posted in Javascript onApril 05, 2014

一、constructor
constructor的值是一个函数。在JavaScript中,除了null和undefined外的类型的值、数组、函数以及对象,都有一个constructor属性,constructor属性的值是这个值、数组、函数或者对象的构造函数。如:

var a = 12, // 数字
    b = 'str', // 字符串
    c = false, // 布尔值
    d = [1, 'd', function() { return 5; }], // 数组
    e = { name: 'e' }, // 对象
    f = function() { return 'function'; }; // 函数console.log('a: ', a.constructor); // Number()
console.log('b: ', b.constructor); // String()
console.log('c: ', c.constructor); // Boolean()
console.log('d: ', d.constructor); // Array()
console.log('e: ', e.constructor); // Object()
console.log('f: ', f.constructor); // Function()

以上的构造函数都是JavaScript内置的,我们也可以自定义构造函数,如:

function A(name) {
    this.name = name;
}var a = new A('a');
console.log(a.constructor); // A(name)

调用构造函数时,需要用new关键字,构造函数返回的是一个对象,看下面的代码就知道了:

var a = 4;
var b = new Number(4);console.log('a: ', typeof a); // a: number
console.log('b: ', typeof b); // b: object

二、 prototype
prototype是函数的一个属性,默认情况下,一个函数的prototype属性的值是一个与函数同名的空对象,匿名函数的prototype属性名为Object。如:

function fn() {}console.log(fn.prototype); // fn { }

prototype属性主要用来实现JavaScript中的继承,如:

function A(name) {
    this.name = name;
}A.prototype.show = function() {
    console.log(this.name);
};
function B(name) {
    this.name = name;
}
B.prototype = A.prototype;
var test = new B('test');
test.show(); // test

这儿有一个问题,test的构造函数其实是A函数而不是B函数:

console.log(test.constructor); // A(name)

这是因为B.prototype = A.prototype把B.prototype的构造函数改成了A,所以需要还原B.prototype的构造函数:

function A(name) {
    this.name = name;
}A.prototype.show = function() {
    console.log(this.name);
};
function B(name) {
    this.name = name;
}
B.prototype = A.prototype;
B.prototype.constructor = B;
var test = new B('test');
test.show(); // test
console.log(test.constructor); // B(name)

之所以要这么做,是因为prototype的值是一个对象,且它的构造函数也就是它的constructor属性的值就是它所在的函数,即:

console.log(A.prototype.constructor === A); // true

Javascript 相关文章推荐
ext form 表单提交数据的方法小结
Aug 08 Javascript
Firefox下提示illegal character并出现乱码的原因
Mar 25 Javascript
利用javascript判断文件是否存在
Dec 31 Javascript
jQuery实现提交按钮点击后变成正在处理字样并禁止点击的方法
Mar 24 Javascript
javascript清空table表格的方法
May 14 Javascript
折叠菜单及选择器的运用
Feb 03 Javascript
jQuery.form.js的使用详解
Jun 14 jQuery
使用yeoman构建angular应用的方法
Aug 14 Javascript
Three.js加载外部模型的教程详解
Nov 10 Javascript
vue keep-alive 动态删除组件缓存的例子
Nov 04 Javascript
使用vue引入maptalks地图及聚合效果的实现
Aug 10 Javascript
javascript实现下拉菜单效果
Feb 09 Javascript
JavaScript中的typeof操作符用法实例
Apr 05 #Javascript
Javascript排序算法之计数排序的实例
Apr 05 #Javascript
JavaScript中的正则表达式简明总结
Apr 04 #Javascript
JavaScript格式化日期时间的方法和自定义格式化函数示例
Apr 04 #Javascript
Javascript排序算法之合并排序(归并排序)的2个例子
Apr 04 #Javascript
JQuery记住用户名和密码的具体实现
Apr 04 #Javascript
JS根据变量保存方法名并执行方法示例
Apr 04 #Javascript
You might like
杏林同学录(三)
2006/10/09 PHP
php获取mysql数据库中的所有表名的代码
2011/04/23 PHP
php实现用户在线时间统计详解
2011/10/08 PHP
php函数间的参数传递(值传递/引用传递)
2013/09/23 PHP
php实现无限级分类(递归方法)
2015/08/06 PHP
Yii2.0 Basic代码中路由链接被转义的处理方法
2016/09/21 PHP
广告切换效果(缓动切换)
2009/05/27 Javascript
js下关于onmouseout、事件冒泡的问题经验小结
2010/12/09 Javascript
javascript 快速排序函数代码
2012/05/30 Javascript
jQuery多媒体插件jQuery Media Plugin使用详解
2014/12/19 Javascript
jQuery插件jRumble实现网页元素抖动
2015/06/05 Javascript
javascript实现下雪效果【实例代码】
2016/05/03 Javascript
jquery属性,遍历,HTML操作方法详解
2016/09/17 Javascript
jQuery图片加载失败替换默认图片方法汇总
2017/11/29 jQuery
AngularJS基于http请求实现下载php生成的excel文件功能示例
2018/01/23 Javascript
JQuery模拟实现网页中自定义鼠标右键菜单功能
2018/11/14 jQuery
用Python写的图片蜘蛛人代码
2012/08/27 Python
详解Python的单元测试
2015/04/28 Python
解析Python中while true的使用
2015/10/13 Python
关于Django外键赋值问题详解
2017/08/13 Python
使用Python实现从各个子文件夹中复制指定文件的方法
2018/10/25 Python
python简单鼠标自动点击某区域的实例
2019/06/25 Python
Python一键查找iOS项目中未使用的图片、音频、视频资源
2019/08/12 Python
python图片剪裁代码(图片按四个点坐标剪裁)
2020/03/10 Python
pycharm激活码免费分享适用最新pycharm2020.2.3永久激活
2020/11/25 Python
python可视化分析的实现(matplotlib、seaborn、ggplot2)
2021/02/03 Python
法国一家芭蕾舞鞋公司:Repetto
2018/11/12 全球购物
英国时尚高尔夫服装购物网站:Trendy Golf
2020/01/10 全球购物
2014优秀党员事迹材料
2014/08/14 职场文书
关于教师节的广播稿
2014/09/10 职场文书
2014年优秀党员材料
2014/12/18 职场文书
保洁员岗位职责
2015/02/04 职场文书
大学生村官入党自传
2015/06/26 职场文书
超市店长竞聘书
2015/09/15 职场文书
怎么用Python识别手势数字
2021/06/07 Python
Netty分布式客户端处理接入事件handle源码解析
2022/03/25 Java/Android