前端基础-JS面向对象编程

第1章 JS面向对象编程

在这里插入图片描述

学习目标

• 初步理解对象是什么及面向对象编程的概念
• 能够自己创建一个对象

1.1 面向对象介绍

什么是对象？

Everything is object （万物皆对象）, JS语言中将一切都视为 对象

在这里插入图片描述

• 对象是对概念的具体化体现：

一本书、一辆汽车、一个人都可以是对象，一个数据库、一张网页、一个与远程服务器的连接也可以是对象。

当实物被抽象成对象，实物之间的关系就变成了对象之间的关系，从而就可以模拟现实情况，针对对象进行编程。

• 编程中对象是一个容器，封装了属性（property）和方法（method）

属性是对象的状态，方法是对象的行为（完成某种任务）。比如，我们可以把动物抽象为animal对象，使用“属性”记录具体是那一种动物，使用“方法”表示动物的某种行为（奔跑、捕猎、休息等等）。

也可以将其简单理解为：数据集或功能集。

ECMAScript 把对象定义为：无序属性的集合，其属性可以包含基本值、对象或者函数。 严格来讲，这就相当于说对象是一组没有特定顺序的值。对象的每个属性或方法都有一个名字，而每个名字都 映射到一个值。

1.2 面向对象编程

面向过程：以前写js代码，都是面向过程。

面向对象不是新的东西，它只是过程式代码的一种高度封装，目的在于提高代码的开发效率和可维护性。

在这里插入图片描述

面向对象编程 —— Object Oriented Programming，简称 OOP ，是一种编程开发思想。 它将真实世界各种复杂的关系，抽象为一个个对象，然后由对象之间的分工与合作，完成对真实世界的模拟。

典型问题：将大象关进冰箱分几步

面向过程式：

开门（冰箱）

放进（冰箱，大象）

关门（冰箱）

面向对象式：

两个对象：大象、冰箱

冰箱.开门()

冰箱.放进（大象）

冰箱.关门()

在面向对象程序开发思想中，每一个对象都是功能中心，具有明确分工，可以完成接受信息、处理数据、发出信息等任务。 因此，面向对象编程具有灵活、代码可复用、高度模块化等特点，容易维护和开发，比起由一系列函数或指令组成的传统的过程式编程（procedural programming），更适合多人合作的大型软件项目。

面向对象与面向过程：

• 面向过程就是亲力亲为，事无巨细，面面俱到，步步紧跟，有条不紊
• 面向对象就是找一个对象，指挥得结果
• 面向对象将执行者转变成指挥者
• 面向对象不是面向过程的替代，而是面向过程的封装

面向对象的特性：

• 封装性：对象中的属性、方法，对外提供一组方法（操作数据的接口），使用时无需关心内部具体实现。
• 继承性：将同一类对象，公共的属性方法，提取到一个单独公共对象中，具体的子对象可以使用这个公共对象中的成员
• [多态性]：动物的叫声为例，同一类的对象，有相同的方法（动物会叫）， 但是每个具体的对象，方法实现的效果不一样（每个动物叫声不一样）

1.3 创建对象

JavaScript 语言(ES5)的对象体系，不基于“类” 创建对象，是基于构造函数（constructor）和原型链（prototype）。

简单方式创建对象

我们可以直接通过 new Object() 创建：

var person = new Object()
person.name = 'Jack'
person.age = 18

person.sayName = function () {
    console.log(this.name)
}

字面量方式创建对象

每次创建通过 new Object() 比较麻烦，所以可以通过它的简写形式对象字面量来创建：

var person = {
  name: 'Jack',
  age: 18,
  sayName: function () {
    console.log(this.name)
  }
}

对于上面的写法固然没有问题，但是假如我们要生成两个 person 实例对象呢？

var person1 = {
  name: 'Jack',
  age: 18,
  sayName: function () {
    console.log(this.name)
  }
}

var person2 = {
  name: 'Mike',
  age: 16,
  sayName: function () {
    console.log(this.name)
  }
}

通过上面的代码我们不难看出，这样写的代码太过冗余，重复性太高。

简单方式的改进：工厂函数

我们可以写一个函数，解决代码重复问题：

function createPerson (name, age) {
  return {
    name: name,
    age: age,
    sayName: function () {
      console.log(this.name)
    }
  }
}

然后生成实例对象：

var p1 = createPerson('Jack', 18)
var p2 = createPerson('Mike', 18)

这样封装确实爽多了，通过工厂模式我们解决了创建多个相似对象代码冗余的问题， 但是这依然没有脱离 使用 字面量方式创建对象 的本质；