关于constructor 的理解

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, 你答对了吗?

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值