20150207--JS巩固与加强5

JavaScript巩固与加强四

一、Object对象

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

原型对象 = new Object();

示例代码:

运行结果:true

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

2)Object作用

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

二、静态属性与静态方法

1、静态属性

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

基本语法:类.属性

示例代码:

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

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

2、静态方法

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

基本语法:

类.属性=函数的首地址

实例.属性或对象.属性

原型.属性

类.属性

三、函数的闭包

1、什么是函数闭包

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

闭包小故事:

大桃红、小桃红

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

四阿哥:你的姐姐是?

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

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

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

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

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

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

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

原因:1)作用域不同

2)Javascript的垃圾回收机制

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

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

3、闭包有哪些作用:

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

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

我眼中的闭包:

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

4、闭包原理图:

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

四、私有属性

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

public公有属性

protected受保护的

private私有属性

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

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

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

例1:定义私有属性

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

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

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

五、call与apply方法

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

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

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

1、基本语法

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

apply(obj,[array]);

功能:

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

2)实现对函数的调用

例2:改进例1

call与apply主要做了两件事:

改变speak函数的内部this指向

实现对speak函数的调用

例3:参数传递

例4:案例

效果如下:

六、面向对象中的继承

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

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

基本语法:

Object.prototype.ext=function(parObject){

for(var i in parObject){

this[i]=parObject[i];

}

};

示例代码:

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

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

三种方式总结:

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

七、贪吃蛇游戏

1、面向对象思想

贪吃蛇有哪些事务?

蛇、食物、地图

2、事务的创建流程

1)地图

2)食物

3)蛇

3、事务的属性与方法

地图类:

属性:

长度

宽度

背景

位置

方法:

显示

食物类:

属性:

长度

宽度

背景

位置

方法:

显示(算法)

随机显示(Math方法的random)

蛇类:

属性:

长度

宽度

背景

位置

蛇身(数组二维)

方法:

显示

移动(吃)

4、编写代码:

单元格:20*20

地图:800*400

食物占一格

效果如下图

代码请参考snake.html

作业一:贪吃蛇

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

时间: 2024-08-06 00:31:31

20150207--JS巩固与加强5的相关文章

2015-02-07——js笔记

示例1: var abc; alert(abc === undefined); =>  true; 示例2: var ceshi = document.getElementById('ceshi');        ceshi.abc = '1111';        var abc = '2222';        function ceshiListener() {            alert(this.abc);        }        ceshi.addEventListe

JS时间格式化出现2015-02-07 hh:12:30

1.问题背景 最近,做项目的过程中,遇到这样一个问题:利用JS对日期时间进行格式化时,页面出现了2015-02-07 hh:12:30,小时没有显示出数据:其中,hh换成HH时,有时小时位显示HH var dayTime = $("#endTime").val(); var dtime = new Date(dayTime); dtime.setTime(dtime.getTime()+365*100); var date = new Date(dtime.getTime()); $(

1-7 basket.js localstorage.js缓存css、js

basket.js 源码分析 api 使用文档: http://t3n.de/news/basketjs-performance-localstorage-515119/ 一.前言 basket.js 可以用来加载js脚本并且保存到 LocalStorage 上,使我们可以更加精准地控制缓存,即使是在 http 缓存过期之后也可以使用.因此可以使我们防止不必要的重新请求 js 脚本,提升网站加载速度. 可以到 basket.js 的 Github 上查看更多的相关信息. 由于之前在工作中使用过

moment.js获取当前日期是当年的第几周

/** * 实现当前日期是当年的第几周,再向前和向后推几周 * js数组保存当前日期的前后两周(共五周的数据) * */ var initSearchMajorChanges = function(){ //实现当前日期是当年的第几周,再向前和向后推几周,js数组保存当前日期的前后两周(共五周的数据) var vv='2015-02-07'; var vNowDate=moment(new moment(vv).format("YYYY-MM-DD"));//.add('month',

【API】高德地图API JS实现获取坐标和回显点标记

1.搜索+选择+获取经纬度和详细地址 2.回显数据并点标记 3.实现 第一步:引入资源文件 <!--引入高德地图JSAPI --><script src="//webapi.amap.com/maps?v=1.3&key=在官网申请一个key"></script><!--引入UI组件库(1.0版本) --><script src="//webapi.amap.com/ui/1.0/main.js">

js跨域

第一次写博客,好紧张,不知道能写成啥样,哈哈哈. 自己的一知片解,有错请多多指教,嘻嘻嘻. 一.何为跨域? 只要协议.域名.端口后任何一个不同,就是跨域. 举个例子: http://www.example.com 协议不同 https://www.example.com http://www.example.com 域名不同 http://www.test.com http://www.example.com 端口不同 http://www.example.com:81 注意:ip相同,域名不同

Vue.js学习笔记:属性绑定 v-bind

v-bind  主要用于属性绑定,Vue官方提供了一个简写方式 :bind,例如: <!-- 完整语法 --> <a v-bind:href="url"></a> <!-- 缩写 --> <a :href="url"></a> 绑定HTML Class 一.对象语法: 我们可以给v-bind:class 一个对象,以动态地切换class.注意:v-bind:class指令可以与普通的class特

node.js的安装及配置

一.安装 直接在浏览器搜索node.js,在官网上下载(一般旧版的更加稳定,比如下载4.4.7版本) 点击DOWNLOADS 往下翻,点击Previous Release Windows下载msi(64位/32位) 根据提示一步步安装,安装之后的文件夹如下: 在cmd命令行下输入node -v,如果出现如下,说明安装成功: 二.关于配置 在安装路径下新建两个文件夹: 创建完两个空文件夹之后,打开cmd命令窗口,输入 npm config set prefix "D:\Program Files

Node.js 使用angularjs取得Nodejs http服务端返回的JSON数组示例

server.js代码: // 内置http模块,提供了http服务器和客户端功能(path模块也是内置模块,而mime是附加模块) var http=require("http"); // 创建服务器,创建HTTP服务器要调用http.createServer()函数,它只有一个参数,是个回调函数,服务器每次收到http请求后都会调用这个回调函数.服务器每收到一条http请求,都会用新的request和response对象触发请求函数. var server=http.createS

Knockout.js简介

Knockout是一款很优秀的JavaScript库,通过应用MVVM模式使JavaScript前端UI简单化.任何时候你的局部UI内容需要自动更新,KO都可以很简单的帮你实现,并且非常易于维护. Knockout的3个核心功能是: ? 属性监控与依赖跟踪 ? 声明式绑定 ? 模板机制 MVVM Model-View-View Model (MVVM)是一种创建用户界面的设计模式. ? Model:用于存储应用程序数据,表示业务领域的对象和数据操作,并且独立于任何界面. 当使用KO的时候,通常是