zoukankan      html  css  js  c++  java
  • 20150207--JS巩固与加强5

    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

    作业一:贪吃蛇

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

  • 相关阅读:
    1104.整除问题
    1101.表达式求值(难)
    1102.最小子面积矩阵
    1095.2的幂次方
    1094.String matching
    1093.WERTYU
    1096.日期差值
    1092.Fibonacci
    车站解题程序
    阶乘之和解题程序
  • 原文地址:https://www.cnblogs.com/lifushan/p/5463900.html
Copyright © 2011-2022 走看看