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学习笔记之DOM对象和jQuery对象
Dec 22 Javascript
获取鼠标在div中的相对位置的实现代码
Dec 30 Javascript
JavaScript中的索引数组、关联数组和静态数组、动态数组讲解
Nov 08 Javascript
jQuery实现表单提交时判断的方法
Dec 13 Javascript
深入理解JavaScript系列(35):设计模式之迭代器模式详解
Mar 03 Javascript
javascript 判断页面访问方式电脑或者移动端
Sep 19 Javascript
KnockoutJS 3.X API 第四章之数据控制流component绑定
Oct 10 Javascript
微信小程序实战之登录页面制作(5)
Mar 30 Javascript
js中let和var定义变量的区别
Feb 08 Javascript
在 Vue-CLI 中引入 simple-mock实现简易的 API Mock 接口数据模拟
Nov 28 Javascript
jQuery实时统计输入框字数及限制
Jun 24 jQuery
vue 实现图片懒加载功能
Dec 31 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
分页显示Oracle数据库记录的类之一
2006/10/09 PHP
配置Apache2.2+PHP5+CakePHP1.2+MySQL5运行环境
2009/04/25 PHP
php删除文本文件中重复行的方法
2015/04/28 PHP
详解PHP中websocket的使用方法
2016/09/15 PHP
PHP Include文件实例讲解
2019/02/15 PHP
php策略模式简单示例分析【区别于工厂模式】
2019/09/25 PHP
网站上面有这种切换效果
2006/06/26 Javascript
js中将多个语句写成一个语句的两种方法小结
2007/12/08 Javascript
JavaScript的document对象和window对象详解
2010/12/30 Javascript
浅析JavaScript访问对象属性和方法及区别
2015/11/16 Javascript
理解javascript中DOM事件
2015/12/25 Javascript
js运动应用实例解析
2015/12/28 Javascript
Vuex之理解Getters的用法实例
2017/04/19 Javascript
vue2.x select2 指令封装详解
2017/10/12 Javascript
关于axios如何全局注册浅析
2018/01/14 Javascript
在微信小程序中渲染HTML内容的方法示例
2018/09/28 Javascript
基于vue2的canvas时钟倒计时组件步骤解析
2018/11/05 Javascript
深入理解使用Vue实现Context-Menu的思考与总结
2019/03/09 Javascript
用Python解决计数原理问题的方法
2016/08/04 Python
Python+django实现简单的文件上传
2016/08/17 Python
Python Paramiko模块的安装与使用详解
2016/11/18 Python
深入学习Python中的上下文管理器与else块
2017/08/27 Python
anaconda中更改python版本的方法步骤
2019/07/14 Python
Python 3.8 新功能全解
2019/07/25 Python
详解解决Python memory error的问题(四种解决方案)
2019/08/08 Python
在Pytorch中使用样本权重(sample_weight)的正确方法
2019/08/17 Python
python中把元组转换为namedtuple方法
2020/12/09 Python
python爬虫用request库处理cookie的实例讲解
2021/02/20 Python
python中Pexpect的工作流程实例讲解
2021/03/02 Python
在使用非全零作为空指针内部表达的机器上, NULL是如何定义
2014/11/09 面试题
2015年感恩母亲节的演讲稿
2015/03/18 职场文书
2015年12.4全国法制宣传日活动总结
2015/03/24 职场文书
2016年习总书记讲话学习心得体会
2016/01/20 职场文书
浅谈如何写好演讲稿?
2019/06/12 职场文书
Golang 编译成DLL文件的操作
2021/05/06 Golang
MySQL数据库索引的最左匹配原则
2021/11/20 MySQL