山山未迟

  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

image

 

JavaScript巩固与加强四

一、Object对象

1)在Javascript中,Object类是所有类的基类(PHP stdClass)

原型对象 = new Object();

clip_image002

示例代码:

clip_image004

运行结果:true

通过以上代码可以证明,当我们访问某个对象不存在的属性时,系统首先会向当前对象构造器的原型对象中寻找,又由于所有原型对象都是Object类的实例,所以我们的对象会自动继承Object类中属性和方法,我们把这种继承关系就称之为原型继承,我们的Object类就是我们所有系统或自定义类的基类。

2)Object作用

当我们只需要获得一个对象保存数据,而不需要关心其是哪个类实例,那么我们考虑使用Object类创建对象。

clip_image006

二、静态属性与静态方法

1、静态属性

在php中可以通过static关键词来定义静态属性,但是,在Javascript中没有定义静态属性的关键词,但是我们可以通过模拟的方式来实现这个过程。

基本语法:类.属性

示例代码:

例1:编写班级实时计数器

clip_image008

例2:改进上题,实现自动计数功能

clip_image010

2、静态方法

在Javascript中,也可以通过模拟的方式来实现类的静态方法

基本语法:

类.属性=函数的首地址

clip_image012

clip_image014

实例.属性或对象.属性

原型.属性

类.属性

三、函数的闭包

1、什么是函数闭包

答:所谓“闭包”,指的是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分。

闭包小故事:

大桃红、小桃红

小桃红穿越到清朝,见了四阿哥,并和宫中的很多福晋已姐妹相称。

四阿哥:你的姐姐是?

如果是大福晋,这就是”卖姐求荣“

如果是大桃红,那么代表你理解了闭包。

clip_image016

2、Javascript中的垃圾回收机制:

函数中的变量(局部变量)在函数运行完毕后,自动被GC回收。

全局作用域中的变量(全局变量),会在页面关闭或web程序执行完毕后销毁。

在Javascript的垃圾回收机制,有一个引用计数器,默认为0,当有外在因素对其引用时,系统自动进行+1操作,当GC运行时,首先校检当前内存的计数器,如为0,则代表该对象无任何引用,内存可以回收,否则,系统将不会回收该内存区域。

例1:全局作用域中无法直接访问局部变量

clip_image018

原因:1)作用域不同

2)Javascript的垃圾回收机制

例2:我一定想要访问到i变量呢?

clip_image020

例3:还可以通过函数闭包来解决

clip_image022

3、闭包有哪些作用:

1)可以在全局作用域实现对局部变量的引用

2)可以一直保存我们的变量或函数驻留在内存中,而不会被GC回收

clip_image024

我眼中的闭包:

就是函数中的函数,且该函数捆绑了一些局部变量,又由于全局变量的引用,会导致函数与变量都不会被回收,这就是我眼中的闭包。

4、闭包原理图:

clip_image026

虽然函数闭包可以实现对局部变量的调用以及保存局部变量不会被GC垃圾回收机制所回收,但是非特殊情况,不建议使用,可能会导致内存泄漏。

四、私有属性

在Javascript并不存在私有属性的定义语言,但是我们可以通过模拟的方式来实现

public公有属性

protected受保护的

private私有属性

在Javascript只存在公有属性与私有属性

在构造器可以使用this.属性的方式声明公有属性

在构造器可以使用var 属性的方式模拟私有属性

例1:定义私有属性

clip_image028

在全局中我们无法完成对love属性的调用,会弹出undefined。

例2:如何访问私有属性?

clip_image030

对于var声明的属性,我们都称之为私有属性,如果想对其进行可读或可写操作,可以设置共有方法进行设置与读取,如果只有设置,那么我们的属性就是,可写属性,如果只有只读方法,那么其就是只读属性,同时拥有两者,那么该属性就是可读可写属性。

五、call与apply方法

例1:为对象添加speak说话方法

clip_image032

说明:由于speak方法中的this指针指向window对象,属于我们通过p1去引用时,没有办法直接引用,我们可不可以改变内部的this指向呢?

答:可以,通过call与apply方法

1、基本语法

call(obj,[arg1,arg2,arg3…])

apply(obj,[array]);

功能:

1)改变函数内部的this指向,指向到obj对象

2)实现对函数的调用

例2:改进例1

clip_image034

call与apply主要做了两件事:

改变speak函数的内部this指向

实现对speak函数的调用

例3:参数传递

clip_image036

例4:案例

clip_image038

效果如下:

clip_image040

六、面向对象中的继承

在有些编程语言中,可以通过extends关键字来实现类的继承,这一点在Javascript中,可以通过模拟的方式实现。

第一种方式:通过Object原型对象实现类的继承

基本语法:

Object.prototype.ext=function(parObject){

for(var i in parObject){

this[i]=parObject[i];

}

};

示例代码:

clip_image042

clip_image044

第二种方式:通过call与apply方式实现类的继承

clip_image046

第三种方式:通过原型继承面试模拟类的继承

clip_image048

三种方式总结:

第一种方式,会为Javascript中是所有类添加ext属性,但是我们其他对象并不需要此功能,第二种是通过call与apply方式实现类的继承,会增加当前要继承子类对象的体积,只有第三种方式是通过原型继承的方式实现对类的模拟继承,所以其是最佳方案

七、贪吃蛇游戏

1、面向对象思想

贪吃蛇有哪些事务?

蛇、食物、地图

2、事务的创建流程

1)地图

2)食物

3)蛇

3、事务的属性与方法

地图类:

属性:

长度

宽度

背景

位置

方法:

显示

食物类:

属性:

长度

宽度

背景

位置

方法:

显示(算法)

随机显示(Math方法的random)

蛇类:

属性:

长度

宽度

背景

位置

蛇身(数组二维)

方法:

显示

移动(吃)

4、编写代码:

单元格:20*20

地图:800*400

食物占一格

效果如下图

clip_image050

代码请参考snake.html

作业一:贪吃蛇

作业二:做企业网站(单文章、文章、产品展示)

posted on 2016-05-06 00:02  山山未迟  阅读(159)  评论(0编辑  收藏  举报