面向对象编程、原型链

面向对象

• 介绍：简化对于流程的岔路准备，简单来说就是可以减少一些条件判断。万物皆可对象。
• 特点
  • 逻辑迁移灵活
  • 代码复用性高
  • 高度模块化
• 疑问？为什么业务代码很少看到呢。
  • 其实在vue中每个.vue文件都是由vue内部做了对象实例化的创建。让我们在业务开发的时候没有对象的感知。
• 如何理解对象
  • 对象是单个物体简单的抽象
  • 对象是基础，对象也是容器，里面包括属性和方法
• 对象创建主要包括两种形式
  • 简单对象：直接赋值{}
    • 本身直接开放（不是类群）
  • 函数对象：构造函数、class方式
    • 构造函数复合

//简单对象
let student1 = {
    name:"小明",
    study(){
        return `${this.name}学习，英语课程`
    }
}
let student2 = {
    name:"张三",
    study(){
        return `${this.name}学习，英语课程`
    }
}

// 函数对象
// 函数方式
function Student({ name }) {
  this.name = name;
}
Student.prototype.study = function () {
  return `${this.name}学习，英语课程`
}
// 类的方式
class Student {
  constructor({ name }) {
    this.name = name;
  }
  study() {
    return `${this.name}学习，英语课程`
  }
}
const student1 = new Student({name:"小明"})
const student2 = new Student({name:"张三"})

在上述代码我们发现里面都有study方法比较重复，是不是可以在抽象出来一个基础类来进行复用实现呢，这样的话就离不开继承了，继承与原型链紧密相连。

原型链

我们先进行举例

// 函数对象
// 函数方式
function Student({ name }) {
  this.name = name;
}
Student.prototype.study = function () {
  return `${this.name}学习，英语课程`
}
const student1 = new Student({name:"小明"})

我们先来找最基本的三角关系，student1是由student来的，他们分别是不同的属性指向一个原型

我们在逐步找下一个三角关系函数，Student和Function的关系

那我们继续往下找，三角关系，其实在js中万物皆是对象，都是对象创建的，我们再来找他们和对象的关系

函数和对象的关系也非常紧密，对象也是由函数创建的，那我们继续往下找

接下来我们在看function.prototype是怎么来的呢，继续画他的三角关系

原型了基本就画出了，但是要注意，还有几个特殊的情况。毕竟有js种直接指出的原型，否则不是一直死循环下去

最后我们的原型链就结束了。