SlideShare a Scribd company logo
面向对象的 js 湖南博源科技有限公司 程鹏 2009.2
面向对象的 js 对象和属性 构造函数 方法 原型对象和继承 面向对象的 JavaScript
对象和属性 对象的创建 使用 new 运算符创建对象 var o = new Object(); var now = new Date(); 使用对象直接量创建并初始化对象 var circle = { x:0, y:0, radius:2 }; var person = { name:  “John”, age: 30, married: true };   (sample1)
对象和属性 属性的设置和查询 通常使用“ .” 运算符来存取对象的属性。 var book = new Object(); book.title = “Javascript reference”; alert(book.title); js 可以通过赋值来创建对象的属性。 创建属性时不需要使用关键字“ var” 。 属性创建后可以在任何时间修改它的值。
对象和属性 属性的枚举 使用 for/in 循环来枚举对象的属性。 function displayPropertyNames(obj) { var names = “”; for (var name in obj) names += name + “\n”; alert(names); }( sample2 ) 这种方法 可以枚举所有用户自定义的属性,但是不能枚举出某些预定义的属性或方法。
对象和属性 未定义的属性 读取不存在的属性时,结果是” undefined” 。 var o = new Object(); alert(o.title); 使用运算符 delete 来删除一个对象的属性。 var o = new Object(); o.title=“javascript reference”; delete o.title; ( sample3 )
构造函数 构造函数是具有两个特性的 JavaScript 函数: 它由 new 运算符调用。 传递给它的是一个对新创建的空对象的引用,将该引用作为关键字 this 的值,而且它还要对新创建的对象进行适当的初始化。 function  Rectangle(w, h) { this.width = w; this.height = h; } var rect1  = new Rectangle(2, 4); 构造函数通常没有返回值,但是它可以返回一个对象,如果这样做,被返回的对象将成为 new 表达式的值,而 this 所引用的对象将被丢弃。
方法 方法就是通过对象调用的 JavaScript 函数。 方法的定义方式与属性的定义方式相同。 var o = new Object(); o.m = function() {alert(“method”);}; o.m(); 方法有一个非常重要的属性:在方法体内部,关键字 this 是调用该方法的对象。
方法 使用构造函数定义方法 function Rectangle(w, h) { this.width = w; this.height = h; this.area = function() { return this.width * this.height; } }  var rect2 = new Rectangle(3, 5); alert(rect2.area());  ( sample4 )
原型对象和继承 每个对象都有原型对象 JavaScript 对象都继承原型对象的所有属性 一个对象的原型对象是由创建并初始化该对象的构造函数定义的。 使用原型对象可以大量减少对象对内存的需求 即使属性在对象被创建后才添加到它的原型对象中,对象也可以继承这些属性。 继承只发生在读属性值的时候,写属性值时不发生继承而是创建新属性。
原型对象和继承 内部类也有原型对象。 String.prototype.endWith = function(c) { return c == this.charAt(this.length – 1); } var message = “hello”; message.endWith(“h”);  // 返回 false message.endWith(“o”);  // 返回 true ( sample5 )
面向对象的 JavasScript JavaScript 没有类的概念, JavaScript 采取以原型对象为基础的继承机制。 使用 JavaScript 模拟 Java 类的实现 实例属性 实例方法 类属性 类方法 超类和子类 作为关联数组的对象 对象的属性和方法
实例属性 每个对象都有单独的实例属性的副本 Circle 类中有 r 属性,那么每个 Circle 对象的实例都会有一个 r 属性。 实例属性是通过实例存取的。 c.r = 3; 默认情况下, JavaScript 中的任何对象属性都是实例属性。 为了真实地模拟面向对象的程序设计语言,我们把那些在对象中用构造函数创建或初始化的属性称为实例属性。
实例方法 实例方法和实例属性非常相似,只是它是方法而不是值。 每个实例方法都是由类的所有实例共享的,而不是有自己的副本。 实例方法使用关键字 this 来引用它们要操作的对象或实例。 JavaScript 中,给类定义一个实例方法是通过把构造函数的原型对象中的一个属性设置为函数值来实现的。 function Circle(radius) { this.r = radius; } Circle.prototype.area = function() { return 3.14 * this.r * this.r; } ( sample6 )
类属性 类属性是一个与类相关联的变量,而不是和类的每个实例相关联的变量,无论一个类创建多少个实例,每个类属性都只有一个副本。 类属性是通过类存取的。 JavaScript 中,通过定义构造函数自身的属性来定义类属性。 例如,定义 Circle 类的 PI 属性: Circle.PI = 3.14;
类 方法 类方法是一个与类关联在一起的方法,要调用类方法,就必须使用类本身,而不能使用该类的特定实例。 在类方法中使用关键字 this 没有意义。 在 JavaScript 中定义类的方法只需要用合适的方法作为构造函数的属性即可。
超类和子类 在 JavaScript 中类 Object 是最通用的类,其他类都是 Object 的子类。 JavaScript 中通过 prototype 实现超类和子类之间的继承关系。 多级继承时,子类的同名属性或方法会覆盖父类的属性或方法。
作为关联数组的对象 使用属性名的字符串来引用属性 object.property == object[“property”] 在 预先不知道属性名的时候,可以使用关联数组来存取属性 例如,有一个名为 portfolio 的对象保存了每支股票的名字以及每支股票的数量,我们使用 portfolio.ibm 就可以得到拥有 ibm 股票的数量。 如果用户输入的股票名称保存在变量 stock_name 中,则无法用“ .” 运算符来存取对象 portfolio 的属性,但是可以使用“ []” 来存取: portfolio[stock_name]
对象的属性和方法 constructor 属性 toString() 方法 toLocaleString() 方法 valueOf() 方法 hasOwnProperty() 方法 isPrototypeOf() 方法
constructor 属性 每个对象都具有 constructor 属性,它引用的是用来初始化该对象的构造函数。 var o = new Rectangle(1, 2) o.constructor == Rectangle; // 值为 true 该属性是从原型对象继承来的。 原型对象创建之初,包括一个 constructor 属性,用来引用构造函数。 例,如果存在函数 f ,则 f.prototype.constructor 总是等于 f (除非将它设为别的值)。 constructor 在确定给定对象的类型时是一个功能强大的工具。 例,下列代码可以用来确定一个未知对象的类型: if ((typeof o == “object”) && (o.constructor == Date)) // 然后用 Date 对象做一些操作。 不能保证 constructor 属性总是存在的。例如使用一个全新的对象来替换构造函数的原型对象,而新对象可能不具有有效的 constructor 属性。 ( sample7 )
toString() 方法 toString() 没有任何实际参数,档 JavaScript 需要将一个对象转换成字符串时就调用这个对象的 toString() 方法。 我们可以自定义 toString() 方法来替换默认的方法。 Object .prototype.toString.apply(object) 方法总是调用默认的 toString() 方法。
valueOf() 方法 valueOf() 方法与 toString() 方法非常相似,当 JavaScript 需要把一个对象转换成字符串以外的原始类型 ( 通常是数字 ) 时,就需要调用它。 valueOf() 方法返回 this 所引用的对象的值的数据。
hasOwnProperty() 方法 如果对象局部定义了一个非继承的属性,属性名是由一个字符串实际参数指定的,那么该方法返回 true ,否则返回 false 。 例: var o = new Object(); o.hasOwnProperty(“undef”); // false: 未定义 o.hasOwnProperty( “toString”); //false: 继承属性 Number.hasOwnProperty(“MAX_VALUE”); //true
isPrototypeOf() 方法 如果调用对象是实际参数指定的对象的原型对象,该方法返回 true ,否则返回 false 。 例: var o = new Object(); o.isPrototypeOf(Object); // false Object.isPrototypeOf(o ); //  false Object.prototype.isPrototypeOf(o); // true Function.prototype.isPrototypeOf(Object); // true
谢谢!

More Related Content

PDF
05 MapKit and Text Input
Tom Fan
 
PDF
02 Objective-C
Tom Fan
 
PPTX
Python面向对象开发基础篇
modou li
 
PPTX
Javascript share
Xu Mac
 
PPTX
jQuery源码学习
fangdeng
 
PDF
[圣思园][Java SE]Reflection
ArBing Xie
 
PDF
進階主題
Justin Lin
 
PPTX
jQuery 選取器解析
Kingsley Zheng
 
05 MapKit and Text Input
Tom Fan
 
02 Objective-C
Tom Fan
 
Python面向对象开发基础篇
modou li
 
Javascript share
Xu Mac
 
jQuery源码学习
fangdeng
 
[圣思园][Java SE]Reflection
ArBing Xie
 
進階主題
Justin Lin
 
jQuery 選取器解析
Kingsley Zheng
 

What's hot (20)

PPT
2011中正資管學術部講座 Java-Object
Veck Hsiao
 
PPT
Sun java
softwaredesigner
 
PDF
《Python 3.5 技術手冊》第六章草稿
Justin Lin
 
PPTX
Ecma script edition5-小试
lydiafly
 
PPTX
Js的国(转载)
Leo Hui
 
PPT
Java Script 引擎技术
bigqiang zou
 
KEY
冲浪 Object-c
jeff kit
 
PPTX
5, initialization & cleanup
ted-xu
 
PDF
從模組到類別
Justin Lin
 
PDF
9. 資料結構
Justin Lin
 
PPT
Javascript oop-o52tiger
o52tiger
 
PDF
5. 從模組到類別
Justin Lin
 
PPT
Flash基于对象的优化技术 黄炎中
FLASH开发者交流会
 
PDF
第二章
贺 利华
 
PDF
I os 02
信嘉 陳
 
PDF
03 Managing Memory with ARC
Tom Fan
 
PDF
Java script 的物件
meebox
 
PPTX
浅尝jQuery
fangdeng
 
ODP
JavaScript Advanced Skill
firestoke
 
PPT
14 hibernate hql查询1
Zelin Wang
 
2011中正資管學術部講座 Java-Object
Veck Hsiao
 
《Python 3.5 技術手冊》第六章草稿
Justin Lin
 
Ecma script edition5-小试
lydiafly
 
Js的国(转载)
Leo Hui
 
Java Script 引擎技术
bigqiang zou
 
冲浪 Object-c
jeff kit
 
5, initialization & cleanup
ted-xu
 
從模組到類別
Justin Lin
 
9. 資料結構
Justin Lin
 
Javascript oop-o52tiger
o52tiger
 
5. 從模組到類別
Justin Lin
 
Flash基于对象的优化技术 黄炎中
FLASH开发者交流会
 
第二章
贺 利华
 
I os 02
信嘉 陳
 
03 Managing Memory with ARC
Tom Fan
 
Java script 的物件
meebox
 
浅尝jQuery
fangdeng
 
JavaScript Advanced Skill
firestoke
 
14 hibernate hql查询1
Zelin Wang
 
Ad

Viewers also liked (9)

PDF
REFERENCE - MARITIME - PA. PRO.ADMIN & HR OFFICER
Maria Raju
 
PDF
Omar Romero Urban Latino Article
Lulaine Compere
 
PDF
Truyện Dragon ball tập 27
Đặng Ngọc Thọ
 
PPTX
Pares craneales2
Joaquin Candia Nogales
 
PPT
性能测试实践1
yiditushe
 
PPT
Actividad 3.2
Darwin Veliz Reyes
 
DOCX
La educación en un mundo global (1)
Génesis Morillo Rojas
 
PDF
Cuerpo humano atlas visual
NORELYS SANTOS
 
PPTX
Gender discrimination in india
Nikunj Agrawal
 
REFERENCE - MARITIME - PA. PRO.ADMIN & HR OFFICER
Maria Raju
 
Omar Romero Urban Latino Article
Lulaine Compere
 
Truyện Dragon ball tập 27
Đặng Ngọc Thọ
 
Pares craneales2
Joaquin Candia Nogales
 
性能测试实践1
yiditushe
 
Actividad 3.2
Darwin Veliz Reyes
 
La educación en un mundo global (1)
Génesis Morillo Rojas
 
Cuerpo humano atlas visual
NORELYS SANTOS
 
Gender discrimination in india
Nikunj Agrawal
 
Ad

Similar to 面向对象的Js培训 (20)

PPT
Javascript之昨是今非
Tony Deng
 
PPT
Js培训
yiditushe
 
PDF
Javascript
Ryan Chung
 
PDF
Java script closures
skywalker1114
 
PDF
Java script closures
skywalker1114
 
PDF
潜力无限的编程语言Javascript
jay li
 
PDF
所谓闭包
youzitang
 
PPT
Spring框架
eastsky
 
PPTX
所谓闭包
ilovey4
 
PPT
J Query Learn
guestfb42fc
 
PDF
16 CoreData
Tom Fan
 
PPT
Hibernate教程
Shilong Sang
 
PPT
hibernate
peterkong
 
PPT
组合、备忘录、建造者模式、原型
诸葛修车网-诸葛商城
 
PPT
Web设计 4 锋利的j_query(进入企业级应用阶段)
ziggear
 
ODP
Backbone js and requirejs
Chi-wen Sun
 
PPT
Hibernate
Henry Huang
 
PDF
JavaScript 技術手冊第 5 章
Justin Lin
 
PDF
jQuery底层架构
fangdeng
 
PPTX
About closure
otakustay
 
Javascript之昨是今非
Tony Deng
 
Js培训
yiditushe
 
Javascript
Ryan Chung
 
Java script closures
skywalker1114
 
Java script closures
skywalker1114
 
潜力无限的编程语言Javascript
jay li
 
所谓闭包
youzitang
 
Spring框架
eastsky
 
所谓闭包
ilovey4
 
J Query Learn
guestfb42fc
 
16 CoreData
Tom Fan
 
Hibernate教程
Shilong Sang
 
hibernate
peterkong
 
组合、备忘录、建造者模式、原型
诸葛修车网-诸葛商城
 
Web设计 4 锋利的j_query(进入企业级应用阶段)
ziggear
 
Backbone js and requirejs
Chi-wen Sun
 
Hibernate
Henry Huang
 
JavaScript 技術手冊第 5 章
Justin Lin
 
jQuery底层架构
fangdeng
 
About closure
otakustay
 

More from yiditushe (20)

DOC
Spring入门纲要
yiditushe
 
PDF
J Bpm4 1中文用户手册
yiditushe
 
PPT
性能测试实践2
yiditushe
 
PPT
性能测试技术
yiditushe
 
PPT
Load runner测试技术
yiditushe
 
PPT
J2 ee性能测试
yiditushe
 
PDF
Flex3中文教程
yiditushe
 
PDF
开放源代码的全文检索Lucene
yiditushe
 
PDF
基于分词索引的全文检索技术介绍
yiditushe
 
PDF
Lucene In Action
yiditushe
 
DOC
Lucene2 4学习笔记1
yiditushe
 
DOC
Lucene2 4 Demo
yiditushe
 
PDF
Lucene 全文检索实践
yiditushe
 
PDF
Lucene 3[1] 0 原理与代码分析
yiditushe
 
PPT
7 面向对象设计原则
yiditushe
 
PPT
10 团队开发
yiditushe
 
PPT
9 对象持久化与数据建模
yiditushe
 
PPT
8 Uml构架建模
yiditushe
 
PPT
6 架构设计
yiditushe
 
PPT
5 架构分析
yiditushe
 
Spring入门纲要
yiditushe
 
J Bpm4 1中文用户手册
yiditushe
 
性能测试实践2
yiditushe
 
性能测试技术
yiditushe
 
Load runner测试技术
yiditushe
 
J2 ee性能测试
yiditushe
 
Flex3中文教程
yiditushe
 
开放源代码的全文检索Lucene
yiditushe
 
基于分词索引的全文检索技术介绍
yiditushe
 
Lucene In Action
yiditushe
 
Lucene2 4学习笔记1
yiditushe
 
Lucene2 4 Demo
yiditushe
 
Lucene 全文检索实践
yiditushe
 
Lucene 3[1] 0 原理与代码分析
yiditushe
 
7 面向对象设计原则
yiditushe
 
10 团队开发
yiditushe
 
9 对象持久化与数据建模
yiditushe
 
8 Uml构架建模
yiditushe
 
6 架构设计
yiditushe
 
5 架构分析
yiditushe
 

Recently uploaded (20)

DOC
加急办理(美国UH毕业证文凭)哈特福德大学毕业证书毕业证和学位证
bammy402712
 
DOC
在线购买(UM毕业证学位证)迈阿密大学毕业证书中留服认证证书
tynufbendf
 
DOC
一模一样(Rice毕业证文凭)莱斯大学毕业证书本科毕业证
ysuhdh254
 
DOC
学校原版(美国PSU毕业证文凭)波特兰州立大学毕业证书学位证书范本
qyymdbsdb
 
DOC
在线办理(美国UCD毕业证学位证)加州大学戴维斯分校毕业证书文凭学历证书
uhtkaebnfn
 
DOC
出售(WLU毕业证)威尔弗里德劳雷尔大学毕业证书成绩单
ncaxack2
 
PDF
《商業簡史》《商業簡史》《商業簡史》《商業簡史》《商業簡史》《商業簡史》《商業簡史》
powerdd
 
DOC
如何购买(美国JSU毕业证文凭)杰克逊州立大学毕业证书正式成绩单
jessibjastubbar11
 
DOC
真实可查(UMD毕业证学位证)马里兰大学毕业证书硕士学历证书
ilauoca9
 
DOC
加急制作(GSU毕业证学位证)乔治亚州立大学毕业证书成绩单分数修改
athenarevington9
 
DOC
学分不够(澳大利亚UNSW毕业证学位证)新南威尔士大学毕业证书本科学位
bammy402712
 
DOC
买(美国USA毕业证文凭)南阿拉巴马大学毕业证书续费收据
bammy402712
 
DOCX
lsat online代考过程中断网一次就必被 Hold 吗?-mexma.net
testhelper Sobrenome
 
DOC
原版定制(巴黎四大毕业证)巴黎第四大学毕业证书毕业证书扫描件
ayxtyzf24
 
DOC
学分不够(UM毕业证文凭)墨尔本大学毕业证书硕士文凭
ahuqowobd
 
DOC
办理(法国毕业证学位证)南锡一大毕业证书学位证书电子版
bqyhexcbd
 
DOC
一模一样(法国毕业证)雷恩一大毕业证书学费单
gdcpc16z
 
DOC
官方认证(美国WFU毕业证学位证)维克森林大学毕业证书硕士毕业证实拍图
roshenabdullah2719
 
DOC
制作(英国LSBU毕业证)伦敦南岸大学毕业证书注册证明
wovysot165
 
DOC
买(GBC毕业证学位证)乔治布朗学院毕业证书学位证书样板
roshenabdullah2719
 
加急办理(美国UH毕业证文凭)哈特福德大学毕业证书毕业证和学位证
bammy402712
 
在线购买(UM毕业证学位证)迈阿密大学毕业证书中留服认证证书
tynufbendf
 
一模一样(Rice毕业证文凭)莱斯大学毕业证书本科毕业证
ysuhdh254
 
学校原版(美国PSU毕业证文凭)波特兰州立大学毕业证书学位证书范本
qyymdbsdb
 
在线办理(美国UCD毕业证学位证)加州大学戴维斯分校毕业证书文凭学历证书
uhtkaebnfn
 
出售(WLU毕业证)威尔弗里德劳雷尔大学毕业证书成绩单
ncaxack2
 
《商業簡史》《商業簡史》《商業簡史》《商業簡史》《商業簡史》《商業簡史》《商業簡史》
powerdd
 
如何购买(美国JSU毕业证文凭)杰克逊州立大学毕业证书正式成绩单
jessibjastubbar11
 
真实可查(UMD毕业证学位证)马里兰大学毕业证书硕士学历证书
ilauoca9
 
加急制作(GSU毕业证学位证)乔治亚州立大学毕业证书成绩单分数修改
athenarevington9
 
学分不够(澳大利亚UNSW毕业证学位证)新南威尔士大学毕业证书本科学位
bammy402712
 
买(美国USA毕业证文凭)南阿拉巴马大学毕业证书续费收据
bammy402712
 
lsat online代考过程中断网一次就必被 Hold 吗?-mexma.net
testhelper Sobrenome
 
原版定制(巴黎四大毕业证)巴黎第四大学毕业证书毕业证书扫描件
ayxtyzf24
 
学分不够(UM毕业证文凭)墨尔本大学毕业证书硕士文凭
ahuqowobd
 
办理(法国毕业证学位证)南锡一大毕业证书学位证书电子版
bqyhexcbd
 
一模一样(法国毕业证)雷恩一大毕业证书学费单
gdcpc16z
 
官方认证(美国WFU毕业证学位证)维克森林大学毕业证书硕士毕业证实拍图
roshenabdullah2719
 
制作(英国LSBU毕业证)伦敦南岸大学毕业证书注册证明
wovysot165
 
买(GBC毕业证学位证)乔治布朗学院毕业证书学位证书样板
roshenabdullah2719
 

面向对象的Js培训