原型对象的三个重要属性,你真的知道吗?

125 阅读1分钟

众所周知,在Javascript中,原型对象有三个属性来描述构造函数、原型对象于实例函数之间的关系

1、prototype

  • 属于构造函数,指向原型对象

解决构造函数内存浪费以及变量污染

函数名.prototype.若没有对应的内容,则会添加

任何属性和方法都可以访问原型对象中的成员

  <script>
    function fn() {
      this.name = name
      this.age = age
    }
    //属于构造函数,指向原型对象
    //任何属性和方法都可以访问原型对象中的成员
    fn.prototype.sex = function name() {
      console.log('name')
    }
    console.log(fn.prototype)
  </script>

2、'__proto'

  • 属于实例函数,指向原型对象

让实例对象直接使用原型对象的函数和属性

 <script>
    function getInfo(time, name, age) {
      this.time = time
      this.name = name
      this.age = age
    }
    getInfo.prototype.getNotice = function getNotice() {
      document.write('WARRING')
    }

    //__proto__属于实例函数,指向原型对象
    //能让实例对象直接使用原型对象的函数和属性
    let getNewInfo = new getInfo('12:00', 'YWQ', '21')
    getNewInfo.__proto__.getNotice()
  </script>

3、constructor

  • 属于原型对象,指向构造函数

可以显示实例对象由哪个构造函数创建

  <script>
    function getInfo(time, name, age) {
      this.time = time
      this.name = name
      this.age = age
    }
    let getNewInfo = new getInfo('12:00', 'YWQ', '21')
    let proto = getInfo.prototype
    //属于原型对象,指向构造函数
    //可以显示实例对象由哪个构造函数创建
    console.log(proto.constructor)
  </script>

可以用下图来直观说明三者间的关系 image.png