10个JavaScript难点

1. 立即执行函数

成都创新互联是一家专注于网站制作、做网站与策划设计,恩平网站建设哪家好?成都创新互联做网站,专注于网站建设10余年,网设计领域的专业建站公司;建站业务涵盖:恩平等地区。恩平做网站价格咨询:18980820575

立即执行函数，即Immediately Invoked Function Expression (IIFE)，正如它的名字，就是创建函数的同时立即执行。它没有绑定任何事件，也无需等待任何异步操作：

 
 
 
    
  
  
  
  1. (function() {
    2. 
  
  
  
  2. 
  
  
  
  3.  // 代码
    4. 
  
  
  
  4. 
  
  
  
  5.  // ...
    6. 
  
  
  
  6. 
  
  
  
  7. })(); 
    8.

function(){…}是一个匿名函数，包围它的一对括号将其转换为一个表达式，紧跟其后的一对括号调用了这个函数。立即执行函数也可以理解为立即调用一个匿名函数。立即执行函数最常见的应用场景就是：将var变量的作用域限制于你们函数内，这样可以避免命名冲突。

2. 闭包

对于闭包(closure)，当外部函数返回之后，内部函数依然可以访问外部函数的变量。

 
 
 
    
  
  
  
  1. function f1()
    2. 
  
  
  
  2. {
    3. 
  
  
  
  3.     var N = 0; // N是f1函数的局部变量
    4. 
  
  
  
  4.     
    5. 
  
  
  
  5.     function f2() // f2是f1函数的内部函数，是闭包
    6. 
  
  
  
  6.     {
    7. 
  
  
  
  7.         N += 1; // 内部函数f2中使用了外部函数f1中的变量N
    8. 
  
  
  
  8.         console.log(N);
    9. 
  
  
  
  9.     }
    10. 
  
  
  
  10. 
  
  
  
  11.     return f2;
    12. 
  
  
  
  12. }
    13. 
  
  
  
  13. 
  
  
  
  14. var result = f1();
    15. 
  
  
  
  15. 
  
  
  
  16. result(); // 输出1
    17. 
  
  
  
  17. result(); // 输出2
    18. 
  
  
  
  18. result(); // 输出3 
    19.

代码中，外部函数f1只执行了一次，变量N设为0，并将内部函数f2赋值给了变量result。由于外部函数f1已经执行完毕，其内部变量N应该在内存中被清除，然而事实并不是这样：我们每次调用result的时候，发现变量N一直在内存中，并且在累加。为什么呢?这就是闭包的神奇之处了!

3. 使用闭包定义私有变量

通常，JavaScript开发者使用下划线作为私有变量的前缀。但是实际上，这些变量依然可以被访问和修改，并非真正的私有变量。这时，使用闭包可以定义真正的私有变量：

 
 
 
    
  
  
  
  1. function Product() {
    2. 
  
  
  
  2. 
  
  
  
  3.     var name;
    4. 
  
  
  
  4. 
  
  
  
  5.     this.setName = function(value) {
    6. 
  
  
  
  6.         name = value;
    7. 
  
  
  
  7.     };
    8. 
  
  
  
  8. 
  
  
  
  9.     this.getName = function() {
    10. 
  
  
  
  10.         return name;
    11. 
  
  
  
  11.     };
    12. 
  
  
  
  12. }
    13. 
  
  
  
  13. 
  
  
  
  14. var p = new Product();
    15. 
  
  
  
  15. p.setName("Fundebug");
    16. 
  
  
  
  16. 
  
  
  
  17. console.log(p.name); // 输出undefined
    18. 
  
  
  
  18. console.log(p.getName()); // 输出Fundebug 
    19.

代码中，对象p的的name属性为私有属性，使用p.name不能直接访问。

4. prototype

每个JavaScript构造函数都有一个prototype属性，用于设置所有实例对象需要共享的属性和方法。prototype属性不能列举。JavaScript仅支持通过prototype属性进行继承属性和方法。

 
 
 
    
  
  
  
  1. function Rectangle(x, y)
    2. 
  
  
  
  2. {
    3. 
  
  
  
  3.     this._length = x;
    4. 
  
  
  
  4.     this._breadth = y;
    5. 
  
  
  
  5. }
    6. 
  
  
  
  6. 
  
  
  
  7. Rectangle.prototype.getDimensions = function()
    8. 
  
  
  
  8. {
    9. 
  
  
  
  9.     return {
    10. 
  
  
  
  10.         length: this._length,
    11. 
  
  
  
  11.         breadth: this._breadth
    12. 
  
  
  
  12.     };
    13. 
  
  
  
  13. };
    14. 
  
  
  
  14. 
  
  
  
  15. var x = new Rectangle(3, 4);
    16. 
  
  
  
  16. var y = new Rectangle(4, 3);
    17. 
  
  
  
  17. 
  
  
  
  18. console.log(x.getDimensions()); // { length: 3, breadth: 4 }
    19. 
  
  
  
  19. console.log(y.getDimensions()); // { length: 4, breadth: 3 } 
    20.

代码中，x和y都是构造函数Rectangle创建的对象实例，它们通过prototype继承了getDimensions方法。

5. 模块化

JavaScript并非模块化编程语言，至少ES6落地之前都不是。然而对于一个复杂的Web应用，模块化编程是一个最基本的要求。这时，可以使用立即执行函数来实现模块化，正如很多JS库比如jQuery以及我们Fundebug都是这样实现的。

 
 
 
    
  
  
  
  1. var module = (function() {
    2. 
  
  
  
  2.     var N = 5;
    3. 
  
  
  
  3. 
  
  
  
  4.     function print(x) {
    5. 
  
  
  
  5.         console.log("The result is: " + x);
    6. 
  
  
  
  6.     }
    7. 
  
  
  
  7. 
  
  
  
  8.     function add(a) {
    9. 
  
  
  
  9.         var x = a + N;
    10. 
  
  
  
  10.         print(x);
    11. 
  
  
  
  11.     }
    12. 
  
  
  
  12. 
  
  
  
  13.     return {
    14. 
  
  
  
  14.         description: "This is description",
    15. 
  
  
  
  15.         add: add
    16. 
  
  
  
  16.     };
    17. 
  
  
  
  17. })();
    18. 
  
  
  
  18. 
  
  
  
  19. 
  
  
  
  20. console.log(module.description); // 输出"this is description" 
    21. 
  
  
  
  21. 
  
  
  
  22. module.add(5); // 输出“The result is: 10” 
    23.

所谓模块化，就是根据需要控制模块内属性与方法的可访问性，即私有或者公开。在代码中，module为一个独立的模块，N为其私有属性，print为其私有方法，decription为其公有属性，add为其共有方法。

6. 变量提升

JavaScript会将所有变量和函数声明移动到它的作用域的最前面，这就是所谓的变量提升(Hoisting)。也就是说，无论你在什么地方声明变量和函数，解释器都会将它们移动到作用域的最前面。因此我们可以先使用变量和函数，而后声明它们。

但是，仅仅是变量声明被提升了，而变量赋值不会被提升。如果你不明白这一点，有时则会出错：

 
 
 
    
  
  
  
  1. console.log(y);  // 输出undefined
    2. 
  
  
  
  2. 
  
  
  
  3. y = 2; // 初始化y 
    4.

上面的代码等价于下面的代码：

 
 
 
    
  
  
  
  1. var y;  // 声明y
    2. 
  
  
  
  2. 
  
  
  
  3. console.log(y);  // 输出undefined
    4. 
  
  
  
  4. 
  
  
  
  5. y = 2; // 初始化y 
    6.

为了避免BUG，开发者应该在每个作用域开始时声明变量和函数。

7. 柯里化

柯里化，即Currying，可以是函数变得更加灵活。我们可以一次性传入多个参数调用它;也可以只传入一部分参数来调用它，让它返回一个函数去处理剩下的参数。

 
 
 
    
  
  
  
  1. var add = function(x) {
    2. 
  
  
  
  2.     return function(y) {
    3. 
  
  
  
  3.         return x + y;
    4. 
  
  
  
  4.     };
    5. 
  
  
  
  5. };
    6. 
  
  
  
  6. 
  
  
  
  7. console.log(add(1)(1)); // 输出2
    8. 
  
  
  
  8. 
  
  
  
  9. var add1 = add(1);
    10. 
  
  
  
  10. console.log(add1(1)); // 输出2
    11. 
  
  
  
  11. 
  
  
  
  12. var add10 = add(10);
    13. 
  
  
  
  13. console.log(add10(1)); // 输出11 
    14.

代码中，我们可以一次性传入2个1作为参数add(1)(1)，也可以传入1个参数之后获取add1与add10函数，这样使用起来非常灵活。

8. apply, call与bind方法

JavaScript开发者有必要理解apply、call与bind方法的不同点。它们的共同点是***个参数都是this，即函数运行时依赖的上下文。

三者之中，call方法是最简单的，它等价于指定this值调用函数：

 
 
 
    
  
  
  
  1. var user = {
    2. 
  
  
  
  2.     name: "Rahul Mhatre",
    3. 
  
  
  
  3.     whatIsYourName: function() {
    4. 
  
  
  
  4.         console.log(this.name);
    5. 
  
  
  
  5.     }
    6. 
  
  
  
  6. };
    7. 
  
  
  
  7. 
  
  
  
  8. user.whatIsYourName(); // 输出"Rahul Mhatre",
    9. 
  
  
  
  9. 
  
  
  
  10. var user2 = {
    11. 
  
  
  
  11.     name: "Neha Sampat"
    12. 
  
  
  
  12. };
    13. 
  
  
  
  13. 
  
  
  
  14. user.whatIsYourName.call(user2); // 输出"Neha Sampat" 
    15.
  • apply方法与call方法类似。两者***的不同点在于，apply方法使用数组指定参数，而call方法每个参数单独需要指定：
  • apply(thisArg, [argsArray])
 
 
 
    
  
  
  
  1. var user = {
    2. 
  
  
  
  2.     greet: "Hello!",
    3. 
  
  
  
  3.     greetUser: function(userName) {
    4. 
  
  
  
  4.         console.log(this.greet + " " + userName);
    5. 
  
  
  
  5.     }
    6. 
  
  
  
  6. };
    7. 
  
  
  
  7. 
  
  
  
  8. var greet1 = {
    9. 
  
  
  
  9.     greet: "Hola"
    10. 
  
  
  
  10. };
    11. 
  
  
  
  11. 
  
  
  
  12. user.greetUser.call(greet1, "Rahul"); // 输出"Hola Rahul"
    13. 
  
  
  
  13. user.greetUser.apply(greet1, ["Rahul"]); // 输出"Hola Rahul" 
    14.

使用bind方法，可以为函数绑定this值，然后作为一个新的函数返回：

 
 
 
    
  
  
  
  1. var user = {
    2. 
  
  
  
  2.      greet: "Hello!",
    3. 
  
  
  
  3.      greetUser: function(userName) {
    4. 
  
  
  
  4.      console.log(this.greet + " " + userName);
    5. 
  
  
  
  5.      }
    6. 
  
  
  
  6. };
    7. 
  
  
  
  7. 
  
  
  
  8. var greetHola = user.greetUser.bind({greet: "Hola"});
    9. 
  
  
  
  9. var greetBonjour = user.greetUser.bind({greet: "Bonjour"});
    10. 
  
  
  
  10. 
  
  
  
  11. greetHola("Rahul") // 输出"Hola Rahul"
    12. 
  
  
  
  12. greetBonjour("Rahul") // 输出"Bonjour Rahul" 
    13.

9. Memoization

Memoization用于优化比较耗时的计算，通过将计算结果缓存到内存中，这样对于同样的输入值，下次只需要中内存中读取结果。

 
 
 
    
  
  
  
  1. function memoizeFunction(func)
    2. 
  
  
  
  2. {
    3. 
  
  
  
  3.     var cache = {};
    4. 
  
  
  
  4.     return function()
    5. 
  
  
  
  5.     {
    6. 
  
  
  
  6.         var key = arguments[0];
    7. 
  
  
  
  7.         if (cache[key])
    8. 
  
  
  
  8.         {
    9. 
  
  
  
  9.             return cache[key];
    10. 
  
  
  
  10.         }
    11. 
  
  
  
  11.         else
    12. 
  
  
  
  12.         {
    13. 
  
  
  
  13.             var val = func.apply(this, arguments);
    14. 
  
  
  
  14.             cache[key] = val;
    15. 
  
  
  
  15.             return val;
    16. 
  
  
  
  16.         }
    17. 
  
  
  
  17.     };
    18. 
  
  
  
  18. }
    19. 
  
  
  
  19. 
  
  
  
  20. 
  
  
  
  21. var fibonacci = memoizeFunction(function(n)
    22. 
  
  
  
  22. {
    23. 
  
  
  
  23.     return (n === 0 || n === 1) ? n : fibonacci(n - 1) + fibonacci(n - 2);
    24. 
  
  
  
  24. });
    25. 
  
  
  
  25. 
  
  
  
  26. console.log(fibonacci(100)); // 输出354224848179262000000
    27. 
  
  
  
  27. console.log(fibonacci(100)); // 输出354224848179262000000 
    28.

代码中，第2次计算fibonacci(100)则只需要在内存中直接读取结果。

10. 函数重载

所谓函数重载(method overloading)，就是函数名称一样，但是输入输出不一样。或者说，允许某个函数有各种不同输入，根据不同的输入，返回不同的结果。凭直觉，函数重载可以通过if...else或者switch实现，这就不去管它了。jQuery之父John Resig提出了一个非常巧(bian)妙(tai)的方法，利用了闭包。

从效果上来说，people对象的find方法允许3种不同的输入: 0个参数时，返回所有人名;1个参数时，根据firstName查找人名并返回;2个参数时，根据完整的名称查找人名并返回。

难点在于，people.find只能绑定一个函数，那它为何可以处理3种不同的输入呢?它不可能同时绑定3个函数find0,find1与find2啊!这里的关键在于old属性。

由addMethod函数的调用顺序可知，people.find最终绑定的是find2函数。然而，在绑定find2时，old为find1;同理，绑定find1时，old为find0。3个函数find0,find1与find2就这样通过闭包链接起来了。

根据addMethod的逻辑，当f.length与arguments.length不匹配时，就会去调用old，直到匹配为止。

 
 
 
    
  
  
  
  1. function addMethod(object, name, f)
    2. 
  
  
  
  2. {　　
    3. 
  
  
  
  3.     var old = object[name];　　
    4. 
  
  
  
  4.     object[name] = function()
    5. 
  
  
  
  5.     {
    6. 
  
  
  
  6.         // f.length为函数定义时的参数个数
    7. 
  
  
  
  7.         // arguments.length为函数调用时的参数个数　　　　
    8. 
  
  
  
  8.         if (f.length === arguments.length)
    9. 
  
  
  
  9.         {　　
    10. 
  
  
  
  10.             return f.apply(this, arguments);　　　　
    11. 
  
  
  
  11.         }
    12. 
  
  
  
  12.         else if (typeof old === "function")
    13. 
  
  
  
  13.         {
    14. 
  
  
  
  14.             return old.apply(this, arguments);　　　　
    15. 
  
  
  
  15.         }　　
    16. 
  
  
  
  16.     };
    17. 
  
  
  
  17. }
    18. 
  
  
  
  18. 
  
  
  
  19. 
  
  
  
  20. // 不传参数时，返回所有name
    21. 
  
  
  
  21. function find0()
    22. 
  
  
  
  22. {　　
    23. 
  
  
  
  23.     return this.names;
    24. 
  
  
  
  24. }
    25. 
  
  
  
  25. 
  
  
  
  26. 
  
  
  
  27. // 传一个参数时，返回firstName匹配的name
    28. 
  
  
  
  28. function find1(firstName)
    29. 
  
  
  
  29. {　　
    30. 
  
  
  
  30.     var result = [];　　
    31. 
  
  
  
  31.     for (var i = 0; i < this.names.length; i++)
    32. 
  
  
  
  32.     {　　　　
    33. 
  
  
  
  33.         if (this.names[i].indexOf(firstName) === 0)
    34. 
  
  
  
  34.         {　　　　　　
    35. 
  
  
  
  35.             result.push(this.names[i]);　　　　
    36. 
  
  
  
  36.         }　　
    37. 
  
  
  
  37.     }　　
    38. 
  
  
  
  38.     return result;
    39. 
  
  
  
  39. }
    40. 
  
  
  
  40. 
  
  
  
  41. 
  
  
  
  42. // 传两个参数时，返回firstName和lastName都匹配的name
    43. 
  
  
  
  43. function find2(firstName, lastName)
    44. 
  
  
  
  44. {　
    45. 
  
  
  
  45.     var result = [];　　
    46. 
  
  
  
  46.     for (var i = 0; i < this.names.length; i++)
    47. 
  
  
  
  47.     {　　　　
    48. 
  
  
  
  48.         if (this.names[i] === (firstName + " " + lastName))
    49. 
  
  
  
  49.         {　　　　　　
    50. 
  
  
  
  50.             result.push(this.names[i]);　　　　
    51. 
  
  
  
  51.         }　　
    52. 
  
  
  
  52.     }　　
    53. 
  
  
  
  53.     return result;
    54. 
  
  
  
  54. }
    55. 
  
  
  
  55. 
  
  
  
  56. 
  
  
  
  57. var people = {　　
    58. 
  
  
  
  58.     names: ["Dean Edwards", "Alex Russell", "Dean Tom"]
    59. 
  
  
  
  59. };
    60. 
  
  
  
  60. 
  
  
  
  61. 
  
  
  
  62. addMethod(people, "find", find0);
    63. 
  
  
  
  63. addMethod(people, "find", find1);
    64. 
  
  
  
  64. addMethod(people, "find", find2);
    65. 
  
  
  
  65. 
  
  
  
  66. 
  
  
  
  67. console.log(people.find()); // 输出["Dean Edwards", "Alex Russell", "Dean Tom"]
    68. 
  
  
  
  68. console.log(people.find("Dean")); // 输出["Dean Edwards", "Dean Tom"]
    69. 
  
  
  
  69. console.log(people.find("Dean", "Edwards")); // 输出["Dean Edwards"] 
    70.

参考链接

  • 闭包 - MDN
  • JavaScript闭包-块级作用域和私有变量
  • Javascript继承机制的设计思想 - 阮一峰
  • 变量提升 - MDN
  • JS函数式编程指南
  • 浅谈JavaScript函数重载

名称栏目：10个JavaScript难点
分享网址：http://www.shufengxianlan.com/qtweb/news9/1159.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

搜索引擎优化知识

分类信息网站

绵阳梓潼网站建设　　 　商城网站　　 　成都石膏隔墙板　　 　成都微信开发　　 　教育网站设计方案　　 　成都租用服务器　　 　等级保护测评　　 　成都雨棚定制　　 　LED网站设计方案　　 　广汉锦华建材　　 　高防机房　　 　成都光华电信机房　　 　四川服务器托管　　 　崇州做网站　　 　云服务器　　 　网站方案　　 　腾讯云免备案主机　　 　发光字制作　　 　草坪音箱　　 　h5响应式网站