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调试(不下载任何工具)
Apr 14 Javascript
javascript textarea光标定位方法(兼容IE和FF)
Mar 12 Javascript
JavaScript 放大镜 放大倍率和视窗尺寸
May 09 Javascript
JavaScript 盒模型 尺寸深入理解
Dec 31 Javascript
THREE.JS入门教程(1)THREE.JS使用前了解
Jan 24 Javascript
jsTree事件和交互以及插件plugins详解
Aug 29 Javascript
微信小程序利用canvas 绘制幸运大转盘功能
Jul 06 Javascript
JS实现数组的增删改查操作示例
Aug 29 Javascript
JS中使用cavas截图网页并解决跨域及模糊问题
Nov 13 Javascript
JS如何生成随机验证码
Mar 02 Javascript
小谈angular ng deploy的实现
Apr 07 Javascript
vue中的过滤器及其时间格式化问题
Apr 09 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
根德YB400的电路分析
2021/03/02 无线电
PHP中操作ini配置文件的方法
2013/04/25 PHP
php图像处理函数大全(推荐收藏)
2013/07/11 PHP
php警告Creating default object from empty value 问题的解决方法
2014/04/02 PHP
PHP Echo字符串的连接格式
2016/03/07 PHP
微信封装的调用微信签名包的类库
2017/06/08 PHP
PHP自动识别当前使用移动终端
2018/05/21 PHP
超级有用的13个基于jQuery的内容滚动插件和教程
2011/07/31 Javascript
jquery中子元素和后代元素的区别示例介绍
2014/04/02 Javascript
JavaScript也谈内存优化
2014/06/06 Javascript
node.js中的fs.realpath方法使用说明
2014/12/16 Javascript
Jquery-1.9.1源码分析系列(十一)之DOM操作
2015/11/25 Javascript
简单实现js间歇或无缝滚动效果
2016/06/29 Javascript
JS数字千分位格式化实现方法总结
2016/12/16 Javascript
RequireJs的使用详解
2017/02/19 Javascript
Web纯前端“旭日图”实现元素周期表
2017/03/10 Javascript
VUE页面中加载外部HTML的示例代码
2017/09/20 Javascript
微信小程序与后台PHP交互的方法实例分析
2018/12/10 Javascript
原生JS实现列表内容自动向上滚动效果
2019/05/22 Javascript
关于vue3.0中的this.$router.replace({ path: '/'})刷新无效果问题
2020/01/16 Javascript
JS运算符简单用法示例
2020/01/19 Javascript
python中使用enumerate函数遍历元素实例
2014/06/16 Python
Python使用urllib2模块抓取HTML页面资源的实例分享
2016/05/03 Python
python+pillow绘制矩阵盖尔圆简单实例
2018/01/16 Python
使用python存储网页上的图片实例
2018/05/22 Python
python实现逆序输出一个数字的示例讲解
2018/06/25 Python
python GUI库图形界面开发之PyQt5选项卡控件QTabWidget详细使用方法与实例
2020/03/01 Python
如何利用Python写个坦克大战
2020/11/18 Python
Fashion Eyewear美国:英国线上设计师眼镜和太阳镜的零售商
2016/08/15 全球购物
美国受欢迎的女性牛仔裤品牌:DL1961
2016/11/12 全球购物
公务员总结性个人自我评价
2013/12/05 职场文书
学生检讨书范文
2015/01/27 职场文书
公司环境卫生管理制度
2015/08/05 职场文书
企业内部管理控制:银行存款控制制度范本
2020/01/10 职场文书
python中requests库+xpath+lxml简单使用
2021/04/29 Python
SQL Server Agent 服务无法启动
2022/04/20 SQL Server