JavaScript之this對象詳解

Integ 發布于2019-08-22 13:56 / 3397人閱讀

摘要：再來看一個小的示例淘寶騰訊淘寶為什么輸出的依然是淘寶呢調用的是對象中的方法，方法里面有一個定時器，而定時器的一個參數是這里的指的就是的對象，然后方法里面有調用了，但是定時器中的指的是對象，所以最終調用的是對象中。

1.看前熱身

看一段代碼

上面的這段代碼中 obj是JavaScript中的對象類型，對象就是屬性和方法的集合。
如果執行obj.foo()函數的話，在控制臺輸出js。
其實this的定義就是，他是js對象中的一個特殊指針，他的指向根據環境的不同而發生改變。

2.this的指向

this的指向：誰調用或者哪個對象調用this所在的函數，this就指向誰。
構造函數的this和普通函數的this指向
構造函數的this

//構造函數和普通函數的this指向
    var  name = "淘寶";
    //構造函數
    function Foo() {
        this.name = "騰訊";
        this.aa = function () {
            console.log(this.name);
        } ;
    }
//    實例化對象
    var obj = new Foo();
    obj.aa();//騰訊

普通函數的this

var name = "淘寶";
function foo() {
    var name =  "騰訊";
    console.log(this.name);
}
foo(); //淘寶

在普通函數中，this指的是window對象，所以在這里輸出的依然是‘淘寶’;
更深的一個函數的this

 var name = "淘寶";
    function Foo() {
        this.name = "騰訊";
        this.foo = function () {
            var name  = "百度";
            return function () {
                console.log(this.name);
            }
        }
    }
    var obj  = new Foo();
    obj.foo()();//淘寶

這個函數this的指向依然是window

3.定時器中的this指向

//    定時器中的this
    var name = "淘寶";
    function foo() {
        var name = "騰訊";
        console.log(this.name);
    }
//    定時器
    setTimeout(foo,1000) //淘寶

由此小案例可以看出定時器中的this指的是window對象。
再來看一個小的示例

var name = "淘寶";
var obj = {
    name :"騰訊",
    fn:function () {
        console.log(this.name);
    },
    foo:function () {
        setTimeout(this.fn,1000);
    }
};
obj.foo();//淘寶

為什么輸出的依然是淘寶呢？
obj.foo()調用的是obj對象中的foo()方法，foo()方法里面有一個定時器，而定時器的一個參數是this.fn,這里的this指的就是obj的對象，然后fn()方法里面有調用了this.name，但是定時器中的this指的是window對象，所以最終this.name調用的是window對象中name。

在上面的示例中，把輸出的‘淘寶’改成‘騰訊’

 var name = "淘寶";
   var obj = {
       name :"騰訊",
       fn:function () {
           console.log(this.name);
       },
       foo:function () {
           // setTimeout(this.fn.call(obj),1000);
           setTimeout(this.fn.bind(obj),1000);
       }
   };
   obj.foo();//騰訊

在this調用的時候添加bind或者call強制改變this的指向，在這里，指向了obj，所以輸出的是obj.name，為‘騰訊’。

4.箭頭函數的this

示例

var author = "lzz";
   var book = {
       author:"ql",
       init:function () {
           setTimeout(ev => {
               console.log(this.author);
           },1000);
       }
   };
   book.init();

箭頭函數的特征就是定義在哪，this的指向在那。就是箭頭函數定義在一個對象里面，那么箭頭函數里面的this就指向該對象。

GPU云服務器云服務器 javascript中this詳解 javascript對象詳解對象名this javascript的this

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

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

JavaScript深入淺出

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

blair 2019-08-21 18:26 評論0 收藏0
JavaScript系列之事件詳解

摘要：響應某個事件的函數就叫事件處理程序或事件偵聽器。為事件指定事件處理程序的方法主要有種。事件處理程序事件直接加在元素上。事件委托利用冒泡的原理，把事件加到父元素或祖先元素上，觸發執行效果，解決事件處理程序過多問題。事件委托優點提高性能。 JavaScript簡單入門可以看看我丑丑的Github博客JavaScript簡單入門事件 JavaScript與HTML之間的交互是通過事件實現的...

pakolagij 2019-08-21 17:16 評論0 收藏0
javascript技術難點（三）之this、new、apply和call詳解

摘要：第四點也要著重講下，記住構造函數被操作，要讓正常作用最好不能在構造函數里 4) this、new、call和apply的相關問題講解this指針的原理是個很復雜的問題，如果我們從javascript里this的實現機制來說明this，很多朋友可能會越來越糊涂，因此本篇打算換一個思路從應用的角度來講解this指針，從這個角度理解this指針更加有現實意義。下面我們看看在ja...

ghnor 2019-08-21 10:27 評論0 收藏0
ES6之Object.assign()詳解

摘要：另外，本文版權歸原作者所有，翻譯僅用于學習。因為值具有唯一性，這就意味著作為對象的屬性名時，可以保證不會出現同名的屬性。不過，這個提議在中被拒絕了，也許之后的版本會再考慮。事實上，與都有語法解決構造器中屬性名重復的問題。譯者按: 這篇博客將介紹ES6新增的Object.assign()方法。原文: ECMAScript 6: merging objects via Object...

niceforbear 2019-08-21 16:40 評論0 收藏0
JavaScript ES5之Object.create函數詳解

介紹在創建對象的時候，我們有2種常用方法一個是文本標記法(var obj = {}),一種是運用Object函數進行對象的創建(new Object()). 但是這兩種方式并不是創建的一個完完全全干干凈凈的對象,這里的干凈只得是沒有繼承鏈. 幸運的是，ES5為我們提供了一種創建完全干凈的對象的方法，Object.create函數,接下我將向大家介紹Obje...

zhaofeihao 2019-08-21 10:35 評論0 收藏0