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

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

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

    上篇博客中解说了一些js对象的基本概念和使用方法.这篇博客解说一下js属性方面的:公有属性.私有属性,特权方法. 假设学过java.公有属性.私有属性,特权方法(即能够訪问和设置私有属性的方法)一定非 ...

  2. 对js 面对对象编程的一些简单的理解

    由简单开始深入: 最简单的 直接对象开始 var desen = { age:24, name:'xyf', job:'fontEnd', getName:function(){ console.lo ...

  3. python面对对象编程----2:__init__

    面对对象编程估计我们最早接触到的就是__init__了,也就是实例的初始化处理过程: 1:来看看最基础的__init__ class Card(object): #抽象类Card,并不用于实例化 de ...

  4. 面对对象编程(OOP, Object Oriented Programming)及其三个基本特性

    一千个读者,一千个哈姆雷特.对于面对对象编程,书上都会告诉我们它有三个基本特性,封装,继承,多态,但谈起对这三点的见解,又是仁者见仁智者见智,感觉还是得多去编程中体验把 . 面向对象编程(OOP, O ...

  5. Python学习6——再谈抽象(面对对象编程)

    1.对象魔法 在面对对象编程中,术语对象大致意味着一系列数据(属性)以及一套访问和操作这些数据的方法. 使用对象而非全局变量以及函数的原因有多个,而最重要的好处不过以下几点: 多态:可对不同类型的对象 ...

  6. C++ 基础语法 快速复习笔记---面对对象编程(2)

    1.C++面对对象编程: a.定义: 类定义是以关键字 class 开头,后跟类的名称.类的主体是包含在一对花括号中.类定义后必须跟着一个分号或一个声明列表. 关键字 public 确定了类成员的访问 ...

  7. Day-8: 面对对象编程

    面对过程的程序设计方法意在将函数分成子函数,再依次调用这些函数来解决问题. 而面对对象的程序设计方法,来源于自然界,类是实例的抽象,实例是类的具体.自定义出来的对象是类,而所有的数据都可以看成是对象, ...

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

    面对对象常用的一些关键子:http://www.cnblogs.com/xishaonian/p/6146794.html排版不是很好望见谅. THE END

  9. 跟着百度学PHP[4]-OOP面对对象编程-1-什么是面对对象编程

    该阶段学习参考:http://www.cnblogs.com/xiaochaohuashengmi/archive/2010/09/10/1823042.html 面向对象编程(Object Orie ...

随机推荐

  1. 安装jenkins插件的两种方法

    安装jenkins插件有两种方法,一种是在线安装,一种是离线安装.两种方式介绍如下: 1.如果服务器可以上网,那边选择在线安装最好不过了,安装流程为:系统管理----插件管理---选择需要的插件直接安 ...

  2. Word文档打不开怎么办

    目前一些主流的办公软件给大家日常工作带来了很大便利,比如:Microsoft Office或金山WPS!我们在愉快地使用它们的同时,多少也遇到了一些让人尴尬或头疼的问题,比如:精心制作的文档,突然打不 ...

  3. Python学习笔记(一)类和继承的使用

    一年前就打算学Python了,折腾来折腾去也一直没有用熟练,主要是类那一块不熟,昨天用Python写了几个网络编程的示例,感觉一下子迈进了很多.这几天把学习Python的笔记整理一下,内容尽量简洁. ...

  4. STL学习笔记(已序区间算法)

    针对已序区间执行的算法,执行前提是源区间必须在某个排序准则下已序. 搜寻元素(Searching) 1.检查某个元素是否存在 bool binary_search(ForwardIterator be ...

  5. 基于Android平台的简易人脸检测库

    代码地址如下:http://www.demodashi.com/demo/12135.html ViseFace 简易人脸检测库,不依赖三方库,可快速接入人脸检测功能. 项目依赖:compile 'c ...

  6. WebStorm初次使用

    1. ctrl + / : 单行注释2. ctrl + shift + / : 块注释 3:展开当前函数代码:Ctrl+“+”,收起当前代码:Ctrl+“-” 4:全局查找: Ctrl+Shift+F ...

  7. LeetCode226 InvertBinaryTree Java题解

    题目: Invert a binary tree. 4 / \ 2 7 / \ / \ 1 3 6 9 to 4 / \ 7 2 / \ / \ 9 6 3 1 解答: 遍历每个节点  直接交换他们的 ...

  8. iOS 提交应用到appStore报错ITMS-90xxx

    1.ITMS-90535 解决办法:全局文件搜索info.plist 删除掉报错的第三方中的info.plist,再重新打包,注意不要删除自己项目中的info.plist

  9. [译]GLUT教程 - 子菜单

    Lighthouse3d.com >> GLUT Tutorial >> Pop-up Menus >> Sub Menus 上一节我们介绍了如何创建普通菜单和如果 ...

  10. Vue.js 2 入门与提高(一)

    ** Vue.js -- 渐进式前端框架 ** Vue.js作为一个后起的前端框架,借鉴了Angular .React等现代前端框架/库的诸多特点,并且 取得了相当不错的成绩. Vue.js的定位是一 ...