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 相关文章推荐
js之WEB开发调试利器:Firebug 下载
Jan 13 Javascript
javascript开发技术大全-第3章 js数据类型
Jul 03 Javascript
artDialog双击会关闭对话框的修改过程分享
Aug 05 Javascript
jQuery实现响应鼠标背景变化的动态菜单效果代码
Aug 27 Javascript
JavaScript如何禁止Backspace键
Dec 02 Javascript
JavaScript判断用户名和密码不能为空的实现代码
May 16 Javascript
很实用的js选项卡切换效果
Aug 12 Javascript
浅谈JS继承_寄生式继承 & 寄生组合式继承
Aug 16 Javascript
微信小程序引用iconfont图标的方法
Oct 22 Javascript
vue表单数据交互提交演示教程
Nov 13 Javascript
超简单的微信小程序轮播图
Nov 22 Javascript
uni-app实现点赞评论功能
Nov 25 Javascript
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
php生成SessionID和图片校验码的思路和实现代码
2009/03/10 PHP
php数组函数序列之rsort() - 对数组的元素值进行降序排序
2011/11/02 PHP
php实现把数组按指定的个数分隔
2014/02/17 PHP
PHP递归调用数组值并用其执行指定函数的方法
2015/04/01 PHP
十个PHP高级应用技巧果断收藏
2015/09/25 PHP
PHP获取当前时间不准确问题解决方案
2020/08/14 PHP
图片动画横条广告带上下滚动的JS代码
2013/10/25 Javascript
js禁止页面使用右键(简单示例代码)
2013/11/13 Javascript
使用js简单实现了tree树菜单
2013/11/20 Javascript
javascript实现带节日和农历的日历特效
2015/02/01 Javascript
jQuery滚动条插件nanoscroller使用指南
2015/04/21 Javascript
浅谈javascript语法和定时函数
2015/05/03 Javascript
基于iscroll.js实现下拉刷新和上拉加载效果
2016/11/28 Javascript
bootstrap中模态框、模态框的属性实例详解
2017/02/17 Javascript
bootstrap table 多选框分页保留示例代码
2017/03/08 Javascript
轻松实现jQuery添加删除按钮Click事件
2017/03/13 Javascript
vue用addRoutes实现动态路由的示例
2017/09/15 Javascript
js实现开关灯效果
2020/03/30 Javascript
python 添加用户设置密码并发邮件给root用户
2016/07/25 Python
Android分包MultiDex策略详解
2017/10/30 Python
Python yield与实现方法代码分析
2018/02/06 Python
django利用request id便于定位及给日志加上request_id
2018/08/26 Python
python 限制函数执行时间,自己实现timeout的实例
2019/01/12 Python
Python提取频域特征知识点浅析
2019/03/04 Python
Python 处理文件的几种方式
2019/08/23 Python
python GUI库图形界面开发之PyQt5窗口背景与不规则窗口实例
2020/02/25 Python
python+selenium+chrome批量文件下载并自动创建文件夹实例
2020/04/27 Python
HTTP状态码详解
2021/03/18 杂记
使用Vue.js和MJML创建响应式电子邮件
2021/03/23 Vue.js
动物科学专业求职信
2014/07/27 职场文书
维稳工作情况汇报
2014/10/27 职场文书
一般基层干部群众路线教育实践活动个人对照检查材料
2014/11/04 职场文书
幼儿学前班评语
2014/12/29 职场文书
幼儿园六一主持词
2015/06/30 职场文书
Python趣味挑战之教你用pygame画进度条
2021/05/31 Python
Python可视化神器pyecharts绘制水球图
2022/07/07 Python