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 相关文章推荐
javascript:;与javascript:void(0)使用介绍
Jun 05 Javascript
js 立即调用的函数表达式如何写
Jan 12 Javascript
js写的方法实现上传图片之后查看大图
Mar 05 Javascript
javascritp添加url参数将参数加入到url中
Sep 25 Javascript
JavaScript 匿名函数和闭包介绍
Apr 13 Javascript
this,this,再次讨论javascript中的this,超全面(经典)
Jan 05 Javascript
javascript+css3 实现动态按钮菜单特效
Feb 06 Javascript
使用开源工具制作网页验证码的方法
Oct 17 Javascript
微信小程序之拖拽排序(代码分享)
Jan 21 Javascript
详解基于Node.js的HTTP/2 Server实践
May 31 Javascript
js jquery 获取某一元素到浏览器顶端的距离实现方法
Sep 05 jQuery
vue实现搜索功能
May 28 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
全国FM电台频率大全 - 18 湖南省
2020/03/11 无线电
php提交表单时判断 if($_POST[submit])与 if(isset($_POST[submit])) 的区别
2011/02/08 PHP
joomla jce editor 解决上传中文名文件失败问题
2013/06/09 PHP
smarty学习笔记之常见代码段用法总结
2016/03/19 PHP
php性能分析之php-fpm慢执行日志slow log用法浅析
2016/10/17 PHP
Yii框架实现多数据库配置和操作的方法
2017/05/25 PHP
PHP CURL使用详解
2019/03/21 PHP
Laravel 微信小程序后端搭建步骤详解
2019/11/26 PHP
JavaScript replace(rgExp,fn)正则替换的用法
2010/03/04 Javascript
js获取单选框或复选框值及操作
2012/12/18 Javascript
javascript实现des解密加密全过程
2014/04/03 Javascript
Javascript数组操作函数总结
2015/02/05 Javascript
jquery实现的代替传统checkbox样式插件
2015/06/19 Javascript
JavaScript中字面量与函数的基本使用知识
2015/10/20 Javascript
基于jQuery Tipso插件实现消息提示框特效
2016/03/16 Javascript
iScroll.js 使用方法参考
2016/05/16 Javascript
详解基于vue-cli优化的webpack配置
2017/11/06 Javascript
基于Angularjs-router动态改变Title值的问题
2018/08/30 Javascript
Angular resolve基础用法详解
2018/10/03 Javascript
JavaScript中常用的简洁高级技巧总结
2019/03/10 Javascript
JavaScript实现页面中录音功能的方法
2019/06/04 Javascript
原生js实现针对Dom节点的CRUD操作示例
2019/08/26 Javascript
pandas.DataFrame.to_json按行转json的方法
2018/06/05 Python
Python 中的lambda函数介绍
2018/10/10 Python
Python实现查找二叉搜索树第k大的节点功能示例
2019/01/24 Python
Python3中列表list合并的四种方法
2019/04/19 Python
在PYQT5中QscrollArea(滚动条)的使用方法
2019/06/14 Python
TensorBoard 计算图的查看方式
2020/02/15 Python
Python函数生成器原理及使用详解
2020/03/12 Python
伊莱克斯(Electrolux)俄罗斯网上商店:瑞典家用电器品牌
2021/01/23 全球购物
家居饰品店创业计划书
2014/01/31 职场文书
法学自荐信
2014/06/20 职场文书
运动会广播稿200字
2014/10/18 职场文书
付款承诺函范文
2015/01/21 职场文书
CSS实现漂亮的时钟动画效果的实例代码
2021/03/30 HTML / CSS
InterProcessMutex实现zookeeper分布式锁原理
2022/03/21 Java/Android