js溫故而知新2——學習廖雪峯的js教程

函數

1. arguments

JavaScript還有一個免費贈送的關鍵字arguments，它只在函數內部起做用，而且永遠指向當前函數的調用者傳入的全部參數。arguments相似Array但它不是一個Array：

function foo(x) {
    alert(x); // 10
    for (var i=0; i<arguments.length; i++) {
        alert(arguments[i]); // 10, 20, 30
    }
}
foo(10, 20, 30);

利用arguments，你能夠得到調用者傳入的全部參數。也就是說，即便函數不定義任何參數，仍是能夠拿到參數的值：

function abs() {
    if (arguments.length === 0) {
        return 0;
    }
    var x = arguments[0];
    return x >= 0 ? x : -x;
}

abs(); // 0
abs(10); // 10
abs(-9); // 9

2.當心你的return語句
前面咱們講到了JavaScript引擎有一個在行末自動添加分號的機制，這可能讓你栽到return語句的一個大坑：

function foo() {
    return { name: 'foo' };
}

foo(); // { name: 'foo' }

若是把return語句拆成兩行：

function foo() {
    return
        { name: 'foo' };
}

foo(); // undefined

要當心了，因爲JavaScript引擎在行末自動添加分號的機制，上面的代碼實際上變成了：

function foo() {
    return; // 自動添加了分號，至關於return undefined;
        { name: 'foo' }; // 這行語句已經無法執行到了
}

因此正確的多行寫法是：

function foo() {
    return { // 這裏不會自動加分號，由於{表示語句還沒有結束
        name: 'foo'
    };
}

3.變量做用域

因爲JavaScript的函數能夠嵌套，此時，內部函數能夠訪問外部函數定義的變量，反過來則不行：

'use strict';

function foo() {
    var x = 1;
    function bar() {
        var y = x + 1; // bar能夠訪問foo的變量x!
    }
    var z = y + 1; // ReferenceError! foo不能夠訪問bar的變量y!
}

若是內部函數和外部函數的變量名重名怎麼辦？

'use strict';

function foo() {
    var x = 1;
    function bar() {
        var x = 'A';
        alert('x in bar() = ' + x); // 'A'
    }
    alert('x in foo() = ' + x); // 1
    bar();
}

這說明JavaScript的函數在查找變量時從自身函數定義開始，從「內」向「外」查找。若是內部函數定義了與外部函數重名的變量，則內部函數的變量將「屏蔽」外部函數的變量。

4.變量提高

JavaScript的函數定義有個特色，它會先掃描整個函數體的語句，把全部申明的變量「提高」到函數頂部：

'use strict';

function foo() {
    var x = 'Hello, ' + y;
    alert(x);
    var y = 'Bob';
}

foo();

雖然是strict模式，但語句var x = 'Hello, ' + y;並不報錯，緣由是變量y在稍後申明瞭。可是alert顯示Hello, undefined，說明變量y的值爲undefined。這正是由於JavaScript引擎自動提高了變量y的聲明，但不會提高變量y的賦值。

對於上述foo()函數，JavaScript引擎看到的代碼至關於：

function foo() {
    var y; // 提高變量y的申明
    var x = 'Hello, ' + y;
    alert(x);
    y = 'Bob';
}

5.全局做用域

不在任何函數內定義的變量就具備全局做用域。實際上，JavaScript默認有一個全局對象window，全局做用域的變量實際上被綁定到window的一個屬性：

'use strict';

var course = 'Learn JavaScript';
alert(course); // 'Learn JavaScript'
alert(window.course); // 'Learn JavaScript

所以，直接訪問全局變量course和訪問window.course是徹底同樣的。

你可能猜到了，因爲函數定義有兩種方式，以變量方式var foo = function () {}定義的函數實際上也是一個全局變量，所以，頂層函數的定義也被視爲一個全局變量，並綁定到window對象：

'use strict';

function foo() {
    alert('foo');
}

foo(); // 直接調用foo()
window.foo(); // 經過window.foo()調用

---

這說明JavaScript實際上只有一個全局做用域。任何變量（函數也視爲變量），若是沒有在當前函數做用域中找到，就會繼續往上查找，最後若是在全局做用域中也沒有找到，則報ReferenceError錯誤。

---

6.局部做用域

因爲JavaScript的變量做用域其實是函數內部，咱們在for循環等語句塊中是沒法定義具備局部做用域的變量的：

'use strict';

function foo() {
    for (var i=0; i<100; i++) {
        //
    }
    i += 100; // 仍然能夠引用變量i
}

for循環第一條語句聲明的變量是全局變量，在for循環外面固然能夠正常使用。
爲了解決塊級做用域，ES6引入了新的關鍵字let，用let替代var能夠申明一個塊級做用域的變量：

'use strict';

function foo() {
    var sum = 0;
    for (let i=0; i<100; i++) {
        sum += i;
    }
    i += 1; // SyntaxError
}

7.方法

在一個對象中綁定函數，稱爲這個對象的方法。
若是咱們給xiaoming綁定一個函數，就能夠作更多的事情。好比，寫個age()方法，返回xiaoming的年齡：

var xiaoming = {
    name: '小明',
    birth: 1990,
    age: function () {
        var y = new Date().getFullYear();
        return y - this.birth;
    }
};

xiaoming.age; // function xiaoming.age()
xiaoming.age(); // 今年調用是25,明年調用就變成26了

綁定到對象上的函數稱爲方法，和普通函數也沒啥區別，可是它在內部使用了一個this關鍵字，這個東東是什麼？

在一個方法內部，this是一個特殊變量，它始終指向當前對象，也就是xiaoming這個變量。因此，this.birth能夠拿到xiaoming的birth屬性。

讓咱們拆開寫：

function getAge() {
    var y = new Date().getFullYear();
    return y - this.birth;
}

var xiaoming = {
    name: '小明',
    birth: 1990,
    age: getAge
};

xiaoming.age(); // 25, 正常結果
getAge(); // NaN

單獨調用函數getAge()怎麼返回了NaN？請注意，咱們已經進入到了JavaScript的一個大坑裏。

JavaScript的函數內部若是調用了this，那麼這個this到底指向誰？

答案是，視狀況而定！

若是以對象的方法形式調用，好比xiaoming.age()，該函數的this指向被調用的對象，也就是xiaoming，這是符合咱們預期的。

若是單獨調用函數，好比getAge()，此時，該函數的this指向全局對象，也就是window。

坑爹啊！
更坑爹的是，若是這麼寫：

var fn = xiaoming.age; // 先拿到xiaoming的age函數
fn(); // NaN

也是不行的！要保證this指向正確，必須用obj.xxx()的形式調用！

因爲這是一個巨大的設計錯誤，要想糾正可沒那麼簡單。ECMA決定，在strict模式下讓函數的this指向undefined，所以，在strict模式下，你會獲得一個錯誤：

有些時候，喜歡重構的你把方法重構了一下：

'use strict';

var xiaoming = {
    name: '小明',
    birth: 1990,
    age: function () {
        function getAgeFromBirth() {
            var y = new Date().getFullYear();
            return y - this.birth;
        }
        return getAgeFromBirth();
    }
};

xiaoming.age(); // Uncaught TypeError: Cannot read property 'birth' of undefined

結果又報錯了！緣由是this指針只在age方法的函數內指向xiaoming，在函數內部定義的函數，this又指向undefined了！（在非strict模式下，它從新指向全局對象window！）

修復的辦法也不是沒有，咱們用一個that變量首先捕獲this：

'use strict';

var xiaoming = {
    name: '小明',
    birth: 1990,
    age: function () {
        var that = this; // 在方法內部一開始就捕獲this
        function getAgeFromBirth() {
            var y = new Date().getFullYear();
            return y - that.birth; // 用that而不是this
        }
        return getAgeFromBirth();
    }
};

xiaoming.age(); // 25

用var that = this;，你就能夠放心地在方法內部定義其餘函數，而不是把全部語句都堆到一個方法中。

8.apply

雖然在一個獨立的函數調用中，根據是不是strict模式，this指向undefined或window，不過，咱們仍是能夠控制this的指向的！

要指定函數的this指向哪一個對象，能夠用函數自己的apply方法，它接收兩個參數，第一個參數就是須要綁定的this變量，第二個參數是Array，表示函數自己的參數。

用apply修復getAge()調用：

function getAge() {
    var y = new Date().getFullYear();
    return y - this.birth;
}

var xiaoming = {
    name: '小明',
    birth: 1990,
    age: getAge
};

xiaoming.age(); // 25
getAge.apply(xiaoming, []); // 25, this指向xiaoming, 參數爲空

另外一個與apply()相似的方法是call()，惟一區別是：

• apply()把參數打包成Array再傳入；

• call()把參數按順序傳入。

好比調用Math.max(3, 5, 4)，分別用apply()和call()實現以下：

Math.max.apply(null, [3, 5, 4]); // 5
Math.max.call(null, 3, 5, 4); // 5

對普通函數調用，咱們一般把this綁定爲null。

9.裝飾器

利用apply()，咱們還能夠動態改變函數的行爲。

JavaScript的全部對象都是動態的，即便內置的函數，咱們也能夠從新指向新的函數。

如今假定咱們想統計一下代碼一共調用了多少次parseInt()，能夠把全部的調用都找出來，而後手動加上count += 1，不過這樣作太傻了。最佳方案是用咱們本身的函數替換掉默認的parseInt()：

var count = 0;
var oldParseInt = parseInt; // 保存原函數

window.parseInt = function () {
    count += 1;
    return oldParseInt.apply(null, arguments); // 調用原函數
};

// 測試:
parseInt('10');
parseInt('20');
parseInt('30');
count; // 3