韩顺平 javascript教学视频_学习笔记12_js面向对象编程介绍_类(原型对象)和对象

javascript——面向对象

内容介绍
  1. js面向(基于)对象编程—类(原型对象)与对象(实例)
  2. js面向(基于)对象编程—构造方法和this

无论你是学习java,还是php或者c#都要对javascript要有深入的了解,现在的网页只要有动态效果就要用到javascript,javascript是必学内容,重点是学习javascript的面向对象编程。

学习目标:
  1. 初步掌握js中的类(原形对象)和对象
  2. 什么是成员变量和成员方法
  3. 掌握构造方法的使用

js面向对象特征介绍

javascript是一种面向(基于)对象的动态脚本语言,是一种基于对象(Object)和事件驱动(EventDriven)并具有安全性能的脚本语言。他具有面向对象语言所特有的各种特性,比如封装、继承及多态等。但对于大多数人说,我们只把javascript作为一个函数式语言,只把他用于一 些简单的前端数据输入验证及实现一些简单的页面动态效果等,我们没能完全把握动态语言的各种特性。在很多优秀的Ajax框架中,比如EXtJs、 JQuery等,大量使用了javascript的面向对象特性,要使用好ext技术,javascript的高级特性,面向对象语言特性是我们必须完全把握的。

封装:javascript只有私有和公有这两个封装方式
继承:不是通过关键字extends,而是通过对象冒充的方式来达到继承的效果
多态:javascript是天生的多态,它本身就无态,无态就是多态的一种体现。

在学习本章前,我们有必要给大家 明确几个概念,这样大家在后续学习中才不会犯晕:
  • javascript是一种基于对象(object-based)的语言,你遇到的所有东西几乎都是对象。

        特别说明:基于对象也好,面向对象也好实际上都是一对象的概念来编写程序,从本质上并无区别,所以这两个概念在我们的课程中是一样的。
  • 因为javascript中是没有class(类),它换了个名称,称为原型对象,这两个概念从在编程中发挥的作用看都是一个意思,为了统一叫法,我们这里就统一叫类。

澄清概念
在 js 中基于对象 == js 面向对象
在 js 中没有类class,但是它取了一个新的名字叫 原型对象,因此 类==原型对象

js面向(基于)对象编程——类(原型匹配)与对象


js面向(基于)对象
计算机语言的发展是向接近人的思维方式演变的,这是一个大趋势。
js引入了面向对象的思想,js不是纯面向对象的,我们可以认为它是基于面向对象的。

汇编语言  [面向机器]
c语言        [面向过程]
java语言   [面向对象]
js              [支持面向对象]

类(原型对象)和对象(实例)的区别和联系
  1. 类(原型对象)是抽象的,概念的,代表一类事物,比如人,猫...
  2. 对象是具体的,实际的,代表一个具体事物
  3. 类(原型对象)是对象实例的模版,对象实例是类的一个个体
类(原型对象)—如何自定义类(原型对象)和对象
  1. 工厂方法—使用new Object创建对象并添加相关属性
  2. 使用构造函数来定义类(原型对象)
  3. 使用prototype
  4. 构造函数及原型混合方式
  5. 动态原型方式

先讲第二种方法:
使用构造函数来定义类(原型对象)

基本语法:
function 类名/原型对象名(){}

创建对象:
var 对象名=new 类名();

对象—特别说明
  • 在js中一切都是对象
<html>  
	<head>  
		<script language="javascript">  
		
			    function Person(){  
				}  
				var a=new Person();  
				window.alert(a.constructor);//a对象实例的构造函数  
				window.alert(typeof a);//a的类型是什么  
				var b=123;  
				window.alert(b.constructor);//b对象实例的构造函数  
				window.alert(typeof b);//b的类型是什么  
				var c="123";  
				window.alert(c.constructor);//c对象实例的构造函数  
				window.alert(typeof c);//c的类型是什么   
				  
				//Person也是对象  再次说明了js中一切都是对象
				window.alert(Person.constructor); 
				  
				//思考:如何判断一个对象实例是不是Person类型?  
				if(a instanceof Person){   
					//如果这个实例是Person这种类型,会返回一个真,否则返回假  
					window.alert("a是person");  
				}  
				  
				//或者  
				if(a.constructor==Person){  
					//a对象实例的构造函数就是Person  
					window.alert("a是Person");  
				}  
			
		</script>  
	</head>  
	<body></body>  
</html>  

下面看一个对象的例子:

<html>  
	<head>  
		<script language="javascript">  
			
			//js中没有class,怎么定义原型对象或者类呢,用function  
  
			//这里就是定义一个Cat类。是一个类还是函数,主要看你怎么去用它  
			function Cat(){  
			}  
  
			//如果你这样用,很神奇,主要看你怎样用  
			// Cat();//就是函数  
			// var cat1=new Cat();//这就是类  
			//这时Cat1就是一个对象(实例)  
			//属性怎么给,javascript比较松散,可以动态的添加属性  
  
			var cat1=new Cat();  
  
			cat1.name="小白";  
			cat1.age=3;  
			cat1.color="白色";  
			
			//从上面的代码我们可以看出  
			//1.js中的对象的属性可以动态的添加  
			//2.属性没有限制  
  
			window.alert(cat1.name); //打印输出小白  
			
			//没有定义的会报undefined  
			window.alert(cat1.hobby);  
		</script>  
	</head>  
	<body></body>  
</html>  

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值