写给兔小白的js教程(5)-CSDN博客

本文链接：https://blog.csdn.net/weixin_34050519/article/details/85074401

又上课啦，和上一次隔的时间有点长，就当是放暑假了吧。

前一段时间在研究icm的过程中，兔小白应该发现了脚本经常是以对象的形式出现的，今天我们就来看一看这种方式与之前的写法有什么不同。

前几课里，我们定义一个方法时，都是直接写function，比如：

function add(x, y){
//.......
}

这种定义实际是把add()方法放到了window对象上，由于window对象是全局的，因此它上面定义的add()方法也就是全局的了。这种方式简单，但也有缺点，一是功能复杂时，window对象上定义的方法过多，会影响脚本执行效率，二是不同功能的方法定义一不小心就会重名。

于是，面向对象式的js写法就诞生了。兔有C#的基础，可以联想一下，C#把不同的功能模块划分为类，在类内部定义变量与方法，这样各个模块就隔离开了。javascript里也差不多可以这样，看个例子：

//定义一个car对象
var car = {
//定义一个属性叫model，注意冒号和后面逗号的用法
model: 'golf6',
//双定义了一个color属性
color: 'blue',
//定义一个方法，比如兔子非常希望咱家车能天天换颜色，定义一个changeColor方法，冒号后面的function表示此行定义的是方法
changeColor: function(c){
//this是一个特殊的关键字，指向对象自身。这样在对象内部，访问自己的属性和方法，都可以通过this
//当然也可以直接写对象名，比如car.color = c;
//关于this，这里只列了简单情况，实际还比较复杂，后面我们再看
this.color = c;
},
//又定义了一个方法
drive: function(){
//.....
}
};
//调用一下，由于在对象外部，必须通过对象名来使用它的方法
car.changeColor('white');

注意几点：

1、对象用大括号表示，在大括号内部定义属性与方法；
2、每个方法与属性结尾是逗号而不是分号，最后一个不写逗号；
3、使用属性或方法时要加对象名，如果在对象内部，可以用this；

由于javascript的语法比较松散灵活，所以还可以换个写法：

var car = {};
car.model = 'golf6';
car.color = 'blue';
car.changeColor = function(c){
this.color = c;
};
car.drive = function(){
//.....
};

与上面的区别在于先定义了空对象，然后才动态的为对象添加属性与方法。“动态”是javascript一个很有用的特性，与C#、C++等语言相比，javascript真的是太灵活了。

还有几种其它写法，但万变不离其宗，本质是一样的。由于面向对象式的写法优势很明显，所以推荐使用此种写法，如果兔去网上找代码，99.9%都一定是面向对象的，这样才能把特定功能封装到特定对象中，互不干扰。不过js的OO与C#等语言的OO相比还是有区别的，只能说形式上是面向对象的。另外还有一些比较复杂的用法和概念，我们以后遇到了再看。

今天想不出写什么游戏了，上个简单的小东西吧，先不告诉兔子是什么，也不上截图了，自己跑一跑看吧，当然啦，如果能事先通过读代码猜出是什么就更好了。另外从今天起引入jQuery了，下面的代码里会遇到，好在兔已经有基础了，肯定看得懂。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>电子显示屏</title>
<style>
.dot{width:5px;height:5px;float:left;background-color:blue;}
.yellow{background-color:yellow}
.clear{clear:both}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" language="javascript">
//定义一个bunny对象，用到了今天的知识
var bunny = {
//这是兔小灰要对兔小白说的话，嘿嘿，密码哟，肯定猜不出是什么东西吧？
say: [
[,,,1,,,,,,,,,,,,,1],
[,,,1,1,1,1,1,,,,,,,,,,1],
[,,1,,,,,1,,,,,1,1,1,1,1,1,1,1,1,1,1],
[,1,,,,,1,,,,,,1,,,,,,,,,,1],
[1,1,1,1,1,1,1,1,1,1],
[,1,,,,1,,,,1,,,,1,1,1,1,1,1,1,1,1,,,,,1,1,,,,,,1],
[,1,,,,1,,,,1,,,,,,,,1,,,,,,,,1,,,1,1,,,1],
[,1,1,1,1,1,1,1,1,1,,,,,,,,1,,,,,,,1,,,,,,1,1],
[,,,,1,,1,,,,,,,1,1,1,1,1,1,1,1,1],
[,,,1,,,1,,1,,,,,,,,,1,,1],
[,,1,,,,1,,,,1,,,,,,,1,,,1],
[1,1,,,,,,1,1,1,1,,1,1,1,1,1,1,1,1,1,1,1]
],
start_x: 100,
//初始化方法，这回放到对象的内部了
init: function(){
//构造一个100*14的点阵(div)，动态创建DOM元素
var html = [];
for(var i = 0;i < 14;++i){
for(var j = 0;j < 100;++j){
html.push("<div class='dot' id='d" + i + "_" + j + "'></div>");
}
html.push("<div class='clear'></div>");
}
$("#container").html(html.join(""));
//上了个定时器
window.setInterval(function(){
//所有包含yellow样式的元素都移除yellow样式
$(".yellow").removeClass("yellow");
//把say中的“密码”显示到界面上去，请兔小白试着理解一下是如何工作的
for(i = 0;i < bunny.say.length;++i){
for(j = 0;j < bunny.say[i].length;++j){
if(bunny.say[i][j] == 1)
$("#d" + (i+1) + "_" + (bunny.start_x + j)).addClass("yellow");
}
}
if(--bunny.start_x < -35) bunny.start_x = 100;
},80);
}
};
//$()是jQuery中的一个特殊方法，兔可以理解为它就相当于body的onload事件
//我们在其中执行一个匿名方法，在此方法中再调用bunny.init()方法
$(function(){bunny.init()});
</script>
<body>
<div id="container"></div>
</body>
</html>