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 相关文章推荐
javascrpt绑定事件之匿名函数无法解除绑定问题
Dec 06 Javascript
getComputedStyle与currentStyle获取样式(style/class)
Mar 19 Javascript
js清空form表单中的内容示例
May 20 Javascript
JS 组件系列之BootstrapTable的treegrid功能
Jun 16 Javascript
JS获取填报扩展单元格控件的值的解决办法
Jul 14 Javascript
Angular.js中数组操作的方法教程
Jul 31 Javascript
关于vue.extend和vue.component的区别浅析
Aug 16 Javascript
vue左侧菜单,树形图递归实现代码
Aug 24 Javascript
微信小程序实现分享朋友圈的图片功能示例
Jan 18 Javascript
js全屏事件fullscreenchange 实现全屏、退出全屏操作
Sep 17 Javascript
微信小程序视频弹幕发送功能的实现
Dec 28 Javascript
vue自定义右键菜单之全局实现
Apr 09 Vue.js
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
checkbox全选/取消全选以及checkbox遍历jQuery实现代码
2009/12/02 Javascript
juqery 学习之四 筛选查找
2010/11/30 Javascript
Extjs4 Treegrid 使用心得分享(经验篇)
2013/07/01 Javascript
Jquery中children与find之间的区别详细解析
2013/11/29 Javascript
js图片实时加载提供网页打开速度
2014/09/11 Javascript
js实现微信分享代码
2020/10/11 Javascript
jquery模拟实现鼠标指针停止运动事件
2016/01/12 Javascript
JavaScript中setTimeout和setInterval函数的传参及调用
2016/03/11 Javascript
javascript实现文字无缝滚动
2016/12/27 Javascript
原生Aajax 和jQuery Ajax 写法个人总结
2017/03/24 jQuery
react-router4 嵌套路由的使用方法
2017/07/24 Javascript
vue cli使用绝对路径引用图片问题的解决
2017/12/06 Javascript
解决Jquery下拉框数据动态获取的问题
2018/01/25 jQuery
微信小程序实现YDUI的ScrollNav组件
2018/02/02 Javascript
React Native基础入门之调试React Native应用的一小步
2018/07/02 Javascript
使用async await 封装 axios的方法
2018/07/09 Javascript
layui自己添加图片按钮并点击跳转页面的例子
2019/09/14 Javascript
js实现鼠标点击页面弹出自定义文字效果
2019/12/24 Javascript
解决Vue keep-alive 调用 $destory() 页面不再被缓存的情况
2020/10/30 Javascript
二种python发送邮件实例讲解(python发邮件附件可以使用email模块实现)
2013/12/03 Python
Python中itertools模块用法详解
2014/09/25 Python
python实现查找excel里某一列重复数据并且剔除后打印的方法
2015/05/26 Python
python利用MethodType绑定方法到类示例代码
2017/08/27 Python
Python文本处理之按行处理大文件的方法
2018/04/09 Python
Python PIL读取的图像发生自动旋转的实现方法
2019/07/05 Python
Python数据可视化 pyecharts实现各种统计图表过程详解
2019/08/15 Python
python实现程序重启和系统重启方式
2020/04/16 Python
中国综合网上购物商城:苏宁易购
2016/08/09 全球购物
医学护理系毕业生求职信
2013/10/01 职场文书
报告会主持词
2014/04/02 职场文书
优秀党员自我评价范文
2014/09/15 职场文书
2015年业务工作总结范文
2015/04/10 职场文书
归途列车观后感
2015/06/17 职场文书
幼儿园保教工作总结2015
2015/10/15 职场文书
Go获取两个时区的时间差
2022/04/20 Golang
使用Mysql计算地址的经纬度距离和实时位置信息
2022/04/29 MySQL