偷偷摘套内射激情视频,久久精品99国产国产精,中文字幕无线乱码人妻,中文在线中文a,性爽19p

10個(gè)JavaScript難點(diǎn)

開(kāi)發(fā) 前端
每個(gè)JavaScript構(gòu)造函數(shù)都有一個(gè)prototype屬性,用于設(shè)置所有實(shí)例對(duì)象需要共享的屬性和方法。prototype屬性不能列舉。JavaScript僅支持通過(guò)prototype屬性進(jìn)行繼承屬性和方法。

 

[[198240]]

1. 立即執(zhí)行函數(shù)

立即執(zhí)行函數(shù),即Immediately Invoked Function Expression (IIFE),正如它的名字,就是創(chuàng)建函數(shù)的同時(shí)立即執(zhí)行。它沒(méi)有綁定任何事件,也無(wú)需等待任何異步操作:

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

function(){…}是一個(gè)匿名函數(shù),包圍它的一對(duì)括號(hào)將其轉(zhuǎn)換為一個(gè)表達(dá)式,緊跟其后的一對(duì)括號(hào)調(diào)用了這個(gè)函數(shù)。立即執(zhí)行函數(shù)也可以理解為立即調(diào)用一個(gè)匿名函數(shù)。立即執(zhí)行函數(shù)最常見(jiàn)的應(yīng)用場(chǎng)景就是:將var變量的作用域限制于你們函數(shù)內(nèi),這樣可以避免命名沖突。

2. 閉包

對(duì)于閉包(closure),當(dāng)外部函數(shù)返回之后,內(nèi)部函數(shù)依然可以訪問(wèn)外部函數(shù)的變量。

  1. function f1() 
  2.     var N = 0; // N是f1函數(shù)的局部變量 
  3.      
  4.     function f2() // f2是f1函數(shù)的內(nèi)部函數(shù),是閉包 
  5.     { 
  6.         N += 1; // 內(nèi)部函數(shù)f2中使用了外部函數(shù)f1中的變量N 
  7.         console.log(N); 
  8.     } 
  9.  
  10.     return f2; 
  11.  
  12. var result = f1(); 
  13.  
  14. result(); // 輸出1 
  15. result(); // 輸出2 
  16. result(); // 輸出3  

代碼中,外部函數(shù)f1只執(zhí)行了一次,變量N設(shè)為0,并將內(nèi)部函數(shù)f2賦值給了變量result。由于外部函數(shù)f1已經(jīng)執(zhí)行完畢,其內(nèi)部變量N應(yīng)該在內(nèi)存中被清除,然而事實(shí)并不是這樣:我們每次調(diào)用result的時(shí)候,發(fā)現(xiàn)變量N一直在內(nèi)存中,并且在累加。為什么呢?這就是閉包的神奇之處了!

3. 使用閉包定義私有變量

通常,JavaScript開(kāi)發(fā)者使用下劃線作為私有變量的前綴。但是實(shí)際上,這些變量依然可以被訪問(wèn)和修改,并非真正的私有變量。這時(shí),使用閉包可以定義真正的私有變量:

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

代碼中,對(duì)象p的的name屬性為私有屬性,使用p.name不能直接訪問(wèn)。

4. prototype

每個(gè)JavaScript構(gòu)造函數(shù)都有一個(gè)prototype屬性,用于設(shè)置所有實(shí)例對(duì)象需要共享的屬性和方法。prototype屬性不能列舉。JavaScript僅支持通過(guò)prototype屬性進(jìn)行繼承屬性和方法。

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

代碼中,x和y都是構(gòu)造函數(shù)Rectangle創(chuàng)建的對(duì)象實(shí)例,它們通過(guò)prototype繼承了getDimensions方法。

5. 模塊化

JavaScript并非模塊化編程語(yǔ)言,至少ES6落地之前都不是。然而對(duì)于一個(gè)復(fù)雜的Web應(yīng)用,模塊化編程是一個(gè)最基本的要求。這時(shí),可以使用立即執(zhí)行函數(shù)來(lái)實(shí)現(xiàn)模塊化,正如很多JS庫(kù)比如jQuery以及我們Fundebug都是這樣實(shí)現(xiàn)的。

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

所謂模塊化,就是根據(jù)需要控制模塊內(nèi)屬性與方法的可訪問(wèn)性,即私有或者公開(kāi)。在代碼中,module為一個(gè)獨(dú)立的模塊,N為其私有屬性,print為其私有方法,decription為其公有屬性,add為其共有方法。

6. 變量提升

JavaScript會(huì)將所有變量和函數(shù)聲明移動(dòng)到它的作用域的最前面,這就是所謂的變量提升(Hoisting)。也就是說(shuō),無(wú)論你在什么地方聲明變量和函數(shù),解釋器都會(huì)將它們移動(dòng)到作用域的最前面。因此我們可以先使用變量和函數(shù),而后聲明它們。

但是,僅僅是變量聲明被提升了,而變量賦值不會(huì)被提升。如果你不明白這一點(diǎn),有時(shí)則會(huì)出錯(cuò):

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

上面的代碼等價(jià)于下面的代碼:

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

為了避免BUG,開(kāi)發(fā)者應(yīng)該在每個(gè)作用域開(kāi)始時(shí)聲明變量和函數(shù)。

7. 柯里化

柯里化,即Currying,可以是函數(shù)變得更加靈活。我們可以一次性傳入多個(gè)參數(shù)調(diào)用它;也可以只傳入一部分參數(shù)來(lái)調(diào)用它,讓它返回一個(gè)函數(shù)去處理剩下的參數(shù)。

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

代碼中,我們可以一次性傳入2個(gè)1作為參數(shù)add(1)(1),也可以傳入1個(gè)參數(shù)之后獲取add1與add10函數(shù),這樣使用起來(lái)非常靈活。

8. apply, call與bind方法

JavaScript開(kāi)發(fā)者有必要理解apply、call與bind方法的不同點(diǎn)。它們的共同點(diǎn)是***個(gè)參數(shù)都是this,即函數(shù)運(yùn)行時(shí)依賴的上下文。

三者之中,call方法是最簡(jiǎn)單的,它等價(jià)于指定this值調(diào)用函數(shù):

  1. var user = { 
  2.     name"Rahul Mhatre"
  3.     whatIsYourName: function() { 
  4.         console.log(this.name); 
  5.     } 
  6. }; 
  7.  
  8. user.whatIsYourName(); // 輸出"Rahul Mhatre"
  9.  
  10. var user2 = { 
  11.     name"Neha Sampat" 
  12. }; 
  13.  
  14. user.whatIsYourName.call(user2); // 輸出"Neha Sampat"  
  • apply方法與call方法類(lèi)似。兩者***的不同點(diǎn)在于,apply方法使用數(shù)組指定參數(shù),而call方法每個(gè)參數(shù)單獨(dú)需要指定:
  • apply(thisArg, [argsArray]) 
  1. var user = { 
  2.     greet: "Hello!"
  3.     greetUser: function(userName) { 
  4.         console.log(this.greet + " " + userName); 
  5.     } 
  6. }; 
  7.  
  8. var greet1 = { 
  9.     greet: "Hola" 
  10. }; 
  11.  
  12. user.greetUser.call(greet1, "Rahul"); // 輸出"Hola Rahul" 
  13. user.greetUser.apply(greet1, ["Rahul"]); // 輸出"Hola Rahul"  

使用bind方法,可以為函數(shù)綁定this值,然后作為一個(gè)新的函數(shù)返回:

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

9. Memoization

Memoization用于優(yōu)化比較耗時(shí)的計(jì)算,通過(guò)將計(jì)算結(jié)果緩存到內(nèi)存中,這樣對(duì)于同樣的輸入值,下次只需要中內(nèi)存中讀取結(jié)果。

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

代碼中,第2次計(jì)算fibonacci(100)則只需要在內(nèi)存中直接讀取結(jié)果。

10. 函數(shù)重載

所謂函數(shù)重載(method overloading),就是函數(shù)名稱一樣,但是輸入輸出不一樣。或者說(shuō),允許某個(gè)函數(shù)有各種不同輸入,根據(jù)不同的輸入,返回不同的結(jié)果。憑直覺(jué),函數(shù)重載可以通過(guò)if...else或者switch實(shí)現(xiàn),這就不去管它了。jQuery之父John Resig提出了一個(gè)非常巧(bian)妙(tai)的方法,利用了閉包。

從效果上來(lái)說(shuō),people對(duì)象的find方法允許3種不同的輸入: 0個(gè)參數(shù)時(shí),返回所有人名;1個(gè)參數(shù)時(shí),根據(jù)firstName查找人名并返回;2個(gè)參數(shù)時(shí),根據(jù)完整的名稱查找人名并返回。

難點(diǎn)在于,people.find只能綁定一個(gè)函數(shù),那它為何可以處理3種不同的輸入呢?它不可能同時(shí)綁定3個(gè)函數(shù)find0,find1與find2啊!這里的關(guān)鍵在于old屬性。

由addMethod函數(shù)的調(diào)用順序可知,people.find最終綁定的是find2函數(shù)。然而,在綁定find2時(shí),old為find1;同理,綁定find1時(shí),old為find0。3個(gè)函數(shù)find0,find1與find2就這樣通過(guò)閉包鏈接起來(lái)了。

根據(jù)addMethod的邏輯,當(dāng)f.length與arguments.length不匹配時(shí),就會(huì)去調(diào)用old,直到匹配為止。

  1. function addMethod(object, name, f) 
  2. {   
  3.     var old = object[name];   
  4.     object[name] = function() 
  5.     { 
  6.         // f.length為函數(shù)定義時(shí)的參數(shù)個(gè)數(shù) 
  7.         // arguments.length為函數(shù)調(diào)用時(shí)的參數(shù)個(gè)數(shù)     
  8.         if (f.length === arguments.length) 
  9.         {   
  10.             return f.apply(this, arguments);     
  11.         } 
  12.         else if (typeof old === "function"
  13.         { 
  14.             return old.apply(this, arguments);     
  15.         }   
  16.     }; 
  17.  
  18.  
  19. // 不傳參數(shù)時(shí),返回所有name 
  20. function find0() 
  21. {   
  22.     return this.names; 
  23.  
  24.  
  25. // 傳一個(gè)參數(shù)時(shí),返回firstName匹配的name 
  26. function find1(firstName) 
  27. {   
  28.     var result = [];   
  29.     for (var i = 0; i < this.names.length; i++) 
  30.     {     
  31.         if (this.names[i].indexOf(firstName) === 0) 
  32.         {       
  33.             result.push(this.names[i]);     
  34.         }   
  35.     }   
  36.     return result; 
  37.  
  38.  
  39. // 傳兩個(gè)參數(shù)時(shí),返回firstName和lastName都匹配的name 
  40. function find2(firstName, lastName) 
  41. {  
  42.     var result = [];   
  43.     for (var i = 0; i < this.names.length; i++) 
  44.     {     
  45.         if (this.names[i] === (firstName + " " + lastName)) 
  46.         {       
  47.             result.push(this.names[i]);     
  48.         }   
  49.     }   
  50.     return result; 
  51.  
  52.  
  53. var people = {   
  54.     names: ["Dean Edwards""Alex Russell""Dean Tom"
  55. }; 
  56.  
  57.  
  58. addMethod(people, "find", find0); 
  59. addMethod(people, "find", find1); 
  60. addMethod(people, "find", find2); 
  61.  
  62.  
  63. console.log(people.find()); // 輸出["Dean Edwards""Alex Russell""Dean Tom"
  64. console.log(people.find("Dean")); // 輸出["Dean Edwards""Dean Tom"
  65. console.log(people.find("Dean""Edwards")); // 輸出["Dean Edwards" 

參考鏈接

責(zé)任編輯:龐桂玉 來(lái)源: segmentfault
相關(guān)推薦

2019-08-09 09:35:20

JavaScript程序員函數(shù)

2023-08-02 18:44:47

JavaScript命名web

2020-06-01 08:39:12

JavaScript開(kāi)發(fā)技術(shù)

2017-12-05 11:25:09

2021-03-15 08:13:19

JavaScript開(kāi)發(fā)代碼

2011-06-30 16:10:01

JavaScript

2019-11-13 09:01:48

開(kāi)源JavaScript模板引擎

2017-07-27 16:31:11

2017-05-27 15:21:38

JavaScript機(jī)器學(xué)習(xí)示例

2019-08-20 08:00:00

JavaScript測(cè)試工具前端

2011-08-29 09:52:55

JavaScript

2012-01-06 09:09:56

JavaScript

2020-04-09 10:39:06

Dockerk8s容器云

2011-08-22 10:11:03

JavaScript

2012-04-13 09:45:53

JavaScriptjQuery

2020-05-26 08:38:57

JavaScript庫(kù)語(yǔ)言

2020-12-31 07:56:02

JavaScript 字符串技巧

2017-12-06 08:14:25

JavaScripBUG修復(fù)

2018-07-16 14:39:16

前端JavaScript動(dòng)畫(huà)庫(kù)

2020-08-07 11:46:47

JavaScript開(kāi)發(fā)代碼
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)