js面对对象编程

说到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对象的方方面面,包括继承、封装和多态。

js面对对象编程,布布扣,bubuko.com

时间: 2024-10-03 14:55:52

js面对对象编程的相关文章

js面对对象编程(二):属性和闭包

上篇博客中讲解了一些js对象的基本概念和用法,这篇博客讲解一下js属性方面的:公有属性,私有属性,特权方法. 如果学过java,公有属性,私有属性,特权方法(即可以访问和设置私有属性的方法)一定很熟悉,那么让我们来看看在js里如何实现呢? 1.公有属性 首先看公有的第一层意思是可以被大家所访问的,对外开放的属性,是相对于私有属性而言的: function Person(name,age){ this.name=name; this.age=age; this.getName=function()

手记面对对象编程

对于面对对象的基础, 什么是面对对象的编程的思想那,就是每一个对象都有他特有的方法,和属性.那编程的思想就是,我不去管你的方法原理,比就如,吹风机,可以吹风,我就拿了吹风,不用去管他怎么能吹出风.只要知道怎么用就行! 对象的方法,知道有什么用,需要的时候拿过来用就好! 创建对象的方法! 对象字面量的创建方法比较常用! 可以看出每一次创建对象我们都需要new 一下,减少new的次数,工厂模式 工厂模式也是有俩个缺点的 每个对象都有一套自己的方法,浪费资源(虽然对于现在的计算机来说不算什么,但我们尽

跟着百度学PHP[4]OOP面对对象编程-7-OOP的一些关键子讲解

面对对象常用的一些关键子:http://www.cnblogs.com/xishaonian/p/6146794.html排版不是很好望见谅. THE END 跟着百度学PHP[4]OOP面对对象编程-7-OOP的一些关键子讲解

跟着百度学PHP[4]OOP面对对象编程-5-内部引用$this

$this就是对象内部代表这个对象的引用 可以调用被封装的方法或者属性! <?php class Person{ private $name; private $age="21"; var $sex; function play(){ echo "他正在玩儿呢"; } private function Hello(){ //使用private封装hello方法.该方法不可直接调用.但是可以在内部使用$this调用. echo "这个是被封装的内容&q

跟着百度学PHP[4]OOP面对对象编程-12-抽象类

什么是抽象方法?我们在类里面定义的没有方法体的方法就是抽象方法.所谓的没有方法体指的是,在方法声明的时候没有大括号以及其中的内容,而是直接在声明时在方法名后加上分号结束,另外在声明抽象方法时还要加一个关键字“abstract”来修饰. 目录==================================== 1.声明一个抽象类,抽象方法(案例一) 2.继承一个抽象类(实例二) ======================================= 案例一 <?php abstract

跟着百度学PHP[4]OOP面对对象编程-12-对象接口技术(interface)

PHP与大多数面向对象编程语言一样,不支持多重继承.也就是说每个类只能继承一个父类. 接口正是解决每个类只能继承一个父类这个问题的 接口用什么权限,继承的那个方法也要使用什么权限. 接口的声明使用:interface 接口的继承使用:implements 目录++++++++++++++++++++++++++++++++++++++++++++ 00x1 接口的声明以及接口的引用(案例一) 00x2 如何继承多个接口(案例二) 00x3 判断某个对象是否实现了某个接口(案例三) +++++++

跟着百度学PHP[4]OOP面对对象编程-7-封装性private

所谓封装顾名思义,如同箱子般给封装起来.结合前面的来说就是对属性或者方法,封装后的方法或属性只能有类内部进行调用.外部调用不了. 封装性的好处: 1.信息隐藏 2.http://www.cnblogs.com/yisss/p/3412702.html 3.https://zhidao.baidu.com/question/2203595698703331308.html 目录------------------------------------- 00X1 进行封装 00x2 如何调用封装的属

跟着百度学PHP[4]OOP面对对象编程-6-构造方法(__construct)和构析方法(__destruct)

函数就是成员方法(方法有三:构造方法.成员方法.析构方法) 下面是两种方法. 构造方法和构析方法 00x1 构造方法 构造方法会在创建对象之后自动调用.其名称为__construct <?php class Student{ var $name; var $age; var $sex; function __construct(){ //可以从输出中看得出来,我们并没有输出这个方法,但是他自动输出了.这个就是构造方法的作用,会自动的被调用! echo "520PHP<br />

javascript面对对象编程 之继承

上一篇博客中为大家介绍了javascript面向对象编程原则的封装,今天为大家介绍继承,在javascript中没有类的概念,所有不能像c#,java语言那样,直接的用类去继承类.比如现在有比如,现在有一个"动物"对象的构造函数. function Animal(){ this.species = "动物"; } 还有一个"猫"对象的构造函数. function Cat(name,color){ this.name = name; this.co