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 相关文章推荐
Sample script that displays all of the users in a given SQL Server DB
Jun 16 Javascript
jQuery中的.bind()、.live()和.delegate()之间区别分析
Jun 08 Javascript
解析页面加载与js函数的执行 onload or ready
Dec 12 Javascript
jquery 3D 标签云示例代码
Jun 12 Javascript
jQuery中extend函数详解
Feb 13 Javascript
jQuery插件windowScroll实现单屏滚动特效
Jul 14 Javascript
纯javascript实现自动发送邮件
Oct 21 Javascript
原生JavaScript实现异步多文件上传
Dec 02 Javascript
javascript结合Flexbox简单实现滑动拼图游戏
Feb 18 Javascript
在javascript中创建对象的各种模式解析
May 16 Javascript
微信小程序入门教程
Nov 18 Javascript
js中变量的连续赋值(实例讲解)
Jul 08 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
win7系统配置php+Apache+mysql环境的方法
2015/08/21 PHP
PHP bin2hex()函数基础实例讲解
2019/02/11 PHP
Javascript中的var_dump函数实现代码
2009/09/07 Javascript
jquery 打开窗口返回值实现代码
2010/03/04 Javascript
javascript下利用arguments实现string.format函数
2010/08/24 Javascript
如何编写高质量JS代码(续)
2015/02/25 Javascript
javascript多物体运动实现方法分析
2016/01/08 Javascript
JavaScript新增样式规则(推荐)
2016/07/19 Javascript
JS本地刷新返回上一页代码
2016/07/25 Javascript
第一次动手实现bootstrap table分页效果
2016/09/22 Javascript
javascript 删除数组元素和清空数组的简单方法
2017/02/24 Javascript
vue实现的双向数据绑定操作示例
2018/12/04 Javascript
antd组件Upload实现自己上传的实现示例
2018/12/18 Javascript
前后端常见的几种鉴权方式(小结)
2019/08/04 Javascript
Vue 3.0 全家桶抢先体验
2020/04/28 Javascript
vue-cli4使用全局less文件中的变量配置操作
2020/10/21 Javascript
Python 模板引擎的注入问题分析
2017/01/01 Python
Pandas 数据框增、删、改、查、去重、抽样基本操作方法
2018/04/12 Python
python实现搜索文本文件内容脚本
2018/06/22 Python
python矩阵的转置和逆转实例
2018/12/12 Python
python使用BeautifulSoup与正则表达式爬取时光网不同地区top100电影并对比
2019/04/15 Python
Python分割训练集和测试集的方法示例
2019/09/19 Python
wxPython多个窗口的基本结构
2019/11/19 Python
Python定义一个Actor任务
2020/07/29 Python
英国独特的时尚和生活方式品牌:JOY
2018/03/17 全球购物
阿迪达斯中国官网:Adidas中国
2020/12/14 全球购物
大学生创业策划书
2014/02/02 职场文书
《夕阳真美》教学反思
2014/04/27 职场文书
亲子运动会的活动方案
2014/08/17 职场文书
2014年大学学生会工作总结
2014/12/02 职场文书
个人年底工作总结
2015/03/10 职场文书
2015年乡镇党务公开工作总结
2015/05/19 职场文书
离职证明格式样本
2015/06/12 职场文书
2019最新版火锅店的创业计划书 !
2019/07/12 职场文书
3招让你摆脱即兴讲话冷场尴尬
2019/08/08 职场文书
bootstrapv4轮播图去除两侧阴影及线框的方法
2022/02/15 HTML / CSS