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 相关文章推荐
js加解密 脚本解密
Feb 22 Javascript
Prototype使用指南之selector.js说明
Oct 26 Javascript
在javascript中实现函数数组的方法
Dec 25 Javascript
javascript关于open.window子页面执行完成后刷新父页面的问题分析
Apr 27 Javascript
JS实现的Select三级下拉菜单代码
Aug 20 Javascript
Vue数据驱动模拟实现1
Jan 11 Javascript
require.js中的define函数详解
Jul 10 Javascript
详谈commonjs模块与es6模块的区别
Oct 18 Javascript
在Layui 的表格模板中,实现layer父页面和子页面传值交互的方法
Sep 10 Javascript
JS PHP字符串截取函数实现原理解析
Aug 29 Javascript
在Vue中使用Echarts可视化库的完整步骤记录
Nov 18 Vue.js
关于uniApp editor微信滑动问题
Jan 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
Ha0k 0.3 PHP 网页木马修改版
2009/10/11 PHP
PHP 读取和修改大文件的某行内容的代码
2009/10/30 PHP
php从给定url获取文件扩展名的方法
2015/03/14 PHP
jquery tools之tabs 选项卡/页签
2009/07/25 Javascript
防止动态加载JavaScript引起的内存泄漏问题
2009/10/08 Javascript
打开新窗口关闭当前页面不弹出关闭提示js代码
2013/03/18 Javascript
JS动态添加option和删除option(附实例代码)
2013/04/01 Javascript
javascript通过元素id和name直接取得元素的方法
2015/04/28 Javascript
javascript 闭包详解
2015/07/02 Javascript
使用jQuery+EasyUI实现CheckBoxTree的级联选中特效
2015/12/06 Javascript
jquery mobile 实现自定义confirm确认框效果的简单实例
2016/06/17 Javascript
Extjs 点击复选框在表格中增加相关信息行
2016/07/12 Javascript
jQuery实现动态文字搜索功能
2017/01/05 Javascript
js遮罩效果制作弹出注册界面效果
2017/01/25 Javascript
js通过keyCode值判断单击键盘上某个键,然后触发指定的事件方法
2017/02/19 Javascript
AngularJS动态菜单操作指令
2017/04/25 Javascript
微信小程序图片横向左右滑动案例
2017/05/19 Javascript
原生js实现简单的链式操作
2017/07/04 Javascript
angularjs 缓存的使用详解
2018/03/19 Javascript
JS实现表单中点击小眼睛显示隐藏密码框中的密码
2020/04/13 Javascript
[01:02:05]LGD vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
跟老齐学Python之私有函数和专有方法
2014/10/24 Python
Python函数式编程指南(一):函数式编程概述
2015/06/24 Python
Python中查看文件名和文件路径
2017/03/31 Python
python 通过字符串调用对象属性或方法的实例讲解
2018/04/21 Python
python networkx 包绘制复杂网络关系图的实现
2019/07/10 Python
关于python中remove的一些坑小结
2021/01/04 Python
皇家道尔顿官网:Royal Doulton
2017/12/06 全球购物
alice McCALL官网:澳大利亚时尚品牌
2020/11/16 全球购物
总监职责范文
2013/11/09 职场文书
医学实习生自我鉴定
2013/12/12 职场文书
劳动工资科岗位职责范本
2014/03/02 职场文书
公务员党员评议表自我鉴定
2014/09/14 职场文书
学校少先队工作总结
2015/08/12 职场文书
创业计划书之废品回收
2019/09/26 职场文书
python如何读取和存储dict()与.json格式文件
2022/06/25 Python