Javascript  基础和进阶 数据类型篇 马士华
Javascript 简介 <ul><li>JavaScript 是一种轻型的解释型的程序语言。 </li></ul><ul><li>JavaScript 最开始就是被设计成一种彻底的面向对象语言。  </li></ul>
如何调试脚本 <ul><li>调试 js 脚本推荐使用 Firebug  console Firebug 提供了许多的有用的工具,如错误控制台, HTTP 请求日志,调试,以及元素查看。  </li></ul><ul><li>Firebug c...
String <ul><li>例子: &quot;I'm a String in JavaScript!&quot;  </li></ul><ul><li>typeof &quot;some string&quot;;  //&quot;str...
String <ul><li>引号的用法: </li></ul><ul><li>&quot;You make 'me' sad.“ </li></ul><ul><li>'Holy &quot;cranking&quot; moses!'  </...
String <ul><li>方法: </li></ul><ul><li>&quot;hello&quot;.charAt(0) // &quot;h&quot;  </li></ul><ul><li>&quot;hello&quot;.toU...
String <ul><li>长度属性: </li></ul><ul><li>&quot;Hello&quot;.length // 5  </li></ul><ul><li>&quot;&quot;.length // 0  </li></u...
Number <ul><li>Javascript 并不区分整形和浮点,所有的数字都用浮点来表示( IEEE754 标准的浮点格式,即 double )。 </li></ul><ul><li>例子: </li></ul><ul><li>123 ...
Number <ul><li>默认的 Boolean 属性: </li></ul><ul><li>!0 // true   </li></ul><ul><li>!1 // false   </li></ul><ul><li>!-1 // fal...
Number <ul><li>Numbers to Strings </li></ul><ul><li>&quot;&quot; + 1 + 2; // &quot;12&quot;  </li></ul><ul><li>&quot;&quot...
Boolean <ul><li>Boolean  只有 true 和 false 的值 </li></ul><ul><li>if ( true ) console.log(&quot;always!&quot;)  </li></ul><ul>...
|| <ul><li>运用 || 运算符可以产生短路现象: </li></ul><ul><li>var t,y,x=0,z=1,w={} ; </li></ul><ul><li>var c = t || 0;  //now c=0  </li>...
Object <ul><li>在 Javascript 中任何东西都是 Object. 下面是 Object 的表达式。 </li></ul><ul><li>var x = {};  </li></ul><ul><li>var y = { na...
Object <ul><li>. 符号: </li></ul><ul><li>用 . 符号读取和写入 Object 的属性。 </li></ul><ul><li>y.name // &quot;Pete&quot;  </li></ul><ul...
Object <ul><li>[] 符号 </li></ul><ul><li>也可用 Array 的符号 [] 操作。 </li></ul><ul><li>var operations = {  </li></ul><ul><li>increa...
Object <ul><li>遍历: </li></ul><ul><li>var obj = { name: &quot;Pete&quot;, age: 15 };  </li></ul><ul><li>for(key in obj) { <...
Array <ul><li>例子: </li></ul><ul><li>var x = [];  </li></ul><ul><li>var y = [1, 2, 3]; </li></ul><ul><li>typeof []; // &quo...
<ul><li>遍历: </li></ul><ul><li>for (var i = 0; i < a.length; i++) {  </li></ul><ul><li>// Do something with a[i]  </li></ul...
Array <ul><li>Length 可以用来添加一个元素到 Array 的结尾,等同于 push 方法 </li></ul><ul><li>var x = []; </li></ul><ul><li>x.push(1);  </li></...
Array <ul><li>方法: </li></ul><ul><li>var x = [0, 3, 1, 2];  </li></ul><ul><li>x.reverse() // [2, 1, 3, 0]  </li></ul><ul><l...
未定义的变量和未赋值的变量 <ul><li>var s; </li></ul><ul><li>console.log(d)  //wrong,d is not defined </li></ul><ul><li>console.log(type...
typeof  和 constructor <ul><li>if ( typeof num == &quot;string&quot; ) </li></ul><ul><li>num = parseInt( num ); </li></ul><...
Function <ul><li>例子: </li></ul><ul><li>function named() {}  </li></ul><ul><li>var handler = function() {}  </li></ul><ul><...
Function <ul><li>Arguments  </li></ul><ul><li>function log(x) {  </li></ul><ul><li>console.log(typeof x, arguments.length)...
Function <ul><li>Call and Apply </li></ul><ul><li>我们同样可以指定上下文到 function 通过 call 和 apply 方法,唯一不同的是 call 的参数必须是 Array 或 Argu...
Function <ul><li>Context </li></ul><ul><li>在 javascript 中, this 总是指导当前的上下文。默认是 window 对象。 </li></ul><ul><li>var flashget=“...
Function <ul><li>改变函数上下文的示例   </li></ul><ul><li>function changeColor( color ) { </li></ul><ul><li>this.style.color = color...
Function <ul><li>Scope (作用域) </li></ul><ul><li>作用域是 JavaScript 中一个较难处理的特性。所有面向对象的编程语言都有某种形式的作用域;这要看是什么上下文约束着作用域。在 JavaScri...
Function <ul><li>虽然在全局变量中可以不使用 var ,但是在局部变量中一定要使用 var ,下面代码可以说明问题。 </li></ul><ul><li>var v = &quot;globe&quot;; </li></ul>...
Function <ul><li>Closures (闭包) </li></ul><ul><li>闭包意味着内层的函数可以引用存在于包绕它的函数的变量,即使外层的函数的执行已经终止。 也意味着内层的函数可以创建外面不可访问的变量和方法。 </l...
Function <ul><li>Closures (闭包) </li></ul><ul><li>使用匿名函数激发一个创建多个闭包函数所需的作用域的例子  : </li></ul><ul><li>var items = document.get...
Function <ul><li>Closures (闭包) </li></ul><ul><li>function associateObjWithEvent(obj, methodName){  </li></ul><ul><li>retur...
Function <ul><li>Reference (引用) </li></ul><ul><li>JavaScript 的一个重要的方面是引用的概念。引用就是指向对象实际位置的指针。这是一项极其强大的功能。引用总是只指向最终被引用的对象,而不...
Function <ul><li>函数重载 </li></ul><ul><li>function sendMessage( msg, obj ) { </li></ul><ul><li>if ( arguments.length == 2 ) ...
Function <ul><li>继承 </li></ul><ul><li>JavaScript 使用了一种独特的对象创建和继承的方式,称为原型继承( prototypal inheritance )。这一方法背后的前提是 , 一个对象的构造器...
Function <ul><li>类继承 </li></ul><ul><li>Object.extend = function(destination, source) {     for (property in source) {     ...
Function <ul><li>function create() {  </li></ul><ul><ul><li>var counter = 0;  </li></ul></ul><ul><ul><li>this.pi = 3.14; <...
Function <ul><li>Prototype 和属性 </li></ul><ul><li>在 javascript 里是先通过属性查找值,然后通过 prototype 查找值。 </li></ul><ul><li>function Ci...
Function <ul><li>结合以上概念我们可以编写 AOP 的程序 </li></ul><ul><li>if(!flashget){ </li></ul><ul><li>var flashget={};  </li></ul><ul><...
Function <ul><li>function User( properties ) {  </li></ul><ul><ul><li>for ( var i in properties ) {  </li></ul></ul><ul><u...
Function <ul><li>错误的代码: </li></ul><ul><li>function User( properties ) {  for ( var i in properties ) { </li></ul><ul><li>(...
<ul><li>Thank you for listening ! </li></ul>
Upcoming SlideShare
Loading in...5
×

Javascript Training

2,151

Published on

给快车做的Javascript培训

Published in: Technology, Business
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,151
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
21
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Javascript Training

  1. 1. Javascript 基础和进阶 数据类型篇 马士华
  2. 2. Javascript 简介 <ul><li>JavaScript 是一种轻型的解释型的程序语言。 </li></ul><ul><li>JavaScript 最开始就是被设计成一种彻底的面向对象语言。 </li></ul>
  3. 3. 如何调试脚本 <ul><li>调试 js 脚本推荐使用 Firebug console Firebug 提供了许多的有用的工具,如错误控制台, HTTP 请求日志,调试,以及元素查看。 </li></ul><ul><li>Firebug console 调试例子: </li></ul><ul><li>var x = true; </li></ul><ul><li>if ( x ) console.log(&quot;x defaulted to true&quot;) </li></ul><ul><li>else console.log(&quot;x defaulted to false&quot;) </li></ul>
  4. 4. String <ul><li>例子: &quot;I'm a String in JavaScript!&quot; </li></ul><ul><li>typeof &quot;some string&quot;; //&quot;string&quot; </li></ul><ul><li>运算符: </li></ul><ul><li>+ </li></ul><ul><li>“ hello,” + “javascript” </li></ul>
  5. 5. String <ul><li>引号的用法: </li></ul><ul><li>&quot;You make 'me' sad.“ </li></ul><ul><li>'Holy &quot;cranking&quot; moses!' </li></ul><ul><li>&quot;<a href=&quot;home&quot;>Home</a>&quot; </li></ul>
  6. 6. String <ul><li>方法: </li></ul><ul><li>&quot;hello&quot;.charAt(0) // &quot;h&quot; </li></ul><ul><li>&quot;hello&quot;.toUpperCase() // &quot;HELLO&quot; </li></ul><ul><li>&quot;Hello&quot;.toLowerCase() // &quot;hello&quot; </li></ul><ul><li>&quot;hello&quot;.replace(/e|o/g, &quot;x&quot;) // &quot;hxllx&quot; </li></ul><ul><li>&quot;1,2,3&quot;.split(&quot;,&quot;) // [&quot;1&quot;, &quot;2&quot;, &quot;3&quot;] </li></ul><ul><li>“ hello&quot;. substring(1,4) //ell </li></ul><ul><li>“ hello&quot;. substr(1,2) //el </li></ul><ul><li>“ hello&quot;. Indexof(‘e’,0) //1 </li></ul><ul><li>“ hello&quot;.lastIndexof(‘l’,’hello’.length-1) //3 </li></ul>
  7. 7. String <ul><li>长度属性: </li></ul><ul><li>&quot;Hello&quot;.length // 5 </li></ul><ul><li>&quot;&quot;.length // 0 </li></ul><ul><li>默认的 Boolean 属性: </li></ul><ul><li>!&quot;&quot; // true   </li></ul><ul><li>!&quot;hello&quot; // false </li></ul>
  8. 8. Number <ul><li>Javascript 并不区分整形和浮点,所有的数字都用浮点来表示( IEEE754 标准的浮点格式,即 double )。 </li></ul><ul><li>例子: </li></ul><ul><li>123 , 123.68 </li></ul><ul><li>typeof 123 // &quot;number&quot; </li></ul><ul><li>typeof 123.68// &quot;number&quot; </li></ul><ul><li>运算符: </li></ul><ul><li>所有的 C 语言中对数字的运算符 (+, -, *, /, %, =, +=, -=, *=, /=, ++, --) </li></ul>
  9. 9. Number <ul><li>默认的 Boolean 属性: </li></ul><ul><li>!0 // true   </li></ul><ul><li>!1 // false   </li></ul><ul><li>!-1 // false </li></ul><ul><li>parseInt & parseFloat </li></ul><ul><li>parseInt(&quot;123&quot;) = 123 (implicit decimal) </li></ul><ul><li>parseInt(&quot;010&quot;) = 8 (implicit octal) </li></ul><ul><li>parseInt(&quot;010&quot;, 10) = 10 (explicit decimal) </li></ul><ul><li>parseInt(&quot;11&quot;, 2) = 3 (explicit binary) </li></ul><ul><li>parseFloat(&quot;10.10&quot;) = 10.1 </li></ul>
  10. 10. Number <ul><li>Numbers to Strings </li></ul><ul><li>&quot;&quot; + 1 + 2; // &quot;12&quot; </li></ul><ul><li>&quot;&quot; + (1 + 2); // &quot;3&quot; </li></ul><ul><li>NaN & Infinity </li></ul><ul><li>parseInt(&quot;hello&quot;, 10) // NaN isNaN(parseInt(&quot;hello&quot;, 10)) // true </li></ul><ul><li>1 / 0 // Infinity </li></ul><ul><li>typeof NaN // &quot;number&quot; </li></ul><ul><li>typeof Infinity // &quot;number&quot; </li></ul>
  11. 11. Boolean <ul><li>Boolean 只有 true 和 false 的值 </li></ul><ul><li>if ( true ) console.log(&quot;always!&quot;) </li></ul><ul><li>if ( false ) console.log(&quot;never print!&quot;) </li></ul><ul><li>运算符: </li></ul><ul><li>& || </li></ul><ul><li>true & true //true </li></ul><ul><li>true & false //false </li></ul><ul><li>true || false //true </li></ul><ul><li>false || false //false </li></ul>
  12. 12. || <ul><li>运用 || 运算符可以产生短路现象: </li></ul><ul><li>var t,y,x=0,z=1,w={} ; </li></ul><ul><li>var c = t || 0; //now c=0 </li></ul><ul><li>var c = t || y || 0; //now c=0 </li></ul><ul><li>var c = t || y || x || 0; //now c=0 </li></ul><ul><li>var c = t || y || x || z || 0; //now c=z=1 </li></ul><ul><li>var c = z || y || x || t || 0; //now c=z=1 </li></ul><ul><li>var c = t || y || w || t || 0; //now c=w </li></ul>
  13. 13. Object <ul><li>在 Javascript 中任何东西都是 Object. 下面是 Object 的表达式。 </li></ul><ul><li>var x = {}; </li></ul><ul><li>var y = { name: &quot;Pete&quot;, age: 15 }; </li></ul><ul><li>typeof {} // &quot;object&quot; </li></ul>
  14. 14. Object <ul><li>. 符号: </li></ul><ul><li>用 . 符号读取和写入 Object 的属性。 </li></ul><ul><li>y.name // &quot;Pete&quot; </li></ul><ul><li>y.age // 15 </li></ul><ul><li>x.name = y.name + &quot; Pan&quot; // &quot;Pete Pan </li></ul><ul><li>x.age = y.age + 1 // 16 </li></ul>
  15. 15. Object <ul><li>[] 符号 </li></ul><ul><li>也可用 Array 的符号 [] 操作。 </li></ul><ul><li>var operations = { </li></ul><ul><li>increase: &quot;++&quot;, decrease: &quot;--“ </li></ul><ul><li>} </li></ul><ul><li>var operation = &quot;increase&quot;; </li></ul><ul><li>operations[operation] // &quot;++&quot;; </li></ul><ul><li>operations[&quot;multiply&quot;] = &quot;*&quot;; // &quot;*&quot; </li></ul><ul><li>x [&quot; age &quot;] //16 </li></ul>
  16. 16. Object <ul><li>遍历: </li></ul><ul><li>var obj = { name: &quot;Pete&quot;, age: 15 }; </li></ul><ul><li>for(key in obj) { </li></ul><ul><li>console.log(&quot;key=&quot; + key, &quot;value=&quot;+obj[key]); </li></ul><ul><li>} </li></ul><ul><li>// &quot;key=name&quot;, &quot;value=Pete&quot; </li></ul><ul><li>// &quot;key=age&quot;, &quot;value=15&quot; </li></ul><ul><li>默认的 Boolean 属性 : </li></ul><ul><li>!{} //false </li></ul>
  17. 17. Array <ul><li>例子: </li></ul><ul><li>var x = []; </li></ul><ul><li>var y = [1, 2, 3]; </li></ul><ul><li>typeof []; // &quot;object&quot; </li></ul><ul><li>typeof [1, 2, 3]; // &quot;object“ </li></ul><ul><li>读取和写入值: </li></ul><ul><li>x[0] = 1; </li></ul><ul><li>y[2] // 3 </li></ul>
  18. 18. <ul><li>遍历: </li></ul><ul><li>for (var i = 0; i < a.length; i++) { </li></ul><ul><li>// Do something with a[i] </li></ul><ul><li>} </li></ul><ul><li>for (var i = 0, j = a.length; i < j; i++) { </li></ul><ul><li>// Do something with a[i] </li></ul><ul><li>} </li></ul><ul><li>for (var i = 0, item; item = a[i]; i++) { </li></ul><ul><li>// Do something with item </li></ul><ul><li>} </li></ul>Array
  19. 19. Array <ul><li>Length 可以用来添加一个元素到 Array 的结尾,等同于 push 方法 </li></ul><ul><li>var x = []; </li></ul><ul><li>x.push(1); </li></ul><ul><li>x[x.length] = 2; </li></ul><ul><li>x // 1, 2 </li></ul>
  20. 20. Array <ul><li>方法: </li></ul><ul><li>var x = [0, 3, 1, 2]; </li></ul><ul><li>x.reverse() // [2, 1, 3, 0] </li></ul><ul><li>x.join(&quot; – &quot;) // &quot;2 - 1 - 3 - 0&quot; </li></ul><ul><li>x.pop() // [2, 1, 3] </li></ul><ul><li>x.unshift(-1) // [-1, 2, 1, 3] </li></ul><ul><li>x.shift() // [2, 1, 3] </li></ul><ul><li>x.sort() // [1, 2, 3] </li></ul><ul><li>x.splice(1, 2) // return [2, 3] a=[1] </li></ul><ul><li>默认的 Boolean 属性: </li></ul><ul><li>![] // false </li></ul>
  21. 21. 未定义的变量和未赋值的变量 <ul><li>var s; </li></ul><ul><li>console.log(d) //wrong,d is not defined </li></ul><ul><li>console.log(typeof d) //undefined </li></ul><ul><li>console.log(s) //undefined </li></ul>
  22. 22. typeof 和 constructor <ul><li>if ( typeof num == &quot;string&quot; ) </li></ul><ul><li>num = parseInt( num ); </li></ul><ul><li>if ( typeof arr == &quot;string&quot; ) </li></ul><ul><li>arr = arr.split(&quot;,&quot;); </li></ul><ul><li>if ( num.constructor == String ) </li></ul><ul><li>num = parseInt( num ); </li></ul><ul><li>if ( str.constructor == Array ) </li></ul><ul><li>str = str.join(','); </li></ul><ul><li>变量类型检查   ———————————————————————————————    Variable       typeof Variable    Variable.constructor   ———————————————————————————————    {an:&quot;object&quot;}    “ object”        Object    [&quot;an&quot;,&quot;array&quot;]    “ object”         Array    function(){}     “ function”       Function    &quot;a string&quot;       “ string”          String    55          ” number”         Number    true        “ boolean”         Boolean    new User()     “ object”         User   —————————————————————————————————— </li></ul>
  23. 23. Function <ul><li>例子: </li></ul><ul><li>function named() {} </li></ul><ul><li>var handler = function() {} </li></ul><ul><li>(function(){ </li></ul><ul><li>if(console) </li></ul><ul><li>window.log=console.log </li></ul><ul><li>})() </li></ul><ul><li>var a = 1; </li></ul><ul><li>setTimeout(function(){log(a);},1000); </li></ul>
  24. 24. Function <ul><li>Arguments </li></ul><ul><li>function log(x) { </li></ul><ul><li>console.log(typeof x, arguments.length); </li></ul><ul><li>} </li></ul><ul><li>log(); // &quot;undefined&quot;, 0 </li></ul><ul><li>log(1); // &quot;number&quot;, 1 </li></ul><ul><li>log(&quot;1&quot;, &quot;2&quot;, &quot;3&quot;); // &quot;string&quot;, 3 </li></ul>
  25. 25. Function <ul><li>Call and Apply </li></ul><ul><li>我们同样可以指定上下文到 function 通过 call 和 apply 方法,唯一不同的是 call 的参数必须是 Array 或 Arguments 对象。 Apply 接受 array 为 Arguments 。 </li></ul><ul><li>function scope() { </li></ul><ul><li>console.log(this, arguments.length); </li></ul><ul><li>} </li></ul><ul><li>scope() // window, 0 </li></ul><ul><li>scope.call(&quot;foobar&quot;, [1,2]); // &quot;foobar&quot;, 1 </li></ul><ul><li>scope.apply(&quot;foobar&quot;, [1,2]); // &quot;foobar&quot;, 2 </li></ul>
  26. 26. Function <ul><li>Context </li></ul><ul><li>在 javascript 中, this 总是指导当前的上下文。默认是 window 对象。 </li></ul><ul><li>var flashget=“flashget” </li></ul><ul><li>console.log(window.flashget) // “flashget” </li></ul><ul><li>下面的例子, this 指到 id 为 t 的元素中去了 </li></ul><ul><li>Object.prototype.getHTML =function(){ </li></ul><ul><li>if(this['nodeName']) </li></ul><ul><li>console.log(this.innerHTML); </li></ul><ul><li>} </li></ul><ul><li>document.getElementById(&quot;t&quot;). getHTML(); </li></ul>
  27. 27. Function <ul><li>改变函数上下文的示例 </li></ul><ul><li>function changeColor( color ) { </li></ul><ul><li>this.style.color = color; </li></ul><ul><li>} </li></ul><ul><li>//wrong,because window desn't hava style attribute </li></ul><ul><li>changeColor( &quot;white&quot; ); </li></ul><ul><li>var main = document.getElementById(&quot;main&quot;); </li></ul><ul><li>changeColor.call( main, &quot;black&quot; ); </li></ul><ul><li>function setBodyColor() { </li></ul><ul><li>changeColor.apply( document.body, arguments ); </li></ul><ul><li>} </li></ul><ul><li>setBodyColor( &quot;black&quot; ); </li></ul>
  28. 28. Function <ul><li>Scope (作用域) </li></ul><ul><li>作用域是 JavaScript 中一个较难处理的特性。所有面向对象的编程语言都有某种形式的作用域;这要看是什么上下文约束着作用域。在 JavaScript 里,作用域由函数约束,而不由块约束 ( 如 while,if, 和 for 里的语句体 ) 。 </li></ul><ul><li>var v = &quot;globe&quot;; </li></ul><ul><li>function scope() { </li></ul><ul><ul><li>console.log(v) //undefined </li></ul></ul><ul><ul><li>var v = &quot;in a function“; </li></ul></ul><ul><ul><li>console.log(v); //in a function </li></ul></ul><ul><li>} </li></ul><ul><li>scope() </li></ul><ul><li>console.log(v) //globe </li></ul>
  29. 29. Function <ul><li>虽然在全局变量中可以不使用 var ,但是在局部变量中一定要使用 var ,下面代码可以说明问题。 </li></ul><ul><li>var v = &quot;globe&quot;; </li></ul><ul><li>function scope() { </li></ul><ul><ul><li>console.log(v); // globe </li></ul></ul><ul><ul><li>v = &quot;in a function&quot; </li></ul></ul><ul><ul><li>console.log(v); // in a function </li></ul></ul><ul><ul><li>m = &quot;in a function define a globe“ </li></ul></ul><ul><li>} </li></ul><ul><li>scope() </li></ul><ul><li>console.log(v) //in a function </li></ul><ul><li>console.log(m) // in a function define a globe </li></ul>
  30. 30. Function <ul><li>Closures (闭包) </li></ul><ul><li>闭包意味着内层的函数可以引用存在于包绕它的函数的变量,即使外层的函数的执行已经终止。 也意味着内层的函数可以创建外面不可访问的变量和方法。 </li></ul><ul><li>var obj = document.getElementById(&quot;main&quot;); obj.style.border = &quot;1px solid red&quot;; setTimeout(function(){     obj.style.display = 'none'; }, 1000); function delayedAlert( msg, time ) {     setTimeout(function(){         alert( msg );     }, time ); } delayedAlert( &quot;Welcome!&quot;, 2000 ); </li></ul>
  31. 31. Function <ul><li>Closures (闭包) </li></ul><ul><li>使用匿名函数激发一个创建多个闭包函数所需的作用域的例子 : </li></ul><ul><li>var items = document.getElementsByTagName(&quot;a&quot;); </li></ul><ul><li>for ( var i = 0,item; item = items[i]; i++ ){ </li></ul><ul><li>(function(){ </li></ul><ul><li>var href = item.getAttribute(&quot;href&quot;); </li></ul><ul><li>item[&quot;onclick&quot;] = function(){ </li></ul><ul><li>console.log( href ); </li></ul><ul><li>return false; </li></ul><ul><li>}; </li></ul><ul><li>})(); </li></ul><ul><li> item.setAttribute(&quot;href&quot;,&quot;#&quot;); </li></ul><ul><li>} </li></ul>
  32. 32. Function <ul><li>Closures (闭包) </li></ul><ul><li>function associateObjWithEvent(obj, methodName){ </li></ul><ul><li>return ( function(e){ </li></ul><ul><ul><li>e = e||window.event; </li></ul></ul><ul><ul><li>return obj[methodName](e, this); </li></ul></ul><ul><ul><li>}); </li></ul></ul><ul><li>} </li></ul><ul><li>function DhtmlObject(elementId){ </li></ul><ul><li>var el = getElementWithId(elementId); </li></ul><ul><li>if(el){ </li></ul><ul><li>el.onclick = associateObjWithEvent(this, &quot;doOnClick&quot;); </li></ul><ul><li>el.onmouseover = associateObjWithEvent(this, &quot;doMouseOver&quot;); </li></ul><ul><li>el.onmouseout = associateObjWithEvent(this, &quot;doMouseOut&quot;); </li></ul><ul><li>} </li></ul><ul><li>} </li></ul><ul><li>DhtmlObject.prototype.doOnClick = function(event, element){ // doOnClick method body.} </li></ul><ul><li>DhtmlObject.prototype.doMouseOver = function(event, element){ // doMouseOver method body.} </li></ul><ul><li>DhtmlObject.prototype.doMouseOut = function(event, element){ // doMouseOut method body.} </li></ul>
  33. 33. Function <ul><li>Reference (引用) </li></ul><ul><li>JavaScript 的一个重要的方面是引用的概念。引用就是指向对象实际位置的指针。这是一项极其强大的功能。引用总是只指向最终被引用的对象,而不会是引用本身。 Number , Boolean , null 和为定义的值为基本类型。对象,数组,函数为引用类型。 </li></ul><ul><li>var obj = new Object(); </li></ul><ul><li>var objRef = obj; </li></ul><ul><li>obj.oneProperty = true; </li></ul><ul><li>console.log( obj.oneProperty === objRef.oneProperty ); //true </li></ul><ul><li>var items = new Array( &quot;one&quot;, &quot;two&quot;, &quot;three&quot; ); </li></ul><ul><li>var itemsRef = items; </li></ul><ul><li>items.push( &quot;four&quot; ); </li></ul><ul><li>console.log( items.length == itemsRef.length ); //true </li></ul><ul><li>var items = new Array( &quot;one&quot;, &quot;two&quot;, &quot;three&quot; ); </li></ul><ul><li>var itemsRef = items; </li></ul><ul><li>items = new Array( &quot;new&quot;, &quot;array&quot; ); //let items refer to new object. </li></ul><ul><li>Console.log( items !== itemsRef ); //true </li></ul>
  34. 34. Function <ul><li>函数重载 </li></ul><ul><li>function sendMessage( msg, obj ) { </li></ul><ul><li>if ( arguments.length == 2 ) </li></ul><ul><li>obj.handleMsg( msg ); </li></ul><ul><li>else </li></ul><ul><li>console.log( msg ); </li></ul><ul><li>} </li></ul><ul><li>sendMessage( &quot;Hello, World!&quot; ); </li></ul><ul><li>sendMessage( &quot;How are you?&quot;, { </li></ul><ul><li>handleMsg: function( msg ) { </li></ul><ul><li>console.log( &quot;This is a custom message: &quot; + msg ); </li></ul><ul><li>} </li></ul><ul><li>}); </li></ul>
  35. 35. Function <ul><li>继承 </li></ul><ul><li>JavaScript 使用了一种独特的对象创建和继承的方式,称为原型继承( prototypal inheritance )。这一方法背后的前提是 , 一个对象的构造器能够从另一个对象中继承方法,建立起一个原型对象,所有的新的对象都将从这个原型创建 。 </li></ul><ul><li>function Person( name ) { this.name = name;} </li></ul><ul><li>Person.prototype.getName = function() { return this.name;}; </li></ul><ul><li>function User( name, password ) { </li></ul><ul><li>this.name = name; </li></ul><ul><li>this.password = password; </li></ul><ul><li>}; </li></ul><ul><li>User.prototype = new Person(); </li></ul><ul><li>User.prototype.getPassword = function() { return this.password; </li></ul><ul><li>}; </li></ul>
  36. 36. Function <ul><li>类继承 </li></ul><ul><li>Object.extend = function(destination, source) {     for (property in source) {         destination[property] = source[property];     }     return destination; </li></ul><ul><li>} </li></ul><ul><li>Object.extend(String.prototype,{ </li></ul><ul><ul><li>trim:function() { </li></ul></ul><ul><ul><li>return this.replace(/(^s*)|(s*$)/g, ''); </li></ul></ul><ul><ul><li>} </li></ul></ul><ul><li>}); </li></ul><ul><li>“ flashfget ”.trim(); //”flashget” </li></ul>
  37. 37. Function <ul><li>function create() { </li></ul><ul><ul><li>var counter = 0; </li></ul></ul><ul><ul><li>this.pi = 3.14; </li></ul></ul><ul><ul><li>return { </li></ul></ul><ul><ul><li>increment: function() { counter++;return counter ;}, </li></ul></ul><ul><ul><li>print: function() { console.log(counter); } </li></ul></ul><ul><ul><li>} </li></ul></ul><ul><li>} </li></ul><ul><li>var c = create(); </li></ul><ul><li>c.increment(); </li></ul><ul><li>c.[“print”](); // 1 </li></ul>
  38. 38. Function <ul><li>Prototype 和属性 </li></ul><ul><li>在 javascript 里是先通过属性查找值,然后通过 prototype 查找值。 </li></ul><ul><li>function Circle(r) { </li></ul><ul><li>this.r = r; </li></ul><ul><li>} </li></ul><ul><li>Circle.prototype.PI = 3.14; </li></ul><ul><li>Circle.prototype.Area = function(){return this.PI * this.r * this.r}; </li></ul><ul><li>var c = new Circle(1); </li></ul><ul><li>console.log(c.Area()); //3.14 </li></ul><ul><li>var d = new Circle(1); </li></ul><ul><li>d.PI = 4; </li></ul><ul><li>console.log(d.Area()); //4 </li></ul>
  39. 39. Function <ul><li>结合以上概念我们可以编写 AOP 的程序 </li></ul><ul><li>if(!flashget){ </li></ul><ul><li>var flashget={}; </li></ul><ul><li>(function(){ </li></ul><ul><li>function e(c,a){ </li></ul><ul><li>var b=c.split(/./); </li></ul><ul><li>var d=window; </li></ul><ul><li>for(var e=0;e<b.length-1;e++){ </li></ul><ul><li>d=d[b[e]] </li></ul><ul><li>} </li></ul><ul><li>d[b[b.length-1]]=a </li></ul><ul><li>} </li></ul><ul><li>function c(f){ </li></ul><ul><li>window.onload = f; </li></ul><ul><li>} </li></ul><ul><li>e(&quot;flashget.callBack&quot;,c); </li></ul><ul><li> e(&quot;symbolTable&quot;,e); </li></ul><ul><li>})() </li></ul><ul><li>} </li></ul><ul><li>flashget.callBack(function(){alert(‘window.onload’)}) </li></ul>
  40. 40. Function <ul><li>function User( properties ) { </li></ul><ul><ul><li>for ( var i in properties ) { </li></ul></ul><ul><ul><li>(function(which){ </li></ul></ul><ul><ul><li> var p= i; </li></ul></ul><ul><ul><li>which[ &quot;get&quot; + i ] = function() {return properties[p]; }; </li></ul></ul><ul><ul><li>which[ &quot;set&quot; + i ] = function(val) {properties[p] = val; }; </li></ul></ul><ul><ul><li>})(this); </li></ul></ul><ul><ul><li>} </li></ul></ul><ul><li>} </li></ul><ul><li>var user = new User({ name: &quot;Bob&quot;, age: 44}); </li></ul><ul><li>console.log( user.name == null ); </li></ul><ul><li>console.log( user.getname() == &quot;Bob&quot; ); </li></ul><ul><li>user.setage( 22 ); </li></ul><ul><li>console.log( user.getage() == 22 ); </li></ul>
  41. 41. Function <ul><li>错误的代码: </li></ul><ul><li>function User( properties ) {  for ( var i in properties ) { </li></ul><ul><li>(function(){         this[ &quot;get&quot; + i ] = function() {             return properties[i];         };         this[ &quot;set&quot; + i ] = function(val) {             properties[i] = val;         };     })(); </li></ul><ul><li>} </li></ul><ul><li>} </li></ul><ul><li>有谁能指出错在哪儿? </li></ul>
  42. 42. <ul><li>Thank you for listening ! </li></ul>
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×