JavaScript 继承 封装 多态实现及原理详解

所属分类: 网络编程 / JavaScript 阅读数: 1101
收藏 0 赞 0 分享

面向对象的三大特性

封装

所谓封装,也就是把客观事物封装成抽象的类,并且类可以把自己的数据和方法只让可信的类或者对象操作,对不可信的进行信息隐藏。封装是面向对象的特征之一,是对象和类概念的主要特性。 简单的说,一个类就是一个封装了数据以及操作这些数据的代码的逻辑实体。在一个对象内部,某些代码或某些数据可以是私有的,不能被外界访问。通过这种方式,对象对内部数据提供了不同级别的保护,以防止程序中无关的部分意外的改变或错误的使用了对象的私有部分。

我们在vue项目中使用混入将公有代码提出来,混入到每个需要的组件中,让我们的代码更简洁

我们也可以将一些公用的方法,工具进行封装,达到代码复用,让我们的代码更简洁

继承

所谓继承是指可以让某个类型的对象获得另一个类型的对象的属性的方法。它支持按级分类的概念。继承是指这样一种能力:它可以使用现有类的所有功能,并在无需重新编写原来的类的情况下对这些功能进行扩展。 通过继承创建的新类称为“子类”或“派生类”,被继承的类称为“基类”、“父类”或“超类”。继承的过程,就是从一般到特殊的过程。要实现继承,可以通过“继承”(Inheritance)和“组合”(Composition)来实现。继承概念的实现方式有二类:实现继承与接口继承。实现继承是指直接使用基类的属性和方法而无需额外编码的能力;接口继承是指仅使用属性和方法的名称、但是子类必须提供实现的能力;

实现继承的几种方式

call继承

function a (){
    this.c=111
  }
  function b(){
    a.call(this)
  }
  let d = new b()
  console.log(d.c) // 111

上面代码相当于函数b继承了函数a的私有属性,通过改变父类的this实现继承

原型继承

 function a (){
    this.c=111
  }
  a.prototype.getName=function(){
    return '你好'
  }
  function b(){
    // a.call(this)
  }
  b.prototype=new a()
  b.constructor=b
  let d = new b()
  console.log(d.c) // 111
  console.log(d.getName()) // 你好

原型继承通过将父类的实例赋值给子类的原型,这种方法子类可以继承父类的私有方法也可以继承父类的私有方法

寄生组合继承

 function a (){
    this.c=111
  }
  a.prototype.getName=function(){
    return '你好'
  }
  function b(){
    a.call(this)
  }
  b.prototype=Object.create(a.prototype)
  let d = new b()
  console.log(d.c) // 111
  console.log(d.getName()) // 你好

寄生组合继承就是使用call继承改变this,实现私有继承私有,使用object.create实现公有继承公有

es6 extends 继承

class parent{
    constructor(){
      this.a=1
    }
    name(){
      return 2
    }
  }
  class child extends parent{
    
  }
  let A = new child()
  console.log(A.a) // 1
  console.log(A.name()) // 2

这里通过关键字extends实现子类继承父类的私有和公有,这里需要注意如果子类里面写了constructor,就必须写super否则会报错

class parent{
    constructor(){
      this.a=1
    }
    name(){
      return 2
    }
  }
  class child extends parent{
    constructor(){
    // 这里不写super会报错,报错信息如下
    }
  }
  // ncaught ReferenceError: Must call super constructor in derived class before accessing 'this' or returning from derived constructor at new child

多态

所谓多态就是指一个类实例的相同方法在不同情形有不同表现形式。多态机制使具有不同内部结构的对象可以共享相同的外部接口。这意味着,虽然针对不同对象的具体操作不同,但通过一个公共的类,它们(那些操作)可以通过相同的方式予以调用。

重载

函数重载是指在同一作用域内,可以有一组具有相同函数名,不同参数列表的函数,这组函数被称为重载函数。重载函数通常用来命名一组功能相似的函数,这样做减少了函数名的数量,避免了名字空间的污染,对于程序的可读性有很大的好处。

  • js通过函数名找到对应的函数对象
  • 然后根据函数按照定义时的参数,和表达式参数列表按顺序匹配,多余的参数舍去,不够的参数按undefined处理
  • 然后执行函数代码。
 // 可以跟据arguments个数实现重载
  function add() {
    var sum = 0 ;
    for ( var i = 0 ; i < arguments.length; i ++ ) {
      sum += arguments[i];
    }
    return sum;
  }
  console.log(add()) // 0
  console.log(add(1,2)) // 3
  console.log(add(1,2,3)) // 6

重写

“实例中的指针仅指向原型,而不是指向构造函数”。

“重写原型对象切断了现有原型与任何之前已经存在的对象实例之间的关系;它们引用的仍然是最初的原型”。

var parent = function(name,age){
  this.name = name;
  this.age = age;
}
 
parent.prototype.showProper = function(){
  console.log(this.name+":"+this.age);
}
 
var child = function(name,age){
  parent.call(this,name,age);
}
 
// inheritance
child.prototype = Object.create(parent.prototype);
// child.prototype = new parent();
child.prototype.constructor = child;
 
// rewrite function
child.prototype.showProper = function(){
  console.log('I am '+this.name+":"+this.age);
}

var obj = new child('wozien','22');
obj.showProper();

上面这段代码通过使用寄生组合继承,实现子类私有继承父类私有,子类公有继承父类公有,达到重写父类的showProper

面向对象的5大原则

  • 单一职责原则
  • 开放封闭原则
  • 替换原则
  • 依赖原则
  • 接口分离原则

单一职责原则

单一职责原则就是我们说的一个方法只做一件事,就比如现在的项目结构,就遵循了单一职责原则

开放封闭原则

开放封闭原则就是对修改关闭,对扩展开放

class a {
   add(){
     return 11
   }
 }
 class b extends a{
   
 }
 let c = new b()
 console.log(c.add()) // 111

我们可以使用extends继承父类,可以再b里面修改add函数,实现对修改关闭,对扩展开放

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

更多精彩内容其他人还在看

jQuery LigerUI 使用教程表格篇(1)

ligerGrid是ligerui系列插件的核心控件,用户可以快速地创建一个美观,而且功能强大的表格,支持排序、分页、多表头、固定列等等
收藏 0 赞 0 分享

JavaScript中常用的运算符小结

JavaScript中常用的运算符小结,需要的朋友可以参考下。
收藏 0 赞 0 分享

深入理解JavaScript系列(13) This? Yes,this!

在这篇文章里,我们将讨论跟执行上下文直接相关的更多细节。讨论的主题就是this关键字。实践证明,这个主题很难,在不同执行上下文中this的确定经常会发生问题
收藏 0 赞 0 分享

javascript (用setTimeout而非setInterval)

javascript (用setTimeout而非setInterval)如果用setInterval 可能出现 下次调用会在前一次调用前调用
收藏 0 赞 0 分享

JavaScript中两个感叹号的作用说明

用两个感叹号的作用就在于,如果明确设置了o中flag的值(非null/undefined/0""/等值),自然test就会取跟o.flag一样的值;如果没有设置,test就会默认为false,而不是null或undefined
收藏 0 赞 0 分享

javascript写的简单的计算器,内容很多,方法实用,推荐

最近用javascript写了一个简单的计算器,自己测试感觉还好,代码都给了注释,非常不错,推荐大家学习。
收藏 0 赞 0 分享

js的表单操作 简单计算器

javascript写的简单的加减乘除计算器,里面涉及到一些方法还是很实用的哦,新手不要错过
收藏 0 赞 0 分享

Jquery中删除元素的实现代码

empty用来删除指定元素的子元素,remove用来删除元素,或者设定细化条件执行删除
收藏 0 赞 0 分享

javaScript 利用闭包模拟对象的私有属性

JavaScript缺少块级作用域,没有private修饰符,但它具有函数作用域。作用域的好处是内部函数可以访问它们的外部函数的参数和变量(除了this和argument
收藏 0 赞 0 分享

为JavaScript类型增加方法的实现代码(增加功能)

大家在js开发过程中有些功能已经满足不了我们的需求,或没有我们需要的功能,那么我们就可以自己扩展下,个性化js
收藏 0 赞 0 分享
查看更多