JavaScript面向对象

概念

• OO：Object Oriented（面向对象，详细概念见区别）

• OOP（Program）面向对象编程

• OOD（Design）面向对象设计

• OOA（Analysis）

区别

• 面向过程

  • 关注方法步骤
  • 在分析问题时，提取出解决问题的方法和步骤，然后通过函数一步步实现，并依次调用

• 面向对象（实质是对面向过程的进一步抽象）

  • 关注对象本身
  • 把要解决的问题中的数据和方法组织为一个整体（对象）来看待，是我们对现实事物的抽象。

• 注意：

  • 面向过程和面向对象这两种编程方式，都是用来编写程序，解决我们实际需求以及问题的。
  • 二者示例对比：开车
    • 面向过程的开车：先打开车门，上车，系好安全带，把车钥匙插入，点火。。。。
    • 面向对象的开车：找一个司机，开车

基本构成

• 对象（具体）

  • 问题域中关注的具体的某一事物（对象因关注而产生）

• 类（抽象）

  • 具有相同性质和行为的一组对象的抽象（分类）
  • 在代码中起“模具”作用
  • 大驼峰命名是类的标志（注意：并不是说只要大驼峰命名就是类，或者不使用大驼峰命名就不是类了，只是一种标志，便于开发者区分）

• 关系：类是对象的抽象，对象是类的实例。

  • 所有对象都是类创建的，所以对象又称为实例对象。用类创建对象的过程叫做实例化。

ES6语法糖

//ES6 class----模版
        class Person {
            constructor(name, age, gender) {
                this.name = name;
                this.age = age;
                this.gender = gender;
            }
            // name = "张三";
            // age = "18";
            //gender="男";
            eat() {
                console.log(this.name);
            }
        }
        // 生成对象----模版---->实例
        let p1 = new Person("张三",18,"男");
        let p2 = new Person("里斯",13,"女");
        let p3 = new Person("王五",17,"男");

• 只能使用new关键字调用，不能像普通函数那样调用，会报错。
• class声明的类有暂时性死区，不能在声明前调用。

ES5原理分析

//将ES6语法糖还原为ES5原理
function Person {//构造函数，内部写属性
	this.name = name;
	this.age = age;
	this.gender = gender;
}

//方法放在构造函数身上的原型对象prototype上
Person.prototype.eat=function(){
    console.log(this.name);
}

// 生成对象----模版---->实例
let p1 = new Person("张三",18,"男");
let p2 = new Person("里斯",13,"女");
let p3 = new Person("王五",17,"男");

• typeOf类-------->"function"
  • 说明类就是函数（构造函数）
  • 如何判断一个函数是普通函数还是类（构造函数），本质上是由调用函数的形式决定
    • 普通调用Person()
    • 使用new关键字进行调用new Person()
• 属性和方法
  • 实例属性（私有）
    • 在构造函数内部以this.xxx=xxx;的方式进行创建
  • 公有属性
  • 方法
    • 公有属性和方法，统一放在类.prototype这个原型对象上，这里就是公共区域。
• 类是通过JS函数模拟出来的，JS原本就不是面向对象的语言，是因为有了大量的需求才模拟出了类。
• 使用new关键字调用时，究竟发生了什么
  • 创建一个新对象
  • 将新对象身上的__proto__指向创建该对象的构造函数身上的prototype
  • 将构造函数（类）内部的this指向刚刚创建的实例对象
  • 执行代码，将新对象作为返回值返回
• 注意：
  • class声明的类有暂时性死区，不可在声明前使用。

补充知识

Object上的方法

• Object.assign()，整合函数

this指向

• 箭头函数没有自己的arguments和this，this的指向问题，取决于它所处的环境。
  • 由于箭头函数没有this，所以不能作为构造函数。
  • 箭头函数的this一旦确定下来，就不会再改变了。
• 事件监听器中的this，指向绑定事件的元素节点。
• 构造函数内部的this,指向刚刚创建的实例对象。
• 普通函数调用时，this一般指向window，但在严格模式下指向undefined。
  • 严格模式：就是在某个执行上下文的第一句写“use strict”，就是指定该环境中使用严格模式。
• 谁调用指向谁。

函数上的方法（方法借用）

• 立即执行
  • call
  • apply
• 稍后执行
  • bind

包装类

• 目的：
• 有哪些
  • String
  • Number
  • Boolean
• 特点：自动装箱，自动拆箱

toString和valueOf

三大特征：

封装（encapsulation）

• 将数据和方法捆绑在一起（如函数、类（对象））就实现了“装”，将其私有化只能自己使用就是“封”（可利用闭包实现）。

继承（inheritance）

• 类与类之间的关系。子类继承父类所有的属性和方法，并且拥有自己独特的属性和方法。（即满足xxx是xxx的关系）

多态（polymorphism）

• 不同东西，对同一件事（行为）的表现形式不同。

ES6继承(语法糖)

关键字：extendes和super

• extends

  • 表达继承关系，书写在要声明的类后面，后面是要继承的父类。
  • extends需与super搭配使用，如果写了构造函数，里面必须调用super()，否则会保存;如果没不写构造，JS会自动为我们写一个空的构造器，并自动调super();

• super

  • super() 方法放在子类的构造函数中，只能调用一次，且必须放在this和return之前（最好写在构造函数第一行）。如果父类需要传参，小括号内为传入的实参。

class Student extends Person{
    constructor(){
        super();//可传参，实参
        this.xxx=xxx;
        ......
    }
}

原型

对象分类

• 函数对象（typeOf---->”function“）
• 其他对象（typeOf---->”object“）

规则

• 除箭头函数外，所有函数对象身上都有一个原型对象（prototype）。
• 所有对象身上都有一个隐式原型对象（__proto__，一个引用），它指向创建该对象的构造函数身上的原型对象。
• 原型对象通常是一个普通对象，说明它是Object类的实例，作为对象它身上也有__proto__这个隐式原型对象，指向创建它的构造函数Object身上的原型对象。
• 所有原型对象（prototype）上都有一个constructor引用，指向该原型对象所在的构造函数。

原型链

• 实例对象，通过__proto__不断的反复向上寻找，会形成一个链条，这个链条是用来找属性的，如果在链条的头部（自己身上）没有找到，会在下一个节点继续找，直到找完整个链条。如果找完整个链条都没有找到，则结果为undefined。
• 方法是特殊的属性，当一个属性的值为函数的时候，它就变成了方法。
• 原型链的出口（顶端）是Object.prototype,它身上的__proto__指向null。
• 原型链中，如果各原型对象上有相同的属性，那么前面原型对象的这个属性会覆盖后面的（多态的一种表现）
• 区别：作用域链------>找变量

继承原理（ES5）

• 混合继承=方法借用（继承属性）+原型继承(将父类的原型插入子类的原型链)
  • 方法借用
    • call
    • apply
    • bind
  • 原型继承
    • Object.create()

function Super(name, age) {//父类，超类
     this.name = name;
     this.age = age;
}
Object.assign(Super.prototype, {
     sleep() {
        console.log(`${this.name} is sleeping！`);
     }
})

//子类
function Sub(name, age, gender) {
     Super.call(this, name, age);
    //以调用父类构造函数的形式，得到执行结果，将this绑定为当前的实例对象
    //普通调用时，this的指向window而不是当前实例对象，所以使用方法借用，绑定this的指向
     this.gender = gender;
}
//原型继承(插入父类的原型链，如果父类在子类的原型链上，那么子类及其实例对象都可以通过原型链找到父类身上方法)
// 父类原型插入的位置，实例对象和子类之间不可，因为实例对象必须指向创建它的类的原型对象；Obj原型和null之间不可，规定Obj.prototype指向null.只能在子类原型和Obj原型之间插入
。
Sub.prototype = Object.create(Super.prototype);//以父类的prototype为原型，创建一个空对象，替换子类的prototype
Sub.prototype.constructor = Sub;//由于空对象身上没有constructor引用，赋值
//自己的方法
Object.assign(Sub.prototype, {
     eat() {
         console.log(`${this.name} is eating!`);
     }
});
let sub1 = new Sub("zs", 18, "male");
// sub1.constructor===>fn Sub//sub1通过自己身上的__proto__指向创建它的类的原型对象 //Sub.prototype,prototype身上有它所在的构造函数的引用constructor
//sub1.__proto__.constructor====>fn Sub

多态

• 重载：JS自带，传入不同的参数，实现效果不同（如if...else if语句）
• 重写（覆盖）：继承并覆盖父类的方法

类的判断方法

• instanceof
  • 作用：判断复杂数据类型的类型（是哪个类创建的）
  • 语法：要判断的对象 instanceof 类------->true/false
  • 原理：通过原型链来实现判断（即在该对象原型链上所有经过的类都会判断为true，并不是只要它的父类）
• 区别：typeof------>判断基本数据类型的类型

ES6 不常用语法

属性的定义方法

• 已知的定义方法

  let person={
  	name:"zs"
  }//声明式
  
  person.age=18;//直接赋值
  

• Object.defineProperty()

数据类型：

• 为什么要进行复杂数据类型判断
  • 传参时传入对象
  • 判断传入的对象到底是什么再决定代码如何执行

JS中

• 基本数据类型6种（number、string、boolean、undefined、null、symbol）

  • typeof判断基本数据类型的类型

• 复杂数据类型1种（object）

  • 但是有无数个类（object是他们的顶层表现）
  • typeof复杂数据类型：object、function
  • instanceof判断当前对象是由哪个类创建的

• JS是弱类型语言：声明变量时，没有定义变量的数据类型，而是根据赋给变量的值的类型来决定它的数据类型。

  • 缺点：由于不知道声明变量要存储的数据类型，尽可能分配到使所有数据类型都能存放下的内存，会造成内存浪费，降低性能。
  • 优点：程序员友好型，不容易报错

• 其他强类型语言：C，C++,Java等

  • 声明变量时就规定了变量存储的数据类型，只能存储相应类型的数据，否则会报错
  • 优点：根据不同的数据类型，给变量分配不同的内存，精细化内存管理，提高代码性能
  • 缺点：对程序员不友好，需要记忆大量内容，容易报错

• 抛出错误

  • JS中错误也是个对象
  • throw new Error(".........")

  try{
      throw new Error(".........")
  }catch(e){
      console.log(e);//e就是try里面抓住的错误
  }finally{
      
  }
  //三个一起用，类似于if...else的关系
  

• JS中万物皆对象