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 相关文章推荐
动态改变textbox的宽高的js
Oct 26 Javascript
用javascript读取xml文件读取节点数据
Aug 12 Javascript
多个checkbox被选中时如何判断是否有自己想要的
Sep 22 Javascript
js实现上传图片预览的方法
Feb 09 Javascript
点评js异步加载的4种方式
Dec 22 Javascript
JavaScript开发者必备的10个Sublime Text插件
Feb 27 Javascript
Node.js实用代码段之获取Buffer对象字节长度
Mar 17 Javascript
全国省市二级联动下拉菜单 js版
May 10 Javascript
jsp 网站引入外部css或者js失效问题解决
Oct 31 Javascript
js实现符合国情的日期插件详解
Jan 19 Javascript
常见的浏览器存储方式(cookie、localStorage、sessionStorage)
May 07 Javascript
Vue实现滑动拼图验证码功能
Sep 15 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 insert语法详解
2008/06/07 PHP
《PHP编程最快明白》第五讲:php目录、文件操作
2010/11/01 PHP
PHP模板引擎Smarty的缓存使用总结
2014/04/24 PHP
php时间戳格式化显示友好的时间函数分享
2014/10/21 PHP
用 Composer构建自己的 PHP 框架之基础准备
2014/10/30 PHP
php微信高级接口调用方法(自定义菜单接口、客服接口、二维码)
2016/11/28 PHP
传智播客学习之JavaScript基础篇
2009/11/13 Javascript
js getBoundingClientRect() 来获取页面元素的位置
2010/11/25 Javascript
jquery获取自定义属性(attr和prop)实例介绍
2013/04/21 Javascript
JS嵌套函数调用上下文的问题解决
2014/03/26 Javascript
JS组件Bootstrap Table表格行拖拽效果实现代码
2020/08/27 Javascript
Markdown+Bootstrap图片自适应属性详解
2016/05/21 Javascript
浅谈JS的基础类型与引用类型
2016/09/13 Javascript
浅析JS中对函数function的理解(基础篇)
2016/10/14 Javascript
微信小程序request出现400的问题解决办法
2017/05/23 Javascript
js+html5生成自动排列对话框实例
2017/10/09 Javascript
Vue表单类的父子组件数据传递示例
2018/05/03 Javascript
微信小程序开发常见问题及解决方案
2019/07/11 Javascript
微信小程序可滑动周日历组件使用详解
2019/10/21 Javascript
python cookielib 登录人人网的实现代码
2012/12/19 Python
Python selenium 父子、兄弟、相邻节点定位方式详解
2016/09/15 Python
python matplotlib坐标轴设置的方法
2017/12/05 Python
利用Python如何生成便签图片详解
2018/07/09 Python
Pycharm中切换pytorch的环境和配置的教程详解
2020/03/13 Python
Python绘图之二维图与三维图详解
2020/08/04 Python
CSS3 三维变形实现立体方块特效源码
2016/12/15 HTML / CSS
三星印度官网:Samsung印度
2019/08/03 全球购物
财务与信息服务专业推荐信
2013/11/28 职场文书
食堂员工工作职责
2013/12/18 职场文书
反对邪教标语
2014/06/30 职场文书
2014年工作总结与下年工作计划
2014/11/27 职场文书
新员工入职欢迎词
2015/01/23 职场文书
《蚂蚁和蝈蝈》教学反思
2016/02/22 职场文书
导游词之上海豫园
2019/10/24 职场文书
从np.random.normal()到正态分布的拟合操作
2021/06/02 Python
JavaScript 原型与原型链详情
2021/11/02 Javascript