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

資訊專欄INFORMATION COLUMN

js基本操作-this理解

Steven / 2076人閱讀

摘要：基本操作理解寫在前面在面向?qū)ο蟮恼Z言中，關(guān)鍵字的含義是明確且具體的，即指代當(dāng)前對象。一般在編譯期確定下來，或稱為編譯期綁定。全局范圍內(nèi)當(dāng)在全部范圍內(nèi)使用，它將會指向全局對象。輸出瀏覽器中運(yùn)行的腳本，這個全局對象是。

js基本操作-this理解 寫在前面

在面向?qū)ο蟮恼Z言中，this關(guān)鍵字的含義是明確且具體的，即指代當(dāng)前對象。一般在編譯期確定下來，或稱為編譯期綁定。而在 JavaScript中，this是動態(tài)綁定，或稱為運(yùn)行期綁定的，這就導(dǎo)致JavaScript中的this關(guān)鍵字有能力具備多重含義，帶來靈活性的同時，也為初學(xué)者帶來不少困惑。

當(dāng)然，還是老話，所有的方法都來自網(wǎng)上，學(xué)到了才是自己的??！

然后，寫在前面，帶上我們可愛的小伙伴。廢話不多說，下面我們開始看起吧！

基本介紹

文章主要是對js的this進(jìn)行簡單的說明和介紹，順帶會添加一些代碼，沒辦法，語言能力有限，說明不了的只能直接上代碼了。

關(guān)于JS中的this，這是很多前端面試必考的題目，有時候在網(wǎng)上看到這些題目,看著感覺還不錯，做起來非常的酸爽！而在實(shí)際的開發(fā)中，也會遇到各種使用this的問題。當(dāng)然，在剛開始的時候，我們可能會非常的困惑，這個地方，為什么要這樣使用this尼？有時候不明白為什么不直接使用this,而要把this作為參數(shù)傳入。

下面，我將以我的理解的方式對this的理解和使用，做一個簡單的介紹。

this的理解

接單的理解：this指的是引用它的對象。

當(dāng)然，也可以套用輪子哥的一個解釋:

this在js的函數(shù)里面只是一個參數(shù)，是通過Fuck.Shit(Bitches)這種語法來傳遞的，點(diǎn)號前面的表達(dá)式就算this。不要想太多。

一般來說，闡述JavaScript中this的運(yùn)作機(jī)制，下面一句話詮釋的非常貼切。

When a function of an object was called, the object will be passed into the execution context as this value

簡而言之，就是function的this永遠(yuǎn)指向調(diào)用它的對象。而鑒于JS所謂的“萬物皆對象”，這個this因此可以是任何物件，比如Global對象

JavaScript有一套完全不同于其它語言的對this的處理機(jī)制。 下面，將會在不同的情況下，this指向的各不相同。

1.全局范圍內(nèi)

當(dāng)在全部范圍內(nèi)使用 this，它將會指向全局對象。

this;
console.log(this);//輸出window
瀏覽器中運(yùn)行的 JavaScript 腳本，這個全局對象是 window。
2.函數(shù)調(diào)用

這里this也會指向全局對象。

function foo(){
    console.log(this);
}
foo();//輸出window
3.方法調(diào)用

這個例子中，this 指向調(diào)用方法的對象。

var test = {
    foo : function(){
        console.log(this);
    }
}
test.foo();//輸出test對象
4.調(diào)用構(gòu)造函數(shù)

如果函數(shù)傾向于和 new 關(guān)鍵詞一塊使用，則我們稱這個函數(shù)是 構(gòu)造函數(shù)。 在函數(shù)內(nèi)部，this 指向新創(chuàng)建的對象。

function foo(name,age){
    this.name = name;
    this.age = age;
    console.log(this);
}
new foo("yu",23);//輸出新創(chuàng)建的對象 foo {name: "yu", age: 23}
5.顯式的設(shè)置

當(dāng)使用Function.prototype上的call或者apply方法時，函數(shù)內(nèi)的this將會被顯式設(shè)置為函數(shù)調(diào)用的第一個參數(shù)。

因此函數(shù)調(diào)用的規(guī)則在上例中已經(jīng)不適用了，在foo 函數(shù)內(nèi) this 被設(shè)置成了 bar。

function foo(a, b, c) {
    this.a = a;
    this.b = b;
    this.c = c;
}

var bar = {};
foo.apply(bar, [1, 2, 3]); // 數(shù)組將會被擴(kuò)展，bar被修改為Object {a: 1, b: 2, c: 3}
foo.call(bar, 4, 4, 4); // 傳遞到foo的參數(shù)是：a = 4, b = 4, c = 4; bar被修改為Object {a: 4, b: 4, c: 4}

這里使用了apply和call方法，用于修改this指針的指向。會在后面的文章中詳細(xì)說明。

使用用例 
題目描述：  
實(shí)現(xiàn)函數(shù) callIt，調(diào)用之后滿足如下條件  
1、返回的結(jié)果為調(diào)用 fn 之后的結(jié)果  
2、fn 的調(diào)用參數(shù)為 callIt 的第一個參數(shù)之后的全部參數(shù)

輸入例子:

var a = 1; 
var b = 2; 
var test = function (first, second) { 
    return first === a && second === b;
}; 
callIt(test, a, b);
輸出例子: true


代碼實(shí)現(xiàn)


//方法一
function callIt(fn) {
    var arr = [].slice.call(arguments,1);
    return fn.call(null, arr[0], arr[1]);//因?yàn)橹挥袃蓚€參數(shù)，這里直接使用兩個了
    // 
}
//方法二
function callIt(fn) {
    //Array.prototype.slice.call的作用是將arguments偽對象轉(zhuǎn)換成數(shù)組對象。
    //下面的目的是，將arguments轉(zhuǎn)化為數(shù)組后，截取第一個元素之后的所有元素
    return fn.apply(this,[].slice.call(arguments,1));//這里用[]代替Array.prototype，也可以使用下面的。
    //return fn.apply(this,Array.prototype.slice.call(arguments,1));
}
代碼說明：



首先，arguments不是真正的數(shù)組，不能直接使用slice方法，所以才會用Array對象原型鏈上面的slice方法去處理arguments，返回的自然是一個數(shù)組。


另外，給apply/call傳遞null，“”空字符串，默認(rèn)都是this
其他說明 
以上的所有方法，都來自網(wǎng)上。


所有的方法，都必須腳踏實(shí)地，在具體應(yīng)用場景下去分析、去選擇，我們應(yīng)該按照具體的情況，來選擇方法。


因?yàn)闉g覽器的多樣性，前端的應(yīng)用場景經(jīng)常很復(fù)雜，性能優(yōu)化充滿挑戰(zhàn)，也充滿機(jī)遇。


學(xué)會了才是自己的，知道會用會寫，才是我們最終的目標(biāo)。
參考文檔 
javascript秘密花園


如何理解 JavaScript 中的 this 關(guān)鍵字？


Javascript的this用法


(編程題)使用 apply 調(diào)用函數(shù)

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

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

相關(guān)文章

  • JavaScript系列（四） - 收藏集 - 掘金

    摘要：函數(shù)式編程前端掘金引言面向?qū)ο缶幊桃恢币詠矶际侵械闹鲗?dǎo)范式。函數(shù)式編程是一種強(qiáng)調(diào)減少對程序外部狀態(tài)產(chǎn)生改變的方式。 JavaScript 函數(shù)式編程 - 前端 - 掘金引言 面向?qū)ο缶幊桃恢币詠矶际荍avaScript中的主導(dǎo)范式。JavaScript作為一門多范式編程語言，然而，近幾年，函數(shù)式編程越來越多得受到開發(fā)者的青睞。函數(shù)式編程是一種強(qiáng)調(diào)減少對程序外部狀態(tài)產(chǎn)生改變的方式。因此，...

    cfanr 評論0 收藏0

  • JavaScript深入淺出

    摘要：理解的函數(shù)基礎(chǔ)要搞好深入淺出原型使用原型模型，雖然這經(jīng)常被當(dāng)作缺點(diǎn)提及，但是只要善于運(yùn)用，其實(shí)基于原型的繼承模型比傳統(tǒng)的類繼承還要強(qiáng)大。中文指南基本操作指南二繼續(xù)熟悉的幾對方法，包括，，。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。 怎樣使用 this 因?yàn)楸救藢儆趥吻岸?，因此文中只看懂?8 成左右，希望能夠給大家?guī)韼椭?...（據(jù)說是阿里的前端妹子寫的） this 的值到底...

    blair 評論0 收藏0

  • 理解對象和對象的描述特性

    摘要：面向?qū)ο罄斫鈱ο蠛蛯ο蟮拿枋鎏匦悦嫦驅(qū)ο竺嫦驅(qū)ο蟮恼Z言都有一個特性都有類的概念。默認(rèn)值是使用對象字面量的方式為對象添加的屬性，其的值是，的值是指定的值。同數(shù)據(jù)屬性同數(shù)據(jù)屬性讀取的時候調(diào)用函數(shù)。 JavaScript面向?qū)ο驩OM 1（理解對象和對象的描述特性） Date: Updated At Oct 31, 2018 | JavaScript | 面向?qū)ο?| Author: Zhe...

    Rocture 評論0 收藏0

  • 理解對象和對象的描述特性

    摘要：面向?qū)ο罄斫鈱ο蠛蛯ο蟮拿枋鎏匦悦嫦驅(qū)ο竺嫦驅(qū)ο蟮恼Z言都有一個特性都有類的概念。默認(rèn)值是使用對象字面量的方式為對象添加的屬性，其的值是，的值是指定的值。同數(shù)據(jù)屬性同數(shù)據(jù)屬性讀取的時候調(diào)用函數(shù)。 JavaScript面向?qū)ο驩OM 1（理解對象和對象的描述特性） Date: Updated At Oct 31, 2018 | JavaScript | 面向?qū)ο?| Author: Zhe...

    Cobub 評論0 收藏0

發(fā)表評論

0條評論

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