js基本操作-this理解

Steven 發布于2019-08-22 10:50 / 2069人閱讀

摘要：基本操作理解寫在前面在面向對象的語言中，關鍵字的含義是明確且具體的，即指代當前對象。一般在編譯期確定下來，或稱為編譯期綁定。全局范圍內當在全部范圍內使用，它將會指向全局對象。輸出瀏覽器中運行的腳本，這個全局對象是。

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

在面向對象的語言中，this關鍵字的含義是明確且具體的，即指代當前對象。一般在編譯期確定下來，或稱為編譯期綁定。而在 JavaScript中，this是動態綁定，或稱為運行期綁定的，這就導致JavaScript中的this關鍵字有能力具備多重含義，帶來靈活性的同時，也為初學者帶來不少困惑。

當然，還是老話，所有的方法都來自網上，學到了才是自己的！！

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

基本介紹

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

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

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

this的理解

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

當然，也可以套用輪子哥的一個解釋:

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

一般來說，闡述JavaScript中this的運作機制，下面一句話詮釋的非常貼切。

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

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

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

1.全局范圍內

當在全部范圍內使用 this，它將會指向全局對象。

this;
console.log(this);//輸出window

瀏覽器中運行的 JavaScript 腳本，這個全局對象是 window。

2.函數調用

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

function foo(){
    console.log(this);
}
foo();//輸出window

3.方法調用

這個例子中，this 指向調用方法的對象。

var test = {
    foo : function(){
        console.log(this);
    }
}
test.foo();//輸出test對象

4.調用構造函數

如果函數傾向于和 new 關鍵詞一塊使用，則我們稱這個函數是構造函數。在函數內部，this 指向新創建的對象。

function foo(name,age){
    this.name = name;
    this.age = age;
    console.log(this);
}
new foo("yu",23);//輸出新創建的對象 foo {name: "yu", age: 23}

5.顯式的設置

當使用Function.prototype上的call或者apply方法時，函數內的this將會被顯式設置為函數調用的第一個參數。

因此函數調用的規則在上例中已經不適用了，在foo 函數內 this 被設置成了 bar。

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

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

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

使用用例

題目描述：  
實現函數 callIt，調用之后滿足如下條件  
1、返回的結果為調用 fn 之后的結果  
2、fn 的調用參數為 callIt 的第一個參數之后的全部參數

輸入例子:

var a = 1; 
var b = 2; 
var test = function (first, second) { 
    return first === a && second === b;
}; 
callIt(test, a, b);

輸出例子: true

代碼實現

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

代碼說明：

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

另外，給apply/call傳遞null，“”空字符串，默認都是this

其他說明

以上的所有方法，都來自網上。

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

因為瀏覽器的多樣性，前端的應用場景經常很復雜，性能優化充滿挑戰，也充滿機遇。

學會了才是自己的，知道會用會寫，才是我們最終的目標。

參考文檔

javascript秘密花園

如何理解 JavaScript 中的 this 關鍵字？

Javascript的this用法

(編程題)使用 apply 調用函數

GPU云服務器云服務器 js中的this js里面的this js中的this機制 js中的this與html

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/91354.html

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

摘要：函數式編程前端掘金引言面向對象編程一直以來都是中的主導范式。函數式編程是一種強調減少對程序外部狀態產生改變的方式。 JavaScript 函數式編程 - 前端 - 掘金引言面向對象編程一直以來都是JavaScript中的主導范式。JavaScript作為一門多范式編程語言，然而，近幾年，函數式編程越來越多得受到開發者的青睞。函數式編程是一種強調減少對程序外部狀態產生改變的方式。因此，...

cfanr 2019-08-20 16:33 評論0 收藏0
JavaScript深入淺出

摘要：理解的函數基礎要搞好深入淺出原型使用原型模型，雖然這經常被當作缺點提及，但是只要善于運用，其實基于原型的繼承模型比傳統的類繼承還要強大。中文指南基本操作指南二繼續熟悉的幾對方法，包括，，。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。怎樣使用 this 因為本人屬于偽前端，因此文中只看懂了 8 成左右，希望能夠給大家帶來幫助....（據說是阿里的前端妹子寫的） this 的值到底...

blair 2019-08-21 18:26 評論0 收藏0
理解對象和對象的描述特性

摘要：面向對象理解對象和對象的描述特性面向對象面向對象的語言都有一個特性都有類的概念。默認值是使用對象字面量的方式為對象添加的屬性，其的值是，的值是指定的值。同數據屬性同數據屬性讀取的時候調用函數。 JavaScript面向對象OOM 1（理解對象和對象的描述特性） Date: Updated At Oct 31, 2018 | JavaScript | 面向對象 | Author: Zhe...

Rocture 2019-08-02 11:52 評論0 收藏0
理解對象和對象的描述特性

摘要：面向對象理解對象和對象的描述特性面向對象面向對象的語言都有一個特性都有類的概念。默認值是使用對象字面量的方式為對象添加的屬性，其的值是，的值是指定的值。同數據屬性同數據屬性讀取的時候調用函數。 JavaScript面向對象OOM 1（理解對象和對象的描述特性） Date: Updated At Oct 31, 2018 | JavaScript | 面向對象 | Author: Zhe...

Cobub 2019-08-23 12:39 評論0 收藏0