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 相关文章推荐
JQuery调用WebServices的方法和4个实例
May 06 Javascript
关闭时刷新父窗口两种方法
May 07 Javascript
Javascript学习笔记之数组的遍历和 length 属性
Nov 23 Javascript
jQuery使用prepend()方法在元素前添加内容用法实例
Mar 26 Javascript
Angularjs全局变量被作用域监听的正确姿势
Feb 06 Javascript
JS实现动画兼容性的transition和transform实例分析
Dec 13 Javascript
jquery mobile实现可折叠的导航按钮
Mar 11 Javascript
jQuery Validate 无法验证 chosen-select元素的解决方法
May 17 jQuery
VUE前端cookie简单操作
Oct 17 Javascript
小程序页面动态配置实现方法
Feb 05 Javascript
js实现窗口全屏示例详解
Sep 17 Javascript
JS函数进阶之prototy用法实例分析
Jan 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
javascript(jquery)利用函数修改全局变量的代码
2009/11/02 Javascript
JavaScript中使用replace结合正则实现replaceAll的效果
2010/06/04 Javascript
javascript面向对象编程(一) 实例代码
2010/06/25 Javascript
javascript继承之为什么要继承
2012/11/10 Javascript
JavaScript匿名函数与委托使用示例
2014/07/22 Javascript
javascript中scrollTop详解
2015/04/13 Javascript
JavaScript设计模式经典之工厂模式
2016/02/24 Javascript
JavaScript使ifram跨域相互访问及与PHP通信的实例
2016/03/03 Javascript
jquery基础知识第一讲之认识jquery
2016/03/17 Javascript
详解如何在Vue2中实现组件props双向绑定
2017/03/29 Javascript
原生js二级联动效果
2017/06/20 Javascript
Vue-cli项目获取本地json文件数据的实例
2018/03/07 Javascript
vue使用ajax获取后台数据进行显示的示例
2018/08/09 Javascript
详解小程序输入框闪烁及重影BUG解决方案
2018/08/31 Javascript
Vue弹出菜单功能的实现代码
2018/09/12 Javascript
vue 设置 input 为不可以编辑的实现方法
2019/09/19 Javascript
Vue打包后访问静态资源路径问题
2019/11/08 Javascript
JS+CSS实现3D切割轮播图
2020/03/21 Javascript
vue同个按钮控制展开和折叠同个事件操作
2020/07/29 Javascript
[01:08:17]2018DOTA2亚洲邀请赛3月29日 小组赛B组 EG VS VGJ.T
2018/03/30 DOTA
[03:55]TI9战队采访——TNC Predator
2019/08/22 DOTA
Python对list列表结构中的值进行去重的方法总结
2016/05/07 Python
Win10下python 2.7.13 安装配置方法图文教程
2018/09/18 Python
Python Opencv实现图像轮廓识别功能
2020/03/23 Python
Python3+Pycharm+PyQt5环境搭建步骤图文详解
2019/05/29 Python
python 将dicom图片转换成jpg图片的实例
2020/01/13 Python
Python 排序最长英文单词链(列表中前一个单词末字母是下一个单词的首字母)
2020/12/14 Python
修复iPhone的safari浏览器上submit按钮圆角bug
2012/12/24 HTML / CSS
服装设计专业毕业生推荐信
2013/11/09 职场文书
企业申诉管理制度
2014/01/30 职场文书
党员个人剖析材料2014
2014/10/08 职场文书
党员批评与自我批评材料
2014/10/14 职场文书
学校党的群众路线教育实践活动总结材料
2014/10/30 职场文书
新入职员工工作总结
2015/10/15 职场文书
残联2016年全国助残日活动总结
2016/04/01 职场文书
Python中基础数据类型 set集合知识点总结
2021/08/02 Python