关于constructor 的理解

_DangJin 发布于2019-08-22 17:03 / 2623人阅读

摘要：在默认情况下，所有原型对象都会自动获得一个构造函数属性，这个属性是一个指向属性所在函数的指针。但有一点我们是要注意的，当我们将构造函数的设置为等于一个以对象字面量形式创建的新对象时，属性不再指向该构造函数。

1 面试题再现

面试时遇到下面一段代码：

  function A () {}
  function B () {}
  A.prototype = {
    fun: function () {}
  }
  var a =new A ()

  console.log(a.constructor === A)
  console.log(A.prototype.constructor === A)
  console.log(a.hasOwnProperty("constructor"))

大家猜到上面的结果是啥了吗？正确答案是 false false false

2 constructor原理

我们创建的每个函数都有一个prototype（原型）对象，这个属性是一个指针，指向一个对象。在默认情况下，所有原型对象都会自动获得一个constructor（构造函数）属性，这个属性是一个指向prototype属性所在函数的指针。当调用构造函数创建一个新实例后，该实例的内部将包含一个指针（继承自构造函数的prototype），指向构造函数的原型对象。

但有一点我们是要注意的，当我们将构造函数的prototype设置为等于一个以对象字面量形式创建的新对象时，constructor属性不再指向该构造函数。

3 回归题目

该题目就是有了对A的prototype的重新设置，导致A.prototype 不在指向A的构造函数。所以上面前两个都返回false。而constructor 是继承自prototype ,所以hasOwnProperty("constructor") 是false.
如果A.prototype重新赋值后希望constructor仍指向A的话，我们可以在字面对象里加一个constructor属性让它指向A。

A.prototype = {
    fun: function () {},
    constructor: A
}

这样就可以返回true了

4 进阶题目

 A.prototype = new B()
 var b = new A()
 console.log(b.constructor === A)
 console.log(B.prototype.constructor === A)
 console.log(b.constructor.prototype.constructor === A)
 console.log(b.hasOwnProperty("constructor"))

上面的都是返回false, 你答对了吗？

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/94805.html

javascript基础篇：关于js面向对象的理解

摘要：关于中面向对象的理解面向对象编程它是一种编程思想我们的编程或者学习其实是按照类实例来完成的学习类的继承封装多态封装把实现一个功能的代码封装到一个函数中一个类中以后再想实现这个功能，只需要执行这个函数方法即可，不需要再重复的编写代码。关于js中面向对象的理解面向对象编程(oop) 它是一种编程思想 (object-oriented programming ), 我们的编程或者学习其...

roadtogeek 2019-08-23 15:41 评论0 收藏0
javascript基础篇：关于js面向对象的理解

摘要：关于中面向对象的理解面向对象编程它是一种编程思想我们的编程或者学习其实是按照类实例来完成的学习类的继承封装多态封装把实现一个功能的代码封装到一个函数中一个类中以后再想实现这个功能，只需要执行这个函数方法即可，不需要再重复的编写代码。关于js中面向对象的理解面向对象编程(oop) 它是一种编程思想 (object-oriented programming ), 我们的编程或者学习其...

newtrek 2019-08-02 14:25 评论0 收藏0
关于javascript的原型和原型链，看我就够了（二）

摘要：原文链接关于的原型和原型链，看我就够了一参考链接闯关记之原型及原型链之原型与原型链一篇文章带你理解原型和原型链彻底理解原型链一的默认指向图解和的三角关系原型和原型链三张图搞懂的原型对象与原型链温故创建对象的三种方式通过对象直接量通过new创建对象通过Object.create() js中对象分为两种函数对象普通对象仔细观察如下代码 function Foo(na...

eccozhou 2019-08-23 12:44 评论0 收藏0
JavaScript专题之模拟实现new

摘要：模拟实现操作符构造函数返回结果创建一个空对象取传入的第一个参数，即构造函数，并删除第一个参数。二处理返回值构造函数也是函数，有不同类型返回值。有时候构造函数会返回指定的对象内容，所以要对这部分进行处理。本文共 1230 字，读完只需 5 分钟写在前面最近工作太忙，快接近两周没更新博客，总感觉有一些事情等着自己去做，虽然工作内容对自己提升挺大，但我总觉得，一直埋着头走路，偶尔也...

pingink 2019-08-23 13:01 评论0 收藏0