js高级day01

课程介绍

课程大纲

学习目标

• 理解面向对象开发思想
• 掌握 JavaScript 面向对象开发相关模式
• 掌握在 JavaScript 中使用正则表达式

案例演示

贪吃蛇案例

学习资源

• JavaScript 高级程序设计（第三版）
  • 前端的红宝书
  • 建议每一个前端都完整的看一遍
• JavaScript面向对象编程指南（第2版）
• JavaScript面向对象精要
• JavaScript 权威指南
• JavaScript 语言精粹
• 你不知道的 JavaScript

面向对象编程

基本概念

什么是对象？

Everything is object （万物皆对象）

对象到底是什么，我们可以从两次层次来理解。

(1) 对象是具体事物的抽象。

一本书、一辆汽车、一个人都可以是对象，当实物被抽象成对象，实物之间的关系就变成了对象之间的关系，从而就可以模拟现实情况，针对对象进行编程。

问： 书是对象吗

(2)对象是无序键值对的集合，其属性可以包含基本值、对象或者函数

每个对象都是基于一个引用类型创建的，这些类型可以是系统内置的原生类型，也可以是开发人员自定义的类型。

什么是面向对象？

面向对象编程 —— Object Oriented Programming，简称 OOP ，是一种编程开发思想。

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

面向对象与面向过程：

• 面向过程就是亲历亲为，事无巨细，有条不紊，面向过程是解决问题的一种思维方式，（执行者的角度）
  • 关注点在于解决问题的过程（先xx，然后xx，在xx）；
• 面向对象就是找一个对象，让她去做这件事情（指挥者的角度）
  • 关注点在找到能解决问题的对象上。
• 面向对象不是面向过程的替代，而是面向过程的封装
• 例如洗衣服（面向过程和面向对象的区别）

面向对象的特性：

• 封装性
  • 将功能的具体实现，全部封装到对象的内部，外界使用对象时，只需要关注对象提供的方法如何使用，而不需要关心对象的内部具体实现，这就是封装。
• 继承性
  • 在js中，继承的概念很简单，一个对象没有的一些属性和方法，另外一个对象有，拿过来用，就实现了继承。
  • 注意：在其他语言里面，继承是类与类之间的关系，在js中，是对象与对象之间的关系。
• [多态性]
  • 多态是在强类型的语言中才有的。js是弱类型语言，所以JS不支持多态

创建对象的方式

内置构造函数创建

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

//在js中，对象有动态特性，可以随时的给一个对象增加属性或者删除属性。
var person = new Object()
person.name = 'Jack'
person.age = 18

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

缺点：麻烦，每个属性都需要添加。

对象字面量创建

var person = {
  name: 'Jack',
  age: 18,
  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)

缺点：但却没有解决对象识别的问题，创建出来的对象都是Object类型的。

继续改进：构造函数

构造函数是一个函数，用于实例化对象，需要配合new操作符使用。

function Person (name, age) {
  this.name = name
  this.age = age
  this.sayName = function () {
    console.log(this.name)
  }
}

var p1 = new Person('Jack', 18)
p1.sayName() // => Jack

var p2 = new Person('Mike', 23)
p2.sayName() // => Mike

而要创建 Person 实例，则必须使用 new 操作符。
以这种方式调用构造函数会经历以下 4 个步骤：

1. 创建一个新对象
2. 将构造函数的作用域赋给新对象（因此 this 就指向了这个新对象）
3. 执行构造函数中的代码
4. 返回新对象

构造函数需要配合new操作符使用才有意义，构造函数首字母都需要大写

构造函数的缺点

使用构造函数带来的最大的好处就是创建对象更方便了，但是其本身也存在一个浪费内存的问题：

function Person (name, age) {
  this.name = name
  this.age = age
  this.type = 'human'
  this.sayHello = function () {
    console.log('hello ' + this.name)
  }
}

var p1 = new Person('lpz', 18)
var p2 = new Person('Jack', 16)
console.log(p1.sayHello === p2.sayHello) // => false

解决方案：

function sayHello() {
  console.log('hello ' + this.name)
}

function Person (name, age) {
  this.name = name
  this.age = age
  this.type = 'human'
  this.sayHello = sayHello
}

var p1 = new Person('lpz', 18)
var p2 = new Person('Jack', 16)

console.log(p1.sayHello === p2.sayHello) // => true

缺点：会暴漏很多的函数，容易造成全局变量污染。

原型

原型基本概念

Javascript 规定，每一个函数都有一个 prototype 属性，指向另一个对象。
这个对象的所有属性和方法，都会被构造函数的实例继承。

这也就意味着，我们可以把所有对象实例需要共享的属性和方法直接定义在 prototype 对象上。

function Person (name, age) {
  this.name = name
  this.age = age
}

console.log(Person.prototype)

Person.prototype.type = 'human'

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

var p1 = new Person(...)
var p2 = new Person(...)

console.log(p1.sayName === p2.sayName) // => true

这时所有实例的 type 属性和 sayName() 方法，其实都是同一个内存地址

构造函数、实例、原型三者之间的关系

构造函数：构造函数就是一个函数，配合new可以新建对象。

实例：通过构造函数实例化出来的对象我们把它叫做构造函数的实例。一个构造函数可以有很多实例。

原型：每一个构造函数都有一个属性prototype，函数的prototype属性值就是原型。通过构造函数创建出来的实例能够直接使用原型上的属性和方法。

思考：内置对象中，有很多的方法，这些方法存在哪里？

__proto__

任意一个对象，都会有__proto__属性，这个属性指向了构造函数的prototype属性，也就是原型对象。

获取原型对象：

• 通过构造函数.prototype可以获取
• 通过实例.__proto__可以获取（隐式原型）
• 它们指向了同一个对象构造函数.prototype === 实例.__proto__

注意：__proto__是浏览器的一个隐藏（私有）属性，IE浏览器不支持，不要通过它来修改原型里的内容，如果要修改原型中的内容，使用构造函数.prototype去修改

constructor属性

默认情况下，原型对象中只包含了一个属性：constructor，constructor属性指向了当前的构造函数。

原型链

原型链概念

任何一个对象，都有原型对象，原型对象本身又是一个对象，所以原型对象也有自己的原型对象，这样一环扣一环就形成了一个链式结构，我们把这个链式结构称为：原型链。

绘制对象的原型链结构：

//1. var p = new Person();
//2. var o = new Object();
//3. var arr = new Array();
//4. var date = new Date();
//5. Math
//6. 查看一个div的原型链结构

总结：Object.prototype是原型链的尽头，Object.prototype的原型是null。

属性查找原则

如果是获取操作

1. 会先在自身上查找，如果没有
2. 则根据__proto__对应的原型去找，如果没有
3. 一直找到Object.prototyp，如果没有，那就找不到了。

如果是修改操作：

只会修改对象自身的属性，如果自身没有这个属性，那么就会添加这个属性，并不会修改原型中的属性。