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 的 trim 函数的代码
Aug 13 Javascript
javascript RadioButtonList获取选中值
Apr 09 Javascript
高性能web开发 如何加载JS,JS应该放在什么位置?
May 14 Javascript
JavaScript对象的property属性详解
Apr 01 Javascript
jquery实现点击文字可编辑并修改保存至数据库
Apr 15 Javascript
js实现checkbox全选和反选示例
May 01 Javascript
js函数参数设置默认值的一种变通实现方法
May 26 Javascript
jquery+ajax请求且带返回值的代码
Aug 12 Javascript
Node.js实现数据推送
Apr 14 Javascript
实现单层json按照key字母顺序排序的示例
Dec 06 Javascript
ES6中Set和Map用法实例详解
Mar 02 Javascript
浅谈JS for循环中使用break和continue的区别
Jul 21 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
ThinkPHP中Common/common.php文件常用函数功能分析
2016/05/20 PHP
JavaScript阻止浏览器返回按钮的方法
2015/03/18 Javascript
JavaScript删除数组元素的方法
2015/03/20 Javascript
nodejs中使用多线程编程的方法实例
2015/03/24 NodeJs
javascript使用shift+click实现选择和反选checkbox的方法
2015/05/04 Javascript
详解JavaScript函数对象
2015/11/15 Javascript
Javascript页面跳转常见实现方式汇总
2015/11/28 Javascript
基于JavaScript实现全屏透明遮罩div层锁屏效果
2016/01/26 Javascript
浅析jquery如何判断滚动条滚到页面底部并执行事件
2016/04/29 Javascript
JS获取input file绝对路径的方法(推荐)
2016/08/02 Javascript
bootstrapValidator表单验证插件学习
2016/12/30 Javascript
Bootstrap 填充Json数据的实例代码
2017/01/11 Javascript
nodejs个人博客开发第七步 后台登陆
2017/04/12 NodeJs
自定义事件解决重复请求BUG的问题
2017/07/11 Javascript
从零开始学习搭建React脚手架项目
2018/08/23 Javascript
详解处理Vue单页面应用SEO的另一种思路
2018/11/09 Javascript
详解用Webpack与Babel配置ES6开发环境
2019/03/12 Javascript
vue自定义指令限制输入框输入值的步骤与完整代码
2020/08/30 Javascript
Python基于回溯法解决01背包问题实例
2017/12/06 Python
微信跳一跳python代码实现
2018/01/05 Python
基于Python实现的微信好友数据分析
2018/02/26 Python
Python 3 判断2个字典相同
2019/08/06 Python
python二进制读写及特殊码同步实现详解
2019/10/11 Python
Pytorch损失函数nn.NLLLoss2d()用法说明
2020/07/07 Python
用python-webdriver实现自动填表的示例代码
2021/01/13 Python
18-35岁旅游团的全球领导者:Contiki
2017/02/08 全球购物
师范生教师实习自我鉴定
2013/09/27 职场文书
高中班长自我鉴定
2013/12/20 职场文书
向领导表决心的话
2014/03/11 职场文书
村班子对照检查材料
2014/08/18 职场文书
教师党的群众路线对照检查材料
2014/09/24 职场文书
离婚协议书标准格式
2014/10/04 职场文书
2014年小学校长工作总结
2014/12/08 职场文书
2015年业务员工作总结范文
2015/04/07 职场文书
幼儿园托班开学寄语(2016春季)
2015/12/03 职场文书
学生早退检讨书(范文)
2019/08/19 职场文书