js进阶-面向对象和设计模式

(一) 面向过程编程和面向过程编程(了解)#

面向过程就是分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步实现，使用的时候一个一个依次调用就可以了。

面向对象是把构成问题事务分解成各个对象，建立对象的目的不是为了完成一个步骤，而是为了描叙某个事物在整个解决问题的步骤中的行为。

具体的实现我们看一下最经典的“把大象放冰箱”这个问题#

面向过程的解决方法(以步骤为核心): 开门（冰箱）； 装进（冰箱，大象）； 关门（冰箱）。

// 开门的方法, todo是等待去实现的意思
function openDoor() {
    // todo
}
// 装进去的方法
function putInto() {
    // todo
}
// 关门的方法
function closeDoor() {
    // todo
}

// step1
openDoor();
// step2
putInfo();
// step3
closeDoor();

面向对象的解决方法(以对象为核心): 冰箱.开门（） 冰箱.装进（大象） 冰箱.关门（）

var iceBox = {
  openDoor() {
    // todo
  },
  putInto() {
    // todo
  },
  closeDoor() {
    // todo
  },
};
iceBox.openDoor();
iceBox.putInto();
iceBox.closeDoor();

又比如办一个驾照:

要获得一个驾照, 你必须一个个部分去跑, 跑完所有流程, 都通过了就拿到了驾照

你也可以交钱一个相关公司, 他们派一个人帮你, 那个人熟悉没一个流程, 所以面向对象还有个好处是, 你根本不需要功能具体是怎么实现, 直接调用对象的方法就好了, 比如axios.js

(二) 面向对象编程知识图谱(了解)#

我们主要掌握以下几点:

1. 如何创建对象
   • 工厂模式
   • 构造函数模式
   • 原型模式
2. 对象对象三大特性
   • 封装：对象是将数据与功能组合到一起，即就是将属性与方法封装起来
   • 继承：所谓继承就是自己没有, 别人有,拿过来为自己所用, 并成为自己的东西
   • 多态：多态其实就是把做的内容和谁去做分开。

(三) js创建对象#

(1) 使用工厂模式创建对象#

function createPerson(name,age,job) {
    var o = new Object();
    o.name = name;
    o.age = age;
    o.job = job;
    return o;
}
var p1 = createPerson('张三',29,'测试工程师');
var p2 = createPerson('李四',28,'前端工程师');

(2) 使用构造函数模式创建对象#

function Person(name, age, job) { 
  this.name = name;
  this.age = age;
  this.job = job; 
  this.sayName = function() {
    console.log(this.name);
  }
}
 
var p1 = new Person("张三", 29, "测试工程师");
var p2 = new Person("李四", 28, "前端工程师");
p1.sayName();
p2.sayName();

js中的new ()到底做了些什么

使用new来创建对象时, 系统"偷偷的"做了以下动作:

(1) 创建一个新对象； (2) 将构造函数的作用域赋给新对象（因此 this 就指向了这个新对象） ； (3) 执行构造函数中的代码（为这个新对象添加属性和方法） ； (4) 返回新对象。

(3) 使用原型模式创建对象