面向对象的Js培训

1,530 views

Published on

Published in: Business
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,530
On SlideShare
0
From Embeds
0
Number of Embeds
11
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

面向对象的Js培训

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

×