成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

js溫故而知新2——學(xué)習(xí)廖雪峰的js教程

Caizhenhao / 1697人閱讀

摘要:讓我們拆開寫小明正常結(jié)果多帶帶調(diào)用函數(shù)怎么返回了請注意,我們已經(jīng)進入到了的一個大坑里。如果多帶帶調(diào)用函數(shù),比如,此時,該函數(shù)的指向全局對象,也就是。

函數(shù)

1. arguments

JavaScript還有一個免費贈送的關(guān)鍵字arguments,它只在函數(shù)內(nèi)部起作用,并且永遠指向當(dāng)前函數(shù)的調(diào)用者傳入的所有參數(shù)。arguments類似Array但它不是一個Array:

function foo(x) {
    alert(x); // 10
    for (var i=0; i

利用arguments,你可以獲得調(diào)用者傳入的所有參數(shù)。也就是說,即使函數(shù)不定義任何參數(shù),還是可以拿到參數(shù)的值:

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; // 自動添加了分號,相當(dāng)于return undefined;
        { name: "foo" }; // 這行語句已經(jīng)沒法執(zhí)行到了
}

所以正確的多行寫法是:

function foo() {
    return { // 這里不會自動加分號,因為{表示語句尚未結(jié)束
        name: "foo"
    };
}

3.變量作用域

由于JavaScript的函數(shù)可以嵌套,此時,內(nèi)部函數(shù)可以訪問外部函數(shù)定義的變量,反過來則不行:

"use strict";

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

如果內(nèi)部函數(shù)和外部函數(shù)的變量名重名怎么辦?

"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的函數(shù)在查找變量時從自身函數(shù)定義開始,從“內(nèi)”向“外”查找。如果內(nèi)部函數(shù)定義了與外部函數(shù)重名的變量,則內(nèi)部函數(shù)的變量將“屏蔽”外部函數(shù)的變量。

4.變量提升

JavaScript的函數(shù)定義有個特點,它會先掃描整個函數(shù)體的語句,把所有申明的變量“提升”到函數(shù)頂部:

"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()函數(shù),JavaScript引擎看到的代碼相當(dāng)于:

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

5.全局作用域

不在任何函數(shù)內(nèi)定義的變量就具有全局作用域。實際上,JavaScript默認有一個全局對象window,全局作用域的變量實際上被綁定到window的一個屬性:

"use strict";

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

因此,直接訪問全局變量course和訪問window.course是完全一樣的。

你可能猜到了,由于函數(shù)定義有兩種方式,以變量方式var foo = function () {}定義的函數(shù)實際上也是一個全局變量,因此,頂層函數(shù)的定義也被視為一個全局變量,并綁定到window對象:

"use strict";

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

foo(); // 直接調(diào)用foo()
window.foo(); // 通過window.foo()調(diào)用

這說明JavaScript實際上只有一個全局作用域。任何變量(函數(shù)也視為變量),如果沒有在當(dāng)前函數(shù)作用域中找到,就會繼續(xù)往上查找,最后如果在全局作用域中也沒有找到,則報ReferenceError錯誤。

6.局部作用域

由于JavaScript的變量作用域?qū)嶋H上是函數(shù)內(nèi)部,我們在for循環(huán)等語句塊中是無法定義具有局部作用域的變量的:

"use strict";

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

for循環(huán)第一條語句聲明的變量是全局變量,在for循環(huán)外面當(dāng)然可以正常使用
為了解決塊級作用域,ES6引入了新的關(guān)鍵字let,用let替代var可以申明一個塊級作用域的變量:

"use strict";

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

7.方法

在一個對象中綁定函數(shù),稱為這個對象的方法。
如果我們給xiaoming綁定一個函數(shù),就可以做更多的事情。比如,寫個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(); // 今年調(diào)用是25,明年調(diào)用就變成26了

綁定到對象上的函數(shù)稱為方法,和普通函數(shù)也沒啥區(qū)別,但是它在內(nèi)部使用了一個this關(guān)鍵字,這個東東是什么?

在一個方法內(nèi)部,this是一個特殊變量,它始終指向當(dāng)前對象,也就是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, 正常結(jié)果
getAge(); // NaN

多帶帶調(diào)用函數(shù)getAge()怎么返回了NaN?請注意,我們已經(jīng)進入到了JavaScript的一個大坑里。

JavaScript的函數(shù)內(nèi)部如果調(diào)用了this,那么這個this到底指向誰?

答案是,視情況而定!

如果以對象的方法形式調(diào)用,比如xiaoming.age(),該函數(shù)的this指向被調(diào)用的對象,也就是xiaoming,這是符合我們預(yù)期的。

如果多帶帶調(diào)用函數(shù),比如getAge(),此時,該函數(shù)的this指向全局對象,也就是window。

坑爹??!
更坑爹的是,如果這么寫:

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

也是不行的!要保證this指向正確,必須用obj.xxx()的形式調(diào)用!

由于這是一個巨大的設(shè)計錯誤,要想糾正可沒那么簡單。ECMA決定,在strict模式下讓函數(shù)的this指向undefined,因此,在strict模式下,你會得到一個錯誤:

有些時候,喜歡重構(gòu)的你把方法重構(gòu)了一下:

"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

結(jié)果又報錯了!原因是this指針只在age方法的函數(shù)內(nèi)指向xiaoming,在函數(shù)內(nèi)部定義的函數(shù),this又指向undefined了?。ㄔ诜莝trict模式下,它重新指向全局對象window?。?/p>

修復(fù)的辦法也不是沒有,我們用一個that變量首先捕獲this:

"use strict";

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

xiaoming.age(); // 25

用var that = this;,你就可以放心地在方法內(nèi)部定義其他函數(shù),而不是把所有語句都堆到一個方法中。

8.apply

雖然在一個獨立的函數(shù)調(diào)用中,根據(jù)是否是strict模式,this指向undefined或window,不過,我們還是可以控制this的指向的!

要指定函數(shù)的this指向哪個對象,可以用函數(shù)本身的apply方法,它接收兩個參數(shù),第一個參數(shù)就是需要綁定的this變量,第二個參數(shù)是Array,表示函數(shù)本身的參數(shù)。

用apply修復(fù)getAge()調(diào)用:

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, 參數(shù)為空

另一個與apply()類似的方法是call(),唯一區(qū)別是:

apply()把參數(shù)打包成Array再傳入;

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

比如調(diào)用Math.max(3, 5, 4),分別用apply()和call()實現(xiàn)如下:

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

對普通函數(shù)調(diào)用,我們通常把this綁定為null。

9.裝飾器

利用apply(),我們還可以動態(tài)改變函數(shù)的行為。

JavaScript的所有對象都是動態(tài)的,即使內(nèi)置的函數(shù),我們也可以重新指向新的函數(shù)。

現(xiàn)在假定我們想統(tǒng)計一下代碼一共調(diào)用了多少次parseInt(),可以把所有的調(diào)用都找出來,然后手動加上count += 1,不過這樣做太傻了。最佳方案是用我們自己的函數(shù)替換掉默認的parseInt():

var count = 0;
var oldParseInt = parseInt; // 保存原函數(shù)

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

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

文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/86879.html

相關(guān)文章

  • js溫故知新6(JSON)——學(xué)習(xí)雪峰js教程

    JSON JSON是JavaScript Object Notation的縮寫,它是一種數(shù)據(jù)交換格式。 道格拉斯·克羅克福特(Douglas Crockford)--雅虎的高級架構(gòu)師--發(fā)明了JSON這種超輕量級的數(shù)據(jù)交換格式. 序列化 讓我們先把小明這個對象序列化成JSON格式的字符串: var xiaoming = { name: 小明, age: 14, gender...

    20171112 評論0 收藏0
  • js溫故知新10(操作表單)——學(xué)習(xí)雪峰js教程

    摘要:用操作表單和操作是類似的,因為表單本身也是樹。因此,第二種方式是響應(yīng)本身的事件,在提交時作修改可以在此修改的繼續(xù)下一步注意要來告訴瀏覽器繼續(xù)提交,如果,瀏覽器將不會繼續(xù)提交,這種情況通常對應(yīng)用戶輸入有誤,提示用戶錯誤信息后終止提交。 用JavaScript操作表單和操作DOM是類似的,因為表單本身也是DOM樹。 HTML表單的輸入控件主要有以下幾種: 文本框,對應(yīng)的,用于輸入文本; ...

    simon_chen 評論0 收藏0
  • js溫故知新8(瀏覽器)——學(xué)習(xí)雪峰js教程

    摘要:對象不但充當(dāng)全局作用域,而且表示瀏覽器窗口。對象有和屬性,可以獲取瀏覽器窗口的內(nèi)部寬度和高度。對象表示當(dāng)前頁面的信息。由于在瀏覽器中以形式表示為樹形結(jié)構(gòu),對象就是整個樹的根節(jié)點。這個行為由瀏覽器實現(xiàn),主流瀏覽器均支持選項,從開始支持。 瀏覽器 目前主流的瀏覽器: IE 6~11:從IE10開始支持ES6標(biāo)準(zhǔn); Chrome:基于Webkit內(nèi)核,內(nèi)置了非常強悍的JavaScript引...

    charles_paul 評論0 收藏0
  • js溫故知新4——學(xué)習(xí)雪峰js教程

    摘要:你可能認為調(diào)用,和結(jié)果應(yīng)該是,,,但實際結(jié)果是全部都是原因就在于返回的函數(shù)引用了變量,但它并非立刻執(zhí)行。返回閉包時牢記的一點就是返回函數(shù)不要引用任何循環(huán)變量,或者后續(xù)會發(fā)生變化的變量。真的是看著很暈?zāi)? 閉包 另一個需要注意的問題是,返回的函數(shù)并沒有立刻執(zhí)行,而是直到調(diào)用了f()才執(zhí)行。我們來看一個例子: function count() { var arr = []; ...

    genefy 評論0 收藏0
  • js溫故知新——學(xué)習(xí)雪峰js教程

    摘要:在設(shè)計時,有兩種比較運算符第一種是比較,它會自動轉(zhuǎn)換數(shù)據(jù)類型再比較,很多時候,會得到非常詭異的結(jié)果第二種是比較,它不會自動轉(zhuǎn)換數(shù)據(jù)類型,如果數(shù)據(jù)類型不一致,返回,如果一致,再比較。 數(shù)據(jù)類型和變量 數(shù)據(jù)類型計算機顧名思義就是可以做數(shù)學(xué)計算的機器,因此,計算機程序理所當(dāng)然地可以處理各種數(shù)值。但是,計算機能處理的遠不止數(shù)值,還可以處理文本、圖形、音頻、視頻、網(wǎng)頁等各種各樣的數(shù)據(jù),不同的數(shù)據(jù)...

    taohonghui 評論0 收藏0

發(fā)表評論

0條評論

Caizhenhao

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<