this指向

xiongzenghui 發布于2019-08-21 12:03 / 3538人閱讀

摘要：情況如果一個函數中有，這個函數有被上一級的對象所調用，那么指向的就是上一級的對象。

首先必須要說的是，this的指向在函數定義的時候是確定不了的，只有函數執行的時候才能確定this到底指向誰，實際上this的指向的是最終調用它的對象。

函數調用模式

例子1

function a(){
    var user = "username";
    console.log(this.user); //undefined
    console.log(this); //Window
}
a();

按照我們上面說的this最終指向的是調用它的對象，這里的函數a實際是被Window對象所點出來的，下面的代碼就可以證明。

function a(){
    var user = "username";
    console.log(this.user); //undefined
    console.log(this);　　//Window
}
window.a();

例子2

var o = {
    user:"username",
    fn:function(){
        console.log(this.user);  //username
    }
}
o.fn();

這里的this指向的是對象o，因為你調用這個fn是通過o.fn()執行的，那自然指向就是對象o，這里再次強調一點，this的指向在函數創建的時候是決定不了的，在調用的時候才能決定，誰調用的就指向誰，一定要搞清楚這個。

例子3

var o = {
    user:"username",
    fn:function(){
        console.log(this.user); //username
    }
}
window.o.fn();

這段代碼和上面的那段代碼幾乎是一樣的，但是這里的this為什么不是指向window，如果按照上面的理論，最終this指向的是調用它的對象。這里先不解釋為什么上面的那段代碼this沒有指向window，我們再來看一段代碼。

var o = {
    a:10,
    b:{
        a:12,
        fn:function(){
            console.log(this.a); //12
        }
    }
}
o.b.fn();

這里同樣也是對象o點出來的，但是同樣this并沒有執行它，那你肯定會說我一開始說的那些不就都是錯誤的嗎？其實也不是，只是一開始說的不準確，接下來我將補充一句話，我相信你就可以徹底的理解this的指向的問題。

情況1：如果一個函數中有this，但是它沒有被上一級的對象所調用，那么this指向的就是window。

情況2：如果一個函數中有this，這個函數有被上一級的對象所調用，那么this指向的就是上一級的對象。

情況3：如果一個函數中有this，這個函數中包含多個對象，盡管這個函數是被最外層的對象所調用，this指向的也只是它上一級的對象，例子3可以證明，如果不相信，那么接下來我們繼續看幾個例子。

var o = {
    a:10,
    b:{
        // a:12,
        fn:function(){
            console.log(this.a); //undefined
        }
    }
}
o.b.fn();

盡管對象b中沒有屬性a，這個this指向的也是對象b，因為this只會指向它的上一級對象，不管這個對象中有沒有this要的東西。

例子4

var o = {
    a:10,
    b:{
        a:12,
        fn:function(){
            console.log(this.a); //undefined
            console.log(this); //window
        }
    }
}
var j = o.b.fn;
j();

這里this指向的是window，是不是有些蒙了？其實是因為你沒有理解一句話，這句話同樣至關重要。

this永遠指向的是最后調用它的對象，也就是看它執行的時候是誰調用的，例子4中雖然函數fn是被對象b所引用，但是在將fn賦值給變量j的時候并沒有執行所以最終指向的是window，這和例子3是不一樣的，例子3是直接執行了fn。

構造器調用模式

function Fn(){
    this.user = "username";
}
var a = new Fn();
console.log(a.user); //username

這里之所以對象a可以點出函數Fn里面的user是因為new關鍵字，使用new關鍵字發生了什么事？

1）函數在執行前，會創建一個空對象
2）把this指向這個新創建的空對象
3）執行函數里面的所有語句
4）執行完畢最后一條語句之后，會把創建的這個對象返回。

return

● 如果構造函數顯式地return了一個基本類型，那么return語句會被無視。return的仍然是原先的對象。
● 如果return一個引用類型值，那么return的東西就是函數返回的東西，我們創建的新對象不會被返回。

function fn()  
{  
    this.user = "username";  
    return {};  
}
var a = new fn;  
console.log(a.user); //undefined

function fn()  
{  
    this.user = "username";  
    return 1;
}
var a = new fn;  
console.log(a.user); //username

GPU云服務器云服務器改變this指向 this的指向 this[] this

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

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

JavaScript中的this指向總結

摘要：其中和在傳入要綁定的指向時，立即執行。需要注意的是，當使用改變函數內部的指向時如果傳入的不是一個對象，會調用相對的構造函數，進行隱式類型裝換。關于javascript中this指向的總結瀏覽器環境在全局作用域中，this的指向是window對象 console.log(this); //Window對象 console.log(this === window); //true E...

lavnFan 2019-08-26 13:39 評論0 收藏0
Javascript中this基礎應用

摘要：不過，匿名函數的執行環境具有全局性，因此其對象通常指向。示例如下依然指向全局全局方法指向匿名函數目前為止，一切都符合預期表現。指向指向全局調用對象方法調用方法內部方法雖然有點繞，但是還是可以明白的，指向調用方法該對象，匿名函數指向全局。前言以下內容只針對非嚴格模式,嚴格模式區不說了如果看過《JavaScript高級程序設計(第3版)》的人都應該有印象，里面關于this對象是這么形容...

NicolasHe 2019-08-26 10:28 評論0 收藏0
ES5 call,apply,bind方法總結（包括理解this的指向問題）

總結call,apply,bind方法的理解使用和區別。 call,apply,bind這三個方法在JavaScript中是用來改變函數調用的this指向。那么改變函數this指向有什么用呢？我們先來看一段代碼 var a= { name:harden, fn:function () { console.log(this.name); } } var b =...

nanchen2251 2019-08-23 18:15 評論0 收藏0
JS 中的this指向

摘要：當碰到時呵呵再看一個呵呵再來呵呵呵呵呵呵呵呵什么意思呢如果返回值是一個對象，那么指向的是構造函數的實例但是并沒有被返回，如果返回值不是一個對象那么還是指向構造函數創建的實例。為什么要學習this？如果你學過面向對象編程，那你肯定知道干什么用的，如果你沒有學過，那么暫時可以不用看這篇文章，當然如果你有興趣也可以看看，畢竟這是js中必須要掌握的東西。 1. this指向調用他的對象首先...

KavenFan 2019-08-22 11:14 評論0 收藏0
論普通函數和箭頭函數的區別以及箭頭函數的注意事項、不適用場景

摘要：第二種情況是箭頭函數的如果指向普通函數它的繼承于該普通函數。箭頭函數的指向全局，使用會報未聲明的錯誤。 showImg(https://segmentfault.com/img/remote/1460000018610072?w=600&h=400); 箭頭函數是ES6的API，相信很多人都知道，因為其語法上相對于普通函數更簡潔，深受大家的喜愛。就是這種我們日常開發中一直在使用的API...

paulquei 2019-08-23 16:15 評論0 收藏0
this指向問題的經典場景

摘要：常用場景以函數形式調用指向指向了以方法形式調用指向調用方法的那個對象指向顏色為紅色構造函數調用指向實例的對象此處分別指向的實例對象控制臺輸出使用對象的方法時指向報錯因為是的一個方法更改錯誤使顏色為調用了這個方法此時的指向此操作將指向的賦給則 THIS常用場景 1、以函數形式調用,this指向window function fn(m,n){ m=2; n=3; console...

dongxiawu 2019-08-30 15:56 評論0 收藏0