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 相关文章推荐
jQuery如何实现点击页面获得当前点击元素的id或其他信息
Jan 09 Javascript
javascript中Date()函数在各浏览器中的显示效果
Jun 18 Javascript
全面详细的jQuery常见开发技巧手册
Feb 21 Javascript
Javascript小技能总结(推荐)
Jun 02 Javascript
js实现滑动到页面底部自动加载更多功能
Feb 15 Javascript
Angularjs 手写日历的实现代码(不用插件)
Oct 18 Javascript
node.js基于fs模块对系统文件及目录进行读写操作的方法详解
Nov 10 Javascript
详解Webpack实战之构建 Electron 应用
Dec 25 Javascript
angularjs 缓存的使用详解
Mar 19 Javascript
详解Nuxt.js部署及踩过的坑
Aug 07 Javascript
深入理解Vue 组件之间传值
Aug 16 Javascript
jquery获取select选中值的文本,并赋值给另一个输入框的方法
Aug 21 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
音乐朗读剧《MARS RED》2021年TV动画化决定!
2020/03/06 日漫
php基础设计模式大全(注册树模式、工厂模式、单列模式)
2015/08/31 PHP
利用Fix Rss Feeds插件修复WordPress的Feed显示错误
2015/12/19 PHP
php之header的不同用法总结(实例讲解)
2017/11/28 PHP
总结PHP代码规范、流程规范、git规范
2018/06/18 PHP
Javascript入门学习资料收集整理篇
2008/07/06 Javascript
JavaScript 学习初步 入门教程
2010/03/25 Javascript
对xmlHttp对象的理解
2011/01/17 Javascript
改进UCHOME的记录发布,增强可访问性用户体验
2011/01/17 Javascript
jquery判断浏览器类型的代码
2012/11/05 Javascript
超炫的jquery仿flash导航栏特效
2014/11/11 Javascript
动态加载js、css的简单实现代码
2016/05/26 Javascript
Bootstrap被封装的弹层
2016/07/20 Javascript
window.open打开窗口被拦截的快速解决方法
2016/08/04 Javascript
解决Window10系统下Node安装报错的问题分析
2016/12/13 Javascript
纯js实现悬浮按钮组件
2016/12/17 Javascript
[02:44]重置世界,颠覆未来——DOTA2 7.23版本震撼上线
2019/12/01 DOTA
Python ORM框架SQLAlchemy学习笔记之数据查询实例
2014/06/10 Python
在Python下尝试多线程编程
2015/04/28 Python
python 写的一个爬虫程序源码
2016/02/28 Python
详解Django+Uwsgi+Nginx的生产环境部署
2018/06/25 Python
Django 实现Admin自动填充当前用户的示例代码
2019/11/18 Python
使用html2canvas.js实现页面截图并显示或上传的示例代码
2018/12/18 HTML / CSS
德国家具折扣店:POCO
2020/02/28 全球购物
颇特女士香港官网:NET-A-PORTER香港
2021/03/08 全球购物
面向对象编程是如何提高软件开发水平的
2014/05/06 面试题
致1500米运动员广播稿
2014/02/07 职场文书
我心目中的好老师活动方案
2014/08/19 职场文书
购房个人委托书范本
2014/10/11 职场文书
会计试用期自我评价
2015/03/10 职场文书
关于清明节的演讲稿2015
2015/03/18 职场文书
大卫科波菲尔读书笔记
2015/06/30 职场文书
2016三八妇女节慰问信
2015/11/30 职场文书
职场中的你,辞职信写对了吗?
2019/06/26 职场文书
2020年元旦晚会策划书模板
2019/12/30 职场文书
JS实现九宫格拼图游戏
2022/06/28 Javascript