JavaScript精炼之构造函数 Constructor及Constructor属性详解

 更新时间:2015年11月05日 11:17:29   投稿:mrr  
对象的constructor属性用于返回创建该对象的函数,也就是我们常说的构造函数,除了创建对象,构造函数(constructor) 还做了另一件有用的事情—自动为创建的新对象设置了原型对象(prototype object)

除了创建对象,构造函数(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
);

上述代码可表示为如下的关系:

构造函数与对象之间的关系

上述图示可以看出,每一个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中Ajax

    深入理解JavaScript中Ajax

    Ajax不是一种新的编程语言,而是使用现有标准的新方法。本文重点给大家介绍javascript中ajax知识,非常不错,感兴趣的朋友参考下
    2016-08-08
  • 莱鸟介绍window.print()方法

    莱鸟介绍window.print()方法

    这篇文章主要介绍了莱鸟介绍window.print()方法的相关资料,需要的朋友可以参考下
    2016-01-01
  • js特殊字符过滤的示例代码

    js特殊字符过滤的示例代码

    本篇文章主要是对js特殊字符过滤的示例代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-03-03
  • el-popover嵌套select弹窗点击实现自定义关闭功能

    el-popover嵌套select弹窗点击实现自定义关闭功能

    el-popover弹窗内嵌套下拉选择框,点击el-popover弹出外部区域需关闭弹窗,点击查询、重置需关闭弹窗,遇到这样的需求怎么解决呢,下面小编给大家介绍el-popover嵌套select弹窗点击实现自定义关闭功能,感兴趣的朋友一起看看吧
    2024-07-07
  • js实用技巧之去除数组或者对象里重复选项

    js实用技巧之去除数组或者对象里重复选项

    这篇文章主要给大家介绍了关于js实用技巧之去除数组或者对象里重复选项的相关资料,JavaScript数组有很多内置方法,可以操作和处理数据,文中通过代码示例介绍的非常详细,需要的朋友可以参考下
    2023-08-08
  • 详细聊一聊js防抖节流到底是什么

    详细聊一聊js防抖节流到底是什么

    在项目开发中我们常常会去监听滚动事件或者用户输入框验证事件,如果事件处理没有频率限制,当用户不断触发事件时,就会加重浏览器的负担,影响用户的体验,造成不必要的损失,这篇文章主要给大家介绍了关于js防抖节流到底是什么的相关资料,需要的朋友可以参考下
    2022-04-04
  • js实现下一页页码效果

    js实现下一页页码效果

    本文主要介绍了js实现下一页页码效果的实例,具有很好的参考价值。下面跟着小编一起来看下吧
    2017-03-03
  • BootStrap中<li role=

    BootStrap中<li role=

    最近在学习bootstrap3.3.5,遇到一个问题搞不清楚<li role="presentation">到底什么含义?今天小编通过本文给大家详细介绍下,一起看看吧
    2016-12-12
  • JS中的BOM应用

    JS中的BOM应用

    我们曾经讲过JS由三部分组成,其中一个部分就是BOM,用于对浏览器进行操作。这篇文章我们主要来介绍BOM应用,感兴趣的朋友一起看看吧
    2018-02-02
  • 开箱即用的开源工具库xijs示例详解

    开箱即用的开源工具库xijs示例详解

    这篇文章主要为大家介绍了开箱即用的开源工具库xijs示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-03-03

最新评论