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实现手风琴效果实例代码
Nov 15 Javascript
js获得参数的getParameter使用示例
Feb 26 Javascript
js 触发select onchange事件代码
Mar 20 Javascript
使用js实现的简单拖拽效果
Mar 18 Javascript
JavaScript中字符串拼接的基本方法
Jul 07 Javascript
javascript中if和switch,==和===详解
Jul 30 Javascript
javascript作用域链与执行环境详解
Mar 25 Javascript
AngularJS折叠菜单实现方法示例
May 18 Javascript
vue.js中toast用法及使用toast弹框的实例代码
Aug 27 Javascript
Javascript通过控制类名更改样式
May 24 Javascript
用webpack4开发小程序的实现方法
Jun 04 Javascript
ES6 proxy和reflect的使用方法与应用实例分析
Feb 15 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
php4的session功能评述(二)
2006/10/09 PHP
解析thinkphp中的导入文件标签
2013/06/20 PHP
WordPress后台中实现图片上传功能的实例讲解
2016/01/11 PHP
escape、encodeURI、encodeURIComponent等方法的区别比较
2006/12/27 Javascript
超级退弹代码
2008/07/07 Javascript
调整小数的格式保留小数点后两位
2014/05/14 Javascript
javascript高级编程之函数表达式 递归和闭包函数
2015/11/29 Javascript
JS实现pasteHTML兼容ie,firefox,chrome的方法
2016/06/22 Javascript
javascript和jQuery实现网页实时聊天的ajax长轮询
2016/07/20 Javascript
JS简单实现仿百度控制台输出信息效果
2016/09/04 Javascript
JavaScript实现自动切换图片代码
2016/10/11 Javascript
React组件的三种写法总结
2017/01/12 Javascript
原生JS实现《别踩白块》游戏(兼容IE)
2017/02/20 Javascript
详解vue.js数据传递以及数据分发slot
2018/01/20 Javascript
详解Angular如何正确的操作DOM
2018/07/06 Javascript
Vue中的基础过渡动画及实现原理解析
2018/12/04 Javascript
关于vue表单提交防双/多击的例子
2019/10/31 Javascript
[00:35]2016完美“圣”典风云人物:冷冷宣传片
2016/12/08 DOTA
在Python中使用第三方模块的教程
2015/04/27 Python
python实现图片文件批量重命名
2020/03/23 Python
python动态进度条的实现代码
2019/07/03 Python
Django-silk性能测试工具安装及使用解析
2020/11/28 Python
迪奥美国官网:Dior美国
2019/12/07 全球购物
商场总经理岗位职责
2014/02/03 职场文书
班干部竞选演讲稿
2014/04/24 职场文书
初三新学期计划书
2014/05/03 职场文书
交通安全标语
2014/06/06 职场文书
励志演讲稿3分钟
2014/08/21 职场文书
2015年政务公开工作总结
2015/05/19 职场文书
Django REST framework 限流功能的使用
2021/06/24 Python
python中if和elif的区别介绍
2021/11/07 Python
java协程框架quasar和kotlin中的协程对比分析
2022/02/24 Java/Android
使用Java去实现超市会员管理系统
2022/03/18 Java/Android
德劲DE1107指针试高灵敏度全波段收音机机评
2022/04/05 无线电
Python中的 enumerate和zip详情
2022/05/30 Python
Java实现带图形界面的聊天程序
2022/06/10 Java/Android