JavaScript之this對象詳解

Integ 發(fā)布于2019-08-22 13:56 / 3463人閱讀

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

1.看前熱身

看一段代碼

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

2.this的指向

this的指向：誰調(diào)用或者哪個對象調(diào)用this所在的函數(shù)，this就指向誰。
構造函數(shù)的this和普通函數(shù)的this指向
構造函數(shù)的this

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

普通函數(shù)的this

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

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

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

這個函數(shù)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()調(diào)用的是obj對象中的foo()方法，foo()方法里面有一個定時器，而定時器的一個參數(shù)是this.fn,這里的this指的就是obj的對象，然后fn()方法里面有調(diào)用了this.name，但是定時器中的this指的是window對象，所以最終this.name調(diào)用的是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調(diào)用的時候添加bind或者call強制改變this的指向，在這里，指向了obj，所以輸出的是obj.name，為‘騰訊’。

4.箭頭函數(shù)的this

示例

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

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

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

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

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

JavaScript深入淺出

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

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

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

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

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

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

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

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

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

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