Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

【第一季第三期】Thinking in Javascript & OO in Javascript - 清羽

1 372 vues

Publié le

面向Java程序员的JavaScript教程

Publié dans : Technologie
  • Soyez le premier à commenter

【第一季第三期】Thinking in Javascript & OO in Javascript - 清羽

  1. 1. Java & Script
  2. 2. JavaScript Java
  3. 3. , Java JavaScript , Java JavaScript
  4. 4. Java + Script = Groovy || JRuby || Scala
  5. 5. Java + Script |!=| JavaScript
  6. 6. JavaScript is
  7. 7. JavaScript is JavaScript
  8. 8. +
  9. 9. Code: new Boolean(true) == true new Boolean(true) === false
  10. 10. Code: var a = “”; if (a) { alert(a); }
  11. 11. • new Boolean(true) true • == === • if (a) a
  12. 12. • • •
  13. 13. •5 null undefined
  14. 14. • 20 • true • ”hello, world!” • [12, 30, true, “hello”] • {name: “qingyu”, id: 17300}
  15. 15. • == === • === == • ECMA
  16. 16. Tips • • === ==
  17. 17. Code: var price = 100; function doSomething() { var doublePrice = price * 2; var price = 200; var halfPrice = price / 2; alert(doublePrice); alert(halfPrice); } doSomething(); alert(price);
  18. 18. Code: var color = “red”; if (true) { var color = “blue”; alert(color); } alert(color);
  19. 19. • var doublePrice = price * 2 var halfPrice = price / 2 price • color
  20. 20. • •
  21. 21. • var var •
  22. 22.
  23. 23. Tips •
  24. 24. Code: var a = 0 && true; var b = true && 2; var c = 0 || 3; var cfg = {maxHeight: 200}; var d = cfg.height || cfg.maxHeight;
  25. 25. Code: // 0 var check = function(obj) { return !!(obj || obj === 0); };
  26. 26. • && || • && || • !!a a
  27. 27. Tips • || • !!
  28. 28. Code: (function() { //code here })();
  29. 29. var fn = function() { //code here }; fn();
  30. 30. var fn = function() { //code here }; fn();
  31. 31. var fn = function() { //code here }; fn();
  32. 32. (function() { //code here }) ();
  33. 33. Code: var createComparisonFunction = function(propertyName) { return function(object1, object2) { var value1 = object1[propertyName], value2 = object2[propertyName]; if (value1 < value2) { return -1; } else if (value1 > value2) { return 1; } else { return 0; } }; } var fn = createComparisonFunction(‘id’);
  34. 34. • • •
  35. 35.
  36. 36. Tips •
  37. 37. Code: var sum = function() { var result = 0; for(var i = 0, len = arguments.length; i < len; I++) { result += arguments[i]; } return result; }; var total = sum(10, 20, 30);
  38. 38. Code: function factorial(num) { if (num <= 1) { return 1; } else { return num * arguments.callee(num - 1); } }
  39. 39. Code: function sum(num1, num2) { return num1 + num2; } function callSum1(num1, num2) { return sum.apply(this, [num1, num2]); } function callSum2(num1, num2) { return sum.call(this, num1, num2); }
  40. 40. • Function • • arguments • apply call
  41. 41. Code: window.color = “red”; var obj = {color: “blue”}; function sayColor() { alert(this.color); } sayColor(); obj.sayColor = sayColor; obj.sayColor();
  42. 42. Code: var Dog = function(msg) { this.msg = msg; this.shout = function() { alert(this.msg); }; this.waitAndShout = function() { setTimeout(function() { alert(this.msg) }, 5000); }; };
  43. 43. this • Java • this • this window this
  44. 44. Code: var Person = function(name) { this.name = name; this.sayName = function() { alert(this.name); }; }; var person1 = new Person(“Jack”); person1.sayName();
  45. 45. Code: var Person = function() {}; Person.prototype.name = “Jack”; Person. prototype.sayName = function() { alert(this.name); }; var person1 = new Person(); person1.sayName();
  46. 46. • •
  47. 47. Tips • Peron Person.prototype
  48. 48. Code: function SuperType() { this.property = true; } SuperType.prototype.getSuperValue = function() { return this.property; }; function SubType() { this.subProperty = false; } SubType.prototype = new SuperType(); SubType.prototype.getSubValue = function() { return this. subProperty; };
  49. 49. Code: var instance = new SubType(); alert(instance.getSuperValue()); alert(instance.getSubValue()); alert(instance instanceof Object); alert(instance instanceof SuperType); alert(instance instanceof SubType);
  50. 50. • 1. ; 2. SubType.prototype; 3. SuperType.prototype;
  51. 51. • • • •
  52. 52. YUI
  53. 53. Thanks

×