`
指甲刀X
  • 浏览: 35188 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

prototype、prototype.constructor、constructor.prototype的区别与联系

阅读更多

在js中经常可以接触到prototype、prototype.constructor、constructor.prototype,感觉像一个圈一样,绕来绕去,他们是什么关系,什么时候该用哪一个,这是让很多新学js的人困惑的问题。

 

 

我们知道在js中,prototype是函数的原型,定义了一类对象共有的属性(通常都是方法),是该类对象的"blueprint"。

constructor是对象的构造函数,当我们通过声明一个构造函数来创建“类”时,constructor属性被隐性的添加到该"类"的prototype上,指向该构造函数自己。我们可以通过下面的代码验证:

 

 

function ClassA(){} 
console.log(ClassA.prototype.constructor == ClassA); //true

 

之所以把构造函数自身的引用又添加到prototype,目的是方便我们区分不同对象的实例。

当我们执行var a = new ClassA()时,在堆内存中生成一个新的object,然后将隐性的创建__proto__属性指向ClassA的prototype,最后将该object的地址赋给栈中的变量a,这样我们就通过a可以访问到在ClassA的prototype上定义的一些属性方法。所以

 

function ClassA(){}
var a = new ClassA();
console.log(a.constructor === ClassA); //true

 既然a.constructor是ClassA,那么a.constructor.prototype当然就是ClassA的prototype了。

 

值得注意的是虽然通过

ClassA.prototype = {

              set = function (){},

              get = function (){}

}

的形式来添加原型方法很方便,却忽略了会重写ClassA原有的prototype,导致丢失constructor属性,所实例化的对象的constructor属性将变为function Object(){[native code]}。解决的办就是自己手动将constructor属性赋值给ClassA。


另外,由于任何function都是由Function对象实例化来的,所以每个function的constructor都指向Function(){}

 

function ClassA(){}
console.log(ClassA.constructor); //  function Function(){[native code]}
分享到:
评论

相关推荐

    JS:typeof instanceof constructor prototype区别

    然而,`typeof`也有其局限性,如不能准确区分不同类型的对象,比如无法辨别数组与普通对象的区别。因此,在处理复杂对象类型时,可能需要结合其他方法使用。 ### 2. `instanceof` `instanceof`运算符用于检查构造...

    prototype,__proto,constructor

    分析javascript中 prototype __proto__ constructor之间的关系

    arguments:永远不要写“Array.prototype.slice.call(arguments);” 以后再!

    这是基于但使用Object.defineProperty(arguments.constructor.prototype, [functionName], {enumerable: false, configurable: true, value: [functionBody]})代替,以避免迭代时出现混乱。 Object....

    Prototype-3.pdf

    - **Constructor and prototype in one place** - **概念**:通过`Class.create`方法,可以将构造函数和原型方法定义在同一位置,简化代码结构。 - **优点**:使得类的设计更加直观,易于理解和维护。 - **Single ...

    javascript new后的constructor属性.docx

    之后通过修改`rp.constructor`,使得`r.prototype.constructor`与`sp.constructor`相等,从而实现了对构造函数的正确引用。 #### 五、总结 通过以上分析可以看出,`constructor`属性在JavaScript中扮演着重要的...

    prototype手册1.6.0.2版本

    ### prototype手册1.6.0.2版本:深入解析与应用 #### Event模块:事件处理的艺术 在Prototype框架中,`Event`模块提供了强大的事件处理功能。以下是一些关键的方法: - **`element(event)`**:从事件对象中获取...

    prototype1.6.0源码解读.js

    - **constructor 属性**:确保 `prototype` 对象上的 `constructor` 指向正确的构造函数。 #### 总结 Prototype 1.6.0 在其核心设计中采用了面向对象的思想,通过自定义 `Class.create` 方法实现了类的创建、继承...

    深化浅析JavaScript中的constructor_.docx

    需要注意的是,每个函数都有一个 `prototype` 属性,这个 `prototype` 属性的 `constructor` 属性指向这个函数本身。例如: ```javascript function Person(name, age) { this.name = name; this.age = age; } ...

    prototype文件以及使用说明.rar

    `prototype`对象还有一个`constructor`属性,它指向创建当前原型的构造函数。这有助于追溯对象的来源。 8. **`Object.prototype`和`Function.prototype`** 所有对象的原型链最终都会指向`Object.prototype`,而...

    深化剖析JavaScript面对对象编程_.docx

    这里需要注意的是,当替换`prototype`对象时,必须确保新的`prototype`对象有一个指向正确构造函数的`constructor`属性,即`Cat.prototype.constructor = Cat`。 **直接继承原型**: 为了提高效率并节省内存,可以...

    prototype小例子

    每个`prototype`对象都有一个`constructor`属性,它引用了创建该原型的对象的函数: ```javascript console.log(Person.prototype.constructor === Person); // 输出 "true" ``` 在实际开发中,我们经常使用`...

    深入分析js中的constructor和prototype

    我们在定义函数的时候,函数定义的时候函数本身就会默认有一个prototype的属性,而我们如果用new 运算符来生成一个对象的时候就没有prototype属性。我们来看一个例子,来说明这个 代码如下: function a(c){ this.b =...

    javascript中类和继承(代码示例+prototype.js)

    this.constructor.apply(this, arguments); }; SubClass.prototype = Object.create(this.prototype); for (let key in props) { SubClass.prototype[key] = props[key]; } return SubClass; }; window....

    【JavaScript的9种继承实现方式归纳】js实现继承的几种方式.pdf

    Child.prototype.constructor = Child; ``` 这种继承方式需要新建一个实例作为原型对象,效率上会低一些。但是,这种方式可以将需要重用的属性和方法迁移至原型对象中,而将不可重用的部分设置为对象的自身属性。 2...

    JavaScript的prototype

    但是,构造函数的`prototype`还有一个特殊之处——`constructor`属性,它指向构造函数自身。这有助于追踪对象是从哪个构造函数创建的。 ```javascript console.log(Dog.prototype.constructor === Dog); // true ``...

    setter-on-constructor-prototype.rar_The Next

    在JavaScript编程中,"setter-on-constructor-prototype.rar_The Next"这个主题涉及到对象属性的访问和修改,尤其是关于构造函数原型链上的setter方法。在描述中提到的"Get the name of the next property of Result...

    了解JavaScript中的prototype (实例)

    **三、`__proto__`与`prototype`的区别** `__proto__`是对象的内部属性,而`prototype`是函数的属性。`__proto__`用于表示对象的继承关系,而`prototype`则用于定义构造函数的继承。 **四、`Object.create()`和`...

    005Prototype.rar

    Circle.prototype.constructor = Circle; var circle1 = new Circle(); var circle2 = circle1.clone(); console.log(circle1.type); // 输出 "Circle" console.log(circle2.type); // 输出 "Circle" console1....

    prototype自己做的一个例子

    此外,`prototype`还与JavaScript的继承密切相关。我们可以通过设置一个函数的`prototype`为另一个函数的实例来实现继承: ```javascript function Student(name, grade) { Person.call(this, name); // 调用父类...

Global site tag (gtag.js) - Google Analytics