Javascript：原型对象（prototype）中的constructor属性、及其应用

最新推荐文章于 2024-09-15 16:55:54 发布

听海边涛声

最新推荐文章于 2024-09-15 16:55:54 发布

阅读量346

点赞数 7

文章标签： javascript 开发语言

本文链接：https://blog.csdn.net/panghuangang/article/details/140204680

版权

介绍

在每个原型对象里面都有个constructor属性，该属性指向该原型对象的构造函数。

constructor的使用场景：
如果构造函数有多个公共方法，可以把这些方法写到一个对象中，然后给原型对象赋值。但是这样一来，就会覆盖构造函数原型对象原来的内容，导致修改后的原型对象的constructor属性就不再指向当前构造函数了。此时，就可以在修改后的原型对象中，添加一个constructor属性，用来指向原来的构造函数。

示例

查看prototype中的constructor属性

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    function Star() {
    }
    const star1 = new Star()
    console.log(Star.prototype)
  </script>
</body>

</html>

在这里插入图片描述

constructor属性指向原型的构造函数

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    function Star() {
    }
    const star1 = new Star()
    // console.log(Star.prototype)
    console.log(Star.prototype.constructor === Star)
  </script>
</body>

</html>

在这里插入图片描述

constructor的典型使用场景

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    function Star() {
    }

    Star.prototype = {
      // 重新指回创造这个原型对象的构造函数
      constructor: Star,
      sing: function () {
        console.log('唱歌')
      },
      dance: function () {
        console.log('跳舞')
      },
    }
    console.log(Star.prototype)

  </script>
</body>

</html>

在这里插入图片描述