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 相关文章推荐
一个用js实现控制台控件的代码
Sep 04 Javascript
js冒泡法和数组转换成字符串示例代码
Aug 14 Javascript
javascript学习笔记(六)数据类型和JSON格式
Oct 08 Javascript
JS基于面向对象实现的放烟花效果
May 07 Javascript
EasyUi中的Combogrid 实现分页和动态搜索远程数据
Apr 01 Javascript
js匿名函数作为函数参数详解
Jun 01 Javascript
深入浅析JS是按值传递还是按引用传递(推荐)
Sep 18 Javascript
JavaScript数据结构之单链表和循环链表
Nov 28 Javascript
脚手架vue-cli工程webpack的作用和特点
Sep 29 Javascript
微信小程序实现顶部下拉菜单栏
Nov 04 Javascript
vue如何搭建多页面多系统应用
Jun 17 Javascript
Vue使用鼠标在Canvas上绘制矩形
Dec 24 Vue.js
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中的字符串函数
2006/11/24 PHP
php将时间差转换为字符串提示
2011/09/07 PHP
php 注释规范
2012/03/29 PHP
PHP提示Notice: Undefined variable的解决办法
2012/11/24 PHP
php实现文章置顶功能的方法
2016/10/20 PHP
thinkphp中U方法按路由规则生成url的方法
2018/03/12 PHP
laravel5.1框架model类查询的实现方法
2019/10/08 PHP
prototype 源码中文说明之 prototype.js
2006/09/22 Javascript
Javascript 调试利器 Firebug使用详解六
2009/07/05 Javascript
jQuery 表单验证扩展(三)
2010/10/20 Javascript
jQuery使用hide方法隐藏指定元素class样式用法实例
2015/03/30 Javascript
图解JavaScript中的this关键字
2020/05/28 Javascript
js从数组中删除指定值(不是指定位置)的元素实现代码
2016/09/13 Javascript
js 实现省市区三级联动菜单效果
2017/02/20 Javascript
微信小程序之选项卡的实现方法
2017/09/29 Javascript
Vue 中的compile操作方法
2018/02/26 Javascript
js中的深浅拷贝问题简析
2019/05/10 Javascript
layui 实现table翻页滚动条位置保持不变的例子
2019/09/05 Javascript
js canvas实现星空连线背景特效
2019/11/01 Javascript
Vue-Ant Design Vue-普通及自定义校验实例
2020/10/24 Javascript
VUE实现吸底按钮
2021/03/04 Vue.js
Python3遍历目录树实现方法
2015/05/22 Python
Python使用tkinter库实现文本显示用户输入功能示例
2018/05/30 Python
Python中pandas模块DataFrame创建方法示例
2018/06/20 Python
python selenium循环登陆网站的实现
2019/11/04 Python
用HTML5中的Canvas结合公式绘制粒子运动的教程
2015/05/08 HTML / CSS
村官学习十八大感想
2014/01/15 职场文书
个人合作协议书范本
2014/04/18 职场文书
工作推荐信范文
2014/05/10 职场文书
公司运动会策划方案
2014/05/25 职场文书
财务科长个人对照检查材料
2014/09/18 职场文书
小浪底导游词
2015/02/12 职场文书
穆斯林的葬礼读书笔记
2015/06/26 职场文书
pytorch fine-tune 预训练的模型操作
2021/06/03 Python
python基于turtle绘制几何图形
2021/06/15 Python
Win11应用商店打开闪退怎么解决? win11应用商店打不开的多种解决办法
2022/04/05 数码科技