devbox
酷酷是懒虫
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Javascript高级程序设计第四版笔记（松爷代言）

作者：酷酷是懒虫 | 2024-07-23 19:26:52

赞

踩

Javascript高级程序设计第四版笔记（松爷代言）

序章（内容较多，侧边栏有目录）

学习地址

MDN(Mozilla Developer Center)：火狐开发者社区是一个完整的学习平台，你可以在这里深入学习Web技术以及能够驱动Web的软件 。

1. 第六章

1.1 Object

1.1.1 new操作符

  1. let person = new Object(); 
  2. person.name = "Nicholas"; 
  3. person.age = 29;

1.1.2 对象字面量

对象字面量是对象定义的简写形式，目的是为了简化包含大量属性的对象的创建。

  1. let person = { 
  2.     name: "Nicholas", 
  3.     age: 29 
  4. };

也可以使用字符串、数字、bool类型来定义。

  1. let person = { 
  2.     "name": "Nicholas", 
  3.     "age": 29, 
  4.     5: true,
  5.     true: 123,
  6.     false: 321
  7. };
  8. person[5];  //true
  9. person[true];   //123
  10. person[false];  //321

但要注意此类情况（后值覆盖前值）：

  1. let person = { 
  2.     "name": "Nicholas", 
  3.     "age": 29, 
  4.     5: true,
  5.     true: 123,
  6.     true: 555,
  7.     name: 'jack'
  8. };
  9. // 最后person变为
  10. {
  11.     5: true, 
  12.     name: "jack", 
  13.     age: 29, 
  14.     true: 555
  15. }

思考：

  1. let person = {
  2.     5:15,
  3.     true: 'yes',
  4.     false: 'no'
  5. };
  6. person.5;   // ?
  7. person.true;    // ?
  8. person.false;   // ?
  9. ​
  10. person.__proto__ === ?;
  11. person.__proto__.constructor === ?;
  12. ​
  13. let person = new Object();
  14. person.__proto__ === ?;
  15. person.__proto__.constructor === ?;

1.1.3 访问/设置方式

点语法

  1. let person = { 
  2.     "name": "Nicholas", 
  3.     "age": 29, 
  4.     5: true,
  5.     true: 123
  6. };
  7. person.name;    //"Nicholas"
  8. person.age;     //29
  9. person.name = 'jack';
  10. person.age = 30;
  11. person.true;    //对吗？
  12. person.5;   //对吗？

中括号

  1. let person = { 
  2.     "name": "Nicholas", 
  3.     "age": 29, 
  4.     5: true,
  5.     true: 123
  6. };
  7. person['name']; //"Nicholas"
  8. person['age'];      //29
  9. person['name'] = 'jack';
  10. person['age'] = 30;
  11. person[true];   //对吗？
  12. person[5];  //对吗？

思考：可以这样定义吗？如果可以，那么怎么访问name属性值呢？

  1. let name = {
  2.     firstName: '张',
  3.     lastName: '三'
  4. };
  5. let person = {
  6.     [name]: '张三'
  7. }

1.2 Array

1.2.1 Array构造函数

  1. let colors = new Array();   //表示创建一个空数组
  2. colors.length;  //0
  3. ​
  4. let colors = new Array(5);  //表示创建一个长度为5的空数组
  5. colors.length;  //5
  6. colors[0];  //undefined
  7. let colors = Array(5); //不用new也可以
  8. ​
  9. let colors = new Array("red", "blue", "green"); //表示创建一个数组，并传入三个值
  10. colors.length;  //3
  11. colors[0];  //"red"
  12. let names = Array("Greg"); //不用new也可以

思考：

  1. let colors = new Array(3);
  2. colors[0];  //？
  3. colors.length;  //？

1.2.2 数组字面量

  1. let colors = ["red", "blue", "green"]; // 创建一个包含3个元素的数组
  2. let names = []; // 创建一个空数组
  3. let values = [1,2,]; // 创建一个包含2个元素的数组
  4. let ages = [,,,];   //创建一个包含3个三个空元素的数组
  5. colors.length = 2;  //改变数组长度
  6. colors[2];  //undefined
  7. 思考：
  8.  
  9. let cars = [1,2,,,];
  10. cars.length;    //?
  11. ​
  12. let cats = [1,2,,,5];
  13. cats.length;    //?
  14. cats[cats.length - 1];  //?
  15. ​
  16. let dogs = [1,2,3];
  17. dogs.length = 5;
  18. dogs.length;    //?
  19. dogs[dogs.length - 1];  //?

1.2.3 Array.from

第一个参数是一个类数组对象，即任何可迭代的结构，或者有一个 length 属性和可索引元素的结构。

  1. // 字符串会被拆分为单字符数组 
  2. console.log(Array.from("Matt")); // ["M", "a", "t", "t"]
  3. ​
  4. // 可以使用from()将集合和映射转换为一个新数组
  5. const s = new Set().add(1).add(2).add(3).add(4);
  6. console.log(Array.from(s)); // [1, 2, 3, 4]
  7. ​
  8. // Array.from()对现有数组执行浅复制
  9. const a1 = [1, 2, 3, 4]; 
  10. const a2 = Array.from(a1);
  11. console.log(a1); // [1, 2, 3, 4]
  12. a1 === a2; // false
  13. a2.push(5);
  14. a1.length;  //?
  15. ​
  16. // arguments对象可以被轻松地转换为数组
  17. function getArgsArray() { 
  18.     return Array.from(arguments); 
  19. }
  20. console.log(getArgsArray(1, 2, 3, 4)); // [1, 2, 3, 4]
  21. ​
  22. // from()也能转换带有必要属性的自定义对象
  23. const arrayLikeObject = { 0: 1, 1: 2, 2: 3, 3: 4, length: 4 };
  24. console.log(Array.from(arrayLikeObject)); // [1, 2, 3, 4]
  25. ​
  26. //没有length的对象不行，因为会将0,1,2,3当做对象的key，而不当做是下标
  27. const arrayLikeObject = { 0: 1, 1: 2, 2: 3, 3: 4 };
  28. console.log(Array.from(arrayLikeObject)); // []

思考：

  1. const arrayLikeObject = { 3: 1, 1: 2, 2: 3, 0: 4,length:4 };    //下标打乱顺序
  2. console.log(Array.from(arrayLikeObject)); //?
  3. ​
  4. const arrayLikeObject = { 3: 1, 1: 2, 2: 3, 0: 4,length:6 };    //长度多了2
  5. console.log(Array.from(arrayLikeObject)); //?
  6. ​
  7. const arrayLikeObject = { 3: 1, 1: 2, 2: 3, 0: 4,length:2 };    //长度只有2
  8. console.log(Array.from(arrayLikeObject)); //?
  9. ​
  10. //转换一个没有length的对象
  11. const arrayLikeObject = { a:1, b:2 };
  12. console.log(Array.from(arrayLikeObject)); //?
  13. ​
  14. //转换一个有length的对象
  15. const arrayLikeObject = { a:1, b:2, length:3 };
  16. console.log(Array.from(arrayLikeObject)); //?

1.2.4 Array.of

Array.of()可以把一组参数转换为数组。这个方法用于替代在ES6之前常用的Array.prototype.slice.call(arguments)。

  1. console.log(Array.of(1, 2, 3, 4)); // [1, 2, 3, 4] 
  2. console.log(Array.of(undefined)); // [undefined]

1.2.5 检测数组

  1. [] instanceof Array;    // true
  2. Array.isArray([]);  //true
  3. 思考：
  4.  
  5. (new Array() instanceof Array); //?
  6. (Array.isArray(new Array()));   //?

1.2.6 fill

使用fill()方法可以向一个已有的数组中插入全部或部分相同的值。开始索引用于指定开始填充的位置，它是可选的。如果不提供结束索引，则一直填充到数组末尾。

[负值索引]  负值索引从数组末尾开始计算，也可以将负索引想象成数组长度加上它得到的一个正索引（如果长度减去负索引还是得到负数，索引则从0开始）。

  1. const zeroes = [0, 0, 0, 0, 0]; // 用5填充整个数组
  2. zeroes.fill(5);
  3. console.log(zeroes); // [5, 5, 5, 5, 5]
  4. ​
  5. // 用6填充索引大于等于3的元素
  6. zeroes.fill(0); // 重置
  7. zeroes.fill(6, 3); 
  8. console.log(zeroes); // [0, 0, 0, 6, 6]
  9. ​
  10. // 用7填充索引大于等于1且小于3的元素
  11. zeroes.fill(0); // 重置
  12. zeroes.fill(7, 1, 3);
  13. console.log(zeroes); // [0, 7, 7, 0, 0];
  14. ​
  15. // 用8填充索引大于等于1且小于4的元素
  16. // (-4 + zeroes.length = 1)
  17. // (-1 + zeroes.length = 4)
  18. zeroes.fill(8, -4, -1); 
  19. console.log(zeroes); // [0, 8, 8, 8, 0];
  20. fill()静默忽略超出数组边界、零长度及方向相反的索引范围
  21.  
  22. [fill()]  注解如下：
  23.  
  24. const zeroes = [0, 0, 0, 0, 0]; 
  25. zeroes.fill(1, -10, -6);    // 索引过低，忽略
  26. console.log(zeroes); // [0, 0, 0, 0, 0] 
  27. zeroes.fill(1, 10, 15);     // 索引过高，忽略
  28. console.log(zeroes);    // [0, 0, 0, 0, 0] 
  29. zeroes.fill(2, 4, 2);   // 索引反向，忽略
  30. console.log(zeroes); // [0, 0, 0, 0, 0]
  31. zeroes.fill(4, 3, 10);  // 索引部分可用，填充可用部分 
  32. console.log(zeroes);    // [0, 0, 0, 4, 4]

思考：

  1. const zeroes = [0, 0, 0, 0, 0]; 
  2. zeroes.fill(1, -10, -1);
  3. console.log(zeroes);    //?
  4. ​
  5. const zeroes = [0, 0, 0, 0, 0]; 
  6. zeroes.fill(1, -10, 20);
  7. console.log(zeroes);    //?

1.2.7 copyWithin

copyWithin()会按照指定范围浅复制数组中的部分内容，然后将它们插入到指定索引开始的位置。开始索引和结束索引则与fill()使用同样的计算方法。

  1. let ints = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
  2. // 从ints中复制索引0开始的内容，插入到索引5开始的位置
  3. // 在源索引或目标索引到达数组边界时停止
  4. ints.copyWithin(5); 
  5. console.log(ints); // [0, 1, 2, 3, 4, 0, 1, 2, 3,4]
  6. ​
  7. let ints = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
  8. // 从ints中复制索引5开始的内容，插入到索引0开始的位置
  9. ints.copyWithin(0, 5); 
  10. console.log(ints); // [5, 6, 7, 8, 9, 5, 6, 7, 8, 9]
  11. ​
  12. let ints = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
  13. // 从ints中复制索引大于0并且小于3的内容
  14. // 插入到索引4开始的位置
  15. ints.copyWithin(4, 0, 3); 
  16. console.log(ints); // [0, 1, 2, 3, 0, 1, 2, 7, 8, 9]
  17. ​
  18. let ints = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
  19. ints.copyWithin(2, 0, 6); 
  20. console.log(ints); // [0, 1, 0, 1, 2, 3, 4, 5, 8, 9]
  21. ​
  22. // 支持负索引值，与fill()相对于数组末尾计算正向索引的过程是一样的
  23. let ints = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
  24. ints.copyWithin(-4, -7, -3); 
  25. console.log(ints); // [0, 1, 2, 3, 4, 5, 3, 4, 5, 6]

静默忽略超出数组边界、零长度及方向相反的索引范围（同fill()方法一样）

1.2.8 reverse（倒序）

严格意义上来讲，reverse不是排序方法，它只是数组颠倒方法，可以将数组的顺序颠倒过来。

  1. // 书中的例子，只是作为反向排序讲解，不够全面
  2. let values = [1, 2, 3, 4, 5]; 
  3. values.reverse();
  4. console.log(values); // [5,4,3,2,1]
  5. ​
  6. let numbers = [5,1,2,6,3];
  7. numbers.reverse();
  8. console.log(numbers); // [3, 6, 2, 1, 5]
  9. ​
  10. let chars = ['c','b','d','a','w'];
  11. chars.reverse();
  12. console.log(chars); // ["w", "a", "d", "b", "c"]
  13. ​
  14. let objs = [{a:1}, {a:5}, {a:3}];
  15. objs.reverse();
  16. console.log(objs);  // [{a:3},{a:5},{a:1}]

1.2.9 sort

sort()方法可以接收一个比较函数，用于判断哪个值应该排在前面。比较函数接收两个参数，如果第一个参数应该排在第二个参数前面，就返回负值；如果两个参数相等，就返回0；如果第一个参数应该排在第二个参数后面，就返回正值。

  1. let values = [0, 1, 5, 10, 15];
  2. values.sort();  // 不传比较函数出来的结果是不正常的
  3. console.log(values); // 0,1,10,15,5
  4. ​
  5. let values = [15, 1, 10, 5, 0];
  6. values.sort(function (value1, value2) {
  7.     if (value1 < value2) {
  8.         return -1;
  9.     }
  10.     else if (value1 > value2) {
  11.         return 1;
  12.     }
  13.     return 0;
  14. });
  15. console.log(values); // 0,1,5,10,15
  16. ​
  17. //使用箭头函数简写
  18. let values = [15, 1, 10, 5, 0];
  19. values.sort((a, b) => a < b ? -1 : a > b ? 1 : 0);
  20. console.log(values); // 0,1,5,10,15
  21. ​
  22. //最简单的方法
  23. let values = [15, 1, 10, 5, 0];
  24. values.sort((a, b) => a - b);
  25. console.log(values); // 0,1,5,10,15
  26. 思考：
  27.  
  28. let values = [15, 1, 10, 5, 0];
  29. //使用function的方式写一个反向排序方法
  30. ​
  31. //使用箭头函数简写
  32. let values = [15, 1, 10, 5, 0];
  33. //使用箭头函数简写的方式写一个反向排序方法
  34. ​
  35. //最简单的方法
  36. let values = [15, 1, 10, 5, 0];
  37. //使用最简单的方法写一个反向排序方法

1.2.10 concat

concat()方法可以在现有数组全部元素基础上创建一个新数组。它首先会创建一个当前数组的副本，然后再把它的参数添加到副本末尾，最后返回这个新构建的数组。

  1. let colors = ["red", "green", "blue"]; 
  2. let colors2 = colors.concat("yellow", ["black", "brown"]); 
  3. console.log(colors); // ["red", "green","blue"]
  4. console.log(colors2); // ["red", "green", "blue", "yellow", "black", "brown"]
  5. ​
  6. //不能添加第二层的数据
  7. let colors = ["red", "green", "blue"]; 
  8. let colors2 = colors.concat("yellow", ["black", "brown"],"aaa",["bbb",'ccc', ['a','b',['c']]]);
  9. console.log(colors2);   //["red", "green", "blue", "yellow", "black", "brown", "aaa", "bbb", "ccc", Array(3)]

1.2.11 slice

slice()用于创建一个包含原有数组中一个或多个元素的新数组。slice()方法可以接收一个或两个参数：返回元素的开始索引和结束索引。如果只有一个参数，则 slice()会返回该索引到数组末尾的所有元素。如果有两个参数，则slice() 返回从开始索引到结束索引对应的所有元素，其中不包含结束索引对应的元素。

  1. let colors = ["red", "green", "blue", "yellow", "purple"]; 
  2. let colors2 = colors.slice(1); 
  3. let colors3 = colors.slice(1, 4);
  4. console.log(colors2);   // ["green", "blue", "yellow", "purple"
  5. console.log(colors3);   // ["green", "blue", "yellow"]
  6. console.log(colors);    // ["red", "green", "blue", "yellow", "purple"]

  • slice()的负值索引跟fill()负值索引计算方式一样。

  • 静默忽略超出数组边界、零长度及方向相反的索引范围也跟fill()方法的一样。

思考：

  1. let numbers = [1,2,3,4,5];
  2. console.log(numbers.slice(-5));     //?
  3. console.log(numbers.slice(-5,-1));  //?
  4. console.log(numbers.slice(-30));    //?
  5. console.log(numbers.slice(-3,-5));  //?

1.2.12 splice

splice()是个非常强大的方法，可删除，替换，增加（需非常熟悉）。

  • 删除

    需要给 splice() 传2个参数：要删除的第一个元素的位置和要删除的元素数量。从原数组中删除任意多个元素，并返回一个数组，返回的数组包含删除的项。比如splice(0, 2) 会删除原数组前两个元素，并返回一个数组，数组中包含前两个已删除的项。

    1. let colors = ["red", "green", "blue"]; 
    2. let removed = colors.splice(0,1); // 删除第一项，并将第一项返回
    3. console.log(colors);    // ["green", "blue"]
    4. console.log(removed);   // ["red"]
    5. ​
    6. let colors = ["red", "green", "blue"]; 
    7. let removed = colors.splice(-3);
    8. console.log(colors);    // []
    9. console.log(removed);   // ["red", "green", "blue"]
    10. ​
    11. let colors = ["red", "green", "blue"]; 
    12. let removed = colors.splice(-3,2);
    13. console.log(colors);    // ["blue"]
    14. console.log(removed);   // ["red", "green"]

     

  • 插入

    需要给 splice() 传3个参数：开始位置、0（要删除的元素数量）和要插入的元素，可以在数组中指定的位置插入元素。第三个参数之后还可以传第四个、第五个参数，乃至任意多个要插入的元素。比如，splice(2, 0, "red", "green") 会从数组位置2开始插入字符串 "red" 和 "green" 。

    1. let colors = ["red", "green", "blue"]; 
    2. let removed = colors.splice(1, 0, "yellow", "orange"); // 在位置1插入两个元素
    3. console.log(colors);    // ["red", "yellow", "orange", "green", "blue"]
    4. console.log(removed);   // []

     

  • 替换

    splice() 在删除元素的同时可以在指定位置插入新元素，样要传入3个参数：开始位置、要删除元素的数量和要插入的任意多个元素。要插入的元素数量不一定跟删除的元素数量一致。比如，splice(2, 1, "red", "green") 会在位置2删除一个元素，然后从该位置开始向数组中插入 "red" 和 "green"。

    1. let colors = ["red", "green", "blue"]; 
    2. let removed = colors.splice(1, 1, "red", "purple"); // 插入两个值，删除一个元素
    3. console.log(colors);    // ["red", "red", "purple", "blue"]
    4. console.log(removed);   // ["green"]

    思考：

    1. let colors = ["red", "green", "blue"];
    2. //写一个方法将colors所有的内容清空并替换为["yellow", "white"]

     

1.2.13 寻找下标

  • indexOf

    从左到右搜索第一个===的下标。

    1. [1,2,3].indexOf(1);	// 0
    2. [1,2,3].indexOf('1');	// -1，因为不全等，找不到就返回-1
    3. [1,2,3,1,5,6].indexOf(1, 2);	// 3，第二个参数是从x下标开始搜索

     

  • lastIndexOf

    从右往左搜索第一个===的下标。

    1. [1,2,3,1,5,7].lastIndexOf(1);	// 3
    2. [1,2,3,1,5,7,1,5].lastIndexOf(1, 100);	// 6 第二个参数是从x下标开始搜索
    3. [1,2,3,1,5,7,1,5].lastIndexOf(1, 5);	// 3

     

思考：

  1. [1,2,3,1,5,6].indexOf(1, -2);	// ?
  2. [1,2,3,1,5,6].indexOf(1, -3);	// ?   
  3. [1,2,3,1,5,7,1,5].lastIndexOf(1, -7);	// ?
  4. [1,2,3,1,5,7,1,5].lastIndexOf(1, -5);	// ? 3

1.2.14 includes

判断数组内是否有===的项。

  1. [1,2,3,4,5,6].includes(1);	// true
  2. [1,2,3,4,5,6].includes('1');	// false，因为不全等
  3. [1,2,3,4,5,6].includes(8);	// false

1.2.15 find

根据条件查找数组内的单个项，根据条件查找项，只要返回true那就证明找到了，如果为false的话，那就继续遍历查找。

  1. [1,2,3].find(c=> c === 1);	// 1
  2. [1,2,3].find(c=> c == '1');	// 1
  3. [1,2,3].find(c=> c === 5);	// undefined
  4. [1,2,3].find(c=> c > 1);	// 2
  5.  
  6. const people = [{
  7.     name: "Matt",
  8.     age: 27
  9. },
  10. {
  11.     name: "Nicholas",
  12.     age: 29
  13. }];
  14. //三个参数分别是：当前遍历的项、当前下标、原始数组。
  15. let p = people.find((element, index, array) => {
  16.     console.log(element, index, array);
  17.     return element.age > 28;
  18. });
  19. console.log(p);		// {name: "Nicholas", age: 29}

1.2.16 findIndex

根据条件查找数组内匹配项的下标。

  1. [1,2,3].findIndex(c=> c === 3);	// 2
  2. [1,2,3].findIndex(c=> c === 5);	// -1
  3. [1,2,3].findIndex(c=> c > 1);	// 1

1.2.17 every

验证数组内每一个项是否匹配。

  1. [1,2,3].every(c=> c === 3);	// false
  2. [1,2,3].every(c=> c > 0);	// true
  3. [1,2,3].every(c=> c < 10);	// true
  4. [1,1,1].every(c=> c === 1);	// true
  5. [1, 2, 3, 4, 5, 4, 3, 2, 1].every((item, index, array) => item > 2);    // false

1.2.18 some

验证数组内某一个项是否匹配。

  1. [1,2,3].some(c=> c === 3);  // true
  2. [1,2,3].some(c=> c > 0);    // true
  3. [1,2,3].some(c=> c < 10);   // true
  4. [1,1,1].some(c=> c === 1);  // true
  5. [1,2,3].some(c=> c === 5);  // false
  6. [1, 2, 3, 4, 5, 4, 3, 2, 1].some((item, index, array) => item > 2);     // true

1.2.19 filter

创建一个新数组，根据条件将搜索匹配的项放入至新数组内，并将此数组返回。

  1. [1,2,3].filter(c=> c > 1);  // [2,3]
  2. [1,2,3].filter(c=> c > 5);  // []
  3. [1,2,3].filter(c=> c === 3);    // [3]
  4. [1, 2, 3, 4, 5, 4, 3, 2, 1].filter((item, index, array) => item > 2);   //[3, 4, 5, 4, 3]

1.2.20 forEach

遍历每一个数组，传入回调函数，可对每一个项进行操作（用return无法停止，会遍历完所有的项）。

  1. [1, 2, 3].forEach(c => {
  2.     console.log(c * 2);
  3. });
  4. // 2 4 6
  5. ​
  6. [1, 2, 3].forEach((item, index, array) => {
  7.     console.log(item * index);
  8. });
  9. // 0 2 6
  10. 思考：
  11.  
  12. let numbers = [{ a: 1 }, { a: 2 }, { a: 3 }];
  13. numbers.forEach((item, index, array) => {
  14.     if (item.a > 1) {
  15.         item.a = index;
  16.     }
  17. });
  18. console.log(numbers);	// ?

1.2.21 flat

将多维数组扁平化，并返回一个新数组。方法接受一个数值，表示要扁平化的数组维度。

  1. let ary = [1, [2, [3, [4, 5]]], 6];
  2. console.log(ary.flat(1));	// [1, 2, Array(2), 6]
  3. console.log(ary.flat());	// [1, 2, Array(2), 6]，不传参默认为1
  4. console.log(ary.flat(2));	// [1, 2, 3, Array(2), 6]
  5. console.log(ary.flat(3));	// [1, 2, 3, 4, 5, 6]
  6. console.log(ary.flat(100));	// [1, 2, 3, 4, 5, 6]，可以超过维度深度，超过则会扁平化所有维度
  7. console.log(ary.flat(Infinity));	//无限大的层数，表示可以扁平化所有维度
  8. console.log(ary);	// [1, Array(2), 6]

1.2.22 map

遍历数组，针对每一个项返回一个新值，将新值放进新数组里，最后将新数组返回。

  1. [1, 2, 3].map(c => {
  2.     return c * 2;
  3. }); // [2,4,6]
  4. ​
  5. [1, 2, 3].map(c => {
  6.     return 2;
  7. }); // [2,2,2]
  8. ​
  9. [1, 2, 3].map((item, index, array) => {
  10.     return item * index;
  11. }); // [0,2,6]
  12. ​
  13. [{ a: 1 }, { a: 2 }, { a: 3 }, { a: 4 }, { a: 5 }].map(c => c.a);   // [1, 2, 3, 4, 5]
  14. 思考：
  15.  
  16. [1, 2, 3].map((item, index, array) => {
  17.     return index;
  18. }); // ?
  19. ​
  20. [1, 2, 3].map((item, index, array) => {
  21.     return index * array.length;
  22. }); // ?
  23. ​
  24. let numbers =[{ a: 1 }, { a: 2 }, { a: 3 }, { a: 4 }, { a: 5 }];
  25. //请使用map方法将numbers数据变为[3,6,9,12,15]
  26. ​
  27. //请使用map方法将numbers数据变为[3,6,9,8,10]
  28. ​
  29. let numbers = [{ a: 1, b: 10 }, { a: 2, b: 10 }, { a: 3, b: 10 }, { a: 4, b: 10 }, { a: 5, b: 10 }];
  30. //请使用map方法将numbers数据变为[9,8,7,6,5]

1.2.23 join

数组拼接成字符串方法，方法传入拼接关键字。

  1. [1,2,3].join(',');	// '1,2,3'
  2. 思考：
  3.  
  4. [{ a: 1 }, { a: 2 }].join(',');	// ?
  5.  
  6. let persons = [{ age: 50 }, { age: 12 }, { age: 30 }];
  7. //请写一个方法将persons变为 '12,30,50'

1.2.24 pop

从原数组取出最后一个项。

  1. let numbers = [1,2,3,4,5];
  2. numbers.pop();	// 5
  3. console.log(numbers);   // [1,2,3,4]
  4.  
  5. let empty = [];
  6. empty.pop();	// undefined
  7. console.log(empty);	// []

1.2.25 shift

从原数组取出第一个项。

  1. let numbers = [1,2,3,4,5];
  2. numbers.shift();    // 1
  3. console.log(numbers);   // [2,3,4,5]

1.2.26 unshift

在原数组的头部添加随意数量的项，并返回添加后数组的长度。

  1. let numbers = [1, 2, 3, 4, 5];
  2. let length = numbers.unshift(7, 8, 9);
  3. console.log(length);    // 8
  4. console.log(numbers);   // [7, 8, 9, 1, 2, 3, 4, 5]

1.2.27 reduce

方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。

  1. let arr = [1, 2, 3, 4, 5];
  2. console.log(arr.reduce((total, next) => total + next));
  3. //等价
  4. let total = 0;
  5. for (let next of arr) {
  6. 	total += next;
  7. }
  8. console.log(total);

1.3 Set

Set是一个无法添加重复值的集合。

  1. const set = new Set();  //创建一个空集合
  2. ​
  3. const s1 = new Set(["val1", "val2", "val3"]);   // 使用数组初始化集合
  4. console.log(s1.size);       // 3,长度访问跟数组的length不一样
  5. s1.add("Matt").add("Frisbie");  //可以链式添加
  6. s1.has('Matt'); // true，是否存在指定的项
  7. console.log(s1);    // Set(5) {"val1", "val2", "val3", "Matt", "Frisbie"}
  8. s1.add("Matt");
  9. console.log(s1);    // Set(5) {"val1", "val2", "val3", "Matt", "Frisbie"}，无法添加重复项
  10. ​
  11. let deleted = s1.delete('Matt');    // delete方法返回删除结果
  12. console.log(deleted);   // true
  13. console.log(s1);    // Set(4) {"val1", "val2", "val3", "Frisbie"}
  14. ​
  15. deleted = s1.delete('Matt');
  16. console.log(deleted);   // false，无法重复删除
  17. ​
  18. //可通过for of访问每个项
  19. for (let item of s1) {
  20.     console.log(item);
  21. }
  22. //val1 val2  val3 Frisbie
  23. ​
  24. //也可通过forEach方法访问
  25. s1.forEach(item => console.log(item));

Set的经典应用-去重

  1. let numbers = [1, 2, 3, 5, 6, 1, 2, 3];
  2. numbers = Array.from(new Set(numbers));
  3. console.log(numbers);   // [1, 2, 3, 5, 6]

思考：

  1. let chars = ['a', 'b', 'c', 'a', 'c', 'd'];
  2. // 将chars去重

作业：

  1. let objs = [{ count: 20 }, { count: 66 }, { count: 16 }, { count: 30 }, { count: 5 }, { count: 20 }, { count: 66 }];
  2. //使用objs打印 "5,16,20,30,66"
  3.  
  4. //使用objs打印 "20,30,66"

2. 第八章

2.1 对象属性的类型

2.1.1 configurable（可配置）

表示属性是否可以通过delete删除并重新定义，是否可以修改它的特性，以及是否可以把它改为访问器属性。默认情况下，所有直接定义在对象上的属性的这个特性都是 true。

  1. let person = {};
  2. Object.defineProperty(person, "name", {
  3.     configurable: false,
  4.     value: undefined
  5. });
  6. console.log(person);    //{name: undefined}
  7. delete person.name;  //false
  8. console.log(person);    //{name: undefined}
  1. let person = {};
  2. Object.defineProperty(person, "name", {
  3.     configurable: true,
  4.     value: undefined
  5. });
  6. console.log(person);    //{name: undefined}
  7. delete person.name;  //true
  8. console.log(person);    //{}
  1. let person = {};
  2. Object.defineProperty(person,
  3.     "name", {
  4.     configurable: false,
  5.     value: "Nicholas"
  6. });
  7. //Uncaught TypeError: Cannot redefine property: name
  8. Object.defineProperty(person, "name", {
  9.     configurable: true,
  10.     value: "Nicholas"
  11. });

2.1.2 enumerable

表示属性是否可以通过for-in循环返回。默认情况下，所有直接定义在对象上的属性的这个特性都是true。

  1. let person = {};
  2. Object.defineProperties(person, {
  3.     name: {
  4.         enumerable: false
  5.     },
  6.     sex: {
  7.         enumerable: true
  8.     },
  9.     age: {
  10.         enumerable: true
  11.     }
  12. });
  13. for (let key in person) {
  14.     console.log(key);
  15. }
  16. // sex
  17. // age

2.1.3 writable

表示属性的值是否可以被修改。默认情况下，所有直接定义在对象上的属性的这个特性都是true。

  1. var obj = {};
  2. Object.defineProperties(obj, {
  3.     sex: {
  4.         value: '男',
  5.         writable: true
  6.     },
  7.     name: {
  8.         value: '张三',
  9.         writable: false
  10.     }
  11. });
  12. obj.name = '李四';
  13. obj.sex = '女';
  14. console.log(obj);   //{sex: "女", name: "张三"}

2.1.4 value

包含属性实际的值。这就是前面提到的那个读取和写入属性值的位置。这个特性的默认值为undefined。

  1. let person = {};
  2. Object.defineProperty(person, "name", {
  3.     value: "Nicholas"
  4. });
  5. console.log(person.name);   //Nicholas

2.1.5 get

获取函数，在读取属性时调用。默认值为undefined。

  1. let book = {
  2.     year_: 2017, 
  3.     edition: 1
  4. };
  5. Object.defineProperty(book, "year", {
  6.     get() {
  7.         return this.year_;
  8.     }
  9. });
  10. console.log(book.year); // 2017
  11. console.log(book.edition); // 1

2.1.6 set

设置函数，在写入属性时调用。默认值为undefined。

  1. let book = {
  2.  year_: 2017, 
  3.  edition: 1
  4. };
  5. Object.defineProperty(book, "year", {
  6.  get() {
  7.      return this.year_;
  8.  },
  9.  set(newValue) {
  10.      if (newValue > 2017) {
  11.          this.year_ = newValue;
  12.          this.edition += newValue - 2017;
  13.      }
  14.  }
  15. });
  16. book.year = 2018;
  17. console.log(book.year); // 2018
  18. console.log(book.edition); // 2

2.2 获取属性描述

2.2.1 getOwnPropertyDescriptor（查看单个对象的属性）

获取指定属性的属性描述符。这个方法接收两个参数：属性所在的对象和要取得其描述符的属性名。返回值是一个对象，对于访问器属性包含属性的类型。

  1. let book = { name: '张三' };
  2. console.log(Object.getOwnPropertyDescriptor(book, 'name')); //{value: "张三", writable: true, enumerable: true, configurable: true}

2.2.2 getOwnPropertyDescriptors（查看整个对象）

方法用来获取一个对象的所有自身属性的描述符。

  1. let book = { name: '张三', age: 12 };
  2. console.log(Object.getOwnPropertyDescriptors(book));
  3. /**
  4. {
  5.     age: { value: 12, writable: true, enumerable: true, configurable: true }
  6.     name: { value: "张三", writable: true, enumerable: true, configurable: true }
  7. }
  8. */

2.3 合并对象

在es6之前，通常会封装一个方法，可参考jqeury的extend方法。

  1. var obj = {
  2.     a: 1,
  3.     b: 2
  4. }
  5. var obj1 = {
  6.     c: 3,
  7.     a: 5
  8. }
  9. {
  10.     a: 5,
  11.     b: 2,
  12.     c: 3
  13. }
  1. //一个特别简单的浅拷贝
  2. function extend(target, source) {
  3.     target = target || {};
  4.     if (typeof target !== 'object') {
  5.         throw new Error('target不是对象');
  6.     }
  7.     if (!source) {
  8.         throw new Error('source不能为空');
  9.     }
  10.     if (typeof source !== 'object') {
  11.         throw new Error('source不是对象');
  12.     }
  13.     for (let key in source) {
  14.         target[key] = source[key];  //然后将源对象的值赋值到target中
  15.     }
  16.     return target;  //最后返回target
  17. }
  18. ​
  19. var obj = extend({
  20.     a: 1,
  21.     b: 2
  22. }, {
  23.     c: 3,
  24.     a: 5
  25. })
  26. /**
  27. {
  28.     a: 5,
  29.     b: 2,
  30.     c: 3
  31. }
  32. */

Object.assign

用于对象的合并，将源对象（source）的所有可枚举属性，复制到目标对象（target）。源对象可以是多个，后者替换前者。

  1. let obj = Object.assign({ a: 1 }, { b: 2 }, { c: 3 }, { a: 5 }, { b: 6 });
  2. //{a: 5, b: 6, c: 3}

出现的问题：

以上方法都是浅拷贝，如果拷贝属性是对象，那么拷贝的只是引用。

  1. var obj = {
  2.     a: 1,
  3.     b: 'fff'
  4. }
  5. var obj1 = {
  6.     a: 2,
  7.     c: {
  8.         name: '李四',
  9.         age: 20
  10.     }
  11. }
  12. var obj2 = Object.assign({}, obj, obj1);
  13. obj1.a = 3;
  14. obj1.c.name = '王五';
  15. obj1.c.age = 30;
  16. console.log(obj2);	//obj2.c会跟着obj1.c的改变而改变

深拷贝

  1. //深拷贝
  2. function deepClone(target, source) {
  3.     if (typeof target !== 'object' || !target) {
  4.         return source || target;
  5.     }
  6.     if (typeof source !== 'object' || !source) {
  7.         return source;
  8.     }
  9.     for (let key in source) {
  10.         var item = source[key];
  11.         if (typeof item === 'object' && item) {
  12.             target[key] = deepClone(Array.isArray(item) ? [] : {}, item);
  13.         } else {
  14.             target[key] = item;
  15.         }
  16.     }
  17.     return target;
  18. }
  19.  
  20. var obj = {
  21.     a: 1,
  22.     b: 'fff'
  23. }
  24. var obj1 = {
  25.     a: 2,
  26.     c: {
  27.         name: '李四',
  28.         age: 20
  29.     }
  30. }
  31. var obj2 = deepClone(obj, obj1);
  32. obj1.a = 3;
  33. obj1.c.name = '王五';
  34. obj1.c.age = 30;
  35. console.log(obj2);	//obj2.c不会跟着obj1.c的改变而改变

2.4 解构

  1. // 使用对象解构
  2. let person = { name: 'Matt', age: 27 };
  3. //可以使用别名 personAge
  4. //相当于 let name = person.name;
  5. //相当于 let personAge = person.age;
  6. let { name, age: personAge } = person;
  7. console.log(name, personAge);	//Matt   27
  1. let person = { name: 'Matt', age: 27 };
  2. let { job } = person;	//不存在的也可以解构，其实就相当于   let job = person.job;
  3. console.log(job);	//undefined
  1. let person = { name: 'Matt', age: 27, sex: null };
  2. //也可以设置一个默认值，如果获取的值为undefined的话
  3. //注：如果获取的值为null则不会取默认值，而是直接设置为null
  4. let { name, job = 'Software engineer', sex = '男' } = person;
  5. console.log(name); // Matt 
  6. console.log(sex);	//null
  7. console.log(job); // Software engineer
  1. //无法解构null和undefined
  2. let { _ } = null; // TypeError
  3. let { _ } = undefined; // TypeError
  1. const [n1, n2, { a }] = [1, 2, { a: 3 }];	//解构数组
  2. console.log(n1, n2, a); // 1 2 3

思考：

  1. const data = [
  2.     {
  3.         name: '张三',
  4.         age: 50,
  5.         sex: '男',
  6.         children: [
  7.             {
  8.                 name: '张琳',
  9.                 sex: '女',
  10.                 age: 20
  11.             }
  12.         ]
  13.     },
  14.     {
  15.         name: '王五',
  16.         age: 25,
  17.         sex: undefined
  18.     }
  19. ];
  20. //把每个人的 name,age,sex解构出来，没有sex的设置默认值：男，重名的设置别名

2.5 创建对象

思考：假如现在有个需求，要创建5个人物对象，需要有名字、年龄、工作，大家会怎么写？

千万不要一个一个对象的去定义，不要重复相同的劳动，毫无意义！！！

2.5.1 简单工厂模式

简单理解工厂就是有一条标准化的流水线，只要输入参数就能按照标准流程生产出需要的产品。

  1. function createPerson(name, age, job) {
  2.     let o = new Object();
  3.     o.name = name;
  4.     o.age = age;
  5.     o.job = job;
  6.     o.sayName = function () {
  7.         console.log(this.name);
  8.     };
  9.     return o;
  10. }
  11. let person1 = createPerson("Nicholas", 29, "Software Engineer");
  12. let person2 = createPerson("Greg", 27, "Doctor");

2.5.2 构造函数模式

  1. function Person(name, age, job) {
  2.     this.name = name;
  3.     this.age = age;
  4.     this.job = job;
  5.     this.sayName = function () {
  6.         console.log(this.name);
  7.     };
  8. }
  9.  
  10. let person1 = new Person("Nicholas", 29, "Software Engineer"); 
  11. let person2 = new Person("Greg", 27, "Doctor"); 
  12. person1.sayName(); // Nicholas 
  13. person2.sayName(); // Greg
  14. console.log(person1.constructor == Person); // true 
  15. console.log(person2.constructor == Person); // true
  16.  
  17. console.log(person2 instanceof Object); // true 
  18. console.log(person2 instanceof Person); // true
  1. //写成函数表达式也行
  2. let Person = function (name, age, job) {
  3.     this.name = name;
  4.     this.age = age;
  5.     this.job = job;
  6.     this.sayName = function () {
  7.         console.log(this.name);
  8.     };
  9. }
  10.  
  11. let person1 = new Person("Nicholas", 29, "Software Engineer"); 
  12. let person2 = new Person("Greg", 27, "Doctor"); 
  13. person1.sayName(); // Nicholas 
  14. person2.sayName(); // Greg
  15. console.log(person1.constructor == Person); // true 
  16. console.log(person2.constructor == Person); // true
  17.  
  18. console.log(person2 instanceof Object); // true 
  19. console.log(person2 instanceof Person); // true

缺陷：每次sayName方法都要重新定义一次，其实这个方法只需定义一次即可。

2.5.3 原型模式

  1. function Person() { }
  2. Person.prototype.name = "Nicholas";
  3. Person.prototype.age = 29;
  4. Person.prototype.job = "Software Engineer";
  5. Person.prototype.sayName = function () {
  6.     console.log(this.name);
  7. };

缺陷： 1. 原型上的对象数据会被共享，一个对象改了，其他对象也会跟着变。2. 创建对象不方便。

改良

  1. function Person(name, age, job) {
  2.     this.name = name;
  3.     this.age = age;
  4.     this.job = job;
  5. }
  6. //将无需重复定义/共享的定义在原型上
  7. Person.prototype.sayName = function () {
  8.     console.log(this.name);
  9. };
  10.  
  11. let person1 = new Person("Nicholas", 29, "Software Engineer"); 
  12. let person2 = new Person("Greg", 27, "Doctor"); 
  13. person1.sayName(); // Nicholas 
  14. person2.sayName(); // Greg

2.6 hasOwnProperty

hasOwnProperty()方法用于确定某个属性是在实例上还是在原型对象上。

  1. function Person() { }
  2. Person.prototype.age = 12;
  3. let person1 = new Person;
  4. person1.age = 20;
  5. console.log(person1.age);	//20
  6. console.log(person1.hasOwnProperty("age"));	//true	来自实例
  7. delete person1.age;
  8. console.log(person1.age);	//12
  9. console.log(person1.hasOwnProperty("age"));	//false	来自原型

in

in操作符会在可以通过对象访问指定属性时返回true，无论该属性是在实例上还是在原型上。

  1. function Person() { }
  2. Person.prototype.age = 12;
  3. let person1 = new Person;
  4. person1.age = 20;
  5. console.log(person1.age);	//20
  6. console.log(person1.hasOwnProperty("age"));	//true	来自实例
  7. 'age' in person1;	//true
  8. delete person1.age;
  9. console.log(person1.age);	//12
  10. console.log(person1.hasOwnProperty("age"));	//false	来自原型
  11. 'age' in person1;	//true

思考：

如何判断一个属性是来自原型而不是来自实例呢？

2.7 keys

Object.keys()方法接收一个对象作为参数，返回包含该对象所有可枚举的实例属性名称的字符串数组。

Object.keys({ a: 1, b: 2, c: 3 });  //["a", "b", "c"]

2.8 getOwnPropertyNames

Object.getOwnPropertyNames()方法可以获取所有实例属性，无论是否可以枚举。

  1. function Person() {
  2.     this.sex = '男';
  3. }
  4. Person.prototype.name = "Nicholas";
  5. Person.prototype.age = 29;
  6. Person.prototype.job = "Software Engineer";
  7. Person.prototype.sayName = function () {
  8.     console.log(this.name);
  9. };
  10. var p = new Person();
  11. console.log(Object.getOwnPropertyNames(p)); //?

2.9 values

Object.values()返回对象值的数组。

  1. const o = {
  2.     foo: 'bar',
  3.     baz: 1,
  4.     qux: {}
  5. };
  6. console.log(Object.values(o)); // ["bar", 1, {}]

2.10 entries

Object.entries() 接收一个对象，返回键/值对的数组。

  1. const o = {
  2.     foo: 'bar',
  3.     baz: 1,
  4.     qux: {}
  5. };
  6. console.log(Object.entries(o));	// [["foo", "bar"], ["baz", 1], ["qux", {}]]

思考：

  1. const o = {
  2.     foo: 'bar',
  3.     baz: 1,
  4.     qux: {}
  5. };
  6. Object.entries(o);	//用解构将所有的key和value解构出来

2.11 原型

每个对象都有一个特殊的属性叫作原型（prototype），在原型上定义的属性和方法会被每一个实例对象共享。

  1. function Person() { }
  2. Person.prototype.name = "无名";
  3. Person.prototype.children = [];
  4. Person.prototype.sayName = function () {
  5.     console.log(`我的名字叫：${this.name}`);
  6. }
  7.  
  8. let zhangsan = new Person();
  9. let lisi = new Person();
  10. console.log(zhangsan.name);
  11. console.log(lisi.name);
  12. console.log(zhangsan.hasOwnProperty('name'));
  13. zhangsan.name = '张三';
  14. console.log(zhangsan.hasOwnProperty('name'));
  15. console.log(lisi.name);
  16. Person.prototype.name = '有名';
  17. console.log(lisi.name);
  18. console.log(zhangsan.name);
  19. delete zhangsan.name;
  20. console.log(zhangsan.name);
  21.  
  22. lisi.name = '李四';
  23. console.log(zhangsan.sayName());
  24. console.log(lisi.sayName());
  25. console.log(zhangsan.sayName === lisi.sayName);
  26.  
  27. zhangsan.children.push('张欣');
  28. console.log(zhangsan.children);
  29. console.log(lisi.children);
  30. console.log(zhangsan.hasOwnProperty('children'));
  31. console.log(zhangsan.children === lisi.children);
  32. //?

2.12 原型链

每个构造函数都有一个原型对象，原型有一个属性指回构造函数，而实例有一个内部指针指向原型。如果原型是另一个类型的实例呢？那就意味着这个原型本身有一个内部指针指向另一个原型，相应地另一个原型也有一个内部指针指向另一个构造函数的原型对象，这样就在实例和原型之间构造了一条原型链。

  1. function Person() { }
  2. Person.prototype.constructor === ?;
  3. Person.prototype.constructor.prototype === ?;
  4. Person.prototype.__proto__ === ?
  5.  
  6. let zhangsan = new Person;
  7. zhangsan.constructor === Person;
  8. zhangsan.__proto__ === ?;
  9. zhangsan.__proto__.__proto__ === ?
  1. let obj = new Object();
  2. obj.__proto__ === ?;
  3. obj.__proto__.__proto__ === ?

2.13 面向过程

现在有个需求：创建一个人，张三、男、20岁。

  1. let zhangsan = new Object;
  2. zhangsan.name = '张三';
  3. zhangsan.age = 20;
  4. zhangsan.sex = '男';

又新来了一个需求：创建一个人，李四、男、30岁。

  1. let lisi = new Object;
  2. lisi.name = '李四';
  3. lisi.age = 30;
  4. lisi.sex = '男';

随着需求的不断增加，已经添加了1000个人。

  1. let zhangsan = new Object;
  2. zhangsan.name = '张三';
  3. zhangsan.age = 20;
  4. zhangsan.sex = '男';
  5.  
  6. let lisi = new Object;
  7. lisi.name = '李四';
  8. lisi.age = 30;
  9. lisi.sex = '男';
  10. //...........剩下的3992行代码

然后突然有一天新增了一个需求：将所有年龄>=20的标记为青年，<20的标记为少年。

  1. let zhangsan = new Object;
  2. zhangsan.name = '张三';
  3. zhangsan.age = 20;
  4. zhangsan.sex = '男';
  5. zhangsan.type = '青年';
  6.  
  7. let lisi = new Object;
  8. lisi.name = '李四';
  9. lisi.age = 30;
  10. lisi.sex = '男';
  11. zhangsan.type = '青年';
  12. //...........剩下的4990行代码

突然有一天，又要为每个人新增一个行为：能自我介绍。

...........更多的需求

思考：面向过程的痛点是什么？怎么去解决它？

2.14 面向对象（面向管理，封装函数统一管理）

将任何事物都想象成一个对象，并提炼出这个对象的属性、行为等，然后封装起来。

需求：创建一个人，张三、男、20岁。

此刻，首先需将人想象为一个对象，目前给出的三个属性是姓名、性别、年龄，将封装思想用起来。

  1. function Person(name, age, sex) {
  2.     this.name = name;
  3.     this.age = age;
  4.     this.sex = sex;
  5. }
  6.  
  7. let zhangsan = new Person('张三', 20, '男');

又新来了一个需求：创建一个人，李四、男、30岁。

let lisi = new Person('李四', 30, '男');

随着需求的不断增加，已经添加了1000个人。

  1. function Person(name, age, sex) {
  2.     this.name = name;
  3.     this.age = age;
  4.     this.sex = sex;
  5. }
  6.  
  7. let zhangsan = new Person('张三', 20, '男');
  8. let lisi = new Person('李四', 30, '男');
  9. //...   剩下的998行代码

然后突然有一天新增了一个需求：将所有年龄>=20的标记为青年，<20的标记为少年。

  1. function Person(name, age, sex) {
  2.     this.name = name;
  3.     this.age = age;
  4.     this.sex = sex;
  5.     //只需在构造函数里新增一个判断即可，其他每个实例都不用动
  6.     if (this.age >= 20) {
  7.         this.type = '青年';
  8.     }
  9.     else {
  10.         this.type = '少年';
  11.     }
  12. }

突然有一天，又要为每个人新增一个行为：能自我介绍。

  1. function Person(name, age, sex) {
  2.     this.name = name;
  3.     this.age = age;
  4.     this.sex = sex;
  5.     if (this.age >= 20) {
  6.         this.type = '青年';
  7.     }
  8.     else {
  9.         this.type = '少年';
  10.     }
  11. }
  12. ​
  13. Person.prototype.say = function () {
  14.     console.log(`我是${this.name}，我今年${this.age}岁了，我是个${this.sex}人，算是${this.type}了`);
  15. }
  16. ​
  17. let zhangsan = new Person('张三', 20, '男');
  18. let lisi = new Person('李四', 30, '男');
  19. //...  剩下的998行代码
  20. console.log(zhangsan.say());
  21. console.log(lisi.say());

2.15 继承

继承就是子继承父的所有属性和方法，如：父亲的基因被儿子继承，所以通过DNA（原型链）可追溯某人的向上继承关系。从技术上来讲就是继承父对象的所有属性和方法。

  1. function Father() {
  2.     this.money = 10000000000;   //百亿家产
  3.     this.houses = 10;   //10栋别墅
  4.     this.cars = 100;    //100辆车
  5. }
  6.  
  7. function Son() {
  8.     Father.call(this);  //继承父亲的家产
  9. }
  10.  
  11. let son = new Son;
  12. console.log(son.money, son.houses, son.cars);   //10000000000 10 100

2.15.1 原型式继承（父类的实例作为子类的原型(实力原型属性都会继承)）

  1. function superType() {
  2.     this.name = '张三';
  3.     this.children = ['张欣', '张宇'];
  4. }
  5. superType.prototype.age = 12;
  6. function sub() {
  7. }
  8. sub.prototype = new superType();
  9. var s = new sub();
  10. console.log(s.name, s.age);    //张三 12
  11. console.log(s.hasOwnProperty('name'));  //false
  12. console.log(s.hasOwnProperty('children'));  //false
  13.  
  14. var s1 = new sub();
  15. s1.children.push('李四');
  16. console.log(s1.children);
  17. console.log(s.children);
  18.  
  19. console.log(s.constructor === superType);   //true
  20. console.log(s instanceof sub);  //true
  21. console.log(s instanceof superType);    //true

2.15.2 盗用构造函数（call中的this指向实例化对象）

  1. function superType() {
  2.     this.name = '张三';
  3.     this.children = ['张欣', '张宇'];
  4. }
  5. superType.prototype.age = 12;
  6. function sub() {
  7.     superType.call(this);
  8. }
  9.  
  10. var s = new sub();	//从sub派生出来的，继承自sub
  11. console.log(s.name);    //张三
  12. console.log(s.hasOwnProperty('name'));  //true
  13. console.log(s.hasOwnProperty('children'));  //true
  14.  
  15. var s1 = new sub();
  16. s1.children.push('李四');
  17. console.log(s1.children);
  18. console.log(s.children);
  19.  
  20. console.log(s.constructor === sub);   //true
  21. console.log(s instanceof sub);  //true
  22. console.log(s instanceof superType);    //false
  23. //目前为止一切看起来都正常了
  24. console.log(s.age, s1.age);

2.15.3 组合继承

组合继承（有时候也叫伪经典继承）综合了原型链和盗用构造函数，将两者的优点集中了起来。基本的思路是使用原型链继承原型上的属性和方法，而通过盗用构造函数继承实例属性。这样既可以把方法定义在原型上以实现重用，又可以让每个实例都有自己的属性。

  1. function superType() {
  2.     console.log('superType执行了一次');
  3.     this.name = '张三';
  4.     this.children = ['张欣', '张宇'];
  5. }
  6. superType.prototype.age = 12;
  7. function sub() {
  8.     superType.call(this);
  9. }
  10.  
  11. //直接继承原型，不用再次实例化父类构造函数，防止再次执行父类构造函数
  12. //sub.prototype = Object.create(superType.prototype, { constructor:{ value:sub, enumerable:false } });
  13.  
  14. //跟上面的一样，只是最后自己手动修改一下构造函数的指向
  15. sub.prototype = Object.create(superType.prototype)
  16. sub.prototype.constructor = sub;
  17.  
  18. //使用浅拷贝的方式将自身的构造函数替换掉父类原型的构造函数
  19. //sub.prototype = Object.assign(Object.create(superType.prototype), { constructor: sub });
  20.  
  21. var s = new sub();
  22. console.log(s.name);    //张三
  23. console.log(s.hasOwnProperty('name'));  //true
  24. console.log(s.hasOwnProperty('children'));  //true
  25.  
  26. var s1 = new sub();
  27. s1.children.push('李四');
  28. console.log(s1.children);
  29. console.log(s.children);
  30.  
  31. console.log(s.constructor === sub);   //true
  32. console.log(s instanceof sub);  //true
  33. console.log(s instanceof superType);    //true
  34. console.log(s.age, s1.age);     //12 12

2.16 class类

与函数类型相似，定义类也有两种主要方式：类声明和类表达式。这两种方式都使用class关键字加大括号。类其实就是语法糖。

  1. // 类声明
  2. class Person {} 
  3. // 类表达式
  4. const Animal = class {};

函数可以提升，但是类不能提升。

  1. console.log(ClassDeclaration); //ReferenceError: ClassDeclaration is not defined
  2. class ClassDeclaration {}
  3.  
  4. //同样也受到块级作用域的限制
  5. { 
  6.     function FunctionDeclaration() {} 
  7. 	class ClassDeclaration {} 
  8. }
  9. console.log(FunctionDeclaration);	//FunctionDeclaration() {} 
  10. console.log(ClassDeclaration);	//ReferenceError: ClassDeclaration is not defined

2.16.1 类的构成

类可以包含构造函数方法、实例方法、获取函数、设置函数和静态类方法，但这些都不是必需的。空的类定义照样有效。默认情况下，类定义中的代码都在严格模式下执行。

  1. // 空类定义，有效
  2. class Foo {} 
  3. // 有构造函数的类，有效
  4. class Bar { 
  5.     constructor() {} 
  6. }
  7. // 有获取函数的类，有效
  8. class Baz { 
  9.     get myBaz() {} 
  10. }
  11. // 有静态方法的类，有效
  12. class Qux { 
  13.     static myQux() {} 
  14. }
  1. class Person {
  2.     constructor() {}
  3.  
  4.     name = '张三';
  5.     _age = 17;
  6.     children = [];
  7.  
  8.     say() {
  9.         console.log(`我的名字叫：${this.name}`);
  10.     }
  11.  
  12.     static isPerson(person) {
  13.         return person instanceof Person;
  14.     }
  15.  
  16.     get type() {
  17.         if (this._age > 18) {
  18.             return '青年';
  19.         }
  20.         return '少年';
  21.     }
  22.  
  23.     get age() {
  24.         return this._age;
  25.     }
  26.  
  27.     set age(value) {
  28.         if (value > 0 && value < 120) {
  29.             this._age = value;
  30.         }
  31.     }
  32. }
  33.  
  34. let person = new Person();
  35. console.log(person.age, person.type);
  36. person.age = 0;
  37. console.log(person.age);
  38. person.age = 20;
  39. console.log(person.type);
  40. console.log(Person.isPerson(person), Person.isPerson(new Object()));
  41. console.log(person.hasOwnProperty('name'), person.hasOwnProperty('children'));

2.16.2 类构造函数

constructor关键字用于在类定义块内部创建类的构造函数。方法名constructor会告诉解释器在使用new操作符创建类的新实例时，应该调用这个函数。

  1. class Animal { }
  2. class Person {
  3.     constructor() {
  4.         console.log('person ctor');
  5.     }
  6. }
  7. class Vegetable {
  8.     constructor(color) {
  9.         this.color = color;
  10.     }
  11. }
  12. let a = new Animal();
  13. let p = new Person(); // person ctor 
  14. let v = new Vegetable('orange');
  15. console.log(v.color); // orange
  1. //和下面代码等价
  2. function Person() {
  3.     console.log('person ctor');
  4. }
  5. function Vegetable(color) {
  6.     this.color = color;
  7. }
  8. let p = new Person(); // person ctor 
  9. let v = new Vegetable('orange');
  10. console.log(v.color); // orange

super

super表示父对象。

  1. class Father {
  2.     constructor(name, age, sex) {
  3.         this.name = name;
  4.         this.age = age;
  5.         this.sex = sex;
  6.     }
  7.  
  8.     money = 0;	//总钱数
  9.  
  10. 	//挣钱
  11.     makeMoney(money) {
  12.         this.money += money;
  13.         console.log(`这次赚了${money}，到目前为止总共已经赚了${this.money}了。`);
  14.     }
  15.  
  16.     say() {
  17.         console.log(`我叫${this.name}，今年${this.age}岁。`);
  18.     }
  19. }
  20.  
  21. class Son extends Father {
  22.     constructor(name, age, sex) {
  23.         super(name, age, sex);  //super作为父类构造函数只能用在子类构造函数中
  24.     }
  25.  
  26.     say() {
  27.         //super();	//报错
  28.         super.say();
  29.         console.log('我是我父亲的儿子，还在读大学');
  30.     }
  31. }
  32.  
  33. let son = new Son('张三', 20, '男');
  34. son.makeMoney(1000);
  35. son.makeMoney(100);
  36. son.say();
  1. //人（基类）基本类
  2. class Person {
  3.     constructor(name, age, sex, skin, country) {
  4.         this.name = name;
  5.         this.age = age;
  6.         this.sex = sex;
  7.         this.skin = skin;
  8.         this.country = country;
  9.     }
  10.  
  11.     //定义的函数（自我介绍）
  12.     introduction() {
  13.         console.log(`我叫${this.name}，今年${this.age}岁了，性别：${this.sex}，国籍：${this.country}，肤色：${this.skin}`);
  14.     }
  15. }
  16.  
  17. //黄种人
  18. class YellowPerson extends Person {
  19.     constructor(name, age, sex, country) {
  20.         super(name, age, sex, '黄色', country);
  21.     }
  22. }
  23.  
  24. //中国人
  25. class ChinesePerson extends YellowPerson {
  26.     constructor(name, age, sex) {
  27.         super(name, age, sex, '中国');
  28.     }
  29.  
  30.     //自我介绍
  31.     introduction() {
  32.         super.introduction();
  33.         console.log(`我们都会功夫，我们是世界第一！`);
  34.     }
  35. }
  36.  
  37. let yellowPerson = new YellowPerson('张三', 20, '男', '新加坡');
  38. let chinesePerson = new ChinesePerson('李四', 30, '男');
  39. yellowPerson.introduction();
  40. chinesePerson.introduction();

2.16.3 继承

ES6类支持单继承。使用extends关键字，就可以继承任何拥有[[Construct]]和原型的对象。很大程度上，这意味着不仅可以继承一个类，也可以继承普通的构造函数（保持向后兼容）。

  1. class Father {
  2.     money = 10000000000;   //百亿家产
  3.     houses = 10;   //10栋别墅
  4.     cars = 100;    //100辆车
  5.  
  6.     makeMoney(money) {
  7.         console.log(`又赚了${money}元`);
  8.         this.money += money;
  9.     }
  10. }
  11.  
  12. class Son extends Father { }
  13.  
  14. let son = new Son();
  15. console.log(son.money, son.houses, son.cars);
  16. son.makeMoney(10000);
  17. console.log(son.money, son.houses, son.cars);
  18. console.log(son.hasOwnProperty('money'), son.hasOwnProperty('houses'), son.hasOwnProperty('cars'));
  19. console.log(son instanceof Son);
  20. console.log(son instanceof Father);

单继承

一次只能继承一个父类，就好比一个人只能有一个父亲。但是可以嵌套继承，就好比儿子继承父亲，父亲继承爷爷。

  1. //爷爷
  2. class GrandPa { }
  3. //父亲
  4. class Father extends GrandPa{ }
  5.  
  6. class Son extends Father, GrandPa { }	//错误
  7. class Son extends Father extends Object { } //错误
  8. class Son extends Father, extends Object { } //错误
  9. class Son extends Father { }	//正确，同时拥有了爷爷和父亲的属性
  1. //爷爷
  2. class GrandPa {
  3.     house = 10;
  4. }
  5. //父亲
  6. class Father extends GrandPa {
  7.     cars = 10;
  8.     tellMe() {
  9.         console.log(`我继承了我父亲的${this.house}套房子`);
  10.     }
  11. }
  12. //儿子
  13. class Son extends Father {
  14.     tellMe() {
  15.         console.log(`我不用劳动就继承了我爷爷的${this.house}套房子和我父亲的${this.cars}辆车子`);
  16.     }
  17. }
  18.  
  19. var father = new Father;
  20. var son = new Son;
  21. father.tellMe();
  22. son.tellMe();

思考：可以无限继承吗？

练习：用继承实现dialog、alert、confirm等效果。

  1. function Dialog(msg) {
  2.     if (!(this instanceof Dialog)) {
  3.         return new Dialog(msg);
  4.     }
  5.     this.id = Dialog.id++;
  6.     this.Dialogs.push(this);
  7.     this.init(msg);
  8. }
  9. ​
  10. //所有的弹出框对象
  11. Dialog.prototype.Dialogs = [];
  12. ​
  13. //计算底部位置
  14. Dialog.prototype.getHeight = function () {
  15.     return this.container.clientHeight;
  16. }
  17. ​
  18. //使用观察者模式告知删除
  19. //接收通知
  20. Dialog.prototype.receive = function (height) {
  21.     this.resetTop(height);
  22. }
  23. ​
  24. //通知
  25. Dialog.prototype.notify = function () {
  26.     const height = -(this.getHeight() + 10);
  27.     this.Dialogs.forEach(item => {
  28.         if (item.id > this.id) {
  29.             item.receive(height);
  30.         }
  31.     });
  32. }
  33. ​
  34. //计算所有容器的高度总和
  35. Dialog.prototype.calcAllHeight = function () {
  36.     let height = 0;
  37.     this.Dialogs.forEach(item => {
  38.         if (item.id !== this.id) {
  39.             height += item.getHeight();
  40.         }
  41.     });
  42.     return height;
  43. }
  44. ​
  45. Dialog.prototype.resetTop = function (top) {
  46.     if (!isNaN(top)) {
  47.         const originHeight = parseInt(this.container.style.top.replace('px'));  //原始高度
  48.         top += originHeight;
  49.     } else {
  50.         top = this.calcAllHeight() + 10 * this.Dialogs.length;
  51.     }
  52.     //改变容器位置
  53.     this.container.style.top = top + 'px'
  54. }
  55. ​
  56. Dialog.prototype.init = function (content) {
  57.     this.container = document.createElement('div'); //创建一个div容器
  58.     this.container.style = `background: yellow;padding: 10px; border: #000000 1px solid; position: fixed;z-index: 99999;left: 43%;`;
  59. ​
  60.     this.header = document.createElement('div');    //头部容器
  61.     this.header.style = 'text-align:right;font-size:15px;';
  62.     this.closeButton = document.createElement('label'); //关闭按钮
  63.     this.closeButton.innerText = 'X';
  64.     this.closeButton.style = 'font-weight:bold;';
  65.     this.closeButton.onclick = () => {
  66.         this.remove();
  67.     };
  68.     this.header.appendChild(this.closeButton);
  69. ​
  70.     this.content = document.createElement('div');  //创建一个div用于显示content内容
  71.     this.content.innerHTML = content;
  72.     this.resetTop();
  73.     this.container.appendChild(this.header);
  74.     this.container.appendChild(this.content);
  75.     document.body.appendChild(this.container);  //将容器加入到body最后
  76. }
  77. ​
  78. Dialog.prototype.remove = function () {
  79.     const index = this.Dialogs.findIndex(c => c.id === this.id);
  80.     this.Dialogs.splice(index, 1);
  81.     this.notify();  //通知下边的提示框已删除
  82.     this.container.parentElement.removeChild(this.container);   //移除弹出框
  83. }
  84. ​
  85. Dialog.id = 0;
  86. ​
  87. let d1 = new Dialog('这是第一个弹出框');
  88. let d2 = Dialog('这是第二个弹出框');
  89. let d5 = Dialog(`<table border="1">
  90. <tr>
  91.     <td>姓名</td>
  92.     <td>年龄</td>
  93. </tr>
  94. <tr>
  95.     <td>张三</td>
  96.     <td>20</td>
  97. </tr>
  98. <tr>
  99.     <td>李四</td>
  100.     <td>30</td>
  101. </tr>
  102. </table>`);
  103. ​
  104. //弹出提示框
  105. function MyAlert(msg, type) {
  106.     Dialog.call(this, msg);     //将Dialog的this指向到当前实例对象上，所以使用this相当于给当前实例对象定义属性
  107.     this.setIcon(type);
  108. }
  109. ​
  110. //提示框继承Dialog，在Dialog的原基础上新增或修改
  111. MyAlert.prototype = Object.create(Dialog.prototype);
  112. MyAlert.prototype.constructor = MyAlert;
  113. ​
  114. MyAlert.prototype.setIcon = function (type) {
  115.     this.icon = document.createElement('label');
  116.     this.icon.innerText = type === 'fail' ? '×' : '√';
  117.     this.icon.style = 'color:red;font-size:20px';
  118.     this.container.insertBefore(this.icon, this.content);   //将图标加入到内容的前面
  119. ​
  120.     this.okButton = document.createElement('input');
  121.     this.okButton.type = 'button';
  122.     this.okButton.value = '确定';
  123. ​
  124.     //把内容容器改为inline-block
  125.     this.content.style.display = 'inline-block';
  126. ​
  127.     //将头部隐藏，因为不需要关闭按钮了
  128.     this.header.style.display = 'none';
  129. ​
  130.     //改变容器位置
  131.     this.resetTop();
  132. ​
  133.     //点击确定按钮时隐藏
  134.     this.okButton.onclick = () => {
  135.         this.remove();
  136.     }
  137. ​
  138.     this.buttonsContainer = document.createElement('div');  //用于存放按钮的容器
  139.     this.buttonsContainer.appendChild(this.okButton);
  140.     this.buttonsContainer.style = 'text-align:right;';
  141.     this.container.appendChild(this.buttonsContainer);
  142. }
  143. ​
  144. let d3 = new MyAlert('这是第一个失败的弹出框', 'fail');
  145. let d4 = new MyAlert('这是第一个成功弹出框', 'success');
  146. ​
  147. //询问对话框
  148. function MyConfirm(msg, title) {
  149.     MyAlert.call(this, msg);
  150.     this.setTitle(title);
  151. }
  152. ​
  153. //询问对话框可以继承提示框，在提示框的原基础上新增或修改
  154. MyConfirm.prototype = Object.create(MyAlert.prototype);
  155. MyConfirm.prototype.constructor = MyAlert;
  156. ​
  157. //设置标题
  158. MyConfirm.prototype.setTitle = function (title = '提示') {
  159.     this.title = document.createElement('div');
  160.     this.title.innerText = title;
  161.     this.title.style = 'font-size:15px;font-weight:bold;';
  162.     this.container.insertBefore(this.title, this.icon);
  163. ​
  164.     //改变一下icon的内容
  165.     this.icon.innerText = '？';
  166. ​
  167.     //改变容器位置
  168.     this.resetTop();
  169. ​
  170.     this.cancelButton = document.createElement('input');
  171.     this.cancelButton.type = 'button';
  172.     this.cancelButton.value = '取消';
  173.     this.cancelButton.onclick = () => {
  174.         console.log('取消');
  175.         this.remove();
  176.     };
  177. ​
  178.     this.buttonsContainer.appendChild(this.cancelButton);
  179. }
  180. ​
  181. let c1 = new MyConfirm('你确定要删除吗？');
  182. let c2 = new MyConfirm('你确定要删除吗？', '请看清楚');

要求：

使用Class实现一遍。

2.17 作业

  • 使用ES5和class两种方法实现以下需求：

  1. 设计一个Person（人）基础类，有姓名、年龄、性别、血型等属性。会走路、吃饭、自我介绍、睡觉。

  2. 设计Famer（农民）类，继承自Person，会种地。

  3. 设计BusinessMan（商人）类，继承自Person，会做生意。

  4. 设计Coder（程序员）类，继承自Person，会写代码。

  5. 设计JavaCoder（java程序员）类，继承自Coder，会写Java的代码。

  6. 设计JSCoder（JS程序员）类，继承自Coder，会写JS代码。

  7. 设计VueCoder（Vue程序员）类，继承自JSCoder，会开发Vue项目。

  8. 当调用自我介绍的方法时，每个人都要完整的说出自己会的每一项技能，如VueCoder会说：我叫xxx，今年xx岁了，我的性别是x，血型是x。我是个程序员，会写代码。JS是我的主力语言。不过我目前主要还是做Vue开发。

3. 作用域

JavaScript 一门解释型语言，运行到哪一段代码，就分析、编译哪一段代码，不会像其他编译型语言会提前将分析、编译等操作完成。所以JavaScript 的运行会分为两个阶段：分析阶段（分词、预编译）、执行阶段。

作用域的意思就是变量在哪个区域内起作用（可以被访问）。离开这个作用域后就无法访问到这个作用域内的变量了，例：

  1. function scope() {
  2.     var a = 1;
  3.     console.log(a); //这个作用域内可以被访问
  4. }
  5. scope();    //1
  6. console.log(a); //报错，因为出了scope函数作用域了

作用域又分为：全局作用域、块级作用域、函数作用域。

3.1 全局作用域

无论在何处都可以被访问到，全局作用域中定义的变量和方法都会被绑定到window上。

  1. var a = 1;  //全局变量
  2. function fnScope() {
  3.     console.log(a); //函数作用域中可以访问到
  4. }
  5. {
  6.     console.log(a); //块级作用域中也可以访问到
  7. }

3.2 块级作用域

以{}包裹的就是块级作用域（es6新增的let、const定义的）。

  1. {
  2.     let a = 1;
  3.     const b = 2;
  4.     console.log(a);     //只有在这个块级作用域中才能访问到a
  5. }
  6. console.log(a);     //出了块级作用域访问不到a了
  7. console.log(b); 
  1. {
  2.     var a = 1;  //提升
  3. }
  4. console.log(a);     //1
  1. if (false) {
  2.     var a = 1;  //提升，但是执行阶段不赋值
  3. }
  4. console.log(a);     //undefined
  1. {
  2.     function init() { }
  3. }
  4. console.log(init);	// ?
  1. if (false) {
  2.     function init() { }
  3. }
  4. console.log(init);	// ?
  1. {
  2.     function init() { }
  3.     init = 3;
  4. }
  5. console.log(init);	// function init() { }
  1. {
  2.     function init() { }
  3.     init = 3;
  4.     console.log('kuai', init);	// 3
  5. }
  6. console.log(init);	// function init() { }
  1. {
  2.     init = 4;
  3.     function init() { }
  4.     init = 3;
  5.     console.log('kuai', init);	// kuai,3
  6. }
  7. console.log(init);	// 4
  1. {
  2.     init = 4;
  3.     function init() { }
  4.     init = 3;
  5.     console.log('kuai', init);
  6.     function init() { }
  7.     var init = 5;
  8. }
  9. console.log(init);
  10. // Uncaught SyntaxError: Identifier 'init' has already been declared
  1. function fn() {
  2.     console.log('out');
  3. }
  4. if (false) {
  5.     function fn() {
  6.         console.log('inner');
  7.     }
  8. }
  9. fn();	// out

在同一个块级作用域中，如果有申明式函数，后面对于此函数的表达式更改都将被保护。但是在申明式函数前面的更改可以生效。

思考：

  1. {
  2.     init = 4;
  3.     function init() { }
  4.     init = 3;
  5.     console.log('kuai', init);  // ?
  6.     function init() { }
  7.     init = 5;
  8. }
  9. console.log(init);  // ?
  1. {
  2.     init = 4;
  3.     function init() { }
  4.     init = 3;
  5.     console.log('kuai', init);  // ?
  6.     function init() { }
  7.     init = 5;
  8.     function init() { }
  9. }
  10. console.log(init);  // ?

3.3 函数作用域

在function函数中的就是函数作用域。

  1. function fnScope() {
  2.     var a = 1;
  3.     console.log(a);     //在此函数作用域中可以访问到a
  4. }
  5. console.log(a);     //出了函数作用域就访问不到a了
  1. function fn() {
  2.     console.log('out');
  3. }
  4. function init() {
  5.     if (false) {
  6.         function fn() {
  7.             console.log('inner');
  8.         }
  9.     }
  10.     fn();   // Uncaught TypeError: fn is not a function
  11. }
  12. init();
  13. /*
  14. 因为函数作用域下fn会提升，但如果为false的话，方法体不会提升。所以最终变为了：
  15. function init() {
  16.     var fn;
  17.     if (false) {
  18.     }
  19.     // fn为undefined
  20.     fn();   // Uncaught TypeError: fn is not a function
  21. }
  22. */

思考：

  1. function fn() {
  2.     console.log('out');
  3. }
  4. function init() {
  5.     if (true) {
  6.         function fn() {
  7.             console.log('inner');
  8.         }
  9.     }
  10.     fn();   // ?
  11. }
  12. init();

4. 词法作用域

JavaScript 采用词法作用域(静态作用域)，词法作用域是在分析阶段确定的。无论函数在哪里被调用，也无论它如何被调用，它的词法作用域都只由函数被声明时所处的位置决定（小技巧：除了this定义和调用的值，其他都是在词法作用域中）。

  1. var a = 123;
  2. function parent() {
  3.     var a = 321;
  4.     function child() {
  5.             console.log(a);   //做词法分析的时候就已经确定了调用parent的词法作用域中的a
  6.     }
  7.     child();    //321
  8.     return child
  9. }
  10. const p = parent();     //无论调用位置在哪里
  11. p();    //321

再来看看this绑定的效果：

  1. var a = 123;
  2. function parent() {
  3.     var a = 321;
  4.     function child() {
  5.         console.log(this.a);   //运行时才能确定this的指向，确定了this的指向后才能确定a的值
  6.     }
  7.     child();    //123 this指向window
  8.     return child
  9. }
  10. const p = parent();
  11. p();    //123
  1. var a = 123;
  2. function parent() {
  3.     var a = 321;
  4.     function child() {
  5.         console.log(a);   //做词法分析的时候就已经确定了调用parent的词法作用域中的a
  6.     }
  7.     child();    //321
  8.     return child
  9. }
  10. const child = parent();
  11. var obj = {
  12.     a: 555,
  13.     child: child
  14. }
  15. obj.child();    //321 无论怎么调用，在哪里调用这个方法永远都打印321

5. 执行上下文

当JavaScript代码执行一段可执行代码(executable code)时，会创建对应的执行上下文(execution context)。

对于每个执行上下文，都有三个重要属性：

  • 变量对象(Variable object，VO)

  • 作用域链(Scope chain)

  • this

5.1 变量对象

变量对象是与执行上下文相关的数据作用域，存储了在上下文中定义的变量和函数声明。

5.1.1 全局上下文

可以通过this引用，在客户端 JavaScript中，全局对象就是window对象。

console.log(this);	//window

全局对象是由Object构造函数实例化的一个对象。

console.log(this instanceof Object);

预定义了一堆，大堆函数和属性。

  1. //都能生效
  2. console.log(Math.random());
  3. console.log(this.Math.random());

作为全局变量的宿主。

  1. var a = 1;
  2. console.log(this.a);

客户端JavaScript中，全局对象有window属性指向自身。

  1. var a = 1;
  2. console.log(window.a);	//1
  3.  
  4. this.window.b = 2;
  5. console.log(this.b);	//2
  6.  
  7. console.log(self);	//window
  8. console.log(globalThis);	//window

全局上下文中的变量对象其实就是全局对象。

1.1.2 函数上下文

在函数上下文中，我们用活动对象(Activation Object, AO)来表示变量对象。活动对象和变量对象其实是一个东西，只是变量对象是规范上的或者说是引擎实现上的，不可在JavaScript环境中访问，只有到当进入一个执行上下文中，这个执行上下文的变量对象才会被激活，所以才叫Activation Object，而只有被激活的变量对象，也就是活动对象上的各种属性才能被访问。

活动对象是在进入函数上下文时被创建的，它通过函数的arguments属性初始化。arguments属性值是 Arguments对象。

  1. function foo(a) {
  2.   var b = 2;
  3.   function c() {}
  4.   var d = function() {};
  5.   b = 3;
  6.   console.log(a);
  7.   console.log(b);
  8. }
  9. foo(1);

在进入执行上下文后。

  1. AO = {
  2.     arguments: {
  3.         0: 1,
  4.         length: 1
  5.     },
  6.     a: 1,
  7.     b: undefined,
  8.     c: reference to function c(){},
  9.     d: undefined
  10. }
  11.  
  12. //var person = { name: '张三', age: 13 }; obj.name;

5.2 作用域链

当查找变量的时候，会先从当前上下文的变量对象中查找，如果没有找到，就会从父级执行上下文的变量对象中查找，一直找到全局上下文的变量对象，也就是全局对象。这样由多个执行上下文的变量对象构成的链表就叫做作用域链。

函数有一个内部属性[[scope]]，当函数创建的时候，就会保存所有父变量对象到其中，你可以理解[[scope]]就是所有父变量对象的层级链。

  1. function foo() {
  2.     function bar() {
  3.         //更多代码
  4.     }
  5. }

函数创建时，各自的[[scope]]为：

  1. foo.[[scope]] = [
  2.   globalContext.VO
  3. ];
  4.  
  5. bar.[[scope]] = [
  6.     fooContext.AO,
  7.     globalContext.VO
  8. ];

子作用域可以访问父作用域的变量，父作用域不能访问子作用域的变量（只能自下往上查找，不能自上往下查找）。

  1. function parent() {
  2.     var a = 1;
  3.     function child() {
  4.         var b = 2;
  5.         console.log(a); //可以访问到parent中的a
  6.     }
  7.     console.log(b);     //报错，因为访问不到child中的b
  8. }

5.3 this

前面已经提到javascript采用的是静态作用域，但是this算是模仿了动态作用域，this是在执行阶段时确定的。

5.3.1 默认绑定（无任何修饰符，指向window）

不带任何修饰的函数进行调用的，只能采用默认绑定，this指向全局。严格模式下不能将全局对象用于默认绑定，因此this会绑定到undefined。

  1. function foo () {
  2.     console.log(this);	//window
  3.     console.log(this.a);
  4. }
  5. var a = 12;
  6. foo();  //12
  1. function a() {
  2.     console.log('a', this);	//'a' window
  3. }
  4. function b() {
  5.     a();
  6.     console.log('b', this);	//'b' window
  7. }
  8. function c() {
  9.     b();
  10.     console.log('c', this);	//'c' window
  11. }
  12. c();

思考：

  1. var a = 12;
  2. function test() {
  3.     this.a = 13;
  4. }
  5. test();
  6. console.log(a);	//?

5.3.2 隐式绑定（带修饰符的，指向前边一个调用者obj.foo();）

对象内部包含一个指向函数的属性，并通过这个属性间接引用这个函数，从而把this间接（隐式）绑定到这个对象上。

  • 无论是直接在obj中定义还是再添加为引用属性，这个函数严格来说都不属于obj对象。

  1. function foo() {
  2.     console.log(this);  //{a: 2, foo: ƒ}
  3.     console.log(this.a);    //2
  4. }
  5. ​
  6. var obj = {
  7.     a: 2,
  8.     foo: foo
  9. }
  10. obj.foo();
  11. ​
  12. var obj = {
  13.     a: 2,
  14.     foo: function() {
  15.         console.log(this);  //{a: 2, foo: ƒ}
  16.         console.log(this.a);    //2
  17.     }
  18. }
  19. obj.foo();

  • 调用位置会使用obj上下文来引用函数，因此你可以说函数被调用时obj对象“拥有”或者“包含”函数引用。当foo()被调用时，它的前面确实加上了对obj的引用，当函数引用有上下文对象时，隐式绑定规则会把函数调用中的this绑定到这个上下文对象。因此调用foo()时this被绑定到obj，因此在函数中执行this.a和obj.a是一样的。

  • 对象属性引用链中只有上一层或者说最后一层在调用位置中起作用。

  1. function foo() {
  2.     console.log(this.a);
  3. }
  4. ​
  5. var obj2 = {
  6.     a: 1,
  7.     foo: foo
  8. }
  9. ​
  10. var obj1 = {
  11.     a: 2,
  12.     obj2: obj2
  13. }
  14. obj1.obj2.foo();    //1
  15. ​
  16. var obj3 = {
  17.     a: 3,
  18.     obj1: obj1
  19. }
  20. obj3.obj1.obj2.foo();   //1

5.3.3 显示绑定

call,apply,bind都属于显式绑定一类，显示绑定后this便无法再修改。

  1. function foo() {
  2.     console.log(this);	//{a: 2}
  3.     console.log(this.a);  //2
  4. }
  5. var obj = {
  6.     a: 2
  7. }
  8. foo.call(obj);
  1. function foo() {
  2.     console.log(this);	//{a: 2}
  3.     console.log(this.a);  //2
  4. }
  5. var obj = {
  6.     a: 2
  7. }
  8. foo.apply(obj);
  1. function foo() {
  2.     console.log(this);	//{a: 2}
  3.     console.log(this.a);	//2
  4. }
  5. var obj = {
  6.     a: 2
  7. }
  8. var f = foo.bind(obj);
  9. f();

5.3.4 new绑定（会将实例对象绑定到函数调用中的this上。）

实例化一个新对象后，会将实例对象绑定到函数调用中的this上。

  1. function foo(a) {
  2.     console.log(this);	//foo {}
  3.     this.a = a;
  4.     console.log(this.a);	//2
  5. }
  6. var bar = new foo(2);
  7. console.log(bar.a); //2
  8. console.log(a);	//Uncaught ReferenceError: a is not defined

思考：

  1. function foo() {
  2.     console.log(this);	//?obj1
  3.     console.log(this.a);	//?20
  4. }
  5. var obj = {
  6.     a: 2
  7. }
  8. var obj1 = {
  9.     a: 20
  10. }
  11. var f = foo.bind(obj);
  12. f = f.bind(obj1);
  13. f();
  1. var num = 1;
  2. function a1() {
  3.     'use strict';//严格模式
  4.     console.log(this.num++);
  5. }
  6.  
  7. function a2() {
  8.     console.log(++this.num);
  9. }
  10.  
  11. (function () {
  12.     'use strict';//严格模式
  13.     a2();	// ?
  14. })()
  15. a1();	// ?
  1. function c1(name) {
  2.     if (name) {
  3.         this.name = name;
  4.     }
  5. }
  6.  
  7. function c2(name) {
  8.     this.name = name;
  9. }
  10.  
  11. function c3(name) {
  12.     this.name = name || 'test';
  13. }
  14.  
  15. c1.prototype.name = 'c1';
  16. c2.prototype.name = 'c2';
  17. c3.prototype.name = 'c3';
  18. console.log(new c1().name + new c2().name + new c3().name);		// ?

5.3.5 箭头函数

es6新增的()=>箭头函数中，this在分析阶段时就确定了（跟函数中的this在执行阶段时确定相反），绑定的是父作用域中的this，指向永远不变。其实总结起来就两点：

  • 外层有函数：外层函数的this就是箭头函数的this。

  1. function ab() {
  2.     var b = () => {
  3.         console.log(this);
  4.     };
  5.     b();
  6. }
  7. ab();   //window，因为外层函数的this采用了默认绑定规则
  1. var obj = {
  2.     a: 1,
  3.     foo() {
  4.         var fn = () => {
  5.             console.log(this.a);
  6.         };
  7.         fn();
  8.     }
  9. }
  10. obj.foo();  //1，外层函数的this采用了隐式绑定规则

  • 外层没有函数：箭头函数的this就是window。

  1. var a = 123;
  2. var obj = {
  3.     a: 1,
  4.     foo: () => {
  5.         console.log(this.a);
  6.     }
  7. }
  8. obj.foo();  //123

思考：

  1. var a = 666;
  2. var obj = {
  3.     a: 1,
  4.     obj: {
  5.         a: 2,
  6.         obj: {
  7.             a: 3,
  8.             foo: () => {
  9.                 console.log(this.a);
  10.             }
  11.         }
  12.     }
  13. }
  14. obj.obj.obj.foo();	//?
  1. var a = 666;
  2. var obj = {
  3.     a: 1,
  4.     foo() {
  5.         console.log(this.a);
  6.         var obj1 = {
  7.             a: 2,
  8.             foo: () => {
  9.                 console.log(this.a);
  10.                 function f() {
  11.                     console.log(a);
  12.                     console.log(this.a);
  13.                 }
  14.                 f();
  15.                 return f;
  16.             }
  17.         }
  18.         obj1.foo()();
  19.     }
  20. };
  21. obj.foo();  //?
  22. var ff = obj.foo;
  23. ff();   //?

5.4 总结

到目前为止还不知道执行上下文的结构。接下来通过例子讲解。

  1. var scope = "global scope";
  2. function checkscope(){
  3.     var scope = "local scope";
  4.     function f(){
  5.         return scope;
  6.     }
  7.     return f();
  8. }
  9. checkscope();

  1. 全局上下文初始化。

  1. globalContext = {
  2.     VO: [global],	//window是暴露出来的一个指向全局变量对象的属性
  3.     Scope: [globalContext.VO],
  4.     this: globalContext.VO
  5. }

  1. 初始化的同时，checkscope函数被创建，保存作用域链到函数的内部属性[[scope]]。

  1. checkscope.[[scope]] = [
  2.   globalContext.VO
  3. ];

  1. 执行checkscope函数，创建checkscope函数执行上下文并初始化。

  1. checkscopeContext = {
  2.     AO: {
  3.         arguments: {
  4.             length: 0
  5.         },
  6.         scope: undefined,
  7.         f: reference to function f(){}
  8.     },
  9.     Scope: [AO, globalContext.VO],
  10.     this: undefined
  11. }

  1. 执行f函数，创建f函数执行上下文并初始化。

  1. fContext = {
  2.     AO: {
  3.         arguments: {
  4.             length: 0
  5.         }
  6.     },
  7.     Scope: [AO, checkscopeContext.AO, globalContext.VO],
  8.     this: undefined
  9. }

思考：

  1. this.a = 20;
  2. function go() {
  3.     console.log(this);
  4.     console.log(this.a);
  5.     this.a = 30;
  6. }
  7. go.prototype.a = 40;
  8. var test = {
  9.     a: 50,
  10.     init(fn) {
  11.         fn();
  12.         console.log(this.a);
  13.         return fn;
  14.     }
  15. };
  16. console.log(new go().a);	// ?
  17. test.init(go);	// ?
  18. var p = test.init(go);	// ?
  19. p();	// ?

5.5 作业

  1. alert(a);	// ?	
  2. a();
  3. var a = 3;
  4. function a() {
  5.     alert(10);
  6. }
  7. alert(a);	// ?
  8. a = 6;
  9. a();	// ?
  1. var x = 1, y = 0, z = 0;
  2.  
  3. function add(x) {
  4.     return (x = x + 1);
  5. }
  6. y = add(x);
  7. console.log(y);	// ?
  8. function add(x) {
  9.     return (x = x + 3);
  10. }
  11. z = add(x);
  12. console.log(z);	// ?
  1. function foo() {
  2.     console.log(this.a);
  3. }
  4. function doFoo(fn) {
  5.     fn();   //调用位置
  6. }
  7. var obj = {
  8.     a: 2,
  9.     foo: foo
  10. }
  11. var a = 'this is global';
  12. obj.foo();	//?
  13. doFoo(obj.foo); //?
  1. function foo() {
  2.     console.log(this.a);
  3. }
  4. function doFoo(fn) {
  5.     fn();   //调用位置
  6. }
  7. var obj = {
  8.     a: 2,
  9.     foo: foo
  10. }
  11. var obj1 = {
  12.     a: 3,
  13.     obj: obj
  14. }
  15. var a = 'this is global';
  16. obj1.obj.foo();	//?
  17. doFoo(obj1.obj.foo); //?
  1. function foo() {
  2.     console.log(this.a);
  3. }
  4. function doFoo(fn) {
  5.     fn();   //调用位置
  6. }
  7. var obj = {
  8.     a: 2,
  9.     foo: foo
  10. }
  11. var a = 'this is global';
  12. setTimeout(obj.foo, 100);	//?
  1. function foo() {
  2.     console.log(this.a);
  3. }
  4. var obj = {
  5.     a: 2
  6. }
  7. var bar = function () {
  8.     foo.call(obj);
  9. }
  10. var a = 20;
  11. bar();  //?
  12. setTimeout(bar, 100);
  13. bar.call(window);   //?
  1. function foo() {
  2.     console.log(this.a);
  3. }
  4. var obj1 = {
  5.     a: 2,
  6.     foo: foo
  7. }
  8. var obj2 = {
  9.     a: 3
  10. }
  11. obj1.foo();     //?
  12. obj1.foo.call(obj2);    //?
  1. function foo(a) {
  2.     this.a = a;
  3. }
  4. var obj1 = {
  5.     foo: foo
  6. }
  7. var obj2 = {}
  8. obj1.foo(2);
  9. console.log(obj1.a);    //?
  10. obj1.foo.call(obj2, 3);
  11. console.log(obj2.a);    //?
  12. var bar = new obj1.foo(4);
  13. console.log(obj1.a);    //?
  14. console.log(bar.a); //?
  1. function foo(a) {
  2.     this.a = a;
  3. }
  4. var obj1 = {};
  5. var bar = foo.bind(obj1);
  6. bar(2);
  7. console.log(obj1.a);    //?
  8. var baz = new bar(3);
  9. console.log(obj1.a);    //?
  10. console.log(baz.a); //?
  1. var age = 12;
  2. function a() {
  3.     var age = 13;
  4.     function b() {
  5.         console.log(this.age);  //?
  6.         console.log(age);   //?
  7.         var age = 15;
  8.         function c() {
  9.             var age = 16
  10.             console.log(this.age);  //?
  11.             console.log(age);   //?
  12.         }
  13.         c();
  14.     }
  15.     b();
  16.     console.log(age);   //?
  17.     console.log(this.age);  //?
  18. }
  19. a();
  1. var age = 12;
  2. function a() {
  3.     var age = 13;
  4.     function b() {
  5.         console.log(age);
  6.         var age = 15;
  7.         function c() {
  8.             var age = 16
  9.             console.log(age);
  10.         }
  11.         c();
  12.     }
  13.     b();
  14.     console.log(age);
  15. }
  16. a();
  17. //请写出以上代码创建执行上下文创建过程

6. 第九章

6.1 代理（对源数据起到波阿虎作用）

生活中就有很多代理，比如机票代理，火车票代理，微商代理。代理人处在服务商和客户的中间，类似于中间商的概念。客户和服务商不直接通信，所有的沟通和业务往来都由代理人在中间处理。

  1. //微商卖鞋的商家
  2. class shoesSeller {
  3. 	constructor(name) {
  4. 		this.name = name;
  5. 	}
  6.  
  7. 	//问价
  8. 	askPrice(type) {
  9. 		switch (type) {
  10. 			case 'nike':
  11. 				return 1000;
  12. 			case 'addidas':
  13. 				return 900;
  14. 			case 'lining':
  15. 				return 1200;
  16. 			default:
  17. 				return 500;
  18. 		}
  19. 	}
  20.  
  21. 	//买鞋子
  22. 	buy(type, money) {
  23. 		switch (type) {
  24. 			case 'nike':
  25. 				return money === 1000;
  26. 			case 'addidas':
  27. 				return money === 900;
  28. 			case 'lining':
  29. 				return money === 1200;
  30. 			default:
  31. 				return money === 500;
  32. 		}
  33. 	}
  34. }
  35.  
  36. //微商鞋代理
  37. class shoesProxy {
  38. 	constructor(name) {
  39. 		this.name = name;
  40. 		this.seller = new shoesSeller('极度鞋城');
  41. 	}
  42.  
  43. 	//问价
  44. 	askPrice(type) {
  45. 		switch (type) {
  46. 			case 'nike':
  47. 				return 1300;
  48. 			case 'addidas':
  49. 				return 1200;
  50. 			case 'lining':
  51. 				return 1500;
  52. 			default:
  53. 				return 800;
  54. 		}
  55. 	}
  56.  
  57. 	//买鞋子
  58. 	buy(type, money) {
  59. 		let enough = false; //钱够不够
  60. 		switch (type) {
  61. 			case 'nike':
  62. 				enough = (money === 1300);
  63. 				break;
  64. 			case 'addidas':
  65. 				enough = (money === 1200);
  66. 				break;
  67. 			case 'lining':
  68. 				enough = (money === 1500);
  69. 				break;
  70. 			default:
  71. 				enough = (money === 800);
  72. 				break;
  73. 		}
  74. 		if (enough) {
  75. 			//如果钱够的话先给商家足够的钱，剩下的就是赚的代理费
  76. 			const sellerPrice = this.seller.askPrice(type); //商家的价格
  77. 			const proxyFee = money - sellerPrice; //代理费
  78. 			return true;
  79. 		}
  80. 		console.log('钱不够');
  81. 		return false;
  82. 	}
  83. }
  84.  
  85. var seller = new shoesSeller('极度鞋城');
  86. var proxy = new shoesProxy('极度代理商');
  87.  
  88. console.log('询问商家的价格：' + seller.askPrice('nike'));
  89. console.log('询问代理商的价格：' + proxy.askPrice('nike'));
  90. console.log('通过商家购买：' + seller.buy('nike', 1000));
  91. console.log('通过代理商购买：' + proxy.buy('nike', 1300));

6.1.1 创建空代理 Proxy（目标对象，处理程序对象）

空代理就是在代理对象上执行的所有操作都会无障碍地传播到目标对象。因此，在任何可以使用目标对象的地方，都可以通过同样的方式来使用与之关联的代理对象。

代理是使用Proxy构造函数创建的。这个构造函数接收两个参数：目标对象和处理程序对象。缺少其中任何一个参数都会抛出TypeError。

  1. const target = {
  2. 	id: 'target'
  3. };
  4. const handler = {};
  5. const proxy = new Proxy(target, handler);
  6. // id属性会访问同一个值
  7. console.log(target.id); // target
  8. console.log(proxy.id); // target
  9. // 给目标属性赋值会反映在两个对象上
  10. // 因为两个对象访问的是同一个值
  11. target.id = 'foo';
  12. console.log(target.id); // foo
  13. console.log(proxy.id); // foo
  14. // 给代理属性赋值会反映在两个对象上
  15. // 因为这个赋值会转移到目标对象
  16. proxy.id = 'bar';
  17. console.log(target.id); // bar
  18. console.log(proxy.id); // bar
  19. // hasOwnProperty()方法在两个地方
  20. // 都会应用到目标对象
  21. console.log(target.hasOwnProperty('id')); //true
  22. console.log(proxy.hasOwnProperty('id')); //true
  23. // Proxy.prototype是undefined
  24. // 因此不能使用instanceof操作符
  25. console.log(target instanceof Proxy); //TypeError: Function has non - object prototype 'undefined' in instanceof check
  26. console.log(proxy instanceof Proxy); //TypeError: Function has non - object prototype 'undefined' in instanceof check
  27. // 严格相等可以用来区分代理和目标
  28. console.log(target === proxy); // false
  29. 'id' in proxy;	//?true

6.1.2 get

捕获器就是在处理程序对象中定义的"基本操作的拦截器"。 跟Object.defineProperty的获取get()函数非常类似。

  1. const seller = {
  2. 	price: 1200
  3. };
  4. const handler = {
  5. 	// 捕获器在处理程序对象中以方法名为键
  6. 	get() {
  7. 		return '啥都别问我了，我不再代理那个无良商家的东西了';
  8. 	}
  9. };
  10. const proxy = new Proxy(seller, handler);
  11. console.log(proxy.price); //?
  12. console.log(proxy.name); //?
  13. console.log(proxy.whatsSell); //?
  14. console.log(seller.price); //?

所有捕获器都可以访问相应的参数，基于这些参数可以重建被捕获方法的原始行为。比如，get()捕获器会接收到目标对象、要查询的属性和代理对象三个参数。

  1. //林志玲的经纪人
  2. const agent = new Proxy({
  3. 	name: '林志玲',
  4. 	sex: '女',
  5. 	sanwei: '34,24,36',
  6. 	hasband: '黑泽良平',
  7. 	showFee: 1000000
  8. }, {
  9. 	get(target, property, proxy) {
  10. 		if (['sanwei', 'hasband'].includes(property)) {
  11. 			return '这个涉及到个人隐私，我不便回答';
  12. 		}
  13. 		if (property === 'showFee') {
  14. 			return target[property] + 100000;
  15. 		}
  16. 		if (property in target) {
  17. 			return target[property];
  18. 		}
  19. 		return '关于她这方面的信息我不是很了解';
  20. 	}
  21. });
  22.  
  23. console.log(agent.name);
  24. console.log(agent.sex);
  25. console.log(agent.sanwei);
  26. console.log(agent.hasband);
  27. console.log(agent.showFee);
  28. console.log(agent.parents);
  29. console.log(agent.highSchool);

6.1.3 set

  1. const person = {
  2. 	redPack: 0,
  3. 	name: '张三',
  4. 	sex: '男'
  5. };
  6.  
  7. const mother = new Proxy(person, {
  8. 	set(target, property, value, proxy) {
  9. 		if (property === 'redPack') {
  10. 			if (value > 500) {
  11. 				console.log('红包太大了，坚决不能给他');
  12. 			} else if (value < 500) {
  13. 				target.redPack = value;
  14. 			}
  15. 		} else if (property === 'name') {
  16. 			console.log('你谁啊，凭啥给我儿子改名啊');
  17. 		} else if (property === 'sex') {
  18. 			console.log('别乱动我儿子');
  19. 		} else if (property === 'techang') {
  20. 			target.techang = value;
  21. 		} else {
  22. 			console.log('其他的我儿子一律不需要');
  23. 		}
  24. 	}
  25. });
  26.  
  27. mother.redPack = 1000;
  28. mother.redPack = 300;
  29. mother.name = '李四';
  30. mother.sex = '女';
  31. mother.techang = '美术';
  32. mother.smoke = '抽烟';
  33. mother.drink = '喝酒';
  34.  
  35. console.log(person);
  36.  
  37. person.smoke = '抽烟';
  38. person.drink = '喝酒';
  39.  
  40. console.log(person);

代理代理代理

  1. const father = new Proxy(mother, {
  2. 	set(target, property, value, proxy) {
  3. 		if (property === 'redPack') {
  4. 			console.log('我做不了主，让他妈做决定吧');
  5. 			target.redPack = value;
  6. 		} else if (property === 'name') {
  7. 			console.log('啥？你要给我儿子改名字？这事不用问他妈，我抽死你');
  8. 		} else if (property === 'sex') {
  9. 			console.log('啥？你要让我儿子变性？我先打死你，不然让他妈知道了非得气死不可');
  10. 		} else {
  11. 			console.log('其他事我不管了，让他妈自己去决定吧');
  12. 			target[property] = value;
  13. 		}
  14. 	}
  15. });
  16.  
  17. father.redPack = 300;
  18. father.name = '李四';
  19. father.sex = '女';
  20. father.smoke = '抽烟';
  21. father.drink = '喝酒';
  22. father.techang = '街舞';
  23.  
  24. console.log(person);

6.2 Reflect

以后大家尽量用Reflect方法替代之前的Object同名方法，因为Reflect以后会逐渐替代Object的同名方法。

MDN Reflect资料查询

6.2.1 get/set

处理程序对象中所有可以捕获的方法都有对应的反射（Reflect）API方法。这些方法与捕获器拦截的方法具有相同的名称和函数签名，而且也具有与被拦截方法相同的行为。

  1. const target = {
  2. 	foo: 'bar'
  3. };
  4. const handler = {
  5. 	get() {
  6. 		return Reflect.get(...arguments);
  7. 	}
  8. };
  9. const proxy = new Proxy(target, handler);
  10. console.log(proxy.foo); // bar
  11. console.log(target.foo); // bar

甚至还可以写得更简洁一些。

  1. const target = {
  2. 	foo: 'bar'
  3. };
  4. const handler = {
  5. 	get: Reflect.get
  6. };
  7. const proxy = new Proxy(target, handler);
  8. console.log(proxy.foo); // bar
  9. console.log(target.foo); // bar

如果想创建一个可以捕获所有方法，然后将每个方法转发给对应反射API的空代理，那么甚至不需要定义处理程序对象 。

  1. const target = {
  2. 	foo: 'bar'
  3. };
  4. const proxy = new Proxy(target, Reflect);
  5. console.log(proxy.foo); // bar
  6. console.log(target.foo); // bar

6.2.2 has

方法对应name in obj里面的in运算符。方法需要传递两个参数，第一个是要检测的对象，第二个要检测的对象属性名。

  1. function Person() {
  2. 	this.name = '张三';
  3. }
  4. Person.prototype.name = '李四';
  5. let person = new Person;
  6. console.log(person.name);
  7. Reflect.has(person, 'name');
  8. delete person.name;
  9. console.log(person.name);
  10. Reflect.has(person, 'name');

6.2.3 deleteProperty

方法等同于delete obj[name]，用于删除对象的属性。方法需要传递两个参数，第一个是要删除的对象，第二个要删除的对象属性名。

  1. function Person() {
  2. 	this.name = '张三';
  3. }
  4. Person.prototype.name = '李四';
  5. let person = new Person;
  6. console.log(person.name);
  7. Reflect.deleteProperty(person, 'name');
  8. console.log(person.name);

6.2.4 construct

方法等同于new target(...args)，这提供了一种不使用new，来调用构造函数的方法。 方法需要传递两个参数，第一个是要创建的对象，第二个是数组，数组内传递构造函数需要的参数。

  1. function Person(name, age, sex) {
  2. 	this.name = name;
  3. 	this.age = age;
  4. 	this.sex = sex;
  5. }
  6.  
  7. let zhansan = new Person('张三', 20, '男');
  8. let person = new Person();
  9. let lisi = Reflect.construct(Person, ['张三', 20, '男']);
  10. let person1 = Reflect.construct(Person, []);

6.2.5 defineProperty

方法基本等同于Object.defineProperty，用来为对象定义属性。未来，后者会被逐渐废除，请从现在开始就使用Reflect.defineProperty代替它。

6.2.6 ownKeys

返回对象包含的所有（无论是否可枚举）实例属性名称的字符串数组。

  1. function Person() {
  2. 	this.name = '张三';
  3. }
  4. Person.prototype.age = 12;
  5. let person = new Person;
  6. Reflect.defineProperty(person, 'sex', {
  7. 	value: '男',
  8. 	enumerable: false
  9. });
  10. console.log(Object.keys(person));
  11. console.log(Reflect.ownKeys(person));
  12. for (const key in person) {
  13. 	console.log(key);
  14. }

6.3 作业

  1. 使用使用Reflect.defineProperty或Object.defineProperties实现明星经纪人需求。

  2. 使用Proxy实现明星经纪人需求。

  3. 要有get和set。

7. 第十章

函数是ECMAScript中最有意思的部分之一，主要是因为函数实际上是对象。

每个函数都是 Function类型的实例，而Function也有属性和方法，跟其他引用类型一样。

因为函数是对象，所以函数名就是执行函数对象的指针，而且不一定与函数本身紧密绑定。

7.1 函数的定义方式

函数声明的方式定义

  1. function sum(num1, num2) {
  2. 	return num1 + num2;
  3. }
  4. // 代码定义了一个变量 sum并将其初始化为一个函数
  5. // 注意函数末尾没有分号

函数表达式的方式 定义

  1. let sum = function(num1, num2) {
  2. 	return num1 + num2;
  3. };
  4. //注意函数末尾是有分号的，与任何变量初始化语句一样

箭头函数的方式定义和函数表达式很像

  1. let sum = (num1, num2) => {
  2. 	return num1 + num2;
  3. }

使用Function构造函数

  1. let sum = new Function('num1', 'num2', 'return num1 + num2');
  2. //不推荐使用这种语法定义函数，因为这段代码会被解释两次。第一次将他当做常规ECMAScript代码，第二次是解释传给构造函数的字符串。显然会影响性能
  3. //不过，把函数想象为对象，把函数名想象为指针是很重要的。这种定义方式很好地诠释了这些概念

7.2 箭头函数

ES6新增使用=>语法定义函数表达式的能力。

  • 任何可以使用函数表达式的地方，都可以使用箭头函数。

  1. let arrowSum = (a, b) => {
  2. 	return a + b;
  3. }
  4. let functionExpressionSum = function(a, b) {
  5. 	return a + b;
  6. }
  7. console.log(arrowSum(1, 2)); //3
  8. console.log(functionExpressionSum(1, 2)); //3

  • 箭头函数简洁的语法非常适合嵌入函数的场景。

  1. let ints = [1, 2, 3];
  2. console.log(ints.map(function(i) {
  3. 	return i + 1;
  4. }));	// [2, 3, 4]
  5. console.log(ints.map((i) => {
  6. 	return i + 1;
  7. }));	// [2, 3, 4]

  • 如果只有一个参数，可以不用括号；没有参数，或多个参数的情况下，才需要使用括号。

  1. //一个参数
  2. let double = (x) => {
  3. 	return 2 * x;
  4. };
  5. let triple = x => {
  6. 	return 3 * x;
  7. };
  8. //需要括号
  9. //没有参数时，需要括号
  10. let getRandom = () => {
  11. 	return Math.random()
  12. };
  13. //多个参数，需要括号
  14. let sum = (a, b) => {
  15. 	return a + b;
  16. }
  17. //无效的写法
  18. let multiply = a,b => {
  19. 	return a * b;
  20. }

  • 使用大括号，说明包含“函数体"，可以在一个函数中包含多条语句，跟常规函数一样。如果不使用大括号，箭头后面只能有一行代码（一个赋值操作，或者一个表达式)，省略大括号会隐式返回这行代码的值。

  1. //以下两种有效
  2. let double = (x) => {
  3. 	return 2 * 3;
  4. }
  5. let triple = (x) => 3 * x;
  6. //可以赋值
  7. let value = {};
  8. let setName = (x) => x.name = 'jack';
  9. setName(value);
  10. console.log(value.name); //"jack"
  11. //无效写法
  12. let multiply = (a, b) => return a * b;

箭头函数虽然语法简洁，但也有很多场合不适用。箭头函数不能使用 arguments、super、 new.target，也不能做构造函数。此外，箭头函数也没有prototype属性。

7.3 理解参数

js函数既不关心传入的参数个数，也不关心这些参数的数据类型。定义函数是要接收两个参数，并不意味着调用时就穿两个参数。可以传一个、三个，甚至不传，解释器都不会报错。

因为js函数的参数在内部表现为一个数组。函数被调用时总会接收一个数组，但函数并不关心这个数组中包含什么（数组为空或者数组元素超出要求，也没问题）。

  1. function num(a, b) {
  2. 	console.log(a + b);
  3. }
  4. num(); //NaN
  5. function num(a, b) {
  6. 	console.log(a + b);
  7. }
  8. num(1); //NaN
  9. function num(a, b) {
  10. 	console.log(a + b);
  11. }
  12. num(1, 1); //2
  13. function num(a, b) {
  14. 	console.log(a + b);
  15. }
  16. num("2", 1); //21
  17. function num(a, b) {
  18. 	console.log(a + b);
  19. }
  20. num("2", 1, 3); //21
  21. function num(a, b) {
  22. 	console.log(a + b);
  23. }
  24. num("2", 5, "t"); //25

事实上，在使用function关键字定义（非箭头）函数时，可以在函数内部访问arguments对象，从中取得传进来的每个参数值。

7.3.1 arguments

arguments对象是一个类数组对象（不是Array的实例。类数组：具有length属性，可以遍历。但是没有push()，pop()等方法），因此可以使用中括号语法访问其中的元素。而要确定传进来多少个参数，可以访问 arguments.length属性。

  1. function sayHi(name, message) {
  2. 	console.log('Hello' + name + ',' + message)
  3. }
  4. sayHi("小明", "天气不错") //Hello小明,天气不错
  5.  
  6. //使用arguments
  7. function sayHi() {
  8. 	console.log("Hello " + arguments[0] + "," + arguments[1]);
  9. }
  10. sayHi("张三", "天气不错") //Hello 张三,天气不错
  11.  
  12. //打印结果可以看出，没有命名参数，函数照样可以调用。说明，js函数的参数只是为了方便才写出来的，并不是必须

  • 通过arguments对象的length属性检查传入的参数个数。

  1. function howManyArgs() {
  2. 	console.log(arguments.length)
  3. }
  4. howManyArgs('string', 1); //2
  5. howManyArgs(); //0
  1. function doAdd() {
  2. 	if (arguments.length === 1) {
  3. 		console.log(arguments[0] + 10);
  4. 	} else if (arguments.length === 2) {
  5. 		console.log(arguments[0] + arguments[1]);
  6. 	}
  7. }
  8. doAdd(10); //?
  9. doAdd(10, 20) //?

  • arguments对象可以跟命名参数一起使用。

  1. function doAdd(num1, num2) {
  2. 	if (arguments.length === 1) {
  3. 		console.log(num1 + 10);
  4. 	} else if (arguments.length === 2) {
  5. 		console.log(arguments[0] + num2);
  6. 	}
  7. }
  8. doAdd(1, 2); //3
  9. doAdd(1); //11

  • 并且arguments的值始终会与对应的命名参数同步。

  1. function doAdd(num1, num2) {
  2. 	arguments[1] = 10;
  3. 	console.log(arguments[0] + num2);
  4. }
  5. doAdd(1, 2); //11
  6. doAdd(1, 20); //11
  7. //他们两个的值会互相影响
  8. function doAdd(num1, num2) {
  9. 	num1 = 3;
  10. 	num2 = 10;
  11. 	console.log(arguments[0] + arguments[1]);
  12. }
  13. doAdd(1, 2);	//13
  14. doAdd(50, 100);	//13
  15.  
  16. doAdd(1); //?
  17. //如果只传入一个参数，然后把arguments设置为某个值，那么这个值并不会反映到第二个命名参数
  18. //因为arguments对象的长度是根据传入的参数个数，而非定义函数时给出的命名参数个数确定的。。。如果没有传入命名参数，那么它的值就是undefined。就类似于定义了变量而没有初始化
  19. //doAdd(1);//NaN

  • 但是在严格模式下修改具名参数和arguments的值互相不会受影响。

  1. function doAdd(num1, num2) {
  2. 	'use strict';
  3. 	num1 = 3;
  4. 	num2 = 10;
  5. 	console.log(arguments[0] + arguments[1]);
  6. }
  7. doAdd(1, 2);	//3
  8. doAdd(50, 100);	//150
  9.  
  10. function doAdd(num1, num2) {
  11. 	'use strict';
  12. 	arguments[0] = 10;
  13. 	arguments[1] = 20;
  14. 	console.log(num1 + num2);
  15. }
  16. doAdd(1, 2);	//13
  17. doAdd(50, 100);	//150

7.4 默认参数值

7.4.1 es6

  1. function makeKing(name = 'Henry') {
  2. 	return `King ${name} VIII`;
  3. }
  4. console.log(makeKing('Louis')); // 'King Louis VIII'
  5. console.log(makeKing()); // 'King Henry VIII'

  • 在使用默认参数时，arguments对象的值不反映参数从默认值，只反映传给函数的参数。当然，跟es5严格模式一样，修改命名参数也不会影响arguments对象，他始终以调用函数时传入的值为准。

  1. function makeKing(name = 'Henry') {
  2. 	name = 'Louis';
  3. 	return `King ${arguments[0]}`;
  4. }
  5. console.log(makeKing()); // 'King undefined'
  6. console.log(makeKing('Louis')); // 'King Louis'

  • 默认参数值并不限于原始值或对象类型，也可以使用调用函数返回的值。

  1. let romanNumerals = ['I', 'II', 'III', 'IV', 'V', 'VI'];
  2. let ordinality = 0;
  3. function getNumerals() {
  4. 	// 每次调用后递增
  5. 	return romanNumerals[ordinality++];
  6. }
  7. function makeKing(name = 'Henry', numerals = getNumerals()) {
  8. 	return `King ${name} ${numerals}`;
  9. }
  10. console.log(makeKing()); // 'KingHenry I'
  11. console.log(makeKing('Louis', 'XVI')); //'KingLouis XVI'
  12. console.log(makeKing()); // 'KingHenry II' 函数的默认参数只有在函数被调用时才会求值，不会在函数定义时求值。而且，计算默认值的函数只有在调用函数但未传相应参数时才会被调用。
  13. console.log(makeKing()); // 'KingHenry III'

  • 箭头函数同样也可以这样使用默认参数，在只有一个参数时，必须使用括号而不能省略了。

  1. let makeKing = (name = 'Henry') => `King ${name}`;
  2. console.log(makeKing()); // King Henry

  • 同样的，对象也可以有默认值。

  1. function person(obj = { name: '张三', age: 29 }) {
  2. 	console.log(`我叫${obj.name}，今年${obj.age}`);
  3. }
  4. person({});	//?
  5. person();	//?
  6. person(0);	//?
  7. person(1);	//?
  8. person(true);	//?
  9. person(false);	//?
  10. person({ name: '李四' });	//?

思考：怎么解决以上问题？

  1. function person({ name = '张三', age = 20 } = { name: '张三', age: 29 }) {
  2. 	console.log(`我叫${name}，今年${age}`);
  3. }
  4. person({});
  5. person();
  6. person(0);
  7. person(1);
  8. person(true);
  9. person(false);
  10. person({ name: '李四' });

但还是存在问题。

  1. function person({ name = '张三', age = 20 } = { name: '张三', age: 29 }) {
  2. 	console.log(`我叫${name}，今年${age}`);
  3. }
  4. person(null);	//报错
  5.  
  6. function person(obj = { name: '张三', age: 29 }) {
  7. 	console.log(`我叫${obj.name}，今年${obj.age}`);
  8. }
  9. person(null);	//报错

7.4.2 es6之前

因为es6之前用!可以直接判断''、0、null、undefined、false、NaN条件是否成立，所以可以用来判断取默认值。

  1. function person(name, age) {
  2. 	name = name || '张三';
  3. 	age = age || 20;
  4. 	console.log(`我叫${name}，今年${age}`);
  5. }
  6.  
  7. person();
  8. person(undefined, null);
  9. person('', 0);
  10. person('李四', -1);
  11. person(false, true);
  12. person(' ', 1);
  13. person(NaN, NaN);

所以用来解决之前的那个问题。

  1. function person(obj) {
  2. 	obj = obj || {};
  3. 	let defaultConfig = { name: '张三', age: 20 };
  4. 	for (let key in obj) {
  5. 		defaultConfig[key] = obj[key];
  6. 	}
  7. 	console.log(`我叫${defaultConfig.name}，今年${defaultConfig.age}`);
  8. }
  9.  
  10. person({});
  11. person();
  12. person(0);
  13. person(1);
  14. person(true);
  15. person(false);
  16. person({ name: '李四' });
  17. person(null);
  18. person(' ');
  19. person(NaN);

7.4.3 默认参数作用域与暂时性死区

因为在求值默认参数时可以定义对象，也可以动态调用函数，所以函数参数肯定是在某个作用域中求值的。给多个参数定义默认值实际上跟使用let关键字顺序声明变量一样。

  1. function makeKing(name = 'Henry', numerals = 'VIII') {
  2. 	return `King ${name} ${numerals}`;
  3. }
  4. console.log(makeKing()); // King Henry VIII
  5.  
  6. //这里的默认参数会按照定义它们的顺序依次被初始化。可以按照如下实例想象一下这个过程：
  7. function makeKing() {
  8. 	let name = 'Henry';
  9. 	let numerals = 'VIII';
  10. 	return `King ${name} ${numerals}`;
  11. }

因为参数是顺序初始化的，所以后定义默认值的参数可以引用先定义的参数。

  1. function makeKing(name = 'Henry', numerals = name) {
  2. 	return `King ${name} ${numerals}`;
  3. }
  4. console.log(makeKing()); // King Henry Henry

参数初始化顺序遵循“暂时性死区”规则，即前面定义的参数不能引用后面定义的。

  1. function makeKing(name = numerals, numerals = 'VIII') {
  2. 	return `King ${name} ${numerals}`;
  3. }
  4. console.log(makeKing());	//报错

参数也存在于自己的作用域中，他们不能引用函数体的作用域。

  1. function makeKing(name = 'Henry', numerals = defaultNumeral) {
  2. 	let defaultNumeral = 'VIII';
  3. 	return `King ${name} ${numerals}`;
  4. }
  5. console.log(makeKing());	//报错

7.4.4 收集参数

在构思函数定义时，可以使用扩展操作符把不同长度的独立参数组合为一个数组。这有点类似arguments对象的构造机制，只不过收集参数的结果会得到一个Array实例。

  1. function getSum(...values) {
  2. 	// 顺序累加values中的所有值
  3. 	// 初始值的总和为0
  4. 	return values.reduce((x, y) => x + y, 0);
  5. }
  6. console.log(getSum(1, 2, 3)); // 6
  7. console.log(getSum(...[1, 2, 3])); // 6

如果前面还有命名参数，只会收集其余的参数；如果没有则会得到空数组。因为收集参数的结果可变，只能把它作为最后一个参数。

  1. //非法
  2. function getProduct(...values, lastValue) { }
  3.  
  4. //合法
  5. function ignoreFirst(firstValue, ...values) {
  6. 	console.log(firstValue, values);
  7. }
  8. ignoreFirst();
  9. ignoreFirst(1);
  10. ignoreFirst(1, 2);
  11. ignoreFirst(1, 2, 3);

箭头函数虽然不支持arguments对象，但支持收集参数的定义，因此也可以实现与使用arguments一样的逻辑。

  1. let getSum = (...values) => {
  2. 	return values.reduce((x, y) => x + y, 0);
  3. }
  4. console.log(getSum(1, 2, 3)); // 6

使用收集参数并不影响arguments对象，它仍然反映调用时传入函数的参数。

  1. function getSum(...values) {
  2. 	console.log(arguments.length); // 3
  3. 	console.log(arguments); // [1, 2, 3]
  4. 	console.log(values); // [1, 2, 3]
  5. }
  6. console.log(getSum(1, 2, 3));

7.5 callee

arguments对象有一个callee属性，是一个执行arguments对象所在函数的指针（大白话：就是当前方法本身）。

  1. function abc() {
  2. 	console.log(arguments.callee);
  3. }
  4. abc();
  1. let count = 0;
  2.  
  3. function abc() {
  4. 	if (count > 3) {
  5. 		return;
  6. 	}
  7. 	console.log(count++);
  8. 	arguments.callee();
  9. }
  10. abc();

在严格模式下访问arguments.callee会报错。

  1. function abc() {
  2. 	'use strict';
  3. 	console.log(arguments.callee);
  4. }
  5. abc();	//报错

使用场景：

有一个阶乘函数。

  1. function factorial(num) {
  2. 	if (num <= 1) {
  3. 		return 1;
  4. 	} else {
  5. 		return num * factorial(num - 1);
  6. 	}
  7. }
  8. factorial(10);	//3628800

这个函数要正确执行就必须保证函数名是factorial，从而导致紧密耦合，使用arguments.callee就可以让函数逻辑与函数名解耦。

  1. function factorial(num) {
  2. 	if (num <= 1) {
  3. 		return 1;
  4. 	} else {
  5. 		return num * arguments.callee(num - 1);
  6. 	}
  7. }
  8. factorial(10);	//3628800

7.6 caller

es5会给函数对象上添加一个属性：caller。表示当前方法的调用者（大白话：调用当前这个方法的方法）。

  1. function outer() {
  2. 	inner();
  3. }
  4. function inner() {
  5. 	console.log(arguments.callee.caller);
  6. }
  7. outer();
  8. //以上代码会显示outer()函数的源代码。这是因为ourter()调用了inner(),inner的arguments.callee.caller指向outer().

7.7 递归

递归函数通常的形式是一个函数通过名称调用自己（大白话：方法自己调用自己）。

7.7.1 斐波那契数列

斐波那契数列数列就是从第3项开始，每一项都等于前两项之和：0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89。

使用递归实现一个斐波那契数列：传入一个参数，为递归次数。

  1. function feibo(count, current = 1, prev = 0) {
  2. 	if (count === 0) {
  3. 		console.log(current);
  4. 		return;
  5. 	}
  6. 	feibo(count - 1, current + prev, current);
  7. }
  8. feibo(10);

7.7.2 查找dom节点

根据传入的节点名称，找到页面中所有相同名称的节点。

  1. function findDomNode(nodeName, arr) {
  2. 	arr = arr || document.body.children;
  3. 	for (let node of arr) {
  4. 		if (node.nodeName === nodeName) {
  5. 			console.log(node);
  6. 			continue;	//找到后无需再递归子节点
  7. 		}
  8. 		node.children && node.children.length && arguments.callee(nodeName, node.children);		//如果有children属性并且children属性有子节点的话则继续递归查找
  9. 	}
  10. }
  11. findDomeNode('A');

思考：

  1. var data = [{
  2. 	name: "所有物品",
  3. 	children: [{
  4. 		name: "水果",
  5. 		children: [{
  6. 			name: "苹果",
  7. 			children: [{
  8. 				name: '青苹果'
  9. 			}, {
  10. 				name: '红苹果'
  11. 			}]
  12. 		}]
  13. 	}, {
  14. 		name: '主食',
  15. 		children: [{
  16. 			name: "米饭",
  17. 			children: [{
  18. 				name: '北方米饭'
  19. 			}, {
  20. 				name: '南方米饭'
  21. 			}]
  22. 		}]
  23. 	}, {
  24. 		name: '生活用品',
  25. 		children: [{
  26. 			name: "电脑类",
  27. 			children: [{
  28. 				name: '联想电脑'
  29. 			}, {
  30. 				name: '苹果电脑'
  31. 			}]
  32. 		}, {
  33. 			name: "工具类",
  34. 			children: [{
  35. 				name: "锄头"
  36. 			}, {
  37. 				name: "锤子"
  38. 			}]
  39. 		}, {
  40. 			name: "生活用品",
  41. 			children: [{
  42. 				name: "洗发水"
  43. 			}, {
  44. 				name: "沐浴露"
  45. 			}]
  46. 		}]
  47. 	}]
  48. }];
  49. //使用递归找到所有没有children属性的name

7.8 闭包

闭包指的是那些引用了另一个函数作用域中变量的函数，通常是在嵌套函数中实现的（大白话：访问函数内部变量的函数就是闭包）。

  • 私有变量

  1. //私有变量方法
  2. function privateVariable(variable) {
  3. 	return function () {
  4. 		return variable;
  5. 	}
  6. }
  7.  
  8. let PI = privateVariable(3.141592658);
  9. let round = 180 * PI();

  • 柯里化

柯里化就是把接受多个参数的函数变换成接受一个单一参数（最初函数的第一个参数）的函数，并且返回接受余下的参数而且返回结果的新函数的技术。

  1. function currying(x) {
  2. 	return function (y) {
  3. 		return x * y;
  4. 	}
  5. }
  6.  
  7. let PI = currying(3.141592658);
  8. PI(180);
  9. PI(360);
  10. PI(90);

7.9 内存泄漏

内存泄漏就是变量驻留在内存中一直无法得到释放，因为早期在c/c++中，定义的变量需要手动释放，如果没有手动释放，但是变量地址却弄丢了，那就永远无法通过地址找到这个变量在内存中的位置，从而永远无法得到释放（除非机器重启）。

7.9.1 原因

那么闭包容易造成内存泄漏的原因是什么呢，这要从作用域链说起。

  1. //私有变量方法
  2. function privateVariable(variable) {
  3. 	//当执行方法的时候执行上下文
  4. 	privateVariableContext = {
  5. 		AO: {
  6. 			arguments: {
  7. 				length: 1,
  8. 				0: 3.141592658
  9. 			},
  10. 			variable: 3.141592658,
  11. 		},
  12. 		Scope: [AO, globalContext.VO],
  13. 		this: window
  14. 	}
  15.  
  16. 	return function () {
  17. 		//当执行方法的时候执行上下文
  18. 		Context = {
  19. 			AO: {
  20. 				arguments: {
  21. 					length: 0
  22. 				}
  23. 			},
  24. 			Scope: [AO, privateVariableContext.AO, globalContext.VO],	//闭包的作用域链引用了privateVariableContext的AO
  25. 			this: window
  26. 		}
  27.  
  28. 		return variable;
  29. 	}
  30. }
  31.  
  32. let PI = privateVariable(3.141592658);
  33. let round = 180 * PI();

闭包的作用域链引用了父函数执行上下文的AO，我们在全局通过PI这个变量持有闭包，当执行完privateVariable这个函数的时候本来应该是要销毁整个执行上下文的，但是闭包和它有引用关系，所以只能销毁这个执行上下文的作用域链，这样AO就保存下来了，一直存放于内存中。如果PI一直得不到释放，那么privateVariableContext.AO也就一直释放不了。

7.9.2 解决

既然知道了原因，那么就好解决了，只要将PI释放就行。

PI = null;

7.10 立即执行函数

当一个函数定义后需要马上执行的时候我们以前可能会用如下写法。

  1. function IIFE() {
  2. 	console.log('立即执行');
  3. }
  4. IIFE();

其实可以使用立即执行函数。

  1. (function IIFE() {
  2. 	console.log('立即执行');
  3. })()
  1. (function() {
  2. 	console.log('立即执行');
  3. })()
  1. //都合法
  2. !function () {
  3. 	console.log('立即执行');
  4. }()
  5.  
  6. +function () {
  7. 	console.log('立即执行');
  8. }()
  9.  
  10. -function () {
  11. 	console.log('立即执行');
  12. }()
  13.  
  14. ~function () {
  15. 	console.log('立即执行');
  16. }()

从上可以看到立即执行函数的其中的一个优点就是：可使用匿名函数，避免函数名污染。

7.10.1 模拟局部作用域

在es6之前只有全局作用域和函数作用域，所以都是用IIFE来模拟局部作用域的。

  1. //全部打印5
  2. !function () {
  3. 	for (var item of [1, 2, 3, 4, 5]) {
  4. 		setTimeout(() => {
  5. 			console.log(item);
  6. 		}, 100);
  7. 	}
  8. }()
  9.  
  10. //打印正常
  11. !function () {
  12. 	for (var item of [1, 2, 3, 4, 5]) {
  13. 		+function (v) {
  14. 			setTimeout(() => {
  15. 				console.log(v);
  16. 			}, 100);
  17. 		}(item)
  18. 	}
  19. }()

8. 第十一章

8.1 同步

就是多个要做的事按顺序完成。

  1. function askToEat() {
  2. 	console.log('张三，吃饭去吧');
  3. }
  4.  
  5. async function waitForMe() {
  6. 	console.log('等我3分钟，我写一下作业，写完了我告诉你');
  7. 	await new Promise((res, rej) => {
  8. 		setTimeout(res, 3000);
  9. 	});
  10. 	console.log('我写完作业了，吃饭去吧');
  11. }
  12.  
  13. async function go() {
  14. 	console.log('也等我两分钟，我去换一下衣服');
  15. 	await new Promise((res, rej) => {
  16. 		setTimeout(res, 3000);
  17. 	});
  18. 	console.log('都弄好了,走吧');
  19. }
  20.  
  21. //同步去吃饭
  22. (async function asyncEating() {
  23. 	askToEat();
  24. 	await waitForMe();
  25. 	await go();
  26. })()

8.2 异步

异步则是可以错开同时进行。

  1. function askToEat() {
  2. 	console.log('张三，吃饭去吧');
  3. }
  4.  
  5. async function waitForMe() {
  6. 	console.log('等我3分钟，我写一下作业，写完了我告诉你');
  7. 	await new Promise((res, rej) => {
  8. 		setTimeout(res, 3000);
  9. 	});
  10. 	console.log('我写完作业了，吃饭去吧');
  11. 	return Promise.resolve();
  12. }
  13.  
  14. async function go() {
  15. 	console.log('也等我两分钟，我去换一下衣服');
  16. 	await new Promise((res, rej) => {
  17. 		setTimeout(res, 2000);
  18. 	});
  19. 	console.log('都弄好了,走吧');
  20. 	return Promise.resolve();
  21. }
  22.  
  23. //异步去吃饭
  24. !function asyncEating() {
  25. 	askToEat();
  26. 	Promise.all([waitForMe(), go()]);
  27. }()

8.3 单线程

同步异步是一种概念，最终实现的是线程，线程是计算机中运行调度的最小单元（大白话：程序中真正在工作的是线程）。

进程

进程是计算机中的程序关于某数据集合上的一次运行活动，是系统进行资源分配和调度的基本单位，是操作系统结构的基础（大白话：计算机中每打开一个程序就有一个进程）。进程中包含多个线程，第一个创建的线程叫做主线程，其他的子线程都由主线程管理。例：进程好比公司，老板是主线程，老板负责跟社会（系统）资源进行交互或者资源调度，如果公司只有老板一个人（单线程），公司的所有事物都要老板一个人完成，效率可以想象有多低。老板招了两个人（创建了两个子线程，现在公司变成多线程运行了）帮忙做事，效率提高很多了。但线程也不是越多越好，比如公司每天只有两件事要做，但现在有5个人来同时做，5个人就会抢着两件事做（资源竞争）。

CPU

CPU主要由三大部分组成：逻辑运算单元（ALU）、寄存器、控制单元。

逻辑运算单元（ALU）：基本操作包括加、减、乘、除四则运算，与、或、非、异或等逻辑操作，以及移位、比较和传送等操作，亦称算术逻辑部件。

寄存器：主要是存数据的，但是非常小，是整个计算机数据存取最快的地方。

控制单元：CPU的指挥控制中心，负责资源的调度、指令的执行顺序等。

举个例子：单核单线程的CPU就好比有一家饭店，饭店里只有一个厨子（一个运算逻辑单元），还有一个服务员（控制单元），一个库房用于存放菜品（寄存器）。中午吃饭的时候人（要处理的指令）太多了，服务员（控制单元）让大家排成一个队伍（单线程），然后依次给大家点单（串行）。点完单后去厨房拿菜，然后把菜处理好给厨师（ALU），厨师快速的将菜加工（运算）好。

从上可以看到其实最费时间的是服务员让大家排成一个队伍点单，因为大家点单很磨叽，最快的其实是ALU，可能一分钟一道菜。

所以后来出现了单核（一个厨师）双线程（两个服务员），中午吃饭的时候让大家排成两个队伍，两个服务员同时给大家点单（并发），这样就快很多了，而且一个厨师配两个服务员也完全忙的过来，甚至还有富余的时间（所以通过任务管理器经常可以看到CPU的使用率很低，因为CPU是以纳秒级运算的，就是十亿分之一秒）。

但是问题还是没解决呀，总不能请无数个服务员伺候一个厨师吧，后来就出现双核（两个厨师）四线程（四个服务员）、四核八线程、八核十六线程。

目前看起来没问题了，但是CPU的资源只有能够充分调动利用起来才真正的解决问题。

例：419公司（操作系统）的老板（内核）中午带大家去饭店吃饭，说1号厨师做的菜非常好吃，咱们大家就到1号厨师这边的队伍排队（操作系统对CPU的调度）。这样的话，1号厨师和配合的服务员累的要死（CPU利用率很高），其他厨师和服务员没事做（CPU空闲）。

所以一个好的操作系统也要看它对CPU的资源利用是否合理。

串行

跟同步的概念一样，就是排队一个一个来。

并发

排成两队点单，但最终由一个CPU计算的，计算结果几乎是同时出的（纳秒级，所以肉眼看几乎是同时），但实际上还是有前后顺序。

并行

提到并发就必须提到并行，因为并发是伪同时完成，并行才是真正的同时完成。比如两个去饭店吃饭，A同学去一号厨师那排队，B同学去二号厨师那排队，可能两个厨师同时把菜做好，而不是由一个厨师按先后顺序快速的将两道菜做好。

8.3.1 主执行栈

js是单线程的，所以一次只能执行一个方法，那执行顺序怎么样的呢？首先主线程会创建一个主执行栈和任务队列（微任务和宏任务）。

 

先将所有的同步代码，放入执行栈中执行，执行完毕后，去任务队列中先获取微任务放入执行栈中执行，所有的微任务执行完成后再将宏任务放入执行栈执行。所有的任务队列都完成后，则进行下一次的重复循环，这样无线重复循环的行为被称为"Event loop"（事件循环）。所以任务的执行顺序是先执行同步任务，再执行微任务，最后执行宏任务。

8.3.2 宏任务

MacTasks。

setTimeout、setInterval 、setImmediate 、requestAnimationFrame 。

根据ECMAScript标准规定，setTimeout延迟时间最低不得低于4毫秒，如果不足则补足。

8.3.3 微任务

MicTasks。

process.nextTick、MutationObserver 、Promise。

8.3.4 思考

  1. setTimeout(() => {
  2.     //执行后 回调一个宏事件
  3.     console.log('内层宏事件5')
  4. }, 0);
  5.  
  6. console.log('外层宏事件1');
  7.  
  8. new Promise((resolve) => {
  9.     console.log('外层宏事件2');
  10.     resolve()
  11. }).then(() => {
  12.     console.log('微事件3');
  13. }).then(()=>{
  14.     console.log('微事件4')
  15. })
  16. //1 2 3 4 5 
  1. console.log('1');
  2. setTimeout(function() {
  3.     console.log('2');
  4.     new Promise(function(resolve) {
  5.         console.log('4');
  6.         resolve();
  7.     }).then(function() {
  8.         console.log('5')
  9.     })
  10. })
  11. new Promise(function(resolve) {
  12.     console.log('7');
  13.     resolve();
  14. }).then(function() {
  15.     console.log('8')
  16. })
  17. setTimeout(function() {
  18.     console.log('9');
  19.     new Promise(function(resolve) {
  20.         console.log('11');
  21.         resolve();
  22.     }).then(function() {
  23.         console.log('12')
  24.     })
  25. })

8.4 Promise

回调地狱

比如有一个需求，要先根据ID获取用户，然后根据用户ID获取角色，然后根据角色ID获取权限，然后根据权限获取可访问的页面，ajax实现：

  1. $.ajax({
  2. 	url: 'getUserById',
  3. 	data: {
  4. 		id: 1
  5. 	},
  6. 	success(data) {
  7. 		$.ajax({
  8. 			url: 'getRoleByUserId',
  9. 			data: {
  10. 				id: data.id
  11. 			},
  12. 			success(data) {
  13. 				$.ajax({
  14. 					url: 'getRightsByRoleId',
  15. 					data: {
  16. 						id: data.id
  17. 					},
  18. 					success(data) {
  19. 						$.ajax({
  20. 							url: 'getPagesByRrights',
  21. 							data: {
  22. 								rights: data.rights
  23. 							},
  24. 							success() {
  25. 								console.log('终于获取完了');
  26. 							}
  27. 						});
  28. 					}
  29. 				});
  30. 			}
  31. 		});
  32. 	}
  33. });

Promise实现：

  1. new Promise((res, rej) => {
  2. 	$.ajax({
  3. 		url: 'getUserById',
  4. 		data: {
  5. 			id: 1
  6. 		},
  7. 		success(data) {
  8. 			res(data);
  9. 		}
  10. 	});
  11. }).then(data => {
  12. 	return new Promise((res, rej) => {
  13. 		$.ajax({
  14. 			url: 'getRoleByUserId',
  15. 			data: {
  16. 				id: data.id
  17. 			},
  18. 			success(data) {
  19. 				res(data);
  20. 			}
  21. 		});
  22. 	});
  23. }).then(data => {
  24. 	return new Promise((res, rej) => {
  25. 		$.ajax({
  26. 			url: 'getRightsByRoleId',
  27. 			data: {
  28. 				id: data.id
  29. 			},
  30. 			success(data) {
  31. 				res(data);
  32. 			}
  33. 		});
  34. 	});
  35. }).then(data => {
  36. 	return new Promise((res, rej) => {
  37. 		$.ajax({
  38. 			url: 'getPagesByRrights',
  39. 			data: {
  40. 				rights: data.rights
  41. 			},
  42. 			success() {
  43. 				console.log('终于获取完了');
  44. 			}
  45. 		});
  46. 	});
  47. });

8.4.1 Promise基础

ECMAScript 6新增的引用类型Promise，可以通过new操作符来实例化。 创建新Promise时需要传入执行器函数作为参数 。如果成功则会执行then的方法，如果失败则会执行catch方法。

  1. new Promise((resolve, reject) => {
  2. 	//resolve为成功
  3. 	//reject为失败
  4. 	console.log('创建了一个Promise');
  5. }).then(() => {
  6. 	console.log('会打印我吗？');
  7. });
  8. //?
  9.  
  10. new Promise((resolve, reject) => {
  11. 	//resolve为成功
  12. 	//reject为失败
  13. 	console.log('创建了一个Promise');
  14. 	reject();
  15. }).then(() => {
  16. 	console.log('会打印我吗？');
  17. });
  18. //?
  19.  
  20. new Promise((resolve, reject) => {
  21. 	//resolve为成功
  22. 	//reject为失败
  23. 	console.log('创建了一个Promise');
  24. 	resolve();
  25. }).then(() => {
  26. 	console.log('会打印我吗？');
  27. });
  28. //?
  1. Promise.reject().then(() => {
  2. 	console.log('会打印1吗？');
  3. });
  4. //?
  5.  
  6. Promise.reject().then(() => {
  7. 	console.log('会打印1吗？');
  8. }).catch(e => {
  9. 	console.log('会打印2吗？');
  10. });
  11. //?
  12.  
  13. Promise.resolve().then(() => {
  14. 	console.log(1);
  15. }).then(() => {
  16. 	console.log(2)
  17. }).then(() => {
  18. 	console.log(3);
  19. });
  20. //?
  21.  
  22. Promise.reject().catch(() => {
  23. 	console.log(1);
  24. }).catch(() => {
  25. 	console.log(2)
  26. }).catch(() => {
  27. 	console.log(3);
  28. });
  29. //?
  30.  
  31. Promise.reject().catch(() => {
  32. 	console.log(1);
  33. 	throw 1;
  34. }).catch(() => {
  35. 	console.log(2)
  36. }).catch(() => {
  37. 	console.log(3);
  38. });
  39. //?
  40.  
  41. Promise.reject().catch(() => {
  42. 	console.log(1);
  43. 	throw 2;
  44. }).catch(data => {
  45. 	console.log(data);
  46. 	throw 3;
  47. }).catch(data => {
  48. 	console.log(data);
  49. 	throw 4;
  50. }).catch(data => {
  51. 	console.log(5);
  52. }).catch(data => {
  53. 	console.log(data);
  54. });
  55. //?
  56.  
  57. Promise.resolve().catch(() => {
  58. 	console.log(1);
  59. }).then(() => {
  60. 	console.log(2);
  61. }).catch(() => {
  62. 	console.log(3);
  63. }).then(() => {
  64. 	console.log(4);
  65. 	throw 8;
  66. }).then(data => {
  67. 	console.log(5);
  68. }).catch(data => {
  69. 	console.log(data);
  70. 	return 6;
  71. }).catch(data => {
  72. 	console.log(10);
  73. }).then(data => {
  74. 	console.log(data);
  75. }).then(data => {
  76. 	console.log(data);
  77. });
  78. //?
  79.  
  80. Promise.resolve(new Error(1)).then(data => {
  81. 	console.log(1);
  82. }).catch(e => {
  83. 	console.log(2);
  84. });
  85. //?
  86.  
  87. Promise.resolve().then(data => {
  88. 	data = data.toString();
  89. 	return 2;
  90. }).then(data => {
  91. 	console.log(data);
  92. }).catch(data => {
  93. 	console.log(data);
  94. });
  95. //?

then也可以传两个函数，第一个函数为成功时调用，第二个函数为失败时调用。

  1. Promise.resolve(1).then(data => {
  2. 	console.log(data, '成功');
  3. });
  4. //等价
  5. Promise.resolve(1).then(data => {
  6. 	console.log(data, '成功');
  7. }, null);
  1. Promise.reject(1).then(null, data => {
  2. 	console.log(data, '失败');
  3. });
  4. //等价
  5. Promise.reject(1).catch(data => {
  6. 	console.log(data, '失败');
  7. });
  1. Promise.resolve(1).then(data => {
  2. 	console.log('成功：' + data);
  3. }, data => {
  4. 	console.log('失败：' + data);
  5. });
  1. Promise.reject(1).then(data => {
  2. 	console.log('成功：' + data);
  3. }, data => {
  4. 	console.log('失败：' + data);
  5. });

值穿透

then或者catch的参数期望是函数，传入非函数则会发生值穿透。

Promise.resolve(5).then(Promise.resolve(3)).then(1).catch(undefined).then(null).then(console.log);

8.4.2 同步/异步执行的二元性

  1. try {
  2. 	throw new Error('foo');
  3. } catch (e) {
  4. 	console.log(e); // Error: foo
  5. }
  6.  
  7. try {
  8. 	Promise.reject(new Error('bar'));
  9. } catch (e) {
  10. 	console.log(e);
  11. }
  12. // Uncaught (in promise) Error: bar

8.4.3 finally

finally表示最后、最终的意思，就是无论成功失败都会执行。

  1. Promise.resolve().then(() => {
  2. 	console.log(1);
  3. 	throw 2;
  4. }).finally(() => {
  5. 	console.log(222);
  6. });
  7.  
  8. Promise.resolve().then(() => {
  9. 	console.log(1);
  10. 	throw 2;
  11. }).catch(data => {
  12. 	console.log(data);
  13. }).finally(() => {
  14. 	console.log(222);
  15. });

跟try{}catch{}finally{}一样。

  1. function valid(userName) {
  2. 	try {
  3. 		if (!userName) {
  4. 			console.log('账号不能为空');
  5. 			return;
  6. 		}
  7. 		userName = userName.substr(1, 5);
  8. 	} catch (e) {
  9. 		console.log(e);
  10. 	} finally {
  11. 		console.log('最终还是执行了');
  12. 	}
  13. }
  14. valid();
  15. valid(15);

8.4.4 Promise.all

方法只有一个参数，传入一个数组，数组内包含要执行的所有Promise对象，要等所有的对象都执行完了再返回。如果成功返回的数据为数组。

  1. let five = new Promise((res, rej) => {
  2. 	setTimeout(() => {
  3. 		res(5000);
  4. 	}, 5000);
  5. });
  6. let three = new Promise((res, rej) => {
  7. 	setTimeout(() => {
  8. 		res(3000);
  9. 	}, 3000);
  10. });
  11. Promise.all([five, three]).then(([a, b]) => {
  12. 	console.log(a, b);
  13. });

如果失败则返回第一个错误。

  1. let five = new Promise((res, rej) => {
  2. 	setTimeout(() => {
  3. 		rej(5000);
  4. 	}, 5000);
  5. });
  6. let three = new Promise((res, rej) => {
  7. 	setTimeout(() => {
  8. 		rej(3000);
  9. 	}, 3000);
  10. });
  11. let four = new Promise((res, rej) => {
  12. 	setTimeout(() => {
  13. 		rej(4000);
  14. 	}, 4000);
  15. });
  16. Promise.all([five, three, four]).then(([a, b]) => {
  17. 	console.log('成功');
  18. }).catch(e => {
  19. 	console.log(e);
  20. });

如果有一个失败则全部失败。

  1. let five = new Promise((res, rej) => {
  2. 	setTimeout(() => {
  3. 		res(5000);
  4. 	}, 5000);
  5. });
  6. let three = new Promise((res, rej) => {
  7. 	setTimeout(() => {
  8. 		res(3000);
  9. 	}, 3000);
  10. });
  11. let four = new Promise((res, rej) => {
  12. 	setTimeout(() => {
  13. 		rej(4000);
  14. 	}, 4000);
  15. });
  16. Promise.all([five, three, four]).then(([a, b]) => {
  17. 	console.log('成功');
  18. }).catch(e => {
  19. 	console.log(e);
  20. });

8.4.5 Promise.race

使用方法同Promise.all，不过这个方法是谁先执行完则返回谁。

  1. let five = new Promise((res, rej) => {
  2. 	setTimeout(res, 5000, 5000);
  3. });
  4. let three = new Promise((res, rej) => {
  5. 	setTimeout(res, 3000, 3000);
  6. });
  7. let four = new Promise((res, rej) => {
  8. 	setTimeout(res, 4000, 4000);
  9. });
  10. Promise.race([five, three, four]).then(data => {
  11. 	console.log('成功', data);
  12. }).catch(e => {
  13. 	console.log('失败', e);
  14. });

思考：

  1. let five = new Promise((res, rej) => {
  2. 	setTimeout(rej, 5000, 5000);
  3. });
  4. let three = new Promise((res, rej) => {
  5. 	setTimeout(res, 3000, 3000);
  6. });
  7. let four = new Promise((res, rej) => {
  8. 	setTimeout(rej, 4000, 4000);
  9. });
  10. Promise.race([five, three, four]).then(data => {
  11. 	console.log('成功', data);
  12. }).catch(e => {
  13. 	console.log('失败', e);
  14. });
  1. let five = new Promise((res, rej) => {
  2. 	setTimeout(res, 5000, 5000);
  3. });
  4. let three = new Promise((res, rej) => {
  5. 	setTimeout(res, 3000, 3000);
  6. });
  7. let four = new Promise((res, rej) => {
  8. 	setTimeout(res, 4000, 4000);
  9. });
  10. Promise.race([five, three, four]).then(data => {
  11. 	console.log('成功', data);
  12. }).catch(e => {
  13. 	console.log('失败', e);
  14. });

应用场景：

  1. //方法最大执行时间
  2. function execMax(fn, delay) {
  3.     const reject = new Promise((res, rej) => {
  4.         setTimeout(rej, delay, '请求超时');
  5.     });
  6.     return Promise.race([fn, reject]);
  7. }
  8. ​
  9. //获取用户
  10. let getUser = new Promise((res) => {
  11.     //一个耗时的axios请求
  12.     setTimeout(res, 3000, {
  13.         id: 1,
  14.         name: '张三'
  15.     });
  16. });
  17. ​
  18. execMax(getUser, 5000).then(data => {
  19.     console.log(data);
  20. }).catch(e => {
  21.     console.log(e);
  22. });

8.5 async/await

异步函数，也称为async/await（语法关键字），是ES8规范新增的。这个特性从行为和语法上都增强了JavaScript，能够以同步的方式执行异步代码。最明显就是解决了“回调地狱”的问题。MDN

  1. let data = await new Promise((res, rej) => {
  2.     $.ajax({
  3.         url: 'getUserById',
  4.         data: {
  5.             id: 1
  6.         },
  7.         success(data) {
  8.             res(data);
  9.         }
  10.     });
  11. });
  12. data = await new Promise((res, rej) => {
  13.     $.ajax({
  14.         url: 'getRoleByUserId',
  15.         data: {
  16.             id: data.id
  17.         },
  18.         success(data) {
  19.             res(data);
  20.         }
  21.     });
  22. });
  23. data = await new Promise((res, rej) => {
  24.     $.ajax({
  25.         url: 'getRightsByRoleId',
  26.         data: {
  27.             id: data.id
  28.         },
  29.         success(data) {
  30.             res(data);
  31.         }
  32.     });
  33. });
  34. data = await new Promise((res, rej) => {
  35.     $.ajax({
  36.         url: 'getPagesByRrights',
  37.         data: {
  38.             rights: data.rights
  39.         },
  40.         success() {
  41.             console.log('终于获取完了');
  42.         }
  43.     });
  44. });

8.5.1 async

async关键字用于声明异步函数。这个关键字可以用在函数声明、函数表达式、箭头函数和方法上。

  1. async function foo() {}
  2. let bar = async function() {};
  3. let baz = async () => {};
  4. class Qux {
  5. 	async qux() {}
  6. }

使用async关键字可以让函数具有异步特征，但总体上其代码仍然是同步求值的。而在参数或闭包方面，异步函数仍然具有普通JavaScript函数的正常行为。

  1. async function foo() {
  2. 	console.log(1);
  3. }
  4. foo();
  5. console.log(2);

async函数一定会返回一个Promise对象。如果一个async函数的返回值看起来不是Promise，那么它将会被隐式地包装在一个Promise中。

  1. async function foo() {
  2. 	return 1
  3. }
  4. //两者等价
  5. function foo() {
  6. 	return Promise.resolve(1)
  7. }
  1. async function foo() {
  2. 	console.log(1);
  3. }
  4. foo().then(() => {
  5. 	console.log(3);
  6. });
  7. console.log(2);
  1. async function foo() {
  2. 	console.log(1);
  3. 	return 3;
  4. }
  5. foo().then(console.log);
  6. console.log(2);
  1. async function foo() {
  2. 	console.log(1);
  3. 	return Promise.resolve(3);
  4. }
  5. foo().then(console.log);
  6. console.log(2);

8.5.2 await

因为异步函数主要针对不会马上完成的任务，所以自然需要一种暂停和恢复执行的能力。使用await关键字可以暂停异步函数代码的执行，等待Promise执行完成。

  1. let p = new Promise((resolve, reject) => setTimeout(resolve, 1000, 3));
  2. p.then(console.log); //只是通过回调通知接收了结果，并不知道何时调用完成，所以后续的操作要放在回调函数中
  3. console.log(await p); //使用await就得等待Promise执行完成才能进行下一步
  4. console.log('上一次的Promise完成了，可以继续接下来的事了');

函数里出现await则必须有async。

  1. async function foo() {
  2. 	await Promise.resolve(); //合法
  3. }
  4.  
  5. function foo() {
  6. 	await Promise.resolve(); //非法
  7. }

如果有多个then可以全部执行完毕，并返回最终结果。

  1. let data = await Promise.resolve(1).then(data => {
  2. 	console.log(data);
  3. 	return 2;
  4. }).then(data => {
  5. 	console.log(data);
  6. 	return 3;
  7. }).then(data => {
  8. 	console.log(data);
  9. 	return 4;
  10. }).then(data => {
  11. 	console.log(data);
  12. 	return 5;
  13. });
  14. console.log('最终执行结果：' + data);

async函数的函数体可以被看作是由0个或者多个await表达式分割开来的。从第一行代码直到（并包括）第一个await表达式（如果有的话）都是同步运行的。这样的话，一个不含await表达式的async函数是会同步运行的。

  1. async function s() {
  2.     console.log(2);
  3. }
  4. ​
  5. async function foo() {
  6.     console.log(1); //同步
  7.     await s(); //同步
  8.     console.log(3); //从这儿开始，await之后就是异步的了
  9. }
  10. foo();
  11. console.log(4);
  1. async function foo() {
  2.     console.log(1);
  3.     await 2;
  4. }
  5. //等价
  6. function foo() {
  7.     console.log(1);
  8.     return Promise.resolve(2).then(() => undefined)
  9. }

8.5.3 停止和恢复执行

使用await关键字之后的区别其实比看上去的还要微妙一些。

  1. async function foo() {
  2.     console.log(await Promise.resolve('1'));
  3. }
  4. async function bar() {
  5.     console.log(await '2');
  6. }
  7. async function baz() {
  8.     console.log('3');
  9. }
  10. foo();
  11. bar();
  12. baz();

其实真正起作用的是await。async关键字，无论从哪方面来看，都不过是一个标识符。毕竟，异步函数如果不包含await关键字，其执行基本上跟普通函数没有什么区别。

  1. async function foo() {
  2. 	console.log(2);
  3. }
  4. console.log(1);
  5. foo();
  6. console.log(3);

要完全理解await关键字，必须知道它并非只是等待一个值可用那么简单。JavaScript运行时在碰到await关键字时，会记录在哪里暂停执行。等到await右边的值可用了，JavaScript运行时会向消息队列中推送一个任务，这个任务会恢复异步函数的执行。

因此，即使await后面跟着一个立即可用的值，函数的其余部分也会被异步求值。

  1. async function foo() {
  2.     console.log(2);
  3.     await null;
  4.     console.log(4);
  5. }
  6. console.log(1);
  7. foo();
  8. console.log(3);
  1. async function foo() {
  2.     console.log(2);
  3.     console.log(await Promise.resolve(8));
  4.     console.log(9);
  5. }
  6. async function bar() {
  7.     console.log(4);
  8.     console.log(await 6);
  9.     console.log(7);
  10. }
  11. console.log(1);
  12. foo();
  13. console.log(3);
  14. bar();
  15. console.log(5);

8.5.4 应用场景

sleep

  1. async function sleep(delay) {
  2.     return new Promise((resolve) =>
  3.         setTimeout(resolve, delay));
  4. }
  5. async function foo() {
  6.     const t0 = Date.now();
  7.     await sleep(1500); // 暂停约1500毫秒
  8.     console.log(Date.now() - t0);
  9. }
  10. foo();

8.5.5 WebWork

JavaScript语言采用的是单线程模型，也就是说，所有任务只能在一个线程上完成，一次只能做一件事。前面的任务没做完，后面的任务只能等着。随着电脑计算能力的增强，尤其是多核CPU的出现，单线程带来很大的不便，无法充分发挥计算机的计算能力。

Web Worker的作用，就是为JavaScript创造多线程环境，允许主线程创建Worker线程，将一些任务分配给后者运行。在主线程运行的同时，Worker线程在后台运行，两者互不干扰。等到Worker线程完成计算任务，再把结果返回给主线程。这样的好处是，一些计算密集型或高延迟的任务，被Worker线程负担了，主线程（通常负责UI交互）就会很流畅，不会被阻塞或拖慢。

具体例子请看链接。

8.5.6 思考

  1. Promise.resolve().then(() => {
  2. 	return new Error('error');
  3. }).then((res) => {
  4. 	console.log(1);
  5. }).catch((err) => {
  6. 	console.log(2);
  7. });
  1. Promise.resolve().then(() => {
  2.     return new Error('error');
  3. }).then((res) => {
  4.     console.log(1);
  5. }).catch((err) => {
  6.     console.log(2);
  7.     throw new Error(3);
  8. }).then(console.log).catch(console.log);
  1. const promise = new Promise((resolve, reject) => {
  2.     console.log(1);
  3.     setTimeout(() => {
  4.         console.log(5);
  5.         resolve(6);
  6.         console.log(7);
  7.     }, 0);
  8.     console.log(2);
  9. });
  10. promise.then((res) => {
  11.     console.log(res);
  12. });
  13. console.log(4);
  1. Promise.resolve().then(() => {
  2.     console.log(1);
  3.     const timer2 = setTimeout(() => {
  4.         console.log(2)
  5.     }, 0)
  6. });
  7. const timer1 = setTimeout(() => {
  8.     console.log(3)
  9.     Promise.resolve().then(() => {
  10.         console.log(4)
  11.     })
  12. }, 0)
  13. console.log(5);
  1. const promise = new Promise((resolve, reject) => {
  2. 	resolve(1);
  3. 	reject(2);
  4. 	resolve(3);
  5. });
  6. promise.then((res) => {
  7. 	console.log('then:', res);
  8. }).catch((err) => {
  9. 	console.log('catch:', err);
  10. })
  1. async function async1() {
  2. 	console.log(1);
  3. 	await async2();
  4. 	console.log(2);
  5. }
  6. async function async2() {
  7. 	console.log(3);
  8. }
  9. async1();
  10. console.log(4);
  1. let a;
  2. const b = new Promise((resolve, reject) => {
  3. 	console.log('1');
  4. 	resolve();
  5. }).then(() => {
  6. 	console.log('2');
  7. }).then(() => {
  8. 	console.log('3');
  9. }).then(() => {
  10. 	console.log('4');
  11. });
  12.  
  13. a = new Promise(async (resolve, reject) => {
  14. 	console.log(a);
  15. 	console.log(await b);
  16. 	console.log(a);
  17. 	console.log('5');
  18. 	await a
  19. 	resolve(true);
  20. 	console.log('6');
  21. });
  22.  
  23. console.log('7');
  1. async function async1() {
  2. 	console.log('1')
  3. 	await async2()
  4. 	console.log('2')
  5. }
  6.  
  7. async function async2() {
  8. 	console.log('3')
  9. }
  10.  
  11. console.log('4')
  12.  
  13. setTimeout(function() {
  14. 	console.log('5')
  15. })
  16.  
  17. async1()
  18.  
  19. new Promise(function(resolve) {
  20. 	console.log('6')
  21. 	resolve()
  22. }).then(function() {
  23. 	console.log('7')
  24.  
  25. })
  26.  
  27. console.log('8');
  1. const promise1 = new Promise((resolve, reject) => {
  2.     setTimeout(() => {
  3.         resolve('1')
  4.     }, 1000)
  5. })
  6. const promise2 = promise1.then(() => {
  7.     throw new Error('2')
  8. })
  9. ​
  10. console.log('3', promise1)
  11. console.log('4', promise2)
  12. ​
  13. setTimeout(() => {
  14.     console.log('5', promise1)
  15.     console.log('6', promise2)
  16. }, 2000)
  1. async function async1() {
  2.     console.log( '1' )
  3.     console.log(await async2())
  4.     console.log( '2' )
  5. }
  6. async function async2() {
  7.     console.log('3')
  8.     setTimeout(
  9.       ()=>console.log('4')
  10.     ,0)
  11.     console.log( '5' )
  12. }
  13. console.log( '6' )
  14. setTimeout( function () {
  15.     console.log( '7' )
  16. }, 0 )
  17. async1();
  18. new Promise( function ( resolve ) {
  19.     console.log( '8' )
  20.     resolve();
  21. } ).then( function () {
  22.     console.log( '9' )
  23. } )
  24. console.log( '10' )
  25. //6 1 3 5 8 10 undefind 2 9 undefind 7 4
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/酷酷是懒虫/article/detail/871195
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号