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 相关文章推荐
jQuery UI Dialog控件中的表单无法正常提交的解决方法
Dec 19 Javascript
JavaScript中的常见问题解决方法(乱码,IE缓存,代理)
Nov 28 Javascript
js操作XML文件的实现方法兼容IE与FireFox
Jun 25 Javascript
Vue中fragment.js使用方法详解
Mar 09 Javascript
xmlplus组件设计系列之下拉刷新(PullRefresh)(6)
May 03 Javascript
Bootstrap响应式表格详解
May 23 Javascript
在Vue中如何使用Cookie操作实例
Jul 27 Javascript
十分钟带你快速了解React16新特性
Nov 10 Javascript
js实现鼠标单击Tab表单切换效果
May 16 Javascript
JS实现快递单打印功能【推荐】
Jun 21 Javascript
利用JavaScript将Excel转换为JSON示例代码
Jun 14 Javascript
微信小程序单选框自定义赋值
May 26 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
PHP form 表单传参明细研究
2009/07/17 PHP
PHP小技巧之函数重载
2014/06/02 PHP
简要剖析PHP的Yii框架的组件化机制的基本知识
2016/03/17 PHP
php 输出json及显示json中的中文汉字详解及实例
2016/11/09 PHP
PHP简单实现欧拉函数Euler功能示例
2017/11/06 PHP
一些常用的JS功能函数代码
2009/06/23 Javascript
ASP.NET中AJAX 调用实例代码
2012/05/03 Javascript
探索Emberjs制作一个简单的Todo应用
2012/11/07 Javascript
JS获得QQ号码的昵称,头像,生日的简单实例
2013/12/04 Javascript
jQuery-ui引入后Vs2008的无智能提示问题解决方法
2014/02/10 Javascript
js通过更改按钮的显示样式实现按钮的滑动效果
2014/04/23 Javascript
jQuery切换网页皮肤并保存到Cookie示例代码
2014/06/16 Javascript
Javascript图片上传前的本地预览实例
2014/06/16 Javascript
jQuery截取指定长度字符串代码
2014/08/21 Javascript
JS密码生成与强度检测完整实例(附demo源码下载)
2016/04/06 Javascript
web前端开发upload上传头像js示例代码
2016/10/22 Javascript
Bootstrap和Java分页实例第二篇
2016/12/23 Javascript
JavaScript数据结构之二叉树的遍历算法示例
2017/04/13 Javascript
AngularJS $http post 传递参数数据的方法
2018/10/09 Javascript
微信小程序开发注意指南和优化实践(小结)
2019/06/21 Javascript
python调用shell的方法
2013/11/20 Python
基于python元祖与字典与集合的粗浅认识
2017/08/23 Python
一个Python最简单的接口自动化框架
2018/01/02 Python
Django给admin添加Action的步骤详解
2019/05/01 Python
python实现websocket的客户端压力测试
2019/06/25 Python
tensorflow 实现数据类型转换
2020/02/17 Python
使用OpenCV对车道进行实时检测的实现示例代码
2020/06/19 Python
Python requests模块安装及使用教程图解
2020/06/30 Python
德国消费电子产品购物网站:Guter Kauf
2020/09/15 全球购物
广告学毕业生求职信
2014/01/30 职场文书
运动会口号8字
2014/06/07 职场文书
关于爱国的标语
2014/06/24 职场文书
交通事故协议书范本
2014/11/18 职场文书
2015年党员公开承诺事项
2015/04/27 职场文书
创建文明城市倡议书
2015/04/28 职场文书
背起爸爸上学观后感
2015/06/08 职场文书