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常用技巧及常用方法列表集合
Apr 06 Javascript
浅说js变量
May 25 Javascript
javascript随机将第一个dom中的图片添加到第二个div中示例
Oct 08 Javascript
JS中的异常处理方法分享
Dec 22 Javascript
基于javascript html5实现3D翻书特效
Mar 14 Javascript
对js eval()函数的一些见解
Aug 15 Javascript
解决AngualrJS页面刷新导致异常显示问题
Apr 20 Javascript
vue template中slot-scope/scope的使用方法
Sep 06 Javascript
Javascript中弹窗confirm与prompt的区别
Oct 26 Javascript
详解小程序中h5页面onShow实现及跨页面通信方案
May 30 Javascript
解决Vue调用springboot接口403跨域问题
Sep 02 Javascript
Vue实现手机计算器
Aug 17 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
CI框架附属类用法分析
2018/12/26 PHP
用apply让javascript函数仅执行一次的代码
2010/06/27 Javascript
ASP.NET jQuery 实例17 通过使用jQuery validation插件校验ListBox
2012/02/03 Javascript
百度移动版的url编码解码示例
2014/04/29 Javascript
jquery让返回的内容显示在特定div里(代码少而精悍)
2014/06/23 Javascript
5款JavaScript代码压缩工具推荐
2014/07/07 Javascript
javascript实现unicode与ASCII相互转换的方法
2015/12/10 Javascript
js利用clipboardData实现截屏粘贴功能
2016/10/12 Javascript
Bootstrap table两种分页示例
2016/12/23 Javascript
javascript设计模式之策略模式学习笔记
2017/02/15 Javascript
详解如何解决vue开发请求数据跨域的问题(基于浏览器的配置解决)
2018/11/12 Javascript
JS使用队列对数组排列,基数排序算法示例
2019/03/02 Javascript
Vue实现boradcast和dispatch的示例
2020/11/13 Javascript
Python使用email模块对邮件进行编码和解码的实例教程
2016/07/01 Python
简单掌握Python的Collections模块中counter结构的用法
2016/07/07 Python
详解python之配置日志的几种方式
2017/05/22 Python
Python闭包之返回函数的函数用法示例
2018/01/27 Python
使用Python获取网段IP个数以及地址清单的方法
2018/11/01 Python
django使用LDAP验证的方法示例
2018/12/10 Python
Python3 字典dictionary入门基础附实例
2020/02/10 Python
浅谈matplotlib中FigureCanvasXAgg的用法
2020/06/16 Python
如何利用python读取micaps文件详解
2020/10/18 Python
css3中的calc函数浅析
2018/07/10 HTML / CSS
加拿大著名时装品牌:SOIA & KYO
2016/08/23 全球购物
护士自荐信范文
2013/12/15 职场文书
行政部总经理岗位职责
2014/01/04 职场文书
茶叶生产计划书
2014/01/10 职场文书
汽车专业学生自我评价
2014/01/19 职场文书
酒店总经理助理职责
2014/02/12 职场文书
档案室主任岗位职责
2014/02/12 职场文书
竞选班干部的演讲稿
2014/04/24 职场文书
《思路决定出路》读后感3篇
2019/12/11 职场文书
判断Python中的Nonetype类型
2021/05/25 Python
hive数据仓库新增字段方法
2022/06/25 数据库
Win10玩csgo闪退如何解决?Win10玩csgo闪退的解决方法
2022/07/23 数码科技
Python 第三方库 openpyxl 的安装过程
2022/12/24 Python