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 相关文章推荐
showModelessDialog()使用详解
Sep 07 Javascript
jQuery 学习第五课 Ajax 使用说明
May 17 Javascript
jquery解析xml字符串示例分享
Mar 25 Javascript
javascript中JSON.parse()与eval()解析json的区别
May 19 Javascript
jQuery解决input元素的blur事件和其他非表单元素的click事件冲突问题
Aug 15 Javascript
Javascript使用uploadify来实现多文件上传
Nov 16 Javascript
jQuery实现弹窗居中效果类似alert()
Feb 27 Javascript
javascript编写简易计算器
May 06 Javascript
微信小程序 如何引入外部字体库iconfont的图标
Jan 31 Javascript
微信小程序实现MUI数字输入框效果
Jan 31 Javascript
vue 实现通过手机发送短信验证码注册功能
Apr 19 Javascript
elementUi vue el-radio 监听选中变化的实例代码
Jun 28 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
div li的多行多列 无刷新分页示例代码
2013/10/16 PHP
PHP Session机制简介及用法
2014/08/19 PHP
joomla组件开发入门教程
2016/05/04 PHP
Yii2增删改查之查询 where参数详细介绍
2016/08/08 PHP
PHP中关键字interface和implements详解
2017/06/14 PHP
基于laravel where的高级使用方法
2019/10/10 PHP
在JS中最常看到切最容易迷惑的语法(转)
2010/10/29 Javascript
基于mootools 1.3框架下的图片滑动效果代码
2011/04/22 Javascript
javascript学习笔记(十四) window对象使用介绍
2012/06/20 Javascript
js控制淡入淡出示例代码
2013/11/12 Javascript
JS注释所产生的bug 即使注释也会执行
2013/11/19 Javascript
利用js正则表达式验证手机号,email地址,邮政编码
2014/01/23 Javascript
node.js开发中使用Node Supervisor实现监测文件修改并自动重启应用
2014/11/04 Javascript
兼容Firefox的Javascript XSLT 处理XML文件
2014/12/31 Javascript
在JavaScript中处理时间之getHours()方法的使用
2015/06/10 Javascript
ReactNative列表ListView的用法
2017/08/02 Javascript
全面介绍vue 全家桶和项目实例
2017/12/27 Javascript
Vue 使用中的小技巧
2018/04/26 Javascript
Nodejs中获取当前函数被调用的行数及文件名详解
2018/12/12 NodeJs
详解JavaScript中new操作符的解析和实现
2020/09/04 Javascript
[01:02]DOTA2辉夜杯决赛日 CDEC.Y对阵VG赛前花絮
2015/12/27 DOTA
Django shell调试models输出的SQL语句方法
2019/08/29 Python
python实现KNN分类算法
2019/10/16 Python
tensorflow使用指定gpu的方法
2020/02/04 Python
django日志默认打印request请求信息的方法示例
2020/05/17 Python
Python读写Excel表格的方法
2021/03/02 Python
CSS3制作ajax loader icon实现思路及代码
2013/08/25 HTML / CSS
CSS3弹性盒模型开发笔记(二)
2016/04/26 HTML / CSS
香港个人化生活购物网站:Ballyhoo Limited
2016/09/10 全球购物
迟到检讨书800字
2014/01/13 职场文书
2014年五一促销活动方案
2014/03/09 职场文书
产品售后服务承诺书
2014/05/21 职场文书
拆迁委托协议书
2014/09/15 职场文书
赡养老人协议书范本
2015/08/06 职场文书
描述鲁迅的名言整理,一生受用
2019/08/08 职场文书
如何搭建 MySQL 高可用高性能集群
2021/06/21 MySQL