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动态设置样式实现代码及演示动画
Jan 25 Javascript
百度地图api如何使用
Aug 03 Javascript
JS常用字符串方法(推荐)
Jan 15 Javascript
JS声明式函数与赋值式函数实例分析
Dec 13 Javascript
js代码延迟一定时间后执行一个函数的实例
Feb 15 Javascript
Bootstrap缩略图的创建方法
Mar 22 Javascript
Node.js 实现简单的接口服务器的实例代码
May 23 Javascript
详解创建自定义的Angular Schematics
Jun 06 Javascript
Vue实现远程获取路由与页面刷新导致404错误的解决
Jan 31 Javascript
基于Taro的微信小程序模板消息-获取formId功能模块封装实践
Jul 15 Javascript
layer弹出层倒计时关闭的实现方法
Sep 27 Javascript
vue3.0生命周期的示例代码
Sep 24 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
fleaphp rolesNameField bug解决方法
2011/04/23 PHP
微信自定义分享php代码分析
2016/11/24 PHP
详解PHP处理密码的几种方式
2016/11/30 PHP
关于Laravel Route重定向的一个注意点
2017/01/16 PHP
php redis实现文章发布系统(用户投票系统)
2017/03/04 PHP
模仿JQuery.extend函数扩展自己对象的js代码
2009/12/09 Javascript
JS学习之一个简易的日历控件
2010/03/24 Javascript
Javascript面向对象编程(三) 非构造函数的继承
2011/08/28 Javascript
图片img的src不变让浏览器重新加载实现方法
2013/03/29 Javascript
fckeditor粘贴Word时弹出窗口取消的方法
2014/10/30 Javascript
AngularJS语法详解
2015/01/23 Javascript
深入理解JavaScript程序中内存泄漏
2016/03/17 Javascript
js正则表达式replace替换变量方法
2016/05/21 Javascript
前端面试知识点锦集(JavaScript篇)
2016/12/28 Javascript
VsCode插件整理(小结)
2017/09/14 Javascript
使用webpack搭建vue环境的教程详解
2019/12/31 Javascript
python如何将多个PDF进行合并
2019/08/13 Python
用Python画一个LinkinPark的logo代码实例
2019/09/10 Python
CentOS7下安装python3.6.8的教程详解
2020/01/03 Python
python使用for...else跳出双层嵌套循环的方法实例
2020/05/17 Python
pycharm如何设置官方中文(如何汉化)
2020/12/29 Python
HTML5给汉字加拼音收起展开组件的实现代码
2020/04/08 HTML / CSS
尼克松手表官网:Nixon手表
2019/03/17 全球购物
教师应聘个人求职信
2013/12/10 职场文书
主持词开场白
2014/03/17 职场文书
2014年收银工作总结
2014/11/13 职场文书
委托书格式范文
2015/01/28 职场文书
2015年教研工作总结
2015/05/23 职场文书
业务员年终工作总结2015
2015/05/28 职场文书
运动会开幕式主持词
2015/07/01 职场文书
大学军训通讯稿
2015/07/18 职场文书
高中班长竞选稿
2015/11/20 职场文书
详解Redis瘦身指南
2021/05/26 Redis
JS数组方法some、every和find的使用详情
2021/10/05 Javascript
Python OpenCV超详细讲解基本功能
2022/04/02 Python
古见同学有交流障碍症 第二季宣传CM公开播出
2022/04/11 日漫