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 脚本的加载与执行
Apr 19 Javascript
javascript 利用Image对象实现的埋点(某处的点击数)统计
Dec 28 Javascript
THREE.JS入门教程(6)创建自己的全景图实现步骤
Jan 25 Javascript
捕获键盘事件(且兼容各浏览器)
Jul 03 Javascript
一个JavaScript去除字符串末尾的空白实例代码
Sep 22 Javascript
jQuery实现设置、移除文本框默认值功能
Jan 13 Javascript
jquery实现的点击翻书效果代码
Nov 04 Javascript
详解JavaScript对象序列化
Jan 19 Javascript
js仿小米官网图片轮播特效
Sep 29 Javascript
vue项目中做编辑功能传递数据时遇到问题的解决方法
Dec 19 Javascript
拖动时防止选中
Feb 03 Javascript
JavaScript实现点击出现子菜单效果
Feb 08 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中file_get_contents与curl性能比较分析
2014/11/08 PHP
PHP实现的构造sql语句类实例
2016/02/03 PHP
PHP+JQuery+Ajax实现分页方法详解
2016/08/06 PHP
Laravel开启跨域请求的方法
2019/10/13 PHP
laravel框架中路由设置,路由参数和路由命名实例分析
2019/11/23 PHP
JavaScript中的prototype使用说明
2010/04/13 Javascript
JS 类型转换常见方法小结
2010/05/31 Javascript
ajax页面无刷新 IE下遭遇Ajax缓存导致数据不更新的问题
2012/12/11 Javascript
jQuery实现用户注册的表单验证示例
2013/08/28 Javascript
js实现简单锁屏功能实例
2015/05/27 Javascript
深入理解jquery中extend的实现
2016/12/22 Javascript
Vue.js 2.0 移动端拍照压缩图片上传预览功能
2017/03/06 Javascript
妙用Angularjs实现表格按指定列排序
2017/06/23 Javascript
解决vue中虚拟dom,无法实时更新的问题
2018/09/15 Javascript
mpvue性能优化实战技巧(小结)
2019/04/17 Javascript
nodejs 递归拷贝、读取目录下所有文件和目录
2019/07/18 NodeJs
[03:59]第二届DOTA2亚洲邀请赛选手传记-VGJ.rOtk
2017/04/03 DOTA
使用Python读取安卓手机的屏幕分辨率方法
2018/03/31 Python
Django接收post前端返回的json格式数据代码实现
2019/07/31 Python
使用opencv将视频帧转成图片输出
2019/12/10 Python
PyTorch实现更新部分网络,其他不更新
2019/12/31 Python
pygame用blit()实现动画效果的示例代码
2020/05/28 Python
关于python3.9安装wordcloud出错的问题及解决办法
2020/11/02 Python
Django如何继承AbstractUser扩展字段
2020/11/27 Python
婴儿地球:Baby Earth
2018/12/25 全球购物
华美博弈C/VC工程师笔试试题
2012/07/16 面试题
"引用"与多态的关系
2013/02/01 面试题
你经历的项目中的SCM配置项主要有哪些?什么是配置项?
2013/11/04 面试题
公务员转正鉴定材料
2014/02/11 职场文书
大学学风建设方案
2014/05/04 职场文书
公司证明怎么写
2014/09/22 职场文书
个人年底工作总结
2015/03/10 职场文书
vue中三级导航的菜单权限控制
2021/03/31 Vue.js
详细聊聊MySQL中慢SQL优化的方向
2021/08/30 MySQL
Go语言并发编程 sync.Once
2021/10/16 Golang
IIS服务器中设置HTTP重定向访问HTTPS
2022/04/29 Servers