JavaScript精炼之构造函数 Constructor及Constructor属性详解


Posted in Javascript onNovember 05, 2015

除了创建对象,构造函数(constructor) 还做了另一件有用的事情—自动为创建的新对象设置了原型对象(prototype object) 。原型对象存放于 ConstructorFunction.prototype 属性中。

例如,我们重写之前例子,使用构造函数创建对象“b”和“c”,那么对象”a”则扮演了“Foo.prototype”这个角色:

// 构造函数
function Foo(y) {
 // 构造函数将会以特定模式创建对象:被创建的对象都会有"y"属性
 this.y = y;
}
// "Foo.prototype"存放了新建对象的原型引用
// 所以我们可以将之用于定义继承和共享属性或方法
// 所以,和上例一样,我们有了如下代码:
// 继承属性"x"
Foo.prototype.x = ;
// 继承方法"calculate"
Foo.prototype.calculate = function (z) {
 return this.x + this.y + z;
};
// 使用foo模式创建 "b" and "c"
var b = new Foo();
var c = new Foo();
// 调用继承的方法
b.calculate(); // 
c.calculate(); // 
// 让我们看看是否使用了预期的属性
console.log(
 b.__proto__ === Foo.prototype, // true
 c.__proto__ === Foo.prototype, // true
 // "Foo.prototype"自动创建了一个特殊的属性"constructor"
 // 指向a的构造函数本身
 // 实例"b"和"c"可以通过授权找到它并用以检测自己的构造函数
 b.constructor === Foo, // true
 c.constructor === Foo, // true
 Foo.prototype.constructor === Foo // true
 b.calculate === b.__proto__.calculate, // true
 b.__proto__.calculate === Foo.prototype.calculate // true
);

上述代码可表示为如下的关系:

JavaScript精炼之构造函数 Constructor及Constructor属性详解

构造函数与对象之间的关系

上述图示可以看出,每一个object都有一个prototype. 构造函数Foo也拥有自己的__proto__, 也就是Function.prototype, 而Function.prototype的__proto__指向了Object.prototype. 重申一遍,Foo.prototype只是一个显式的属性,也就是b和c的__proto__属性。

这个问题完整和详细的解释有两个部分:

面向对象编程.一般理论(OOP. The general theory),描述了不同的面向对象的范式与风格(OOP paradigms and stylistics),以及与ECMAScript的比较。

面向对象编程.ECMAScript实现(OOP. ECMAScript implementation), 专门讲述了ECMAScript中的面向对象编程。
现在,我们已经了解了基本的object原理,那么我们接下去来看看ECMAScript里面的程序执行环境[runtime program execution]. 这就是通常称为的“执行上下文堆栈”[execution context stack]。每一个元素都可以抽象的理解为object。你也许发现了,没错,在ECMAScript中,几乎处处都能看到object的身影。

下面给大家介绍JavaScript constructor 属性详解

对象的constructor属性用于返回创建该对象的函数,也就是我们常说的构造函数。

在JavaScript中,每个具有原型的对象都会自动获得constructor属性。除了arguments、Enumerator、Error、Global、Math、RegExp、Regular Expression等一些特殊对象之外,其他所有的JavaScript内置对象都具备constructor属性。例如:Array、Boolean、Date、Function、Number、Object、String等。所有主流浏览器均支持该属性。

语法

object.constructor

返回值

对象的constructor属性返回创建该对象的函数的引用。

示例&说明

以下代码中的[native code],表示这是JavaScript的底层内部代码实现,无法显示代码细节。

// 字符串:String()
var str = "张三";
document.writeln(str.constructor); // function String() { [native code] }
document.writeln(str.constructor === String); // true
// 数组:Array()
var arr = [1, 2, 3];
document.writeln(arr.constructor); // function Array() { [native code] }
document.writeln(arr.constructor === Array); // true
// 数字:Number()
var num = 5;
document.writeln(num.constructor); // function Number() { [native code] }
document.writeln(num.constructor === Number); // true
// 自定义对象:Person()
function Person(){
  this.name = "CodePlayer";
}
var p = new Person();
document.writeln(p.constructor); // function Person(){ this.name = "CodePlayer"; }
document.writeln(p.constructor === Person); // true
// JSON对象:Object()
var o = { "name" : "张三"};
document.writeln(o.constructor); // function Object() { [native code] }
document.writeln(o.constructor === Object); // true
// 自定义函数:Function()
function foo(){
  alert("CodePlayer");
}
document.writeln(foo.constructor); // function Function() { [native code] }
document.writeln(foo.constructor === Function); // true
// 函数的原型:bar()
function bar(){
  alert("CodePlayer");
}
document.writeln(bar.prototype.constructor); // function bar(){ alert("CodePlayer"); }
document.writeln(bar.prototype.constructor === bar); // true
Javascript 相关文章推荐
javascript间隔定时器(延时定时器)学习 间隔调用和延时调用
Jan 13 Javascript
JS(JQuery)操作Array的相关方法介绍
Feb 11 Javascript
jQuery中before()方法用法实例
Dec 25 Javascript
angularjs 中$apply,$digest,$watch详解
Oct 13 Javascript
浅谈移动端之js touch事件 手势滑动事件
Nov 07 Javascript
bootstrap模态框实现拖拽效果
Dec 14 Javascript
Extjs 中的 Treepanel 实现菜单级联选中效果及实例代码
Aug 22 Javascript
详解Angular结合zTree异步加载节点数据
Jan 20 Javascript
JavaScript实现简单的文本逐字打印效果示例
Apr 12 Javascript
vue如何判断dom的class
Apr 26 Javascript
vue+element实现打印页面功能
May 20 Javascript
Vue.js中使用Vuex实现组件数据共享案例
Jul 31 Javascript
JS使用正则表达式除去字符串中重复字符的方法
Nov 05 #Javascript
JS使用cookie实现DIV提示框只显示一次的方法
Nov 05 #Javascript
JS实现的新浪微博大厅文字内容滚动效果代码
Nov 05 #Javascript
JS实现自定义简单网页软键盘效果代码
Nov 05 #Javascript
JavaScript实现cookie的写入、读取、删除功能
Nov 05 #Javascript
JS实现slide文字框缩放伸展效果代码
Nov 05 #Javascript
如何防止JavaScript自动插入分号
Nov 05 #Javascript
You might like
PHP的ASP防火墙
2006/10/09 PHP
php获取本机真实IP地址实例代码
2016/03/31 PHP
json格式化/压缩工具 Chrome插件扩展版
2010/05/25 Javascript
分享一个用Mootools写的鼠标滑过进度条改变进度值的实现代码
2011/12/12 Javascript
随窗体滑动的小插件sticky源码
2013/06/21 Javascript
利用javascript实现web页面中指定区域打印
2013/10/30 Javascript
实现51Map地图接口(示例代码)
2013/11/22 Javascript
javascript计时器事件使用详解
2014/01/07 Javascript
JavaScript模拟深蓝vs卡斯帕罗夫的国际象棋对局示例
2015/04/22 Javascript
javascript实现验证身份证号的有效性并提示
2015/04/30 Javascript
实现音乐播放器的代码(html5+css3+jquery)
2015/08/04 Javascript
对javascript继承的理解
2016/10/11 Javascript
easyui messager alert 三秒后自动关闭提示的实例
2016/11/07 Javascript
JSON中key动态设置及JSON.parse和JSON.stringify()的区别
2016/12/29 Javascript
详解Angular2 关于*ngFor 嵌套循环
2017/05/22 Javascript
JavaScript this关键字指向常用情况解析
2020/09/02 Javascript
[11:01]2014DOTA2西雅图邀请赛 冷冷带你探秘威斯汀
2014/07/08 DOTA
Python实现扫描局域网活动ip(扫描在线电脑)
2015/04/28 Python
Python网络编程使用select实现socket全双工异步通信功能示例
2018/04/09 Python
Python使用ffmpy将amr格式的音频转化为mp3格式的例子
2019/08/08 Python
python应用文件读取与登录注册功能
2019/09/23 Python
Python使用docx模块实现刷题功能代码
2020/02/13 Python
Python os库常用操作代码汇总
2020/11/03 Python
call在Python中改进数列的实例讲解
2020/12/09 Python
Python3.9.1中使用split()的处理方法(推荐)
2021/02/07 Python
Python爬虫分析微博热搜关键词的实现代码
2021/02/22 Python
Java面试题:请问一下代码输出是什么
2015/05/27 面试题
两道JAVA笔试题
2016/09/14 面试题
土木工程毕业生自荐信
2013/11/12 职场文书
办公室内勤岗位职责范本
2013/12/09 职场文书
乔丹名人堂演讲稿
2014/05/24 职场文书
高三励志标语
2014/06/05 职场文书
商场周年庆活动方案
2014/08/19 职场文书
创业计划书之健康营养产业
2019/10/15 职场文书
Centos环境下Postgresql 安装配置及环境变量配置技巧
2021/05/18 PostgreSQL
php实现自动生成验证码的实例讲解
2021/11/17 PHP