日期:2014-05-17  浏览次数:20600 次

韩顺平_轻松搞定网页设计(html+css+javascript)_第32讲_构造函数_成员函数详解_学习笔记_源代码图解_PPT文档整理

文西马龙:http://blog.csdn.net/wenximalong/

js面向(基于)对象编程——类(原型对象)与对象
对象—对象(成员)函数的初步介绍

在某些情况下,我们要需要定义对象函数。比如人对象:除了有一些属性外(成员变量表示的年龄,姓名……),我们人对象还有一些行为比如:可以说话,跑步……,通过学习,我们人还可以做算术题。这是就要用函数才能完成。现在要对Person对象完善:
①添加speak函数,输出我是一个好人
②添加jisuan函数,可以计算从1+...+1000的结果
③修改jisuan函数,该方法可以接收一个数n,计算从1+...+n的结果
④添加add成员函数,可以计算两个数的和

对象——成员函数(方法)
比如:我们希望对象不但有属性,还希望他有行为。(行为在程序中要靠函数来体现)
demo1.html

<html>
	<head>
		<script language="javascript">
			function Person(name,age){
				//这个就是使用传入的实际参数,去初始化属性。
				this.name=name;
				this.age=age;
				//输出自己的名字
				//这里this.手腕就是一个公开的函数,函数名是show
				//有一个麻烦事,先点出来。这样的方式有一个弊病,你用这样的方式分配一个函数,那么每个对象都有show这段函数代码。如p1有,p2也有等等,在一定程度上效率会有以一点影响,这个问题怎么解决,在后面讲解。这样去分配函数,会使每一个Person对象实例,都有一段这样的show函数代码,也就是show这个函数不会放在一个所谓的代码区让所有对象共享,而是每一个对象都会有一段这样的代码,这就造成一种浪费了,当然在对象不多的情况下,也无所谓,一旦对象用完了就会被垃圾回收给回收了。如果连这点浪费也要避免的话,就要用原型的方式来解决。在后面会讲解。当然,this.show类似的方法在开发中也有用到。
				this.show=function(){
					document.writeln("名字="+this.name); //this要带上,如果不带this,就会认为name是另外一个变量了
				}

				//添加jisuan函数,可以计算从1+...+1000的结果
				this.jisuan=function(){
					var res=0;
					for(var i=1;i<=1000;i++){
						res+=i;
					}
					return res;
				}
				//改进jisuan函数,可以计算从1+...+n的结果
				this.jisuan2=function(n){
					var res=0;
					for(var i=1;i<=n;i++){
						res+=i;
					}
					return res;
				}
			}

			var p1=new Person("宋江",90);
			p1.show();

			document.writeln("<br/> res="+p1.jisuan());
			document.writeln("<br/> res="+p1.jisuan2(10));
		</script>
	</head>
	<body></body>
</html>
注释中一段详解


对象——成员函数
给一个对象添加(指定)函数的几种方式
方式1

function Person(){
	this.name="abc";
	this.age=900;
}
function show1(){
	window.alert("hello"+this.name);
}
//创建一个p1对象
var p1=new Person();
//把show1函数,给p1.abc
p1.abc=show1; //这样就相当于把show1的函数指针给它了,这个时候大家是共享的一个了,不是每个对象都有这个show1,不是每个对象都指向show1了,对比上面的demo1.html
//把原来写在里面的show1函数,写在外面了,仅此而已
//★★★带括号和不带括号的区别★★如果是p1.abc=show1();就是把show1函数的返回值交给p1.abc这个属性,即hello;如果是p1.abc=show1;就是把函数本身交给p1.abc这个属性值,this会起作用,即helloabc。
p1.abc(); //调用
javascript的语法特别灵活,不在里面写,而是在外面写了函数,然后再分配给他,就好像动态分配一个对象属性一样,动态分配一个函数,这是允许的。灵活是把双刃剑。
demo2.html

<html>
	<head>
		<script language="javascript">
			function Person(){
				this.name="abc";
				this.age=900;
			}
			function show1(){
				window.alert("hello"+this.name);
			}
			var p1=new Person();
			p1.abc=show1; //把show1本身给了p1.abc属性,相当于在Person类中定义的
			p1.abc(); //输出helloabc

			window.alert(p1.abc);//没有括号,不是p1.abc()这样的,输出function show1这个整个函数,打印函数本身
			window.alert(show1);//同理和上面一样,同样没有括号,把整个function show1整个函数打印出来
			window.alert(p1.abc());//输出helloabc,再输出undefined,这里是调用了,abc后面跟括号了。★★★为什么还会输出undefined★★★
			window.alert(show1());//先输出hello,再输出undefined,show1的返回值。

			p1.bcd=show1(); //把show1函数的返回值给P1.bcd属性,为什么没有this.name呢了,此时show1函数仅仅传递结果,对于show1函数来讲,它不知道this是指向谁
			p1.bcd(); //输出hello
		</script>
	</head>
	<body></body>
</html>
方式2
function Person(){
	this.name="abc";
	this.age=900;
}
var p1=new Person();
p1.abc=function show1(){
	window.alert("hello"+this.name);
}
p1.abc();

demo3.html

<html>
	<head>
		<script language="javascript">
			function Person(){
				this.name="abc";
				this.age=900;
			}
			var p1=new Person();
			//这个相当于把show1函数本身交给p1.abc属性了
			//如同这样定义
			//function Person(){
			//	this