zoukankan      html  css  js  c++  java
  • JS继承(一)

    突然发现自己很久没写过什么东西了

    其实从博客更新的速度上就可以看出一个人近期有没有成长

    对 …… 我没有成长

    也可以由此看出自己选择的企业是不是对的

    对 …… 我不会离职……

    略略略 来咬我啊……

    于是乎 我把自己以前其他博客发的文章放出来了 

    欢迎骚扰 欢迎指点 小女子 不胜感激……

    ——————————————我是分割线————————————————

    1.构造函数,实例

    构造函数是用来创建对象的函数 与其他函数的区别在于调用方式不同
    • 如果通过new操作符来调用 就是构造函数
    • 如果没有通过new操作符来调用的就是普通函数
    JS中的继承(一)
     
    在var person1 = new person()中 通过new操作符 调用了函数person 并生成了person1
    这里的person就成为构造函数 person1称为person函数对象的一个实例 
    其实可以通过实例的constructor 访问对应的构造函数 (但是其实constructor并不是实例的属性)
     
    JS中的继承(一)
     
    2.原型对象
    我们创建一个函数的时候 函数对象都会有一个prototype属性 这个属性是一个指针
    指向他的原型对象 原型对象的本质也是一个对象
    举个栗子:
    JS中的继承(一)
    JS中的继承(一)

    3.构造函数 原型对象和实例的关系
    JS中的继承(一)

    由图可以看出
    • 函数对象的prototype指向原型对象 原型对象的constructor指向函数对象
    • 实例对象的prototype属性指向原型对象,这里的perototype是内部属性 是不允许访问的
    • 这个属性的作用:允许实例通过该属性访问原型对象中的属性和方法
    JS中的继承(一)

    解释:console.log(person1.constructor)时说到可以通过实例的constructor访问构造函数
    但是constructor本质上是原型对象的属性
     
    4.继承
    原型链:继承的主要思路就事利用原型链 
          让一个引用类型继承另一个引用类型的属性和方法
    • 原型对象通过contructor属性指向构造函数
    • 实例通过prototype属性指向原型对象
    JS中的继承(一)
     
    原理上图
    JS中的继承(一)
    • 首先我们创建了A和B 两个函数对象 同时也生成了他们的原型对象
    • 接着 给A的原型对象添加了sayA()方法
    • 然后是关键的一部B.prototype = new A();让函数对象B的prototype指针指向了一个A的实例
    这也就是为什么最后B的原型对象里面不在有constructor属性 
    (其实B本来有一个真正的原型对象 原本可以通过B.prototype访问 但是我们现在改写了这个指针
    使他指向了另一个对象,所以B真正的原型对象现在没法被访问了 取而代之的这个新的原型对象是
    A的一个实例 所以没有了constructor属性了)
    • 接下来给这个B.prototype指向的对象增加一个sayB方法
    • 然后生成了一个实例b1
    • 最后调用了b1的sayB方法 可以执行
    因为b1有prorotype属性可以访问B.prototype里的方法
    • 调用了b1的sayA方法 可以执行
    因为b1沿着prototype属性可以访问B.prototype ,B.prototype可以继续沿着prototype属性访问 A.prototype,最终在A.prototype上找到 了sayA方法 所以可以执行
     
    所以现在的结果就相当于 b1继承了A的属性和方法 这种由prototype不断把实例和原型对象联系起来的结构就是原型链 也是js中 继承主要的实现方式
     
    该篇文章参考思否! 主要方便自己记忆的同时 传播 好的内容 !希望对大家有所帮助!
  • 相关阅读:
    06-图2 Saving James Bond
    06-图3 六度空间 (30 分)
    07-图5 Saving James Bond
    09-排序3 Insertion or Heap Sort (25 分)
    09-排序2 Insert or Merge (25 分)
    10-排序4 统计工龄 (20 分)
    10-排序5 PAT Judge (25 分)
    使用正则表达式验证汉字输入
    使用正则表达式验证字母
    使用正则表达式对字符串进行拆分
  • 原文地址:https://www.cnblogs.com/WoAiZmm/p/9316113.html
Copyright © 2011-2022 走看看