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

韩顺平_轻松搞定网页设计(html+css+javascript)_第33讲_Object类_闭包_成员函数再说明_聪明的猪小练习_学习笔记_源代码图解_PPT文档整理

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

记不住,和不知道是两回事,记住最常用的,记不住的,学会查找。


js面向(基于)对象编程—类(原型对象)与对象
对象—Object类
Object类是所有javascript类的基类,提供了一种创建自定义对象的简单方式,不需要程序员再定义构造函数。

主要属性:
constructor—对象的构造函数
prototype—获得类的prototype对象
static性质

主要方法:
hasOwnProperty(property)—是否属于本类定义的属性
isPrototypeOf(object)—是否是指定类的prototype
propertylsEnumerable(property)—是否可列举的属性
toString()—返回对象对应的字符串
valueOf()—返回对象对应的原始类型值

<script language="javascript">
function getAttributeValue(attr){
	alert(person[attr]);
}
var person=new Object();
person.name="zs";
person.age=18;
getAttributeValue("name");
getAttributeValue("age");
</script>

思考题:
var i=new Number(10); // <====> var i-10;
Number.prototype.add=function(a){ // 所有Number对象都有一个add方法
	return this+a;
}
window.alert(i.add(10).add(30)); //在这里,上面代码中的this就是i
var b=90;
window.alert(b.add(40));

上面的写法我们为对象的修改和扩展。
demo1.html

<html>
	<head>
		<script language="javascript">
			//创建Person实例
			function Person(){
			}
			var p1=new Person();
			p1.name="sp";

			//初步体验Object类
			//对比上面的,可以用Object直接来创建对象
			var p1=new Object(); //此时p1就是一个对象
			p1.name="sp"; //和上面是等价的
			window.alert(p1.constructor); //所有的类都是Object的子类,constructor是从Object来的
			//javascript类的所有基类都是Object类,和java有点像,java所有类的超类都是Object
			//Number类,内置的,javascript支持Number对象,该对象是原始数值的包装对象
			var i1=new Number(10); //<====> var i1=10;
			window.alert(i1.constructor);
			var i2=10;
			window.alert(i2.constructor);
			//为什么说是等价的,通过上面查看构造函数,就可以看出来了

			//我们可以给类添加方法
			Number.prototype.add=function(a){
				return this+a;
			}
			window.alert(i1.add(10).add(30)); //输出50

		</script>
	</head>
	<body></body>
</html>

Array是javascript的内置类
请思考给js的Array对象扩展一个find(val)方法,当一个Array对象调用该方法的时候,如果能找到val则返回其下标,否则返回-1
demo2.html

<html>
	<head>
		<script language="javascript">
			//体验Array内置类
			var arr1=new Array(3); //3代表可以有3个数据
			arr1[0]="George";
			arr1[1]="John";
			arr1[2]="Thomas";
			//遍历该数组
			for(var i=0;i<arr1.length;i++){
				document.writeln(arr1[i]+" ");
			}
			//使用Array提供的方法,颠倒数据。既然都提供了,何必有自己重新发明轮子去做颠倒呢。
			arr1.reverse();
			document.write("<br/>");
			for(var i=0;i<arr1.length;i++){
				document.writeln(arr1[i]+" ");
			}
			/*
			请思考给js的Array对象扩展一个find(val)方法,当一个Array对象调用该方法的时候,如果能找到val则返回其下标,否则返回-1。
			*/

			//现在我们一起看如何给所有Array对象添加一个方法 find(val);
			//现在只考虑一维数组,只考虑找到一个就行,暂时不考虑多个的问题
			Array.prototype.find=function(val){
				//遍历数组this
				for(var i=0;i<this.length;i++){
					if(val==this[i]){
						return i;
					}
				}
				//如果没有
				return -1;
			}

			document.write("<br/>");
			document.writeln("John 下标="+arr1.find("John"));
		</script>
	</head>
	<body></body>
</html>

不要学的很多,知识点还没搞懂就跑到下一个地方,欲速则不达,技术欠债就会越积越多,越来越看不懂,看不懂就对自己产生动摇。不要想一天背300单词,如果你能一天背诵30个,坚持一个月,你就会发现其实背单词很容易,踏实。

什么是闭包
闭包(closure)
javascript闭包是在另一个作用域中保存了一份它从上一级函数或作用域取得的变量(键值对),而这些键值对是不会随上一级函数的执行完成而销毁。
function a(){
	var i=0;
	function b(){
		alert(++i);
	}
	return b;
}
var c=a();
c();

这样在执行完var c=a()后,变量c实际上是指向了函数b,b中用到了变量i,再执行c()后就会弹出一个窗口显示i的值(第一次为1)。这段代码其实就创建了一个闭包,为什么?因为函数a外的变量c引用了函数a内部的函数b
就是说:<