1、立即執行函數
立即執行函數,即ImmediatelyInvokedFunctionExpression
(IIFE),正如它的名字,就是創建函數的同時立即執行。它沒有綁定任何事件,也無需等待任何異步操作:
1.(function(){
2.
3.//代碼
4.
5.//...
6.
7.})();
function(){}是壹個匿名函數,包圍它的壹對括號將其轉換為壹個表達式,緊跟其後的壹對括號調用了這個函數。立即執行函數也可以理解為立即調用壹個匿名函數。立即執行函數最常見的應用場景就是:將var變量的作用域限制於妳們函數內,這樣可以避免命名沖突。
2、閉包
對於閉包(closure),當外部函數返回之後,內部函數依然可以訪問外部函數的變量。
1.(function(){
2.
3.//代碼
4.
5.//...
6.
7.})();
代碼中,外部函數f1只執行了壹次,變量N設為0,並將內部函數f2賦值給了變量result。由於外部函數f1已經執行完畢,其內部變量N應該在內存中被清除,然而事實並不是這樣:我們每次調用result的時候,發現變量N壹直在內存中,並且在累加。為什麽呢?這就是閉包的神奇之處了!
3、使用閉包定義私有變量
通常,JavaScript開發者使用下劃線作為私有變量的前綴。但是實際上,這些變量依然可以被訪問和修改,並非真正的私有變量。這時,使用閉包可以定義真正的私有變量:
1.functionProduct(){
2.
3.varname;
4.
5.this.setName=function(value){
6.name=value;
7.};
8.
9.this.getName=function(){
10.returnname;
11.};
12.}
13.
14.varp=newProduct();
15.p.setName("Fundebug");
16.
17.console.log(p.name);//輸出undefined
18.console.log(p.getName());//輸出Fundebug
代碼中,對象p的的name屬性為私有屬性,使用p.name不能直接訪問。
4、prototype
每個JavaScript構造函數都有壹個prototype屬性,用於設置所有實例對象需要***享的屬性和方法。prototype屬性不能列舉。JavaScript僅支持通過prototype屬性進行繼承屬性和方法。
1.functionRectangle(x,y)
2.{
3.this._length=x;
4.this._breadth=y;
5.}
6.
7.Rectangle.prototype.getDimensions=function()
8.{
9.return{
10.length:this._length,
11.breadth:this._breadth
12.};
13.};
14.
15.varx=newRectangle(3,4);
16.vary=newRectangle(4,3);
17.
18.console.log(x.getDimensions());//{length:3,breadth:4}
19.console.log(y.getDimensions());//{length:4,breadth:3}
代碼中,x和y都是構造函數Rectangle創建的對象實例,它們通過prototype繼承了getDimensions方法。
5、模塊化
JavaScript並非模塊化編程語言,至少ES6落地之前都不是。然而對於壹個復雜的Web應用,模塊化編程是壹個最基本的要求。這時,可以使用立即執行函數來實現模塊化,正如很多JS庫比如jQuery以及我們Fundebug都是這樣實現的。
1.varmodule=(function(){
2.varN=5;
3.
4.functionprint(x){
5.console.log("Theresultis:"+x);
6.}
7.
8.functionadd(a){
9.varx=a+N;
10.print(x);
11.}
12.
13.return{
14.description:"Thisisdescription",
15.add:add
16.};
17.})();
18.
19.
20.console.log(module.description);//輸出"thisisdescription"
21.
22.module.add(5);//輸出“Theresultis:10”
所謂模塊化,就是根據需要控制模塊內屬性與方法的可訪問性,即私有或者公開。在代碼中,module為壹個獨立的模塊,N為其私有屬性,print為其私有方法,decription為其公有屬性,add為其***有方法。
6、變量提升
JavaScript會將所有變量和函數聲明移動到它的作用域的最前面,這就是所謂的變量提升(Hoisting)。也就是說,無論妳在什麽地方聲明變量和函數,解釋器都會將它們移動到作用域的最前面。因此我們可以先使用變量和函數,而後聲明它們。但是,僅僅是變量聲明被提升了,而變量賦值不會被提升。如果妳不明白這壹點,有時則會出錯:
1.console.log(y);//輸出undefined
2.
3.y=2;//初始化y
上面的代碼等價於下面的代碼:
1.vary;//聲明y
2.
3.console.log(y);//輸出undefined
4.
5.y=2;//初始化y
為了避免BUG,開發者應該在每個作用域開始時聲明變量和函數。
7、柯裏化
柯裏化,即Currying,可以是函數變得更加靈活。我們可以壹次性傳入多個參數調用它;也可以只傳入壹部分參數來調用它,讓它返回壹個函數去處理剩下的參數。
1.varadd=function(x){
2.returnfunction(y){
3.returnx+y;
4.};
5.};
6.
7.console.log(add(1)(1));//輸出2
8.
9.varadd1=add(1);
10.console.log(add1(1));//輸出2
11.
12.varadd10=add(10);
13.console.log(add10(1));//輸出11
代碼中,我們可以壹次性傳入2個1作為參數add(1)(1),也可以傳入1個參數之後獲取add1與add10函數,這樣使用起來非常靈活。
8、apply,call與bind方法
JavaScript開發者有必要理解apply、call與bind方法的不同點。它們的***同點是第壹個參數都是this,即函數運行時依賴的上下文。
三者之中,call方法是最簡單的,它等價於指定this值調用函數:
1.varuser={
2.name:"RahulMhatre",
3.whatIsYourName:function(){
4.console.log(this.name);
5.}
6.};
7.
8.user.whatIsYourName();//輸出"RahulMhatre",
9.
10.varuser2={
11.name:"NehaSampat"
12.};
13.
14.user.whatIsYourName.call(user2);//輸出"NehaSampat"
·apply方法與call方法類似。兩者唯壹的不同點在於,apply方法使用數組指定參數,而call方法每個參數單獨需要指定:
·apply(thisArg,[argsArray])
1.varuser={
2.greet:"Hello!",
3.greetUser:function(userName){
4.console.log(this.greet+""+userName);
5.}
6.};
7.
8.vargreet1={
9.greet:"Hola"
10.};
11.
12.user.greetUser.call(greet1,"Rahul");//輸出"HolaRahul"
13.user.greetUser.apply(greet1,["Rahul"]);//輸出"HolaRahul"
使用bind方法,可以為函數綁定this值,然後作為壹個新的函數返回:
1.varuser={
2.greet:"Hello!",
3.greetUser:function(userName){
4.console.log(this.greet+""+userName);
5.}
6.};
7.
8.vargreetHola=user.greetUser.bind({greet:"Hola"});
9.vargreetBonjour=user.greetUser.bind({greet:"Bonjour"});
10.
11.greetHola("Rahul")//輸出"HolaRahul"
12.greetBonjour("Rahul")//輸出"BonjourRahul"
9、memoization
Memoization用於優化比較耗時的計算,通過將計算結果緩存到內存中,這樣對於同樣的輸入值,下次只需要中內存中讀取結果。
1.functionmemoizeFunction(func)
2.{
3.varcache={};
4.returnfunction()
5.{
6.varkey=arguments[0];
7.if(cache[key])
8.{
9.returncache[key];
10.}
11.else
12.{
13.varval=func.apply(this,arguments);
14.cache[key]=val;
15.returnval;
16.}
17.};
18.}
19.
20.
21.varfibonacci=memoizeFunction(function(n)
22.{
23.return(n===0||n===1)?n:fibonacci(n-1)+fibonacci(n-2);
24.});
25.
26.console.log(fibonacci(100));//輸出354224848179262000000
27.console.log(fibonacci(100));//輸出354224848179262000000
代碼中,第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.functionaddMethod(object,name,f)
2.{
3.varold=object[name];
4.object[name]=function()
5.{
6.//f.length為函數定義時的參數個數
7.//arguments.length為函數調用時的參數個數
8.if(f.length===arguments.length)
9.{
10.returnf.apply(this,arguments);
11.}
12.elseif(typeofold==="function")
13.{
14.returnold.apply(this,arguments);
15.}
16.};
17.}
18.
19.
20.//不傳參數時,返回所有name
21.functionfind0()
22.{
23.returnthis.names;
24.}
25.
26.
27.//傳壹個參數時,返回firstName匹配的name
28.functionfind1(firstName)
29.{
30.varresult=[];
31.for(vari=0;i
32.{
33.if(this.names[i].indexOf(firstName)===0)
34.{
35.result.push(this.names[i]);
36.}
37.}
38.returnresult;
39.}
40.
41.
42.//傳兩個參數時,返回firstName和lastName都匹配的name
43.functionfind2(firstName,lastName)
44.{
45.varresult=[];
46.for(vari=0;i
47.{
48.if(this.names[i]===(firstName+""+lastName))
49.{
50.result.push(this.names[i]);
51.}
52.}
53.returnresult;
54.}
55.
56.
57.varpeople={
58.names:["DeanEdwards","AlexRussell","DeanTom"]
59.};
60.
61.
62.addMethod(people,"find",find0);
63.addMethod(people,"find",find1);
64.addMethod(people,"find",find2);
65.
66.
67.console.log(people.find());//輸出["DeanEdwards","AlexRussell","DeanTom"]
68.console.log(people.find("Dean"));//輸出["DeanEdwards","DeanTom"]
69.console.log(people.find("Dean","Edwards"));//輸出["DeanEdwards"]
以上就是小編今天為大家分享的關於Web前端工程師應該知道的JavaScript的10個難點。希望本篇文章能夠對正在從事Web前端學習的小夥伴們有所幫助。想要了解更多web前端相關知識記得關註北大青鳥Web培訓官網最後祝願小夥伴們工作順利!
原文鏈接:#/a/1190000010371988