• js面对对象编程


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


    好了,首先看看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看下执行结果。在这段很easy的代码中。我们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对象的方方面面。包含继承、封装和多态。



  • 相关阅读:
    eaysui 引用 CSS和JS 文件
    在JSP 页面中 添加CSS 样式
    Spring Hello World
    jsp+jdbc
    eclipse插件开发:使用emf建模型时,需要注意模型的坐标和大小的保存
    eclipse插件开发:GEF 进阶: Viewer
    Asp.net之MsChart控件动态绑定温度曲线图
    根据图中的盲点坐标,弹出div层
    小结get和Post的区别
    使用JavaC编译一个Java文件
  • 原文地址:https://www.cnblogs.com/jzssuanfa/p/6771196.html
Copyright © 2020-2023  润新知