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 相关文章推荐
document.open() 与 document.write()的区别
Aug 13 Javascript
编写针对IE的JS代码两种编写方法
Jan 30 Javascript
AngularJS初始化静态模板详解
Jan 14 Javascript
AngularJS入门教程中SQL实例详解
Jul 27 Javascript
JS实现根据文件字节数返回文件大小的方法
Aug 02 Javascript
浅谈Node模块系统及其模式
Nov 17 Javascript
vue todo-list组件发布到npm上的方法
Apr 04 Javascript
详解Vue中组件的缓存
Apr 20 Javascript
详解element-ui设置下拉选择切换必填和非必填
Jun 17 Javascript
详解JWT token心得与使用实例
Aug 02 Javascript
Vue解析带html标签的字符串为dom的实例
Nov 13 Javascript
vue实现省市区联动 element-china-area-data插件
Apr 22 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
PHP高级对象构建 工厂模式的使用
2012/02/05 PHP
mantis安装、配置和使用中的问题小结
2014/07/14 PHP
详解PHP对数组的定义以及数组的创建方法
2015/11/27 PHP
浅谈PHP定义命令空间的几个注意点(推荐)
2016/10/29 PHP
Laravel5.1 框架Middleware中间件基本用法实例分析
2020/01/04 PHP
javascript 类方法定义还是有点区别
2009/04/15 Javascript
js判断元素是否隐藏的方法
2014/06/09 Javascript
jQuery $命名冲突解决方案汇总
2014/11/13 Javascript
jQuery中:hidden选择器用法实例
2014/12/30 Javascript
JavaScript实现网站访问次数统计代码
2015/08/12 Javascript
jQuery实现动态表单验证时文本框抖动效果完整实例
2015/08/21 Javascript
一不小心就做错的JS闭包面试题
2015/11/25 Javascript
实例讲解JS中setTimeout()的用法
2016/01/28 Javascript
基于jQuery日历插件制作日历
2016/03/11 Javascript
jQuery实现简单的tab标签页效果
2016/09/12 Javascript
解析Javascript单例模式概念与实例
2016/12/05 Javascript
javascript滚轮事件基础实例讲解(37)
2017/02/14 Javascript
深入理解React中何时使用箭头函数
2017/08/23 Javascript
js实现点击按钮复制文本功能
2020/07/20 Javascript
再谈Angular4 脏值检测(性能优化)
2018/04/23 Javascript
详解webpack-dev-middleware 源码解读
2020/03/23 Javascript
vue制作toast组件npm包示例代码
2020/10/29 Javascript
[06:09]辉夜杯主赛事开幕式
2015/12/25 DOTA
Python中处理字符串之isalpha()方法的使用
2015/05/18 Python
Python中使用platform模块获取系统信息的用法教程
2016/07/08 Python
详解Python中的相对导入和绝对导入
2017/01/06 Python
Tensorflow 查看变量的值方法
2018/06/14 Python
python绘制散点图并标记序号的方法
2018/12/11 Python
python如何基于redis实现ip代理池
2020/01/17 Python
Python并发爬虫常用实现方法解析
2020/11/19 Python
Python从MySQL数据库中面抽取试题,生成试卷
2021/01/14 Python
CSS3弹性盒模型开发笔记(三)
2016/04/26 HTML / CSS
英国最大的独立家具零售商:Furniture Village
2016/09/06 全球购物
哥伦比亚加拿大官网:Columbia Sportswear Canada
2020/09/07 全球购物
大学生评语大全
2014/04/18 职场文书
2016党校学习心得体会
2016/01/07 职场文书