原生JS大揭秘—看清JS继承本质

sutaking 发布于2019-08-22 18:09 / 556人阅读

摘要：继承理论源于生活又高于生活在中继承，和现实生活中继承是相似的如儿子继承父亲财产子女的生理特性有父母的特性身高肤色性格等等只是一定比例上是这样的，不是绝对的一样中继承方法有以下几种本质区别方法特别注意是本质区别冒充继承也称之为借用构造函数这种

JS继承

理论源于生活、又高于生活
  在JS中“继承”，和现实生活中继承是相似的
  如:儿子继承父亲财产、子女的生理特性有父母的特性（身高、肤色、性格等等....）
  只是一定比例上是这样的，不是绝对的一样

JS中继承方法有以下几种本质区别方法（特别注意是本质区别）

冒充继承（也称之为借用构造函数）

这种方法实现原理主要是利用了call/apply

  // 定义父“类”（ES6之前JS中没有严格意义上的“类”概念）
  function Parent(name, age) {
      this.name = name
      this.age = age
      this.run = function () {
          console.log("run...")
      }
  }
  // 定义子”类“
  Student.prototype.sid=200
  function Student(name, age, sex) {
      var _super = Parent
      // call方法强制更改this指向，注意这个方向只是单纯的操作当前this对象，并不会影响到其“原型对象”
      _super.call(this, name, age)
      delete _super
      this.sex=sex
  }
  
  var student=new Student("zs",20,"Male")
  console.log(student.name) // zs
  console.log(student.sid) // 200

原型链继承

  // 定义父“类”（ES6之前JS中没有严格意义上的“类”概念）
  Parent.prototype.lastName="damon"
  function Parent() {
      this.lastName="pool"
  }
  // 定义子”类“
  // 子类的原型指向父类的一个实例对象
  Student.prototype=new Parent()
  function Student() {
  }
  
  var student=new Student()
  // 查找过程是怎么样的？
  /*
   1、首先会在对象student自身身上查找，
   2、如果找不到，则到原型上查找，那么student的原型是谁？
      student.__proto__===Student.prototype
      而Student.prototype=new Student也就是原型现在指向的是父类的实例
   3、所以到父类的实例上去查找，如果找不到，再到父类实例的原型上查找
   4、如果找不到，则到原型的原型上查找，此时到了Object.prototype身上
      Object.prototype.__proto__===null
   5、如果找不到，则返回undefined
  */
  console.log(student.lastName) // damon

尚未写完整，待续...

服务器托管超融合服务器 js 继承 js继承 js 继承数据原生js

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/95567.html

揭秘babel的魔法之class继承的处理2

摘要：并且用验证了中一系列的实质就是魔法糖的本质。抽丝剥茧我们首先看的编译结果这是一个自执行函数，它接受一个参数就是他要继承的父类，返回一个构造函数。如果你已经看过第一篇揭秘babel的魔法之class魔法处理，这篇将会是一个延伸；如果你还没看过，并且也不想现在就去读一下，单独看这篇也没有关系，并不存在理解上的障碍。上一篇针对Babel对ES6里面基础class的编译进行了分析。这一篇将...

BlackHole1 2019-08-20 13:47 评论0 收藏0
揭秘babel的魔法之class继承的处理2

摘要：并且用验证了中一系列的实质就是魔法糖的本质。抽丝剥茧我们首先看的编译结果这是一个自执行函数，它接受一个参数就是他要继承的父类，返回一个构造函数。如果你已经看过第一篇揭秘babel的魔法之class魔法处理，这篇将会是一个延伸；如果你还没看过，并且也不想现在就去读一下，单独看这篇也没有关系，并不存在理解上的障碍。上一篇针对Babel对ES6里面基础class的编译进行了分析。这一篇将...

UCloud 2019-08-05 17:51 评论0 收藏0
原生JS大揭秘—撩开this的面纱

摘要：随着函数使用场景的不同，而发生变化。是当前执行上下文中的一部分。在中新增了该方法也是强制更改指向。但是和的区别是更改后不会立即执行，它会返回一个新函数。 this何意？在英文中this是一个人称代词，表示这个的,具体指哪个？不确定，只有在具体的语境中才可确定，在编程语言中this也有同样的类似特性。在js中this是一个关键字，它不能被当做变量、属性，也不可以进行赋值操作。this 随...

Brenner 2019-08-26 11:39 评论0 收藏0
原生JS大揭秘—同步与异步

摘要：中任务分类同步异步同步任务异步任务中异步类型定时任务网络请求回调函数事件绑定只能传入一个参数未完待续 JS中任务分类同步异步同步任务异步任务 JS中异步类型定时任务网络请求回调函数事件绑定 Promise(resolve只能传入一个参数) 未完待续...

不知名网友 2019-08-22 18:11 评论0 收藏0
原生JS大揭秘—原型链

原型链showImg(https://segmentfault.com/img/bVboNT0?w=1332&h=1333);

macg0406 2019-08-23 15:26 评论0 收藏0