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();

以上代码用图片表示:

Javascript基础进阶(十六)JS中面向对象的理解、继承、封装、多态_第1张图片

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

Javascript基础进阶(十六)JS中面向对象的理解、继承、封装、多态_第2张图片

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();

图片表示一目了然

 

Javascript基础进阶(十六)JS中面向对象的理解、继承、封装、多态_第3张图片


 

你可能感兴趣的:(Javascript基础进阶(十六)JS中面向对象的理解、继承、封装、多态)