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 相关文章推荐
tbody元素支持嵌套的注意方法
Mar 24 Javascript
IE8 浏览器Cookie的处理
Jan 31 Javascript
fixedBox固定div漂浮代码支持ie6以上大部分主流浏览器
Jun 26 Javascript
node.js中使用socket.io的方法
Dec 15 Javascript
jQuery实现简单滚动动画效果
Apr 07 Javascript
JS+HTML5手机开发之滚动和惯性缓动实现方法分析
Jun 12 Javascript
微信公众号开发 自定义菜单跳转页面并获取用户信息实例详解
Dec 08 Javascript
关于使用axios的一些心得技巧分享
Jul 02 Javascript
浅谈原生JS中的延迟脚本和异步脚本
Jul 12 Javascript
Angular2学习笔记之数据绑定的示例代码
Jan 03 Javascript
layui问题之自动滚动二级iframe页面到指定位置的方法
Sep 18 Javascript
解决ant-design-vue中menu菜单无法默认展开的问题
Oct 31 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:风雨欲来 路在何方?
2006/10/09 PHP
PHP中在数据库中保存Checkbox数据(2)
2006/10/09 PHP
PHP中的生成XML文件的4种方法分享
2012/10/06 PHP
destoon实现调用当前栏目分类及子分类和三级分类的方法
2014/08/21 PHP
PHP之正则表达式捕获组与非捕获组(详解)
2015/07/29 PHP
PHP去掉json字符串中的反斜杠\及去掉双引号前的反斜杠
2015/09/30 PHP
让 JavaScript 轻松支持函数重载 (Part 2 - 实现)
2009/08/04 Javascript
jQuery在html有效在jsp无效的原因及解决方法
2013/08/02 Javascript
jquery中ajax函数执行顺序问题之如何设置同步
2014/02/28 Javascript
jQuery中end()方法用法实例
2015/01/08 Javascript
js获取字符串字节数方法小结
2015/06/09 Javascript
jquery UI Datepicker时间控件的使用方法(加强版)
2015/11/07 Javascript
深入分析jQuery的ready函数是如何工作的(工作原理)
2015/12/17 Javascript
JavaScript拖拽、碰撞、重力及弹性运动实例分析
2016/01/08 Javascript
jQuery解决IE6、7、8不能使用 JSON.stringify 函数的问题
2016/05/31 Javascript
学习掌握JavaScript中this的使用技巧
2016/08/29 Javascript
jQuery插件simplePagination的使用方法示例
2020/04/28 jQuery
vue+iview分页组件的封装
2020/11/17 Vue.js
[05:31]DOTA2英雄梦之声_第08期_莉娜
2014/06/23 DOTA
Python下的subprocess模块的入门指引
2015/04/16 Python
python基础教程之匿名函数lambda
2017/01/17 Python
Python正则表达式教程之三:贪婪/非贪婪特性
2017/03/02 Python
Python使用pymysql小技巧
2017/06/04 Python
Python实现统计英文文章词频的方法分析
2019/01/28 Python
python生成每日报表数据(Excel)并邮件发送的实例
2019/02/03 Python
python+pygame实现坦克大战
2019/09/10 Python
Python实现PyPDF2处理PDF文件的方法示例
2019/09/25 Python
Python三元运算与lambda表达式实例解析
2019/11/30 Python
重写django的model下的objects模型管理器方式
2020/05/15 Python
分公司经理岗位职责
2013/11/11 职场文书
建筑公司文秘岗位职责
2013/11/29 职场文书
学校运动会霸气口号
2014/06/07 职场文书
爱护公物演讲稿
2014/09/09 职场文书
乡镇党员干部群众路线对照检查材料思想汇报
2014/09/28 职场文书
2014年精神文明建设工作总结
2014/11/19 职场文书
2015年学校减负工作总结
2015/05/19 职场文书