韩顺平 javascript教学视频_学习笔记16_Object类_闭包_成员函数再说明_聪明的猪小练习

最新推荐文章于 2018-12-21 17:05:00 发布

D计划

最新推荐文章于 2018-12-21 17:05:00 发布

阅读量927

点赞数

分类专栏： Javascript 学习笔记文章标签： javascript 韩顺平视频

本文链接：https://blog.csdn.net/fuyizhonhong/article/details/50583380

版权

Javascript 学习笔记专栏收录该内容

39 篇文章 0 订阅

订阅专栏

js面向（基于）对象编程—类（原型对象）与对象

对象—Object类

Object类是所有javascript类的基类，提供了一种创建自定义对象的简单方式，不需要程序员再定义构造函数。

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

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

初步体验Object类

<html>  
	<head>  
		<script language="javascript">  
		
			//传统创建Person实例
			function Person(){}
			var p1 = new Person();
			p1.name = "顺平";
			
			//初步体验Object类，通过Object直接创建对象
			
			var p1 = new Object();  
			p1.name="顺平";  
			p1.age=18;  
			
			window.alert(p1.constructor);
			
			function getAttributeValue(attr){  
				alert(person[attr]);  
			}  
			var person=new Object();  
			person.name="zs";  
			person.age=18;  
			getAttributeValue("name");  
			getAttributeValue("age");  
			
		</script>  
	</head>  
	<body></body>  
</html>

其中，Number是一个内置的类， var i=new Number(10); 等价于 var i = 10;

<html>  
	<head>  
		<script language="javascript">  
		
			var i=new Number(10); // 这句话等价于 var i = 10;
			
			    Number.prototype.add=function(a){ // 所有Number对象都有一个add方法  
				return this+a;  
			}  
			
			//验证var i=new Number(10); 等价于 var i = 10;
			var i1=new Number(10);
			window.alert(i1.constructor);
			var i2=20;
			window.alert(i2.constructor);
			
			window.alert(i.add(10).add(30)); //在这里，上面代码中的this就是i 
			
			var b=90;  
			window.alert(b.add(40));  
			
		</script>  
	</head>  
	<body></body>  
</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); 
			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  相当于10+10+30
  
		</script>  
	</head>  
	<body></body>  
</html>

加深对类和对象的认识

如何给类添加方法（如何给某类型的所有对象添加方法）

再来看上面的思考题：

Array是javascript的内置类

<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>

成员函数—细节说明

函数的参数列表可以是多个

案例：在Person类中编写一个成员方法（面向对象方式），从键盘输入三个数，返回最大的那个数。

参数列表可以是多个，并且数据类型可以是任意的类型，整数、小数、类
    function 函数名(参数列表){

        语句; //函数主体

        return 返回值;

    }

函数可以没有返回值，但最多只能有一个返回值

返回类型可以是任意的数据类型（整数、小数、字符串）也可以没有返回值

js中的函数还有以下两点特别说明一下

js支持参数个数可变的函数
js支持创建动态函数，这个用的比较少，了解即可

针对函数重载的不支持的说明，看下面的代码

<html>  
	<head>  
		<script language="javascript">  
			function test(a){  
				window.alert(a);  
			}  
			function test(a,b,c){  
				window.alert(a+b+c);  
			} 
			function test(a,b){  
				window.alert(a+" "+b);  
			}  
			test(23); //它始终只找最后一个，只看最后一个，很神奇，javascript没有重载的概念。
					  //相当于第二个test函数就把第一个test函数覆盖掉了，就不认第一个test函数了。
					  //所以它会输出 "23 undefined"  
			//所以不管最后一个test函数前面，有多少个test函数，只认最后一个test函数。
			//javascript不是编译语言，它遇到这样的情况也不会报错，而是在运行的时候选择一个，选最后一个。  
			
			window.test(3,"hello"); //从上面的分析，输出：3hello  
			
		</script>  
	</head>  
	<body></body>  
</html>

js中不支持函数的重载

结论：

js在调用一个函数的时候，是根据函数名来调用，如果有多个函数名相同，则认最后那个函数。

js函数不支持重载
直接定义一个函数或者变量实际上这些函数和变量就是全局函数和全局变量（本质上他们是属于window对象的，这个后面讲面向对象的时候还有精讲）

<html>  
	<head>  
		<script language="javascript">  
		
			function abc(a,b){  
				return a+b;  
			}  
			function abc(a,b,c){  
				return a+b+c;  
			}  
			window.alert(abc(1,2)); //这里会报错，因为return 1+2+undefined，无法返回，输出NaN  
			window.alert(abc(1,2,3)); //输出6  
			
		</script>  
	</head>  
	<body></body>  
</html>

<html>  
	<head>  
		<script language="javascript">  
			
			function abc(){  
				var s=0;  
				for(var i=0;i<arguments.length;i++){  
					s+=arguments[i];  
				}  
				return s;  
			}  
			window.alert(abc(1,2)); //输出3  
			window.alert(abc(7,8,9)); //输出24  
		</script>  
	</head>  
	<body></body>  
</html>

如果把上面两段代码合在一起呢？看下面：

<html>  
	<head>  
		<script language="javascript">  
		
			function abc(a,b){  
				return a+b;  
			}  
			function abc(a,b,c){  
				return a+b+c;  
			}  
			window.alert(abc(1,2)); //输出3
			window.alert(abc(1,2,3)); //输出6  
			
			function abc(){  
				var s=0;  
				for(var i=0;i<arguments.length;i++){  
					s+=arguments[i];  
				}  
				return s;  
			}  
			window.alert(abc(1,2)); //输出3  
			window.alert(abc(7,8,9)); //输出24  
		</script>  
	</head>  
	<body></body>  
</html>

下面是一些小练习：

D计划

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
韩顺平 javascript教学视频_学习笔记16_Object类_闭包_成员函数再说明_聪明的猪小练习

js面向（基于）对象编程—类（原型对象）与对象对象—Object类Object类是所有javascript类的基类，提供了一种创建自定义对象的简单方式，不需要程序员再定义构造函数。主要属性：constructor—对象的构造函数prototype—获得类的prototype对象static性质主要方法：hasOwnProperty(pro
复制链接

扫一扫