Javascript基础进阶(十六）JS中面向对象的理解、继承、封装、多态

小编推荐：Fundebug提供JS错误监控、微信小程序错误监控、微信小游戏错误监控，Node.j错误监控和Java错误监控。真的是一个很好用的错误监控费服务，众多大佬公司都在使用。

面向对象编程OOP

它是一种编程思想，我们的编程或者学习其实是按照 类、实例来完成的
类： 继承、封装、多态

封装

把实现一个功能的代码封装到一个函数中，以后实现这个功能，只需要执行函数即可！
低耦合，高内聚

多态

一个类（函数）的多种形态：重载、重写
后台java c# 对于重载的概念：方法名相同，参数不同，叫做方法的

js中没有严格意义上的重载，js如果方法重名了，只能保留最后一个
不管是后台语言还是js都有重写：子类重写父类的方法

继承

什么是继承？
子类继承父类中的一些属性和方法

1. 原型继承

子类的原型指向父类的实例
【细节】
1.首先让子类的原型指向父类的实例，然后向子类的原型上扩展方法，防止提前增加方法，等原型重新指向后，之前在子类原型上扩展的方法都没用了（子类的原型已经指向新的空间地址了）

1. 让子类原型重新指向父类私立，子类原型上原有的constructor没有了，为了保证构造函数的完整性，需要手动设置子类的原型：Child.prototype.constructor = Child

function Parent(){
    this.x = 100
}
Parent.prototype.getX = function() {
    console.log(this.x)
}
var p = new Parent()
function Child(){
    this.y = 100
}
// 子类的原型指向父类的实例
Child.prototype = new Parent();
Child.prototype.constructor = Child;
Child.prototype.getY = function() {
    console.log(this.y)
}
var child = new Child();

以上代码用图片表示：

image.png

通过图片可以得出原理：原型继承并不是把父类的属性和方法复制一份给子类，而是让子类的原型和父类的原型之间搭建一个桥梁，以后子类可以通过原型链查找机制调取父类方法使用

 

2.call继承

function Parent(){
    this.x = 100
}
Parent.prototype.getX = function() {
    console.log(this.x)
}
var p = new Parent()

function Child(){
    // this：Child子类实例
    Parent.call(this)
    this.y = 100
}

var child = new Child();

让Parent执行，方法中的this是子类的实例，在父类构造函数中写this.xx = xx，相当于给子类实例增加了child.xx = xx
【原理】把父类构造体中的私有属性和方法，原封不动的复制一份给子类的实例

3.寄生组合式继承

3-1、Object.create

Object.create([obj]):创建一个空对象，把[obj]作为新创建对象的原型

var obj = { name: '小明' }
var newObj = Object.create(obj)
newObj.__proto__ == obj

image.png

3-2 、寄生组合继承

让子类继承父类公有的（Object.create），子类继承父类私有的(Parent.call(this))

function Parent(){
    this.x = 100
}
Parent.prototype.getX = function() {
    console.log(this.x)
}
var p = new Parent()


function Child(){
    Parent.call(this)
    this.y = 100
}
Child.prototype = Object.create(Parent.prototype);
//手动添加构造函数
Child.prototype.constructor = Child;

var child = new Child();

图片表示一目了然