js面对对象编程

最新推荐文章于 2025-03-02 17:53:06 发布

熊青峰

最新推荐文章于 2025-03-02 17:53:06 发布

阅读量3k

点赞数 2

分类专栏： web开发文章标签： javascript

本文链接：https://blog.youkuaiyun.com/xqf309/article/details/35814351

版权

web开发专栏收录该内容

8 篇文章

订阅专栏

说到js，很大一部分人会说我很熟悉，在日常的web开发中经常用，那么你的js代码是符合面对对象思路的吗？那你会问我面向过程的js代码有什么不好吗？我的感受是面对对象的js编码更加简洁，减少了混乱，可维护行增强，适合编写富客户端时应用。

好了，首先看看js里如何定义对象:

<html>
	<head>
		<script type="text/javascript">
			
			var obj=new Object();
			obj.name='josh';
			obj.age='26';
			console.log(obj.name);
			console.log(obj.age);
			
		</script>
	</head>
	<body>
	</body>
</html></span>

大家可以用firebug的console看下运行结果。在这段非常简单的代码中，我们new了一个Object型的对象，如果学过像java或C#这样面向对象语言的人，对这样的对象定义方式一定非常熟悉，只不过开头的变量定义换成了var，这是由于js是弱类型的缘故。

Object类型属于js的内置对象类型，定义了obj之后，我们给obj的name和age属性进行了赋值。这里需要注意的事，js的对象可以动态添加属性和方法，不像java，对象只能包含类的内容。我们在上面的代码中再添加两个方法：

var obj=new Object();
			obj.name='josh';
			obj.age='26';
			obj.getName=function(){
				return this.name;
			}
			obj.getAge=function(){
				return this.age;
			}
			console.log(obj.getName());
			console.log(obj.getAge());

既然能添加，也能删除:

var obj=new Object();
			obj.name='josh';
			obj.age='26';
			obj.getName=function(){
				return this.name;
			}
			obj.getAge=function(){
				return this.age;
			}
			delete obj.age;
			delete obj.getAge;
			console.log(obj.age);  //undefined
			console.log(obj.getAge()); //obj.getAge is not a function

那么js对象的动态添加属性方法的机制是什么呢？在最根本的层面上，js对象是一个属性的集合，非常类似于其他语言中的哈希表，或者在java里更为常用的map，因此我们可以再使用的任何时候，动态的添加属性或方法。

在js中，对象被认为是引用类型，为不同的变量赋相同对象的话，那么执行的就是同一对象

var obj=new Object();
			obj.name='josh';
			obj.age='26';
			obj.getName=function(){
				return this.name;
			}
			obj.getAge=function(){
				return this.age;
			}
			obj1=obj;
			obj.age='30';
			console.log(obj1.getAge());

好了，上面的用的object对象，属于js的内置对象，除了Object类型还有Function，Array，Date，Error，Regexp，这些内置对象类型都属于引用类型

var func=new Function('console.log("Hi");');
			var arr=new Array('Eric','lisa','josh');
			var date=new Date();
			var error=new Error("something bad happen");
			var reg=new RegExp('\\d+');

js还提供了5中原始类型：分别是Boolean，Number，String，Null，Undefined。

//string
			var name='Eric';
			var selection='a';
			
			//number
			var num=10;
			var f=1.1;
			
			//boolean
			var flag=false;
			
			//null
			var obj=null;
			
			//undefined
			var ref;

大家需要知道的事，Number类型既可以包含整形，也可以包含浮点型。这里也需要说说null和undefined的区别，undefined表示变量定义了，但未初始化，null表示对象不存在。

之所以介绍原始类型，是因为大家平常会见到这样的代码：

var name='Eric';
			var lowcasename=name.toLowerCase();   //eric
			var fistLetter=name.charAt(0);		  //E

就是在原始类型的的变量上调用了方法，这其实是js的内容为我们实现了一个装箱的机制

var name='Eric';
			// 将原始类型使用new建立了一个对应的对象类型
			var temp=new String(name);
			var lowcasename=temp.toLowerCase();   //eric
			var fistLetter=temp.charAt(0);		  //E

除了上述使用new的方式简历对象，还可以使用literal Form（字符串）的方式

//new object 的方式
var obj=new Object();
			obj.name='josh';
			obj.age='26';
			obj.getName=function(){
				return this.name;
			}
			obj.getAge=function(){
				return this.age;
			}
			
			//literal Form
			var obj1={
				name:'josh',
				age:'26',
				getName:function(){
					return this.name;
				},
				getAge:function(){
					return this.age;
				}
			}
			
			//new Array的方式
			var arr=new Array('Eric','lisa','josh');
			//literal Form
			var arr1=['Eric','lisa','josh'];

至此，本文讲了 js对象动态增删属性及其机制，js的内置原始类型和引用类型还有对象的两种定义方式，有了这些基础，我们后将陆续讲解js对象的方方面面，包括继承、封装和多态。