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、不能撞自身,判断蛇头坐标是否和蛇身中的某一节坐标相同