JavaScript面向对象（4）

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript

http://javascript.ruanyifeng.com/

一、原型（原型链）

1、原型对象

案例：根据构造方法创建两个对象，看内存中的存在形式

内存存在形式：

根据内存图，可以看出，在内存中，两个对象的成员方法占用了两个空间，但实际上这两个方法完全一样，没有必要占用两个空间。

解决的办法就是使用原型对象。把两个对象相同的内容都放到构造方法的原型对象中。

原型对象和构造器的关系：

原型对象和构造器的关系：

将person中的jineng方法放到它的原型对象中。

2、原型链

原型对象也是对象。它也可以充当其他构造器的原型对象。

上图中，Object对象是person的原型对象，根据person实例化得到p1对象，p1对象是Boy构造器的原型对象，根据Boy实例化得到b1.

在查找一个对象的成员属性的时候，优先从对象自身查找，如果没有从它的构造方法中查找，如果构造方法中也没有，那么去构造方法的原型对象中查找，如果还没有，那么都构造器的原型对象的构造器中查找，一直找到Object对象为止。这种链式的查找方式就是原型链。

3、扩展内置对象

内置对象有：String、Array、Date、Math、等。

比如使用String对象的方法：

var s = new String(‘hello’);

s.substr();

String是JavaScript内置的一个构造函数。

如果在String这个构造函数的原型对象上绑定一个方法的话，那么所有的字符串都可以使用这个方法。

其他我们所学的哪些String对象中的方法，都是String的原型中的方法。

4、DOM对象的原型对象

DOM对象实际上就是通过getElement….这类方法获取页面中的元素、属性等生产的对象。

完成链式的设置dom对象的css的方法：

三、定义类或对象多种方式

手册位置：上面JavaScript 左侧的JavaScript 到页面最下方点击“马上学生JavaScript高级教程吧” 左侧找到定义类或对象

1、原始的定义对象的方式（构造函数方式）

这种方式创建对象，如果创建多个对象的话，会为每个对象在内存中生成一个新的空间，比较占内存。

2、原型对象方式

3、混合方式（构造方法方式+原型对象方式）

原则是：

把所有的对象的成员属性全部写到构造方法中，

把所有的对象的成员方法全部写到原型对象上。

4、动态混合方式

有些开发人员认为混合方式看起来不想是一个类，因为成员方法的绑定在构造函数外面，使用动态混合方式可以解决。

5、到底采用哪种方式

在开发中，用的最多的就是混合方式和动态混合方式。

四、私有和封装

在JavaScript中，没有类，那么只能模拟私有的成员。

五、静态属性和方法

PHP中调用静态成员：类名::成员

六、继承

1、原型链方式继承

通过指定构造函数的原型对象方式，可以实现继承。

2、对象冒充方式继承

1、原始的对象冒充

2、call和apply完成继承

3、实际开发中，使用哪种方式实现继承

答案是使用混合方式，对于成员属性，使用对象冒充方式，对于成员方法，使用原型链方式

七、操作符instanceof

用来判断一个对象的构造器是否是xxx

语法：Obj instanceof Constructor

person的prototype是Object对象，Object对象的构造器是Object函数，所以检测p1的构造器的时候，person和Object都返回true。

八、for…in

用来遍历数组和对象的。

语法：

for(var x in arr){

//通过指定下标的形式，找到数组的每个单元，如 arr[x];

}

九、顶层函数

顶层函数也就是全局函数，这些函数的调用不需要使用对象去调用。

比如有Number()、String()。

在手册的位置：上方的JavaScript 左侧的JavaScript 右侧的参考书 左侧JavaScript对象列表中有一个Functions.

encodeURI()不会对“：;/?:@&=+$,#”进行编码，如果要对这些字符进行编码的话，使用encodeURIComponent()；

十、面向对象应用案例 – 贪吃蛇

1、分析

游戏有有三个对象，一个地图、一个食物、一条蛇。

所以默认先创建三个对象。

2、完成地图类（构造函数）

地图有宽、高、背景颜色。这都是地图这个对象属性。

3、完成食物类

计算食物的left和top的方案：

把食物放到地图中：

首先把Map类的对象，升级为全局变量。

在地图类中用一个成员属性_map表示地图那个div

把食物放到地图上：

4、开发一条静态的小蛇

蛇是由三个小div组成，每个小div都有宽度、高度、背景颜色、定位。

将蛇显示在地图上：

5、蛇移动

写一个蛇移动的方法，这个方法实际上就是改变蛇的坐标即可。

每隔两秒调用一个move方法，并重新生成蛇。

从新显示蛇的时候，会发现蛇越来越长，原因是每次显示蛇（show方法调用的时候），都会重新创建一个div，这样的话，div会越来越多，解决的办法是判断：

6、控制蛇的方向

通过按键（上下左右键）控制蛇的运动方向

1、通过按键获取键盘的keyCode

2、将keyCode传递给snake类的direct方法

3、direct方法设置蛇的方向的属性directtion

4、在move方法中，根据directtion属性，设置蛇头的坐标

7、吃食物

判断，如果蛇头的坐标和食物的坐标一致，就表示吃到了

解决食物不会减少的问题：

8、其他问题还有，越来越快，快到某一个点应该保持这个速度就可以了

9、边界问题，判断蛇头的坐标是否超出边界的坐标

10、不能撞自身，判断蛇头坐标是否和蛇身中的某一节坐标相同