[學習筆記] JavaScript中的 this

xioqua 發布于2019-08-21 10:35 / 390人閱讀

摘要：但是總有一個原則，那就是指的是調用函數的那個對象。還有另一個原則當沒有明確的調用函數的那個對象時，指向全局對象，瀏覽器模式下就是了。設置的值這兩個方法的作用都是在特定的作用域中調用函數，從而設置了函數體內的值。

感覺上篇文章還是三四天前寫的，看看日期已經10天了。。時間過的真快！趕緊補篇，js中的this是我學習了但一直沒來得及總結的，今天就簡要說說 this 吧~

this簡述

每個函數在被調用時都會自動取得兩個特殊的對象：this 和 arguments，arguments 是一個類數組對象，包含著傳入函數中的所有參數， this 引用的是函數據以執行的環境對象。

this 對象是在運行時基于函數的執行環境綁定的，它可能是全局對象或者其他的某個對象，隨著函數的執行環境不同，this的值也會不一樣。但是總有一個原則，那就是

this 指的是調用函數的那個對象。

還有另一個原則：當沒有明確的調用函數的那個對象時，this指向全局對象global，瀏覽器模式下就是window了。

By default, this refers to the global object.

下面具體講講this 的指代原則。

this的指代原則 1. 函數直接被調用

此時函數屬于全局性調用，其this代表全局對象global

var a = 5;

function test() {
    console.log(this.a);
}

test(); // 5

注意下面這種情況：

function f1(){
    console.log(this);
    function f2(){
        console.log(this);
    }
    f2();
}
f1();  // Window window

f2()輸出的也是window，可見無論是在全局中直接被調用，還是內嵌在函數中被調用，只要是直接通過名字調用函數的，函數中的this在非嚴格模式下都是指向全局對象，而嚴格模式下就是undefined

2. 函數作為對象的方法調用

此時this指向這個對象。

function test() {
    console.log(this.a);
}

var obj = {};
obj.a = 5;
obj.m = test;
obj.m(); // 5

3. 函數作為構造函數調用

此時，this指向生成的新對象。

var a = 3; //全局變量a

function Test() {
    this.a = 5; // 對象屬性a
}

var obj = new Test();
console.log(obj.a); // 5, 不是3！

4. 匿名函數中的this

匿名函數的執行環境具有全局性，因此，其this對象通常指向window。

var name = "The window";

var obj = {
    name: "My object",

    getName: function() {
        return function() {
            return this.name;
        };
    }
};

console.log(obj.getName()()); // "The window"

設置this的值 1. call() / apply()

這兩個方法的作用都是在特定的作用域中調用函數，從而設置了函數體內this 的值。
apply() 方法接收兩個參數：第一個參數是函數要運行的作用域，即對象。第二個參數是參數數組，既可以是Array的實例，也可以是arguments對象。call()和apply()的作用相同，二者唯一的差別就是接收參數的方式不同，即在使用call()方法時，傳遞給函數的參數必須逐個列舉出來。
通過例子看call()/apply()是如何改變this值的。

window.color = "red";
var o = {color: "blue"};

function sayColor() {
    console.log(this.color);
}
sayColor.call(o); // blue

sayColor.call(window); // red
sayColor.call(this); // red
sayColor(); // red

2. bind()

該方法創建一個函數的實例，其this的值會被綁定到傳給bind()函數的值。創建的新函數無論在哪里調用，this的值都是固定的。

window.color = "red";
var o = {color: "blue"};

function sayColor() {
    console.log(this.color);
}
var newSaycolor = sayColor.bind(o);
newSayColor(); // blue，全局中調用，結果仍為blue

需要注意的是，支持bind()方法的瀏覽器有 IE9+ 、Firefox 4+ 、 Safari 5.1+ 、 Opera 12+ 和 Chrome。

eval()

使用 eval() 方法時，this 指向哪里呢？
答案很簡單，看誰在調用 eval() 方法，eval()中的this就是調用者的執行環境中的 this 。

這是我關于this的一點理解，歡迎大家拍磚~

參考文章：

Javascript的this用法
深入淺出 JavaScript 中的 this
Javascript中this關鍵字詳解

GPU云服務器云服務器 javaScript中的this javascript學習筆記 js中的this js中的this機制

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

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

重學前端學習筆記（十九）--JavaScript中的函數

摘要：方法在中定義的函數。這種聲明方式會定義一個生成器函數，它返回一個對象。類用定義的類，實際上也是函數。調用函數時使用的引用，決定了函數執行時刻的值。表示當為時，取全局對象，對應了普通函數。四操作的內置函數和可以指定函數調用時傳入的值。筆記說明重學前端是程劭非（winter）【前手機淘寶前端負責人】在極客時間開的一個專欄，每天10分鐘，重構你的前端知識體系，筆者主要整理學習過程的一些要...

genefy 2019-08-26 13:49 評論0 收藏0
重學前端學習筆記（十九）--JavaScript中的函數

摘要：方法在中定義的函數。這種聲明方式會定義一個生成器函數，它返回一個對象。類用定義的類，實際上也是函數。調用函數時使用的引用，決定了函數執行時刻的值。表示當為時，取全局對象，對應了普通函數。四操作的內置函數和可以指定函數調用時傳入的值。筆記說明重學前端是程劭非（winter）【前手機淘寶前端負責人】在極客時間開的一個專欄，每天10分鐘，重構你的前端知識體系，筆者主要整理學習過程的一些要...

lcodecorex 2019-08-30 10:55 評論0 收藏0
重學前端學習筆記（十九）--JavaScript中的函數

摘要：方法在中定義的函數。這種聲明方式會定義一個生成器函數，它返回一個對象。類用定義的類，實際上也是函數。調用函數時使用的引用，決定了函數執行時刻的值。表示當為時，取全局對象，對應了普通函數。四操作的內置函數和可以指定函數調用時傳入的值。筆記說明重學前端是程劭非（winter）【前手機淘寶前端負責人】在極客時間開的一個專欄，每天10分鐘，重構你的前端知識體系，筆者主要整理學習過程的一些要...

LinkedME2016 2019-08-02 15:07 評論0 收藏0
重學前端學習筆記（八）--JavaScript中的原型和類

摘要：用構造器模擬類的兩種方法在構造器中修改，給添加屬性修改構造器的屬性指向的對象，它是從這個構造器構造出來的所有對象的原型。筆記說明重學前端是程劭非（winter）【前手機淘寶前端負責人】在極客時間開的一個專欄，每天10分鐘，重構你的前端知識體系，筆者主要整理學習過程的一些要點筆記以及感悟，完整的可以加入winter的專欄學習【原文有winter的語音】，如有侵權請聯系我，郵箱：kai...

nanfeiyan 2019-08-02 16:16 評論0 收藏0