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 相关文章推荐
几个高效,简洁的字符处理函数
Apr 12 Javascript
JavaScript和ActionScript的交互实现代码
Aug 01 Javascript
防止浏览器记住用户名及密码的简单实用方法
Apr 22 Javascript
JS+CSS实现可以凹陷显示选中单元格的方法
Mar 02 Javascript
JavaScript判断用户是否对表单进行了修改的方法
Mar 18 Javascript
javascript实现省市区三级联动下拉框菜单
Nov 17 Javascript
Bootstrap实现input控件失去焦点时验证
Aug 04 Javascript
通过vue-cli来学习修改Webpack多环境配置和发布问题
Dec 22 Javascript
Vue使用vux-ui自定义表单验证遇到的问题及解决方法
May 10 Javascript
Vue作用域插槽slot-scope实例代码
Sep 05 Javascript
webpack4简单入门实例
Sep 06 Javascript
微信小程序页面间值传递的两种方法
Nov 26 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
php的POSIX 函数以及进程测试的深入分析
2013/06/03 PHP
PHP OPP机制和模式简介(抽象类、接口和契约式编程)
2014/06/09 PHP
PHP中比较时间大小实例
2014/08/21 PHP
PHP封装的MSSql操作类完整实例
2016/05/26 PHP
php实现生成code128条形码的方法详解
2017/07/19 PHP
2017年最好用的9个php开发工具推荐(超好用)
2017/10/23 PHP
PHP实现图片防盗链破解操作示例【解决图片防盗链问题/反向代理】
2020/05/29 PHP
JavaScript学习笔记(十)
2010/01/17 Javascript
javascript不同类型数据之间的运算的转换方法
2014/02/13 Javascript
jQuery中animate动画第二次点击事件没反应
2015/05/07 Javascript
浅析jQuery中使用$所引发的问题
2016/05/29 Javascript
vue-router 导航钩子的具体使用方法
2017/08/31 Javascript
webpack 处理CSS资源的实现
2019/09/27 Javascript
[43:32]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS NewBee第一场
2014/05/26 DOTA
[09:59]DOTA2-DPC中国联赛2月7日Recap集锦
2021/03/11 DOTA
使用Python压缩和解压缩zip文件的教程
2015/05/06 Python
Python fileinput模块使用实例
2015/06/03 Python
使用Python编写基于DHT协议的BT资源爬虫
2016/03/19 Python
Python 详解基本语法_函数_返回值
2017/01/22 Python
Python3非对称加密算法RSA实例详解
2018/12/06 Python
对pyqt5多线程正确的开启姿势详解
2019/06/14 Python
python使用mitmproxy抓取浏览器请求的方法
2019/07/02 Python
Python Pandas 转换unix时间戳方式
2019/12/07 Python
解决tensorflow添加ptb库的问题
2020/02/10 Python
华丽的手绘陶瓷:MacKenzie-Childs
2017/02/04 全球购物
美国体育用品在线:Modell’s Sporting Goods
2018/06/07 全球购物
瑞典廉价机票预订网站:Seat24
2018/06/19 全球购物
Mio Skincare英国官网:身体紧致及孕期身体护理
2018/08/19 全球购物
Zipadee-Zip襁褓过渡毯:Sleeping Baby
2018/12/30 全球购物
仓库管理专业个人自我评价范文
2013/11/11 职场文书
厨师长岗位职责
2014/03/02 职场文书
解除合同协议书
2014/04/17 职场文书
红楼梦读书笔记
2015/06/25 职场文书
新店开业策划方案怎么书写?
2019/07/05 职场文书
Android studio 简单计算器的编写
2022/05/20 Java/Android
Apache Kafka 分区重分配的实现原理解析
2022/07/15 Servers