QNAP NAS

QNAP online resources collection

Image
QNAP is the famous private cloud solution provider, the main product is NAS (Network attach Storage), this article collect QNAP online resources and help QNAPer / NAS beginner quickly know how to select NAS and find application information, if any suggestion website, welcome to comment and share with us. QNAP website  https://www.qnap.com/en/ Topic include NAS, Operation System, Application, Tutorial / FAQ , Forum and Customer Service.

JavaScript世界的一等公民- 函數

簡介

在很多傳統語言(C/C++/Java/C#等)中,函數都是作為一個二等公民存在,你只能用語言的關鍵字聲明一個函數然後調用它,如果需要把函數作為參數傳給另一個函數,或是賦值給一個本地變量,又或是作為返回值,就需要通過函數指針(function pointer)、代理(delegate)等特殊的方式周折一番。
而在JavaScript世界中函數卻是一等公民,它不僅擁有一切傳統函數的使用方式(聲明和調用),而且可以做到像簡單值一樣賦值、傳參、返回,這樣的函數也稱之為第一級函數(First-class Function。不僅如此,JavaScript中的函數還充當了類的構造函數的作用,同時又是一個Function類的實例(instance)。這樣的多重身份讓JavaScript的函數變得非常重要。

一、JavaScript函數入門級

JavaScript函數像一般語言一樣也是遵循先聲明後使用的原則,函數名只能包含字母、數字、下劃線或$,且不能以數字開頭。函數常見的聲明方式有以下兩種:
//直接聲明函數myfunc
 function myfunc(/* arguments */) {
}

// 把匿名函數賦值給本地變量myfunc
var myfunc = function(/* arguments */) {
}
注意,上面兩種函數聲明方式存在細微的差別:第一種方式在聲明時就是一個命名的函數,無論是聲明在調用之前調用之後,甚至是不會執行到的位置(例如return語句之後或是永遠不會為真的分支裡),都在整個作用域可訪問;第二種方式是通過把匿名函數賦值給變量的方式,嚴格意義上說這不是一個函數的聲明(function declaration)而是一個函數表達式(function expression),在賦值之前這個函數不能被任何代碼訪問到,也就是說這個賦值必須在調用之前完成,否則調用時會出現錯誤:"TypeError: undefined is not a function"。例如:
myfunc1(); //能夠正常調用,因為myfunc1採用直接聲明的方式
 function myfunc1() {
}
 myfunc2(); //出錯TypeError: undefined is not a function

 var myfunc2 = function() {
};
函數的基本調用方式與傳統語言相同用一對括號調用: myfunc()。JavaScript的函數也支持直接或間接的遞歸(recursive)調用,例如經典的斐波那契函數用JavaScript可以這樣實現:
function fib(n) {
  if (n == 1 || n == 2) {
    return 1;
  } else {
    return fib(n - 2) + fib(n - 1);
  }
}
在JavaScript的函數可以處理變長參數,在函數內部都擁有一個名為arguments的局部變量,它是一個類數組(array-liked)的對象,裡麵包含了所有調用時傳入的參數,有length屬性表示參數的個數。例如:
function test() {
  alert(arguments.length);
}

test(1); // 1
test(1, 'a'); // 2
test(true, [], {}); // 3
利用arguments可以實現類似C語言printf的功能,也可以用來實現方法的多態。

二、JavaScript函數進階

2.1 匿名函數和嵌套函數
在JavaScript可以聲明一個沒有名稱的函數,稱為匿名函數(Anonymouse Function)。同時JavaScript還允許在函數內部聲明函數,稱為嵌套函數(Nested Function),嵌套函數的作用域為整個父函數。
在前面函數聲明的部分就看到了匿名函數和嵌套函數的一種用法,由於匿名函數沒有名稱,不會引入新的變量污染上下文環境,而且會帶來新的變量作用域,因此匿名函數常被用來防止全局環境污染。
JavaScript運行時中有一個特殊的全局環境(global object),這個對像上面存放全局的函數和變量,實際開發中經常會使用若干第三方的庫或多個js文件,若不小心在全局對象引入重複的變量或函數聲明,則會造成代碼執行混亂。例如先後引入兩個js文件,分別定義了自己的函數log作為內部使用,則第二引入的函數會覆蓋第一個的定義且不會拋出任何錯誤,在後續的執行中調用log函數可能會造成錯誤。這時候使用一個匿名函數將整個js內的邏輯包裝起來,就可以避免這種錯誤,這種方法已經被絕大多數開源js庫使用。
( function () { //匿名函數

function log(msg) {
 console.log(msg);
}

// 其他代碼
}()); //立即執行
以上代碼就是一個簡單的示例,log函數的作用域被限制在這個匿名函數之內,而匿名函數則因為被外面一對小括號()包括起來,形成一個函數表達式,表達式的值是一個函數,緊接著一對小括號表示立即執行這個函數,讓原有的代碼正常執行一次。不過,這種方式聲明的函數、通過var聲明的變量等等都是內部的,不能被任何匿名函數以外的代碼訪問到。如果你需要對外暴露一些函數作為接口的話有如下幾種方法:
var mylib = (function(global) {

function log (msg) {
 console. log (msg);
}

log1 = log ; //法一:利用沒有var的變量聲明的默認行為,在log1成為全局變量(不推薦)

global.log2 = log ; //法二:直接在全局對像上添加log2屬性,賦值為log函數(推薦)

return { //法三:通過匿名函數返回值得到一系列接口函數集合對象,賦值給全局變量mylib(推薦)
 log : log 
};
}(window));
2.2 高階函數(High-order Function
如果函數作為參數或返回值使用時,就稱為高階函數,JavaScript中的函數都可以作為高階函數來使用,這也是第一類函數的特徵。下面我們就分別分析一下這兩種使用方法。
function negative(n) {
 return -n; //取n的相反值
}

function square(n) {
 return n*n; // n的平方
}

function process(nums, callback) {
 var result = [];
 
 for ( var i = 0, length = nums.length; i < length; i++) {
  result[i] = callback(nums[i]); //對數組nums中的所有元素傳遞給callback進行處理,將返回值作為結果保存< font>
 }

 return result;

}

var nums = [-3, -2, -1, 0, 1, 2, 3, 4];
var n_neg = process(nums, negative);
// n_neg = [3, 2, 1, 0, -1, -2, -3, -4];
var n_square = process(nums, square);
// n_square = [9, 4, 1, 0, 1, 4, 9, 16];
以上代碼展示了把函數作為參數傳入另一個函數process調用的示例,在process函數的實現中,把callback作為一個黑盒子看待,負責把參數傳給它,然後獲取返回值,在調用之前並不清楚callback的具體實現。只有當執行到20行和22行時,callback才被分別代表negative或square,分別對每個元素進行取相反值或平方值的操作。
function generator() {
  var i = 0;
  return function() {
    return i++;
  };
}
var gen1 = generator(); //得到一個自然數生成器
var gen2 = generator(); //得到另一個自然數生成器
var r1 = gen1(); // r1 = 0
var r2 = gen1(); // r2 = 1
var r3 = gen2(); // r3 = 0
var r4 = gen2(); // r4 = 1
上面的代碼展示了把函數作為返回值的示例,generator是一個自然數生成器函數,返回值是一個自然數生成函數。每次調用generator時都會把一個匿名函數作為結果返回,這個匿名函數在被實際調用時依次返回每個自然數。在generator裡的變量i在每次調用這個匿名函數時都會自增1,這其實就是一個閉包。下面我們來介紹一下閉包.
2.3 閉包(Closure
閉包(Closure)並不是一個新鮮的概念,很多函數式語言中都使用了閉包。在JavaScript中,當你在內嵌函數中使用外部函數作用域內的變量時,就是使用了閉包。用一個常用的類比來解釋閉包和類(Class)的關係:類是帶函數的數據,閉包是帶數據的函數。
閉包中使用的變量有一個特性,就是它們不在父函數返回時釋放,而是隨著閉包生命週期的結束而結束。比如像上一節中generator的例子,gen1和gen2分別使用了相互獨立的變量i(在gen1的i自增1的時候,gen2的i並不受影響,反之亦然),只要gen1或gen2這兩個變量沒有被JavaScript引擎垃圾回收,他們各自的變量i就不會被釋放。在JavaScript編程中,不知不覺就會使用到閉包,閉包的這個特性在帶來易用的同時,也容易帶來類似內存洩露的問題。例如:
var elem = document.getElementById('test');
elem.addEventListener('click', function() {
  alert('You clicked ' + elem.tagName);
});
這段代碼的作用是點擊一個結點時顯示它的標籤名稱,它把一個匿名函數註冊為一個DOM結點的click事件處理函數,函數內引用了一個DOM對象elem,就形成了閉包。這就會產生一個循環引用,即:DOM->閉包->DOM->閉包...DOM對像在閉包釋放之前不會被釋放;而閉包作為DOM對象的事件處理函數存在,所以在DOM對象釋放前閉包不會釋放,即使DOM對像在DOM tree中刪除,由於這個循環引用的存在,DOM對象和閉包都不會被釋放。可以用下面的方法可以避免這種內存洩露:
var elem = document.getElementById('test');
elem.addEventListener('click', function() {
  alert('You clicked ' + this.tagName); // 不再直接引用elem变量
});
上面這段代碼中用this代替elem(在DOM事件處理函數中this指針指向DOM元素本身),讓JS運行時不再認為這個函數中使用了父類的變量,因此不再形成閉包。
閉包還會帶來很多類似的內存洩露問題,只有在寫代碼的時候著重註意一下閉包,盡量避免此類的問題產生。
2.4 類構造函數
JavaScript的函數同時作為類的構造函數,因此只要聲明一個函數就可以使用new關鍵字創建類的實例。
function Person(name) {
  this.name = name;
  this.toString = function() {
    return 'Hello, ' + this.name + '!';
  };
}

var p = new Person('Ghostheaven');
alert(p); // Hello, Ghostheaven!
在以上實例中Person函數作為類的構造函數使用,此時this指向新創建的實例對象,可以為實例增加屬性和方法,關於詳細的面向對象的JavaScript編程可以參考這篇文章。這裡我想要說的是,JavaScript函數作為類構造函數使用時的返回值問題。
function MyClass(name) {
  this.name = name;
  return name; //構造函數的返回值?
}

var obj1 = new MyClass('foo');
var obj2 = MyClass('foo');
var obj3 = new MyClass({});
var obj4 = MyClass({});
上面的構造函數比較特別,有返回語句,那麼obj1~obj4分別指向什麼對象呢?實際結果是這樣的:
  • obj1 = MyClass對象
  • obj2 = 'foo'
  • obj3 = {}
  • obj4 = {}
具體原因這篇文章有解釋,本文不再贅述,由於帶返回值的構造函數會產生奇怪的結果,因此不要在構造函數中調用有返回值的返回語句(空return可以)。

三、JavaScript函數妖怪級

歡迎來到妖怪級函數授課區,在這裡會交給你如何淡定自如地面對老怪。。。
3.1 Function
在JavaScript運行時中有一個內建的類叫做Function,用function關鍵字聲明一個函數其實是創建Function類對象的一種簡寫形式,所有的函數都擁有Function類所有的方法,例如call、apply、bind等等,可以通過instanceof關鍵字來驗證這個說法。
既然Function是一個類,那麼它的構造函數就是Function(它本身也是Function類的對象),應該可以通過new關鍵字來生成一個函數對象。第一個妖怪來了,那就是如何用Function類構造一個函數。Function的語法如下:
new Function ([arg1[, arg2[, ... argN]],] functionBody)
其中arg1, arg2, ... argN是字符串,代表參數名稱,functionBody也是字符串,表示函數體,前面的參數名稱是可多可少的,Function的構造函數會把最後一個參數當做函數體,前面的都當做參數處理。
var func1 = new Function('name', 'return "Hello, " + name + "!";');
func1('Ghostheaven'); // Hello, Ghostheaven!
以上方法就通過Function構造了一個函數,這個函數跟其他用function關鍵字聲明的函數一模一樣。
看到這兒,很多人可能會問為什麼需要這樣一個妖怪呢?“存在的即是合理的”,Function類有它獨特的用途,你可以利用它動態地生成各種函數邏輯,或者代替eval函數的功能,而且能保持當前環境不會被污染*。
3.2 自更新函數(Self-update Function
在很多語言中,函數一旦聲明過就不能再次聲明同名函數,否則會產生語法錯誤,而在JavaScript中的函數不僅可以重複聲明,而且還可以自己更新自己。自己吃自己的妖怪來了!
function selfUpdate() {
  window.selfUpdate = function() {
    alert('second run!');
  };

  alert('first run!');
}

selfUpdate(); // first run!
selfUpdate(); // second run!
這種函數可以用於只運行一次的邏輯,在第一次運行之後就整個替換成一段新的邏輯。

小結

JavaScript的函數灰常強大,在漂亮地解決很多問題的同時,也帶來很多負面問題。妖怪級別的函數使用方法通常是一些鮮為人知的用法,除非特別必要不要輕易使用,否則會造成代碼閱讀困難,影響團隊開發效率。
*在新的ECMAScript中引入了嚴格模式,在嚴格模式下eval函數受到了很大的限制,也能夠保證環境不被污染

Comments

Popular posts from this blog

How to use MongoDB on QNAP NAS ?

How to setup influxDB and Grafana on QNAP NAS ?

QNAP QVR Pro Client user guide

How to use PostgreSQL on QNAP NAS ?

How to setup GPU on QNAP NAS (QTS 4.3.5+)

How to use QNAP IoT solution - QIoT Suite

How to use Home Bridge on QNAP NAS ?

卸任倒數 宏碁突圍再出奇招 不轉型雲端 施振榮:我就是罪人