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之软键盘实现(js源码)
Jan 30 Javascript
javascript 计算两个整数的百分比值
Dec 26 Javascript
jQuery使用toggleClass方法动态添加删除Class样式的方法
Mar 26 Javascript
javascript中Date format(js日期格式化)方法小结
Dec 17 Javascript
javascript基本语法
May 31 Javascript
AngularJS实现星星等级评分功能
Sep 24 Javascript
浅析JavaScript的几种Math函数,random(),ceil(),round(),floor()
Dec 22 Javascript
Angular.js中ng-if、ng-show和ng-hide的区别介绍
Jan 20 Javascript
vue组件发布到npm简单步骤
Nov 30 Javascript
微信小程序实现签到功能
Oct 31 Javascript
弱类型语言javascript中 a,b 的运算实例小结
Aug 07 Javascript
Vue-router编程式导航的两种实现代码
Mar 04 Vue.js
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求最大子序列和的算法实现
2011/06/24 PHP
php操作XML、读取数据和写入数据的实现代码
2014/08/15 PHP
PHP实现登录搜狐广告获取广告联盟数据的方法【附demo源码】
2016/10/14 PHP
Prototype Selector对象学习
2009/07/23 Javascript
jQuery 判断元素上是否绑定了事件
2009/10/28 Javascript
现如今最流行的JavaScript代码规范
2014/03/08 Javascript
JS实现模拟风力的雪花飘落效果
2015/05/13 Javascript
jQuery+HTML5实现图片上传前预览效果
2015/08/20 Javascript
基于jquery实现省市区三级联动效果
2015/12/25 Javascript
JS对HTML表格进行增删改操作
2016/08/22 Javascript
微信小程序 图片边框解决方法
2017/01/16 Javascript
canvas绘制的直线动画
2017/01/23 Javascript
jQuery中的deferred使用方法
2017/03/27 jQuery
axios全局注册,设置token,以及全局设置url请求网段的方法
2018/09/25 Javascript
vue+VeeValidate 校验范围实例详解(部分校验,全部校验)
2018/10/19 Javascript
微信小程序tabbar底部导航
2018/11/05 Javascript
JavaScript文本特效实例小结【3个示例】
2018/12/22 Javascript
jQuery实现消息弹出框效果
2019/12/10 jQuery
vue祖孙组件之间的数据传递案例
2020/12/07 Vue.js
[49:30]DOTA2-DPC中国联赛正赛 Dragon vs Dynasty BO3 第二场 3月4日
2021/03/11 DOTA
python和opencv实现抠图
2018/07/18 Python
pandas.dataframe按行索引表达式选取方法
2018/10/30 Python
Python中整数的缓存机制讲解
2019/02/16 Python
python实现多线程端口扫描
2019/08/31 Python
python GUI库图形界面开发之PyQt5线程类QThread详细使用方法
2020/02/26 Python
PyQT5 实现快捷键复制表格数据的方法示例
2020/06/19 Python
解决pytorch 模型复制的一些问题
2021/03/03 Python
利用Storage Event实现页面间通信的示例代码
2018/07/26 HTML / CSS
英国露营设备和户外服装购物网站:Simply Hike
2019/05/05 全球购物
N:Philanthropy官网:美国洛杉矶基础款服装
2020/06/09 全球购物
便利店的创业计划书
2014/01/15 职场文书
2014年教育教学工作总结
2014/11/13 职场文书
2015政治思想表现评语
2015/03/25 职场文书
身份证丢失证明
2015/06/19 职场文书
煤矿安全生产管理协议书
2016/03/22 职场文书
OpenCV-Python直方图均衡化实现图像去雾
2021/06/07 Python