一、this的常见情况

  1. /*
  2. * 目标；
  3. *   1. 掌握 this 的常见情况
  4. *   2. this 在运行时不能被修改
  5. * */
  7. // this 是一个 js 的关键字，代表当前代码【执行】的环境对象。一般在函数中使用，在函数执行时确定，根据函数执行方式的不同，代表的值不同。目前有以下情况：
  9. // 1. 事件函数（赋值给 DOM 元素对象的事件属性、 onclick、 onmouseover、 onmouseout、 ondbclick.... 的函数）中的 this，是绑定当前事件的元素
  11. var btn = document.getElementById('btn');
  12. btn.onclick = function () {
  13.   console.log(this); // btn
  14. };
  16. // 2. 自执行函数中的 this 是 window
  17. var num = 14;
  18. (function () {
  19.   var num = 15;
  20.   // console.log(this); // window
  21.   // console.log(this.num); // 14
  22. })();
  24. // 3. setTimeout / setInterval 的回调函数中的 this 指向 window
  25. setTimeout(function () {
  26.   // console.log(this);
  27. }, 1000);
  29. // 4. 方法调用时，看方法名前面有没有 . ,如果有点前面是谁，方法中的 this 就是谁，如果没有点，方法中的 this 就是 window
  30. var obj = {
  31.   num: 12,
  32.   fn: function () {
  33.     console.log(this); // obj
  34.     console.log(this.num); // 12
  35.   }
  36. };
  37. // obj.fn(); // fn 前面有 . 点前面是 obj 所以本次 obj.fn 执行时，obj.fn 中的 this 就是 obj
  38. // obj['fn'](); // 注意 obj['fn'] 等效于 obj.fn，所以本次执行 obj.fn 中的 this 仍然是 obj
  40. var fn = obj.fn;
  41. fn(); // 函数执行时（最后有小括号()）函数名前面没有点，所以函数里面的 this 就是 window
  43. // 5. 箭头函数的 this
  44. // ES6 新增的函数语法：箭头函数，省略 function 关键字，在形参入口后面增加箭头(=>) 后面紧跟函数体，只能用于函数表达式；
  45. let sum = (a, b) => {
  46.   var total = 0;
  47.   total = a + b;
  48.   return total;
  49. };
  50. // 箭头函数的执行和普通函数执行没有区别
  51. var r1 = sum(1, 3);
  52. console.log(r1);
  54. // 简化语法：当形参只有一个时，形参入口的小括号可以省略
  55. let foo = a => { // 只有一个形参，省略小括号
  56.   var age = 10;
  57.   return a + age;
  58. };
  59. // 当函数体只有一行代码时，可以省略函数体的花括号。如果这一行代码用 return 指定返回值时，return 可以省略，
  60. let sum2 = (a, b) => a + b;
  61. // 等效于：(a, b) => {return a + b}
  63. let getObj = (a, b) => ({a: a,b: b}); // （如果要返回一个对象，需要用小括号包起来）
  65. // 箭头函数的 this 指向是箭头函数声明时所在作用域中的 this
  67. var num = 16;
  68. let obj2 = {
  69.   num: 17,
  70.   fn: () => {
  71.     console.log(this.num);
  72.   }
  73. };
  74. obj2.fn();
  76. // 6. 全局作用域中的 this 是 window，this 和 window 是同一块空间地址
  77. console.log(this);
  79. // 7. this 在运行时不能直接通过赋值的方式修改
  80. // this = 13; // 报错

二、i++和++i

  1. var i = 0;
  2. // ++i 和 i++ 都是给 i 累加1；但是两者累加的时机不同；
  3. // ++i 先给自身累加1，再取累加后的值和其他值运算；
  4. // i++ 先取当前值和其他值运算，然后再给自身累加1；
  5. // console.log(++i);
  6. console.log(i++);
  8. var a = 12; // 13 14
  9. var b = 13; // 14 15
  10. console.log(a++ + ++a + ++b + b++ + a + b); // 12 + 14 + 14 + 14 + 14 + 15 = 83