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 相关文章推荐
Input 特殊事件onpopertychange和oninput
Jun 17 Javascript
基于JavaScript实现继承机制之原型链(prototype chaining)的详解
May 07 Javascript
用jquery.sortElements实现table排序
May 04 Javascript
使用jquery解析XML的方法
Sep 05 Javascript
JS实现随页面滚动显示/隐藏窗口固定位置元素
Feb 26 Javascript
Angularjs的Controller间通信机制实例分析
Nov 07 Javascript
vue 如何添加全局函数或全局变量以及单页面的title设置总结
Jun 01 Javascript
微信小程序引用iconfont图标的方法
Oct 22 Javascript
JSON.stringify()方法讲解
Jan 31 Javascript
vue.js基于v-for实现批量渲染 Json数组对象列表数据示例
Aug 03 Javascript
浅谈小程序globalData的那些事儿
Nov 01 Javascript
vue-treeselect的基本用法以及解决点击无法出现拉下菜单
Apr 30 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
总集篇&特番节目先行播出!《SAO Alicization War of Underworld》第2季度TV动画4月25日放送!
2020/03/06 日漫
PHP5.0对象模型探索之抽象方法和抽象类
2006/09/05 PHP
PHP IDE phpstorm 常用快捷键
2015/05/18 PHP
php基于闭包实现函数的自调用(递归)实例分析
2016/11/11 PHP
firefox下jquery iframe刷新页面提示会导致重复之前动作
2012/12/17 Javascript
JS 删除字符串最后一个字符的实现代码
2014/02/20 Javascript
javascript框架设计读书笔记之数组的扩展与修复
2014/12/02 Javascript
Jquery判断radio、selelct、checkbox是否选中及获取选中值方法总结
2015/04/15 Javascript
jquery form表单获取内容以及绑定数据
2016/02/24 Javascript
js实现右键自定义菜单
2016/12/03 Javascript
原生JS京东轮播图代码
2017/03/22 Javascript
JS数组去重(4种方法)
2017/03/27 Javascript
解决Layui 表单提交数据为空的问题
2018/08/15 Javascript
vue 中滚动条始终定位在底部的方法
2018/09/03 Javascript
vue页面更新patch的实现示例
2020/03/25 Javascript
在vue中对数组值变化的监听与重新响应渲染操作
2020/07/17 Javascript
在vue中实现嵌套页面(iframe)
2020/07/30 Javascript
python爬取网站数据保存使用的方法
2013/11/20 Python
Python 遍历子文件和所有子文件夹的代码实例
2016/12/21 Python
Python实现脚本锁功能(同时只能执行一个脚本)
2017/05/10 Python
浅谈Python用QQ邮箱发送邮件时授权码的问题
2018/01/29 Python
Python设计模式之简单工厂模式实例详解
2019/01/22 Python
Python对wav文件的重采样实例
2020/02/25 Python
Django实现whoosh搜索引擎使用jieba分词
2020/04/08 Python
opencv python 图片读取与显示图片窗口未响应问题的解决
2020/04/24 Python
安装pyecharts1.8.0版本后导入pyecharts模块绘图时报错: “所有图表类型将在 v1.9.0 版本开始强制使用 ChartItem 进行数据项配置 ”的解决方法
2020/08/18 Python
个人求职信范文分享
2014/01/06 职场文书
医院工作检讨书范文
2014/02/10 职场文书
代理协议书范本
2014/04/22 职场文书
五好文明家庭事迹材料
2014/12/20 职场文书
万能检讨书
2015/01/27 职场文书
琅琊山导游词
2015/02/05 职场文书
员工自我工作评价
2015/03/06 职场文书
2019公司管理制度
2019/04/19 职场文书
MySQL慢查询优化解决问题
2022/03/17 MySQL
Python OpenCV形态学运算示例详解
2022/04/07 Python