JavaScript中的面向对象介绍


Posted in Javascript onJune 30, 2012

对象
创建
对象
构造函数
公有、私有、特权、静态成员
this、call和apply
异常处理
继承
原型
对象
在JavaScript,可以说everything is object,那么什么是对象?对象就是包含一组变量和函数的集合。在其它面向对象语言中对象是由类的实例化而来,JavaScript是基于原型的面向对象语言,没有类的概念,对象派生自现有对象的副本。JavaScript中对象可以分为两类:Function和Object。

创建对象

为了提高效率,JavaScript自带内置对象,例如:Object、Function、Array等,所有内置对象都可以通过new来创建。Function对象分为两类:实例和构造函数。例如alert('my name is X')是Function的实例;而作为构造函数的Function,必须通过new来实例化。创建的对象的语法分为以下几种:

var obj= new Object();var obj={};(Array等类似) 
var myFunction=new Function(){//代码};function myFunction(){//代码}

需要注意的是,第一种Function声明必须在使用之前,而第二种可以在使用之后。

构造函数

Function是构造函数的起点,创建构造函数与上述创建对象Function类似

var myFunction=new Function('a',/*代码*/) 
function myFunction(a){ 
/*代码*/ 
}

但是由于第一种有性能问题推荐使用第二种;Function对象的特点是:它的实例也能作为构造函数 。

静态成员

如下代码:

var myObj= new Object(); 
//添加name属性 
myObj.name='LD'; 
//添加alertName方法 
myObj.alertName=function(){ 
alert(this.name); 
} 
//执行alertName 
myObj.alertName();

name和alertName仅仅存在于myObj实例中,不存在于构造函数。这个还好理解,但是对于既可以是构造函数也可以是实例的Function来说就不那么容易理解了,如下:
var myConstructor=new function(){ 
//添加静态属性 
myConstructor.name='LD'; 
//添加静态方法 
myConstructor.alertName=function(){ 
alert(this.nam); 
} 
} 
myConstructor.alertName();

代码可以正常运行,因为myConstructor可以是实例,但是name和alertName不会应用到由myConstructor的任何新的实例中。

公有成员

能够跟随对象实例化的成员称之为公有成员,成为公有成员需要修改函数的原型,即prototype。公有方法可以随构造函数而被继承下去,方法如下:

function myConstructor(){ 
} 
//添加公有属性 
myConstructor.prototype.myName='LD'; 
//实例化 
var myObj=new myConstructor(); 
alert(myObj.myName);

由myConstructor实例化的对象可以使用myName,但是myConstructor本身不可以,因为我们把公有成员加到了myConstructor的底层定义中,而非myConstructor实例本身。
私有成员
私有成员指的是在构造函数中定义的变量和方法,与其它语言的类中用private定义类似,例如:
function myConstructor(){ 
//添加私有属性 
var myName='Ld'l 
//添加私有方法 
var alertName=function(){ 
alert('LD'); 
} 
alertName();

特权成员

特权方法,指的是可以被公开访问,同时其能访问私有成员,在构造函数作用域总使用this定义的方法,类似其它语言中的公有方法,如下:

function myConstructor(){ 
//私有属性 
var sex='male'; 
// 特权方法 
this.alertSex=function(){ 
alert(sex); 
} 
}

对象字面量

前面我们使用的创建用的都是点,例如myConstructor.name=x;myConstructor.sex=x。我们也可以使用对象字面量来达到相同的目的,例如:

function myConstructor(){ 
} 
//添加公有成员 
myConstructor.prototype={ 
name:'LD', 
sex:'male', 
method:function(){} 
}

注意,对象字面量中分隔符为逗号,且最后一个属性或方法最后没有逗号,以防解析错误。
this、call和apply
this,是一个依赖于执行环境的关键字,与创建位置无关,this关键字指向的的是使用包含它的函数的对象,学过C++和其它语言来说,这个不难理解。
call和applay,这两个的作用强制把方法附加到某个对象,例如:
//alertName是已经创建好的函数 
//alertName不需要参数时 
alertName.call('对象') 
//alertName需要参数时 
alertName.call('对象',‘参数1','参数2') 
//alertName使用参数数组时 
alertName.applay('对象',‘参数数组arguments')

异常处理

和c#类似,由try、catch组成,如下:

function myFunction(){ 
window.style.color='red'; 
} 
try{ 
myFunction(); 
} 
catch{ 
alert('异常信息:'+exception.name + exception.message) 
}

继承和原型较多,放到下一篇博客《JavaScript中的继承和原型》
Javascript 相关文章推荐
让iframe自适应高度(支持XHTML,支持FF)
Jul 24 Javascript
javascript 必知必会之closure
Sep 21 Javascript
Javascript异步表单提交,图片上传,兼容异步模拟ajax技术
May 10 Javascript
jQuery学习笔记之创建DOM元素
Jan 19 Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(二)
Dec 10 Javascript
AngularJS $injector 依赖注入详解
Sep 14 Javascript
JavaScript实现倒计时跳转页面功能【实用】
Dec 13 Javascript
JS实现滑动门效果的方法详解
Dec 19 Javascript
jQuery时间验证和转换为标准格式的时间格式
Mar 06 Javascript
vue-router3.0版本中 router.push 不能刷新页面的问题
May 10 Javascript
ES6 Promise对象的应用实例分析
Jun 27 Javascript
jQuery实现回到顶部效果
Oct 19 jQuery
js中判断数字\字母\中文的正则表达式 (实例)
Jun 29 #Javascript
JavaScript 学习笔记之一jQuery写法图片等比缩放以及预加载
Jun 28 #Javascript
Fixie.js 自动填充内容的插件
Jun 28 #Javascript
Javascript的各种节点操作实例演示代码
Jun 27 #Javascript
妙用Jquery的val()方法
Jun 27 #Javascript
jQuery.extend 函数的详细用法
Jun 27 #Javascript
浅谈Javascript事件处理程序的几种方式
Jun 27 #Javascript
You might like
shopex中集成的站长统计功能的代码简单分析
2011/08/11 PHP
Laravel框架路由配置总结、设置技巧大全
2014/09/03 PHP
Linux系统下php获得系统分区信息的方法
2015/03/30 PHP
php接口技术实例详解
2016/12/07 PHP
javascript中处理时间戳为日期格式的方法
2014/01/02 Javascript
利用AJAX实现WordPress中的文章列表及评论的分页功能
2016/05/17 Javascript
Bootstrap标签页(Tab)插件使用方法
2017/03/21 Javascript
JavaScript实现写入文件到本地的方法【基于FileSaver.js插件】
2018/03/15 Javascript
微信小程序实现循环动画效果
2018/07/16 Javascript
通过图带你深入了解vue的响应式原理
2019/06/21 Javascript
jQuery-Citys省市区三级菜单联动插件使用详解
2019/07/26 jQuery
图解NodeJS实现登录注册功能
2019/09/16 NodeJs
webpack HappyPack实战详解
2019/10/08 Javascript
JS操作Fckeditor的一些常用方法(获取、插入等)
2020/02/19 Javascript
[59:48]LGD vs IG 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
使用Python中的greenlet包实现并发编程的入门教程
2015/04/16 Python
python conda操作方法
2019/09/11 Python
Python实现报警信息实时发送至邮箱功能(实例代码)
2019/11/11 Python
浅谈python累加求和+奇偶数求和_break_continue
2020/02/25 Python
Python基于requests实现模拟上传文件
2020/04/21 Python
keras中模型训练class_weight,sample_weight区别说明
2020/05/23 Python
python用Tkinter做自己的中文代码编辑器
2020/09/07 Python
python使用bs4爬取boss直聘静态页面
2020/10/10 Python
python中strip(),lstrip(),rstrip()函数的使用讲解
2020/11/17 Python
使用HTML5做个画图板的方法介绍
2013/05/03 HTML / CSS
巴西最大的在线约会网站:ParPerfeito
2018/07/11 全球购物
乐观大学生的自我评价
2014/01/10 职场文书
会计专业大学生职业生涯规划书
2014/02/11 职场文书
2014最新股权信托合同协议书
2014/11/18 职场文书
硕士毕业答辩开场白
2015/05/27 职场文书
信息技术研修心得体会
2016/01/08 职场文书
当你找不到方向的时候,不妨读读刘备的一生
2019/08/05 职场文书
Html5调用企业微信的实现
2021/04/16 HTML / CSS
ElementUI实现el-form表单重置功能按钮
2021/07/21 Javascript
Mysql中一千万条数据怎么快速查询
2021/12/06 MySQL
详细介绍Java中的CyclicBarrier
2022/04/13 Java/Android