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 相关文章推荐
IE6图片加载的一个BUG解决方法
Jul 13 Javascript
JavaScript实现GriwView单列全选(自写代码)
May 13 Javascript
jQuery中prependTo()方法用法实例
Jan 08 Javascript
提高jQuery性能优化的技巧
Aug 03 Javascript
浅析JS中常用类型转换及运算符表达式
Jul 23 Javascript
vue2组件之select2调用的示例代码
Oct 12 Javascript
理解Koa2中的async&await的用法
Feb 05 Javascript
Vue slot用法(小结)
Oct 22 Javascript
layDate插件设置开始和结束时间
Nov 15 Javascript
详解vue的数据劫持以及操作数组的坑
Apr 18 Javascript
vue同个按钮控制展开和折叠同个事件操作
Jul 29 Javascript
如何使用JavaScript实现无缝滚动自动播放轮播图效果
Aug 20 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给源代码加密的几种方法汇总(推荐)
2018/02/06 PHP
laravel5.0在linux下解决.htaccess无效和去除index.php的问题
2019/10/16 PHP
PHP学习记录之常用的魔术常量详解
2019/12/12 PHP
在IE6下发生Internet Explorer cannot open the Internet site错误
2010/06/21 Javascript
腾讯的ip接口 方便获取当前用户的ip地理位置
2010/11/25 Javascript
基于JavaScript 声明全局变量的三种方式详解
2013/05/07 Javascript
javascript实现日期格式转换
2014/12/16 Javascript
jquery中checkbox全选失效的解决方法
2014/12/26 Javascript
JavaScript Split()方法
2015/12/18 Javascript
浅谈js构造函数的方法与原型prototype
2016/07/04 Javascript
Bootstrap学习系列之使用 Bootstrap Typeahead 组件实现百度下拉效果
2016/07/07 Javascript
node.js中EJS 模板快速入门教程
2017/05/08 Javascript
python多线程编程方式分析示例详解
2013/12/06 Python
Python生成密码库功能示例
2017/05/23 Python
python 解决cv2绘制中文乱码问题
2019/12/23 Python
Python 执行矩阵与线性代数运算
2020/08/01 Python
HTML5的download属性详细介绍和使用实例
2014/04/23 HTML / CSS
Html5原创俄罗斯方块(基于canvas)
2019/01/07 HTML / CSS
澳大利亚最大的女装零售商:Millers
2017/09/10 全球购物
安卓程序员求职信
2014/02/28 职场文书
十佳护士先进事迹
2014/05/08 职场文书
2014党员学习《反腐倡廉警示教育读本》思想汇报
2014/09/13 职场文书
房地产营销活动策划方案
2014/09/15 职场文书
2015年毕业生自我鉴定模板
2014/09/19 职场文书
党的群众路线教育实践活动对照检查材料(四风)
2014/09/27 职场文书
2014年建筑工程工作总结
2014/12/03 职场文书
反邪教教育心得体会
2016/01/15 职场文书
先进个人事迹材料(2016推荐版)
2016/03/01 职场文书
2016年小学圣诞节活动总结
2016/03/31 职场文书
创业计划书之游泳馆
2019/09/16 职场文书
Python编程中Python与GIL互斥锁关系作用分析
2021/09/15 Python
配置Kubernetes外网访问集群
2022/03/31 Servers
PHP正则表达式之RCEService回溯
2022/04/11 PHP
Win10系统搭建ftp文件服务器详细教程
2022/08/05 Servers
win10搭建配置ftp服务器的方法
2022/08/05 Servers
MySQL中的 inner join 和 left join的区别解析(小结果集驱动大结果集)
2023/05/08 MySQL