前端基础-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)

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

发布了1775 篇原创文章 · 获赞 1895 · 访问量 17万+

猜你喜欢

转载自blog.csdn.net/weixin_42528266/article/details/105112052