zoukankan      html  css  js  c++  java
  • 原型链继承需要注意的问题

    背景:

      JavaScript的继承基本上可以分为两大类,一类是使用class定义的类使用extends继承;另一类是使用function定义的类基于原型链的继承。之前自己看过一遍JavaScript高级程序设计,但是今天在第二遍快速过的时候发现了两个之前自己没有注意的点。

    需要注意点:

      1. 给原型添加新的方法的时候一定需要注意覆盖的问题。

     1 function SuperType() {
     2     this.property = true
     3 }
     4 SuperType.prototype.getSuperValue = function () {
     5     return this.property
     6 }
     7 function ASubType() {
     8     this.subproperty = false
     9 }
    10 ASubType.prototype = new SuperType()
    11 ASubType.prototype = {
    12     getASubValue: function () {
    13         return this.subproperty
    14     },
    15     someOtherMethod: function () {
    16         return false
    17     }
    18 }
    19 let a = new ASubType()
    20 // TypeError: a.getSuperValue is not a function
    21 console.log(a.getSuperValue())

      理解:

        ①. 其实这个就可以理解为覆盖(和函数的覆盖相似)

      2. 给原型添加方法的代码一定要放在替换原型语句之后。

     1 function SuperType() {
     2     this.property = true
     3 }
     4 SuperType.prototype.getSuperValue = function () {
     5     return this.property
     6 }
     7 function ASubType() {
     8     this.subproperty = false
     9 }
    10 ASubType.prototype.getSubValue = function() {
    11     return this.subproperty
    12 }
    13 
    14 ASubType.prototype = new SuperType()
    15 
    16 ASubType.prototype.getSuperValue = function () {
    17     return false
    18 }
    19 let a = new ASubType()
    20 // TypeError: a.getSubValue is not a function
    21 console.log(a.getSubValue())

      理解:

        ①. 在上述代码第10行,给ASubType添加原型方法时,添加的方法处于一个空位置原型中(这里的空位置指的是没有显示原型对象)。

        ②. 在第14行重新定义原型对象的时候,将ASubType的原型方法定义为SuperType,此时SuperType替代了那个空位置,所以自然第10添加的原型对象就无意义了

    参考资料:

      1. 《JavaScript高级程序设计(第三版)》第六章165页

  • 相关阅读:
    在yii中使用Filter实现RBAC权限自动判断
    关于WEB设计透明和阴影
    一句话扯扯数据结构的概念点
    Console API Google 浏览器开发人员工具使用
    git提交项目时候,忽略一些文件
    学习笔记 如何解决IE6 position:fixed固定定位问题{转载}
    [转载]yii jquery折叠、弹对话框、拖拽、滑动条、ol和ul列表、局部内容切换
    Jquery 常用方法经典总结【砖】
    PHP中冒号、endif、endwhile、endfor这些都是什么
    [转载]救命的PHP代码
  • 原文地址:https://www.cnblogs.com/oulae/p/11173715.html
Copyright © 2011-2022 走看看