JavaScript函數學習總結以及相關的程式設計習慣指南_基礎知識

null 和 undefined
Undefined相當於一個變數並沒有明確的被賦值(是否被賦值, 可能無心忽略, 邏輯問題) JS的怪異之處就在於undefined真的是一個可以使用的值。

> var foo;
> foo
undefined

同理，當缺失參數時 JavaScript 會指派一個 undefined：

> function id(x) { return x }
> id()
undefined

a = 1;
a !== undefined // true

a = undefined
var b
a === b //true

Null相當於變數被明確指定了沒有值，而不是因為意外的原因被忽略掉了(賦值null, 正當邏輯)

參與運算
JS的null如果進入運算，真的會被解析成為0或false：

(1 + null) # 1 (1 * null) # 0 (1 * null) # Infinity

undefined進入運算，一律得到NaN：

(1 + undefined) # NaN (1 * undefined) # NaN (1 / undefined) # NaN

邏輯判斷
null和undefined邏輯判斷時都認為是false。

只用一個判斷，就可以同時檢驗這兩項是否為真:

//也会把 false, -0, +0, NaN 与 '' 当成“空值”
if (v) {
  // v 有值
} else {
  // v 没有值
}

但是如果碰到大坑==的時候

var foo;
console.log(foo == null); // true
console.log(foo == undefined); // true
console.log(foo === null); // false
console.log(foo === undefined); // true
console.log(null == undefined); // true

好的做法, 一律使用===

判斷一個量已定義且非空，只使用：if (a !== null && a !== undefined)。
=== 和 ==
1.==用來判斷兩個值是否相等

當兩個值類型不同時，會發生自動轉換，得到的結果非常不符合直覺，這可能不是你想要的結果。

"" == "0" // false
0 == "" // true
0 == "0" // true
false == "false" // false
false == "0" // true
false == undefined // false
false == null // false
null == undefined // true
" \t\r\n" == 0 // true

2.===

類型 值比較

"如果兩邊的操作數有相同的型別和值，===回傳true，!==回傳false。"—《JavaScript：語言精粹》

最佳實踐:

任何時候在比較操作中使用 === 和  !==
json操作

var person = {name :'Saad', age : 26, department : {ID : 15, name : "R&D"} };

var stringFromPerson = JSON.stringify(person);
/* stringFromPerson is equal to "{"name":"Saad","age":26,"department":{"ID":15,"name":"R&D"}}"  */

var personFromString = JSON.parse(stringFromPerson);
/* personFromString is equal to person object */
to string

var obj = {
  name: 'myObj'
};

JSON.stringify(obj);

函數物件及匿名函數
函數物件賦值

var slice_func = [].slice
//slice_func()

var a = function() {
};
// a()

var a = {
  fun : function() {
  };
}
// a.fun()

someElement.addEventListener("click", function(e) {
  // I'm anonymous!
});

以及

var f = function foo(){
  return typeof foo; // foo是在内部作用域内有效
};
// foo在外部用于是不可见的
typeof foo; // "undefined"
f(); // "function"

匿名函數

from

var name = 'Chris';
var age = '34';
var status = 'single';
function createMember(){
// [...]
}
function getMemberDetails(){
// [...]
}
to

var myApplication = function(){
var name = 'Chris';
var age = '34';
var status = 'single';
return{
createMember:function(){
// [...]
},
getMemberDetails:function(){
// [...]
}
}
}();
// myApplication.createMember() and
// myApplication.getMemberDetails() now works.

最佳實務
1.定義多個變數時，省略var關鍵字，用逗號取代

var someItem = 'some string';
var anotherItem = 'another string';
var oneMoreItem = 'one more string';

更好的做法

var someItem = 'some string',
  anotherItem = 'another string',
  oneMoreItem = 'one more string';

2.謹記，不要省略分號, 不要省略花括號

省略分號,可能導致更大的,未知的,難以發現的問題

var someItem = 'some string'
function doSomething() {
return 'something'
}

更好的做法

var someItem = 'some string';
function doSomething() {
return 'something';
}

3.使用{}代替 new Ojbect()

在JavaScript中建立物件的方法有多種。可能是傳統的方法是使用”new”加構造函數，像下面這樣:

var o = new Object();
o.name = 'Jeffrey';
o.lastName = 'Way';
o.someFunction = function() {
console.log(this.name);
}

更好的做法

var o = {}; //空对象

var o = {
name: 'Jeffrey',
lastName = 'Way',
someFunction : function() {
  console.log(this.name);
}
};

只要把多個全域變數都整理在一個名稱空間下，擬將顯著降低與其他應用程式、元件或類別庫之間產生糟糕的相互影響的可能性。 ——Douglas Crockford

4.使用[]代替 new Array()

var a = new Array();
a[0] = "Joe";
a[1] = 'Plumber';

更好的做法：

var a = ['Joe','Plumber'];

5.typeof判斷

typeof一般只能回傳以下幾個結果：number,boolean,string,function,object,undefined

expr:

typeof xx === ''
typeof xx !== ''

e.g.

// Numbers
typeof 37 === 'number';
typeof 3.14 === 'number';
typeof Infinity === 'number';
typeof NaN === 'number'; // 尽管NaN是"Not-A-Number"的缩写,意思是"不是一个数字"

// Strings
typeof "" === 'string';
typeof "bla" === 'string';
typeof (typeof 1) === 'string'; // typeof返回的肯定是一个字符串

// Booleans
typeof true === 'boolean';
typeof false === 'boolean';

// Undefined
typeof undefined === 'undefined';
typeof blabla === 'undefined'; // 一个未定义的变量,或者一个定义了却未赋初值的变量

// Objects
typeof {a:1} === 'object';
typeof [1, 2, 4] === 'object'; // 使用Array.isArray或者Object.prototype.toString.call方法可以分辨出一个数组和真实的对象
typeof new Date() === 'object';

// Functions
typeof function(){} === 'function';
typeof Math.sin === 'function';

typeof null === 'object'; // 从JavaScript诞生以来,一直是这样的.

6.三元運算子 :強大且風騷

文法

expression ? xxx : yyy
bad

var direction;
if(x < 200){
 direction = 1;
} else {
 direction = -1;
}
good

var direction = x < 200 &#63; 1 : -1;

7.用邏輯 AND/OR 做條件判斷

var foo = 10;
foo == 10 && doSomething(); // 等价于 if (foo == 10) doSomething();
foo == 5 || doSomething(); // 等价于 if (foo != 5) doSomething();

//默认值
a = b || 'default'
return b || c || d > 1 ? 0 : 2

8.給一個變數賦值的時候不要忘記使用var關鍵字

給一個未定義的變數賦值會導致創建一個全域變數。要避免全域變數

9.自我呼叫的函數

自呼叫匿名函數（Self-Invoked Anonymous Function）或即時呼叫函數表達式（IIFE-Immediately Invoked Function Expression)。這是一個在建立後立即自動執行的函數

(function(){
  // some private code that will be executed automatically
})();

(function(a,b){
  var result = a+b;
  return result;
})(10,20)

10.避免使用 eval() 和 Function 建構子

Eval=邪惡, 不僅大幅降低腳本的效能（譯註：JIT編譯器無法預知字串內容，而無法預先編譯和最佳化），而且這也會帶來巨大的安全風險，因為這樣付給要執行的文字太高的權限，避而遠之

使用 eval 和 Function 建構子是非常昂貴的操作，因為每次他們都會呼叫腳本引擎將原始程式碼轉換成可執行程式碼。

var func1 = new Function(functionCode);
var func2 = eval(functionCode);

11.避免使用 with()

使用 with() 會插入一個全域變數。因此，同名的變數會被覆蓋值而造成不必要的麻煩

12.腳本放在頁面的底部

記住－首要目標是讓頁面盡可能快的呈獻給用戶，腳本的夾在是阻塞的，腳本載入並執行完之前，瀏覽器不能繼續渲染下面的內容。因此，使用者將被迫等待更長時間

13.避免在For語句內宣告變數

bad

for(var i = 0; i < someArray.length; i++) {
var container = document.getElementById('container');
container.innerHtml += 'my number: ' + i;
console.log(i);
}

good

var container = document.getElementById('container');
for(var i = 0, len = someArray.length; i < len; i++) {
container.innerHtml += 'my number: ' + i;
console.log(i);
}

14.為程式碼新增註解

// 循环数组，输出每项名字（译者注：这样的注释似乎有点多余吧）.
for(var i = 0, len = array.length; i < len; i++) {
console.log(array[i]);
}

15.instanceof

instanceof 方法要求开发者明确地确认对象为某特定类型

var oStringObject = new String("hello world");
console.log(oStringObject instanceof String);  // 输出 "true"

// 判断 foo 是否是 Foo 类的实例
function Foo(){}
var foo = new Foo();
console.log(foo instanceof Foo)//true

// 判断 foo 是否是 Foo 类的实例 , 并且是否是其父类型的实例
function Aoo(){}
function Foo(){}
Foo.prototype = new Aoo();//JavaScript 原型继承

var foo = new Foo();
console.log(foo instanceof Foo)//true
console.log(foo instanceof Aoo)//true

16.apply/call

someFn.call(this, arg1, arg2, arg3);
someFn.apply(this, [arg1, arg2, arg3]);

apply

Function.apply(obj,args)方法能接收两个参数

obj：这个对象将代替Function类里this对象
args：这个是数组，它将作为参数传给Function（args-->arguments）
call

Function.call(obj,[param1[,param2[,…[,paramN]]]])

obj：这个对象将代替Function类里this对象
params：这个是一个参数列表
使用哪个取决于参数的类型