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 相关文章推荐
最流行的Node.js精简型和全栈型开发框架介绍
Feb 26 Javascript
JS实现具备延时功能的滑动门菜单效果
Sep 17 Javascript
AngularJS仿苹果滑屏删除控件
Jan 18 Javascript
JQuery+EasyUI轻松实现步骤条效果
Feb 22 Javascript
在React框架中实现一些AngularJS中ng指令的例子
Mar 06 Javascript
Angular 应用技巧总结
Sep 14 Javascript
node.js路径处理方法以及绝对路径详解
Mar 04 Javascript
Vue组件库发布到npm详解
Feb 17 Javascript
jQuery+Datatables实现表格批量删除功能【推荐】
Oct 24 jQuery
PM2自动部署代码步骤流程总结
Dec 10 Javascript
详解微信小程序之提高应用速度小技巧
Jan 07 Javascript
JS数组进阶示例【数组的几种函数用法】
Jan 16 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
在DC的漫画和电影中,蝙蝠侠的宿敌,小丑的真名是什么?
2020/04/09 欧美动漫
mysql From_unixtime及UNIX_TIMESTAMP及DATE_FORMAT日期函数
2010/03/21 PHP
php 中文和编码判断代码
2010/05/16 PHP
discuz加密解密函数使用方法和中文注释
2014/01/21 PHP
Laravel框架源码解析之模型Model原理与用法解析
2020/05/14 PHP
JavaScript入门教程(5) js Screen屏幕对象
2009/01/31 Javascript
JS trim去空格的最佳实践
2011/10/30 Javascript
js模拟滚动条(横向竖向)
2013/02/22 Javascript
JS去掉第一个字符和最后一个字符的实现代码
2014/02/20 Javascript
jquery模拟LCD 时钟的html文件源代码
2014/06/16 Javascript
AngularJS入门教程(零):引导程序
2014/12/06 Javascript
React Router基础使用
2017/01/17 Javascript
canvas时钟效果
2017/02/16 Javascript
Vue.js原理分析之observer模块详解
2017/02/17 Javascript
ReactJS实现表单的单选多选和反选的示例
2017/10/13 Javascript
基于vue-cli vue-router搭建底部导航栏移动前端项目
2018/02/28 Javascript
JavaScript 2018 中即将迎来的新功能
2018/09/21 Javascript
node实现分片下载的示例代码
2018/10/17 Javascript
vue+element-ui JYAdmin后台管理系统模板解析
2020/07/28 Javascript
用Pygal绘制直方图代码示例
2017/12/07 Python
python调用系统ffmpeg实现视频截图、http发送
2018/03/06 Python
python文本数据相似度的度量
2018/03/12 Python
PyQt弹出式对话框的常用方法及标准按钮类型
2019/02/27 Python
django模板结构优化的方法
2019/02/28 Python
Python PIL读取的图像发生自动旋转的实现方法
2019/07/05 Python
Python垃圾回收机制三种实现方法
2020/04/27 Python
利用CSS3动画实现圆圈由小变大向外扩散的效果实例
2018/09/10 HTML / CSS
HTML5到底会有什么发展?HTML5的前景展望
2015/07/07 HTML / CSS
Mankind西班牙男士护肤品网站:购买皮肤护理、护发和剃须
2017/04/27 全球购物
拉夫劳伦爱尔兰官方网站:Ralph Lauren爱尔兰
2020/04/10 全球购物
Farfetch澳大利亚官网:Farfetch Australia
2020/04/26 全球购物
中文系师范生自荐信
2013/10/01 职场文书
2014镇副书记群众路线专题民主生活会思想汇报
2014/09/23 职场文书
新党员入党决心书
2015/09/22 职场文书
毕业生求职自荐信(2016最新版)
2016/01/28 职场文书
Pytorch中的数据集划分&正则化方法
2021/05/27 Python