面向对象编程

2017课程大纲

面向对象编程

面向对象编程（oop）是一种编程思想，用抽象方式创建基于现实世界模型的一种编程模式。目的是在编程中促进更好的灵活性和可维护性。
典型的面向对象编程语言（比如 C++ 和 Java），存在“类”（class）这个概念。所谓“类”就是对象的模板，对象就是“类”的实例。但是，JavaScript 语言的对象体系，不是基于“类”的，而是基于构造函数（constructor）和原型链（prototype）。
JavaScript 语言使用构造函数（constructor）作为对象的模板。所谓”构造函数”，就是专门用来生成对象的函数。它提供模板，描述对象的基本结构。一个构造函数，可以生成多个对象，这些对象都有相同的结构。
面向对象三大特性：封装、 继承、多态

创建对象

• 使用字面量的形式 {}
• 缺点：创造具有相同属性和方法的对象时，会产生大量重复的代码
• 工厂模式：使用函数封装了创造特定属性和方法的对象,抽象了创建对象的具体过程
• 工厂模式解决了创建相似对象的问题，但没解决对象识别的问题。

构造函数模式

• 构造函数也是普通的函数，当使用new操作符调用时，称之为构造函数或构造方法
• 可以使用构造函数创建特定类型的对象
• new操作符
  
  • 作用：执行构造函数，返回一个实例对象
  • 语法：new constructor[([arguments])]
  • constructor：指定对象类型的函数；
  • 当使用new创建对象时：
    
    • 在函数内部创建一个实例对象，实例对象继承自函数的prototype
    • 将函数中的this指向实例对象
    • 执行函数，通过this给对象添加属性
    • 执行后，返回这个创建的实例对象
• instanceof运算符
  
  • 作用：用来测试一个对象在其原型链中是否存在一个构造函数的 prototype 属性。
  • 语法：object instanceof constructor
  • 描述：object要检测的对象；constructor构造函数
  • 运算后结果：存在值为true；否则为false
• hasOwnProperty()
  
  • 作用：用来检测一个对象自身是否具有指定的属性
  • 语法：obj.hasOwnProperty(prop)
  • 参数：prop要检测的属性名
  • 返回值：有指定的属性，返回true；否则返回false
  • 注意：此方法不会沿着原型链查找继承的属性
• in运算符
  
  • 作用：检测指定的属性是否在指定的对象或对象的原型链中
  • 语法：prop in object
  • 参数：prop要检测的属性名；
  • 运算后结果：存在值为true；否则为false
  • 注意：会沿着原型链查找继承的属性

prototype（原型）模式

• 每一个函数都拥有prototype（原型）属性，指向一个对象，称之为原型对象
• 用途是所有通过这个构造函数创建的实例共享原型对象的属性和方法
• 好处是不必要在每个对象中定义共享的属性和方法，直接定义在原型对象上，只需要定义一次
• constructor属性
  
  • 原型对象上默认会有一个constructor属性，它的值是拥有这个原型对象的构造函数
• _ _ proto _ _
  
  • 每一个对象都拥有_ _ proto _ _属性，这个属性指向这个对象的原型[[prototype]]
  • 通过new构造函数的形式创建的对象会指向构造函数的prototype
  • 这个属性连接了实例和构造函数原型对象
• 原型链
  
  • 每个被构造函数实例化出来的对象,都拥有_ _ proto _ _属性，它指向这个对象自己的原型，原型也是一个对象会指向它自己的原型，最顶层的原型对象是Object.prototype
  • 这些对象和原型对象彼此相互关联，就形成了原型链
  • 原型链的作用：当试图访问一个对象的属性时，它不仅仅在该对象上搜寻，还会搜寻该对象的原型，以及该对象的原型的原型，依次层层向上搜索，直到找到一个名字匹配的属性或到达原型链的末尾。

继承

• 构造函数继承
  
  • 在子类型构造函数的内部通过call或apply调用父类构造函数
  • 把父类构造函数的this指向子类构造函数内部的实例对象
  • 达到将父类构造函数内部的属性初始化在子类的实例对象上
• 原型式继承
  
  • 创建一个对象，作为构造函数的原型对象
• 拷贝继承
  
  • 把一个对象上的属性通过拷贝的方式给到构造函数的原型对象
• Object.create()
  
  • 作用：会使用指定的原型对象及其属性去创建一个新的对象
  • 语法：Object.create(proto[, propertiesObject])
  • 参数：proto新创建对象的原型对象，值为为null或对象；
  • 返回值：指定原型对象上添加新属性后的对象

• Object.getPrototypeOf()

  • 作用：返回指定对象的原型（内部[[Prototype]]属性的值）
  • 语法：Object.getPrototypeOf(obj)
  • 参数：obj要返回其原型的对象

• Object.setPrototypeOf()

  • 作用：设置一个指定的对象的原型
  • 语法：Object.setPrototypeOf(obj, prototype)
  • 参数：obj要设置其原型的对象；prototype该对象的新原型(一个对象 或 null)

• Object.isPrototypeOf()

  • 作用：方法用于测试一个对象是否存在于另一个对象的原型链上
  • 语法：prototypeObj.isPrototypeOf(object)
  • 参数：object在该对象的原型链上搜寻
  • 返回值：要检测的对象在原型链上返回true，否则为false；

ECMAScript 2015中的 class 使用

• 实质上是 JavaScript 现有的基于原型的继承的语法糖
• 提供了一个更简单和更清晰的语法来创建对象并处理继承
• 定义类
  
  • 使用关键字：class
  • 语法：class 类名{}
  • 类名不会声明提升，首先需要声明你的类，然后访问它
  • constructor:是类的默认方法，通过new命令生成对象实例时，自动调用该方法
  • 静态方法：使用关键字static

• Class 的继承extends关键字

  • Class 可以通过extends关键字实现继承，这比 ES5 的通过修改原型链实现继承，要清晰和方便很多。
  • super 关键字，可以使用 super 关键字来调用一个父类的构造函数，如果继承中子类中有constructor必须调用一下super，否则会报错。

• 【实例】选项卡面向对象初体验

• 【实例】拖拽面向对象