[关闭]
@linux1s1s 2017-07-20T09:29:24.000000Z 字数 2956 阅读 663

JS 语言精粹一

JavaScript 2017-07


记录一下 JavaScript语言精粹前四章的笔记

  1. /**对象字面量,这个时候就已经生成了mo对象,而且这个对象已经完成了实例化,该实例具有成员变量value和成员方法increament方法*/
  2. var mo = {
  3. value: 0,//变量(类似Java中的成员变量)
  4. increment: function (inc) { //方法(类似Java中的成员方法)
  5. this.value += typeof inc === 'number' ? inc : 0;
  6. }
  7. };
  8. function onTableClick(event) {
  9. /**Immutable JS的字符串类型等同于Java的String类型*/
  10. var isEqual = 'c' + 'a' + 't' === 'cat';
  11. console.log(isEqual);//true
  12. /**直接使用mo变量,可以直接使用其中的成员变量和成员方法*/
  13. console.log(mo.value);//0
  14. mo.increment(1);
  15. console.log(mo.value);//1
  16. mo.increment(2);
  17. console.log(mo.value);//3
  18. /** 给对象mo增加一个方法
  19. * 所以这里需要提前赋值,
  20. * 将外部函数的上下文环境赋值为that,
  21. * 然后在内部函数中就可以直接获取外部函数的上下文环境了*/
  22. /*另外这里也表明了在JS中函數可以拥有方法*/
  23. mo.double = function () {
  24. var that = this;
  25. /**这里的this即为外部函数double的上下文,也就是在对象mo的上下文中。
  26. 因为在内部函数helper中再用this已经不再指向外部函数double的上下文了*/
  27. var helper = function () {
  28. that.value += that.value;
  29. };
  30. helper();//函数调用模式
  31. };
  32. mo.double();//方法调用模式
  33. console.log(mo.value); //6
  34. /**如果不按照上面這樣處理,結果就完全不符合預期了*/
  35. mo.doubleM = function () {
  36. var helper = function () {
  37. this.value += this.value;
  38. };
  39. helper();//函数调用模式
  40. };
  41. mo.doubleM();//方法调用模式
  42. console.log(mo.value);//6(而不是12,doubleM()函数字面量并没有任何作用,this.value = undefined)
  43. /**JS本质上是基于原型继承语言,所以和传统基于类继承语言有很大不同。
  44. 不过由于JS缺乏自信,所以也提供了类似传统类继承的语法糖
  45. 需要注意的是变量首字符请大写*/
  46. var Que = function (status) {
  47. this.status = status;
  48. };
  49. Que.prototype.getStatus = function () {
  50. return this.status;
  51. };
  52. var myQue = new Que("Running");//构造器调用模式(这种语法糖,Douglas Crokford 大神比较鄙视这么使用)
  53. console.log(myQue.getStatus());//Running
  54. /** 因为JS是一门函数式面向对象的编程语言,所以函数可以拥有方法,另外这里的函数和方法和Java/C++的函数和方法有很大不同*/
  55. var add = function (sum1, sum2) {
  56. return sum1 + sum2;
  57. };
  58. var array = [3, 4];//数组字面量
  59. var sum = add.apply(this, array);//Apply调用模式
  60. console.log(sum);//7
  61. /**so 并没有继承自Que.prototype,但我们可以在so对象上调用getStatus方法*/
  62. var so = {
  63. status: 'From so Object'
  64. };
  65. var status = Que.prototype.getStatus.apply(so);
  66. console.log(status);//From so Object
  67. /**JS是原型继承,所以具有天然的动态本质,新的方法会被立刻赋予到所有对象上,即时该对象已经实例化完成。
  68. * 所以我们可以尽情的扩展功能,这里对Function.prototype增加方法*/
  69. Function.prototype.method = function (name, func) {
  70. if (!this.prototype[name]) {
  71. this.prototype[name] = func;
  72. }
  73. return this;//任何函数总会有个返回值,如果没有指定返回值,则返回undefined。
  74. };
  75. Number.method('integer', function () {
  76. return Math[this < 0 ? 'ceil' : 'floor'](this);//小于0 使用Math.ceil,大于0 使用Math.floor
  77. });
  78. console.log((-10 / 3).integer());//-3(舍弃掉小数点后面的数字)
  79. /**作用域*/
  80. /**此处完全不同于传统语言Java/C++中的块级作用域
  81. * 在JS中没有块级作用域,对应的是函数作用域,在函数中任何位置定义的变量,在该函数内部任何地方都可见
  82. * 而且在绝大数的语言中建议尽可能的延迟申明变量,而在JS中则相反,推荐申明在函数的顶部位置*/
  83. var foo = function () {
  84. var a = 3;
  85. var b = 5;
  86. var bar = function () {
  87. var b = 7;
  88. var c = 11;
  89. console.log(a);//3
  90. console.log(b);//7
  91. console.log(c);//11
  92. a += b + c;
  93. };
  94. console.log(a);//3
  95. console.log(b);//5
  96. try {
  97. console.log(c);
  98. } catch (e) {
  99. console.log(e.name + ':' + e.message);//ReferenceError:c is not defined
  100. }
  101. bar();
  102. console.log(a);//21
  103. console.log(b);//5
  104. try {
  105. console.log(c);//ReferenceError:c is not defined
  106. } catch (e) {
  107. console.log(e.name + ':' + e.message);
  108. }
  109. };
  110. foo();
  111. /**闭包*/
  112. /**上面说的作用域貌似完全另类,不过JS中的作用域有个非常美妙的用处,因为内部函数可以访问外部函数的所有参数和变量(this和arguments除外)
  113. * 而且内部函数拥有比外部函数更长的生命周期,因为内部函数持有外部函数的上下文(有点类似于Java的内部类)
  114. * 我们修改最上面的对象字面量如下*/
  115. var moRe = (function () {
  116. var value = 0;
  117. return {
  118. increment: function (inc) {
  119. value += inc < 0 ? 0 : inc;
  120. },
  121. getValue: function () {
  122. return value;
  123. }
  124. };
  125. }());
  126. moRe.increment(200);
  127. console.log(moRe.getValue());//200
  128. }

控制台结果

此处输入图片的描述

添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注