JavaScript中的this

warnerwu 發布于2019-08-23 14:52 / 2016人閱讀

摘要：中的是語言中的一個關鍵字它是函數運行時，在函數體內部自動生成的一個對象，只能在函數體內部使用。情況一純粹的函數調用這是函數的最常通用法，屬于全局性調用，因此就代表全局對象。因此，這時運行結果為，證明指的是全局對象。

JS JavaScript中的this

this是JavaScript語言中的一個關鍵字
它是函數運行時，在函數體內部自動生成的一個對象，只能在函數體內部使用。

function test() {
　this.x = 1;
}

那么，this的值是什么呢？
函數在不同使用場合，this有不同的值。總之，this就是函數運行時所在的環境對象。

情況一：純粹的函數調用

這是函數的最常通用法，屬于全局性調用，因此this就代表全局對象。

var x = 1;
function test() {
   console.log(this.x);
}
test();  // 1

情況二：作為對象的方法調用

函數還可以作為某個對象的方法調用，這時this就指這個上級對象

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

var obj = {};
obj.x = 1;
obj.m = test;

obj.m(); // 1

情況三：作為構造函數調用

構造函數就是通過這個函數可以生成一個新對象。這時，this就指這個新對象

function test() {
　this.x = 1;
}

var obj = new test();
obj.x // 1

為了表明這時this不是全局對象，下面代碼：

var x = 2;
function test() {
  this.x = 1;
}

var obj = new test();
x  // 2

運行結果為2，表明全局變量x的值沒有變化

情況四：apply調用

apply()是函數的一個方法，作用是改變函數的調用對象。它的第一個參數就表示改變后的調用這個函數的對象。因此，這時this指的就是這個參數。

var x = 0;
function test() {
　console.log(this.x);
}

var obj = {};
obj.x = 1;
obj.m = test;
obj.m.apply() // 0

apply()的參數為空時，默認調用全局變量。因此，這時運行結果為0，證明this指的是全局對象。
如果把最后一行代碼修改成

obj.m.apply(obj); //1

運行結果就變成1，證明這時this代表的對象是obj

改變this的指向有以下幾種方法

使用ES6的箭頭函數

在函數內部_this=this

使用apply、call、bind

new實例化一個對象

其實this的指向，始終堅持一個原理：this永遠指向最后調用它的那個對象。

例1：

var name = "windowsName";
function a() {
   var name = "Cherry";

   console.log(this.name);          // windowsName

   console.log("inner:" + this);    // inner: Window
}
 a();
 console.log("outer:" + this)         // outer: Window

這里我們使用嚴格模式，如果使用嚴格模式的話，全局對象就是 undefined，那么就會報錯 Uncaught TypeError: Cannot read property "name" of undefined。

例2：

    var name = "windowsName";
    var a = {
        name: "Cherry",
        fn : function () {
            console.log(this.name);      // Cherry
        }
    }
    a.fn();

例3：

var name = "windowsName";
var a = {
    name: "Cherry",
    fn : function () {
        console.log(this.name);      // Cherry
     }
  }
window.a.fn();

例4:

    var name = "windowsName";
    var a = {
        // name: "Cherry",
        fn : function () {
            console.log(this.name);      // undefined
        }
    }
    window.a.fn();

例5：

    var name = "windowsName";
    var a = {
        name : null,
        // name: "Cherry",
        fn : function () {
            console.log(this.name);      // windowsName
        }
    }

    var f = a.fn;
    f();

為什么不是 Cherry，這是因為雖然將 a 對象的 fn 方法賦值給變量 f 了，“this 永遠指向最后調用它的那個對象”，由于剛剛的 f 并沒有調用，所以 fn() 最后仍然是被 window 調用的。所以 this 指向的也就是 window。

例6：

    var name = "windowsName";

    function fn() {
        var name = "Cherry";
        innerFunction();
        function innerFunction() {
            console.log(this.name);      // windowsName
        }
    }

    fn()

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

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

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

JavaScript深入淺出

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

blair 2019-08-21 18:26 評論0 收藏0
學習React之前你需要知道的的JavaScript基礎知識

摘要：和類在開始時遇到類組件，只是需要有關類的基礎。畢竟，中的條件呈現僅再次顯示大多數是而不是特定的任何內容。在我的研討會期間，更多的材料是關于JavaScript而不是React。其中大部分歸結為JavaScript ES6以及功能和語法，但也包括三元運算符，語言中的簡寫版本，此對象，JavaScript內置函數（map，reduce，filter）或更常識性的概念，如：可組合性，可重用...

bitkylin 2019-08-02 11:01 評論0 收藏0
JavaScript中的面向對象（object-oriented）編程

摘要：對象在中，除了數字字符串布爾值這幾個簡單類型外，其他的都是對象。那么在函數對象中，這兩個屬性的有什么區別呢表示該函數對象的原型表示使用來執行該函數時這種函數一般成為構造函數，后面會講解，新創建的對象的原型。這時的函數通常稱為構造函數。。本文原發于我的個人博客，經多次修改后發到sf上。本文仍在不斷修改中，最新版請訪問個人博客。最近工作一直在用nodejs做開發，有了nodejs，...

JerryZou 2019-08-21 10:26 評論0 收藏0
JavaScript進階之’this‘

摘要：所以相同點是，在全局范圍內，全局變量終究是屬于老大的。只生效一次引入了。只生效一次在箭頭函數中，與封閉詞法環境的保持一致。我通常把這些原始函數叫做構造函數。在里面你可以嵌套函數，也就是你可以在函數里面定義函數。 showImg(https://img-blog.csdnimg.cn/20190522000008399.jpg?x-oss-process=image/watermark,...

shenhualong 2019-08-23 18:37 評論0 收藏0
理解 JavaScript 中的 this 關鍵字

摘要：原文許多人被中的關鍵字給困擾住了，我想混亂的根源來自人們理所當然地認為中的應該像中的或中的一樣工作。盡管有點難理解，但它的原理并不神秘。在瀏覽器中，全局對象是對象。運算符創建一個新對象并且設置函數中的指向調用函數的新對象。原文：Understanding the this keyword in JavaScript 許多人被JavaScript中的this關鍵字給困擾住了，我想混亂的...

jayzou 2019-08-21 10:32 評論0 收藏0