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 相关文章推荐
关于火狐(firefox)及ie下event获取的两种方法
Dec 27 Javascript
利用js的Node遍历找到repeater的一个字段实例介绍
Apr 25 Javascript
用js实现table单元格高宽调整,兼容合并单元格(兼容IE6、7、8、FF)实例
Jun 25 Javascript
javascript break指定标签打破多层循环示例
Jan 20 Javascript
jquery无法设置checkbox选中即没有变成选中状态
Mar 27 Javascript
js返回前一页刷新本页重载页面
Jul 29 Javascript
Javascript中作用域的详细介绍
Oct 06 Javascript
JS多文件上传的实例代码
Jan 11 Javascript
jquery.tableSort.js表格排序插件使用方法详解
Aug 12 Javascript
vue操作下拉选择器获取选择的数据的id方法
Aug 24 Javascript
微信小程序 点击切换样式scroll-view实现代码实例
Oct 11 Javascript
JS数组方法shift()、unshift()用法实例分析
Jan 18 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函数的实现原理及性能分析(三)
2015/05/13 PHP
PHP完全二叉树定义与实现方法示例
2017/10/09 PHP
Javascript常用运算符(Operators)-javascript基础教程
2007/12/14 Javascript
jquery中常用的函数和属性详细解析
2014/03/07 Javascript
jQuery根据用户电脑是mac还是pc加载对应样式的方法
2015/06/26 Javascript
js验证框架之RealyEasy验证详解
2016/06/08 Javascript
jQuery简单注册和禁用全局事件的方法
2016/07/25 Javascript
更靠谱的H5横竖屏检测方法(js代码)
2016/09/13 Javascript
Vue.js第四天学习笔记(组件)
2016/12/02 Javascript
浅谈regExp的test方法取得的值变化的原因及处理方法
2017/03/01 Javascript
Async Validator 异步验证使用说明
2017/07/03 Javascript
jQuery实现的简单手风琴效果示例
2018/08/29 jQuery
JavaScript遍历数组和对象的元素简单操作示例
2019/07/09 Javascript
深入浅析Vue中mixin和extend的区别和使用场景
2019/08/01 Javascript
vue使用高德地图点击下钻上浮效果的实现思路
2019/10/12 Javascript
vue遍历生成的输入框 绑定及修改值示例
2019/10/30 Javascript
解决vue axios跨域 Request Method: OPTIONS问题(预检请求)
2020/08/14 Javascript
python实现DNS正向查询、反向查询的例子
2014/04/25 Python
让python在hadoop上跑起来
2016/01/27 Python
python按综合、销量排序抓取100页的淘宝商品列表信息
2018/02/24 Python
深入分析python数据挖掘 Json结构分析
2018/04/21 Python
Python数据分析:手把手教你用Pandas生成可视化图表的教程
2018/12/15 Python
python 使用正则表达式按照多个空格分割字符的实例
2018/12/20 Python
python五子棋游戏的设计与实现
2019/06/18 Python
50行Python代码实现视频中物体颜色识别和跟踪(必须以红色为例)
2019/11/20 Python
Django REST Swagger实现指定api参数
2020/07/07 Python
python实现发送邮件
2021/03/02 Python
ParcelABC西班牙:包裹运送和快递服务
2019/12/24 全球购物
MIXIT官网:俄罗斯最大的化妆品公司之一
2020/01/25 全球购物
怎样写好自我评价呢?
2014/02/16 职场文书
店面销售职位的职责
2014/03/09 职场文书
优秀安全员事迹材料
2014/05/11 职场文书
小学家长学校培训材料
2014/08/24 职场文书
市级三好学生事迹材料
2014/08/27 职场文书
社区务虚会发言材料
2014/10/20 职场文书
为什么node.js不适合大型项目
2021/04/28 Javascript