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实现控制经纬度显示地图与卫星
May 20 Javascript
js控制再次点击按钮之间的间隔时间可防止重复提交
Aug 01 Javascript
JS常用函数使用指南
Nov 23 Javascript
javascript中FOREACH数组方法使用示例
Mar 01 Javascript
JavaScript中instanceof运算符的使用示例
Jun 08 Javascript
JS中使用DOM来控制HTML元素
Jul 31 Javascript
为jQuery-easyui的tab组件添加右键菜单功能的简单实例
Oct 10 Javascript
简述Angular 5 快速入门
Nov 04 Javascript
一步步教会你微信小程序的登录鉴权
Apr 09 Javascript
超出JavaScript安全整数限制的数字计算BigInt详解
Jun 24 Javascript
微信小程序实现多个按钮的颜色状态转换
Feb 15 Javascript
js HTML DOM EventListener功能与用法实例分析
Apr 27 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
PHP动态生成javascript文件的2个例子
2014/04/11 PHP
php使用smtp发送支持附件的邮件示例
2014/04/13 PHP
php获取字符串前几位的实例(substr返回字符串的子串用法)
2017/03/08 PHP
checkbox 复选框不能为空
2009/07/11 Javascript
jQuery在vs2008及js文件中的无智能提示的解决方法
2010/12/30 Javascript
用js控制组织结构图可以任意拖拽到指定位置
2014/01/17 Javascript
js创建表单元素并使用submit进行提交
2014/08/14 Javascript
JavaScript判断数组是否包含指定元素的方法
2015/07/01 Javascript
JS 通过系统时间限定动态添加 select option的实例代码
2016/06/09 Javascript
好好了解一下Cookie(强烈推荐)
2016/06/14 Javascript
详解js界面跳转与值传递
2016/11/22 Javascript
Bootstrap CSS组件之分页(pagination)和翻页(pager)
2016/12/17 Javascript
react性能优化达到最大化的方法 immutable.js使用的必要性
2017/03/09 Javascript
bootstrap daterangepicker汉化以及扩展功能
2017/06/15 Javascript
关于javascript sort()排序你可能忽略的一点理解
2017/07/18 Javascript
你有必要知道的10个JavaScript难点
2017/07/25 Javascript
解决vue+webpack打包路径的问题
2018/03/06 Javascript
node基于puppeteer模拟登录抓取页面的实现
2018/05/09 Javascript
NodeJS搭建HTTP服务器的实现步骤
2018/10/12 NodeJs
快速了解Vue父子组件传值以及父调子方法、子调父方法
2020/07/15 Javascript
jQuery实现带进度条的轮播图
2020/09/13 jQuery
Javascript confirm多种使用方法解析
2020/09/25 Javascript
python3第三方爬虫库BeautifulSoup4安装教程
2018/06/19 Python
使用Python自动生成HTML的方法示例
2019/08/06 Python
tensorflow 查看梯度方式
2020/02/04 Python
Python 必须了解的5种高级特征
2020/09/10 Python
Python实现加密的RAR文件解压的方法(密码已知)
2020/09/11 Python
莱德杯高尔夫欧洲官方商店:Ryder Cup Shop
2019/08/14 全球购物
您在慕尼黑的跑步商店:Lauf-bar
2019/10/11 全球购物
法国滑雪假期的专家:Ski Planet
2019/11/02 全球购物
线程的基本概念、线程的基本状态以及状态之间的关系
2012/10/26 面试题
EJB包括(SessionBean,EntityBean)说出他们的生命周期,及如何管理事务的
2015/07/24 面试题
创业者是否需要商业计划书?
2014/02/07 职场文书
客户接待方案
2014/02/26 职场文书
党小组考察意见
2015/06/02 职场文书
【海涛解说】史上最给力比赛,挑战DOTA极限
2022/04/01 DOTA