原型链

JavaScript原型链

本节主要介绍了JavaScript原型链,从对象属性入手介绍了__proto__与prototype,讲解了原型链的追溯方式,最后结合练习题引入原型链继承概念。

01-22侠课岛    初级拔高       

前端/前端/前端系列课程P2 19     0     444

(三十六)JavaScript原型链

1:基本概念

  • JavaScript 只有一种结构:对象

  • JavaScript - 基于原型的语言 (prototype-based language)

    • 每个对象拥有一个原型对象, 从中继承方法和属性
    • 原型对象也可能拥有原型, 并从中继承方法和属性
    • 以此类推形成一个链路 - 原型链
  • __proto__( Object.getPrototypeOf() )- 私有属性

    • 对象属性
    • 指向构造该对象的构造函数原型的指针(构造函数的prototype)
  /* 定义数字类型 */
  const num = 1234;

  /* 包含toString()、toFixed()等方法 */
  num.toFixed(2);

  /* 查看num的构造函数 */
  num.__proto__
  /*
  Number {
      toPrecision: ƒ, …}
      constructor: ƒ Number()
      toExponential: ƒ toExponential()
      toFixed: ƒ toFixed()
      toLocaleString: ƒ toLocaleString()
      toPrecision: ƒ toPrecision()
      toString: ƒ toString()
      valueOf: ƒ valueOf()
      __proto__: Object
  }
  */

  /* Number的构造函数 */
  num.__proto__.__proto__
  /*
  {
      constructor: ƒ doSomething(),
      __proto__: {
          constructor: ƒ Object(),
          hasOwnProperty: ƒ hasOwnProperty(),
          isPrototypeOf: ƒ isPrototypeOf(),
          propertyIsEnumerable: ƒ propertyIsEnumerable(),
          toLocaleString: ƒ toLocaleString(),
          toString: ƒ toString(),
          valueOf: ƒ valueOf()
      }
  }
  */

  /* 继续查找 */
  num.__proto__.__proto__.__proto__
  /* null */
  • prototype - 原型

    • 函数特有属性
    • 指向原型对象的指针
    • 包含所有实例共享的属性和方法
  function fun() {}

  fun.prototype
  /*
  {
      constructor: ƒ fun(),
      __proto__: {
          constructor: ƒ Object(),
          hasOwnProperty: ƒ hasOwnProperty(),
          isPrototypeOf: ƒ isPrototypeOf(),
          propertyIsEnumerable: ƒ propertyIsEnumerable(),
          toLocaleString: ƒ toLocaleString(),
          toString: ƒ toString(),
          valueOf: ƒ valueOf()
      }
  }
  */
  • Object.getPrototypeOf(new Fun()) === Fun.prototype

本教程图文或视频等内容版权归侠课岛所有,任何机构、媒体、网站或个人未经本网协议授权不得转载、转贴或以其他方式复制发布或发表。

评价

19

本课评分:
  •     非常好
难易程度:
  •     适中的

内容目录


本文索引


|
教程
粉丝
主页

签到有礼

已签到2天,连续签到7天即可领取7天全站VIP

  • 1
    +2 金币
  • 2
    +3 金币
  • 3
    +5 金币
  • 6
    +7 金币
  • 5
    +6 金币
  • 4
    暖心福利
    自选分类VIP ×1天
  • 7
    惊喜大礼

    自选分类VIP ×3天 +20金币
  • 持续签到 +8 金币

金币可以用来做什么?