美文网首页
FY-7216 7-原型链和继承

FY-7216 7-原型链和继承

作者: hahahafffyyy | 来源:发表于2022-02-10 22:18 被阅读0次

面向对象

逻辑迁移更加灵活,代码复用性高,高度的模块化

对象定义

是单个物体的简单抽象,
对象是个容器,封装了属性和方法

属性:对象的状态
方法:对象的行为

  class Course{
    teacher:'ddd',
    leader:'aaa',
    set:function(){

    }
  }
  // 方法类
  function Course(){
    this.teacher = 'ddd';
    this.leader = 'hhh';
    this.set = function(){

    }
  }

构造函数--生成对象

表征一类物体的共同特征

js 本质上并不是基于类,而是基于构造函数 + 原型链
constructor + prototype

    1. 函数体内使用的 this,指向的所要生成的实例
    1. 生成对象用 new 来进行实例化
    1. 可以做初始化传参

问题:如果不做初始化,可以使用吗?---不能使用
问题2: 如果项目中需要使用,通常(不被外界感知)如何解决

  function Course(){
    const _isClass = this instanceof Course;
    if(!_isClass){
      return new Course()
    }
    //...
  }

new

new 的时候做了什么?

  1. 创建了一个空对象,作为返回对象的实例
  2. 将生成空对象的原型对象指向了构造函数的 prototype 属性
  3. 将当前实例对象赋给了内部 this
  4. 执行构造函数初始化代码,constructor

问题:实例属性的影响
单个实例的属性的改变不影响其他属性

  function Course(){
    this.teacher = 'ddd';
    this.leader = 'hhh';
  }

constructor

constructor是什么?

  1. 每个对象在创建的时候,都会自动拥有一个构造函数 constructor
  2. constructor继承自原型对象,指向构造函数

追问:使用构造函数有没有问题?
构造函数的方法会存在于每一个生成的实例里面,导致资源上的浪费

原型对象

  1. 构造函数:用来初始化创建对象的函数,
    自动给构造函数赋予一个属性 prototype ,该属性等于实例对象的原型对象
  2. 实例对象:根据原型对象创建出来的实例
    每个对象都有一个proto,和 constructor
    proto指向构造器的原型,constructor 指向构造器
  3. 原型对象:Course.prototype

所以为了避免,方法生成在每一个实例里面,可以将方法挂载都实例对象的原型上

继承

原型链继承,

在原型对象的所有属性和方法,都能被实例所共享

// Game 类
function Game(){
  this.name = 'lol';
}
Game.prototype.getName = function(){
  return this.name;
}
function LOL(){}
LOL.prototype = new Game();
LOL.prototype.construntor = LOL;
const game = new LOL();
// 重写原型对象,将父对象的属性方法,作为子对象原型对象的属性和方法

构造函数继承

  function Game(arg){
    this.name = 'name';
    this.age = 'age';
  }
  Game.prototype.getName = function(){
    return this.name;
  }
  function LOL(arg){
    Game.call(this,arg);
  }
  const game3 = new LOL('arg')
问题:

原型链上的方法想继承,如何继承?

组合继承

  function Game(arg){
    this.name = 'name';
    this.age = 'age';
  }
  Game.prototype.getName = function(){
    return this.name;
  }
  function LOL(arg){
    Game.call(this,arg);
  }
  LOL.prototype = new Game();
  LOL.prototype.construntor = LOL;

  const game3 = new LOL('arg')

组合继承有没有缺点?问题:无论如何,都会调用两次父类的构造函数

  1. 初始化子类原型时
  2. 子类调用函数内部 call 父类的时候

解决方案:寄生组合继承

  function Game(arg){
    this.name = 'name';
    this.age = 'age';
  }
  Game.prototype.getName = function(){
    return this.name;
  }
  function LOL(arg){
    Game.call(this,arg);
  }
  LOL.prototype = Object.create(Game.prototype);
  LOL.prototype.construntor = LOL;

  const game3 = new LOL('arg')

多重继承

相关文章

  • FY-7216 7-原型链和继承

    面向对象 逻辑迁移更加灵活,代码复用性高,高度的模块化 对象定义 是单个物体的简单抽象,对象是个容器,封装了属性和...

  • JavaScript 原型、原型链与原型继承

    原型,原型链与原型继承 用自己的方式理解原型,原型链和原型继承 javascript——原型与原型链 JavaSc...

  • JavaScript继承方式详解

    JavaScript实现继承的方式主要有两种: 原型链继承和借助构造函数继承 一、原型链继承 原型链继承的主要思想...

  • js实现继承的几种方式

    js实现继承有几种方式,这里我们主要探讨 原型链继承 构造继承 组合继承(原型链和构造继承组合到一块,使用原型链实...

  • 继承

    原型链直接继承 原型链直接继承prototype 原型链继承_prototype属性 继承_构造函数绑定

  • js中的实现继承的几种方式

    大纲:原型链借用构造函数组合继承原型式继承寄生式继承寄生组合式继承 1、原型链: 什么是原型链? 原型链的基本思想...

  • 第六章(3):继承

    继承的几种方式 原型链 原型链示意图: 构造函数 组合继承(将原型链和构造函数组合在一起) 原型式继承 寄生式组合...

  • js基础之实现继承的几种方式

    js 实现继承的方式有: 原型链继承; 构造函数继承; 组合继承(原型链继承 + 构造函数继承)(最常用);(原型...

  • es5的部分继承以及es6的class

    一、JavaScript常用的原型继承方式 原型链继承 2,构造函数继承(对象冒充继承) 3,组合继承(原型链继承...

  • 原型与继承

    什么是继承? 继承父级的属性和方法和共享(原型链)的属性和方法 组合继承 通过原型链继承共享的方法和属性;通过构造...

网友评论

      本文标题:FY-7216 7-原型链和继承

      本文链接:https://www.haomeiwen.com/subject/fsvokrtx.html