927次阅读
面向对象初步

Javascript之前也看过,但是只会一些简单的功能,这次要系统地学习一下了。

首先我们来看看怎样把javascript分离开来:

html:

<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>面向对象初步</title>
</head>
<body>
  <script src="script.js"></script>
</body>	
check the result

javascript:

document.write("我是一只小猫<br/>");
document.write("我喜欢吃鱼<br/>");
document.write("我喜欢抓老鼠<br/>");
document.write("我眼睛晚上会发光<br/>");
document.write("<br/>");
document.write("我是一只小狗<br/>");
document.write("我喜欢吃骨头<br/>");
document.write("我喜欢欺负猫<br/>");
document.write("我鼻子特别灵<br/>");	

在html中,我们用script标签引入javascript,用src属性指定其路径。这样就将javascript引入进来了。在js中,我们用document.write向DOM中写点东西。

但是这个例子就是典型的面向过程编程,顺序执行,代码没有结构可言。那么面向对象的代码会是什么样子呢?我们来看个例子:

html:

<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>面向对象初步</title>
</head>
<body>
  <script src="script.js"></script>
</body>	
check the result

javascript:

function Animal(name, food, hobby, skill) {
  this.name = name;
  this.food = food;
  this.hobby = hobby;
  this.skill = skill;
  this.write = function() {
    document.write("我是一只" + this.name + "<br/>");
    document.write("我喜欢吃" + this.food + "<br/>");
    document.write("我喜欢" + this.hobby + "<br/>");
    document.write(this.skill + "<br/>");
  }
}
var cat = new Animal("小猫", "鱼", "抓老鼠", "我眼睛晚上会发光");
var dog = new Animal("小狗", "骨头", "欺负猫", "我鼻子特别灵");
cat.write();
document.write("<br/>");
dog.write();	

这个例子运行效果和上一个例子一模一样,但是代码结构明显好很多。首先我们定义了一个Animal的对象,它有几个属性,name、food、hobby、skill,这些属性可以从外部传入进来,然后Animal还提供一个write方法,用来将信息输出。客户端使用的时候,通过new Animal就可以创建这个对象,将参数传入进去,然后就可以调用其write方法。这样的好处是明显的,代码分工明确,而且也减少了冗余代码,维护成本大大降低。

Javascript还有很多内置对象,比如说我们之前用过的Math.floor,Math就是一个内置对象,它有floor函数,还有哪些内置对象呢?我们来看个例子:

html:

<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>面向对象初步</title>
</head>
<body>
  <script src="script.js"></script>
</body>	
check the result

javascript:

var arr = [];
arr.push(1);
arr.push(2);
arr.push(3);
for(var i in arr) {
  document.write(arr[i]);
}
document.write("<br/>");
var a = arr.pop();
document.write(a + "<br/>");
for(var i in arr) {
  document.write(arr[i]);
}	

这个例子向我们演示了数组的用法,[]就是一个空的数组,我们可以通过push向里面添加数据,也可以通过pop取出数组尾的数据。当然这个例子没有任何意义,在这里我只想说明javascript中的对象概念。其实在javascript中,数组是Array对象,而这个Array对象就是javascript中的内置对象,所谓内置对象,就是javascript帮我们定义好的一些对象,我们直接用它的方法就好。其实我们之前用到的document、window,都是内置对象,这些对象我们并没有定义,直接拿来用。

如果你细心,就会发现Array的方法和Math的方法是不一样的,Array的方法是通过var arr=[],我们定义了一个Array的对象变量,而Math的方法可以直接通过Math来用,如Math.floor,所以这里我们有两类方法,一类是需要先定义一个var才能用的,一类是可以直接用的,变量也是分这两类。这两类有什么区别呢?我们来看一下:

html:

<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>面向对象初步</title>
</head>
<body>
  <script src="script.js"></script>
</body>	
check the result

javascript:

function Person(name) {
  this.name = name;
  this.show = function() {
    document.write("My name is " + this.name + ", I am " + Person.age + "<br/>");
  }
  this.grow = function() {
    Person.age++;
  }
};
Person.age = 18;
var xinxin = new Person('xinxin');
xinxin.show();
var wanmingniu = new Person('wanmingniu');
wanmingniu.show();
xinxin.grow();
document.write("xinxin has growed<br/>");
xinxin.show();
wanmingniu.show();
	

大家应该发现这里面的逻辑bug了吧,xinxin长了一岁,玩命牛也变成了19岁。这就是因为age这个变量是属于Person的,xinxin和wanmingniu都是从Person创建出来的,他们共享了Person的这个age变量,就造成了错误。而name确不会共享,那是因为this变量的缘故,关于this变量,我们还会详细了解,这次我们先有个大概的概念即可。

这次我们学习了一种很重要的思想,尽量将代码组织成对象,维护起来更简单。

如果您觉得此教程不错,想支持一下,您可以通过支付宝扫码给我们一点,不要超过100元哦!
评论请先登录