淺談js中的this

GHOST_349178 發布于2019-08-20 18:27 / 3240人閱讀

摘要：相信很多剛剛學習的新手都會有同感，當看一段代碼時，發現里面有很多，但是這些到底是指向哪里卻沒有那么清楚，為了搞清楚這些到底是什么情況，特地花點時間總結如下幾點最普遍的表示全局對象表示全局對象輸出為解析設置全局變量初始值為，當調用函數之后改變

相信很多剛剛學習js的新手都會有同感，當看一段js代碼時，發現里面有很多this，但是這些this到底是指向哪里卻沒有那么清楚，為了搞清楚這些this到底是什么情況，特地花點時間總結如下幾點：
1.最普遍的this表示全局對象

 // 1.this表示全局對象
    var x = 1
    function test1(){
        this.x = 2;
        console.log(this.x);
    }
    test1();//輸出為2

解析：設置全局變量x初始值為1，當調用函數test1()之后改變全局變量x的初始化值，故為2

2.對象方法中的this(這里this就指這個上級對象)
例1：

  var name = "全局this";
    var object = {
        name : "對象中this",
        getNameFunc : function(){
            return function(){
                return this.name;
            };
        }
    };
    console.log(object.getNameFunc()());//輸出：全局this

例2：

 var name = "全局this";
    var object = {
        name : "對象中this",
        getNameFunc : function(){
            var that = this;
            return function(){
                return that.name;
            };
        }
    };
    console.log(object.getNameFunc()());//輸出：對象中this

例3

 var name = "全局this";
    var object = {
        name : "對象中this",
        getNameFunc : function(){
            var that = this;
            return function(){
                return that.name+","+this.name;
            };
        }
    };
    console.log(object.getNameFunc()());//輸出：對象中this,全局this

例4

function test2(){
       console.log(this.y);
   }
    var obj = {};
    obj.y = 2;
    obj.func= test2;
    obj.func();//輸出2

解析：在例1中，直接this調用全局，而在例2中this表示函數的上一級對象，故此時的this是對象object；在例4中test2函數被賦值給對象obj，所以此時的this表示對象obj

3.構造函數調用（實際上也可以理解成是一個對象，跟2中一樣）

 var a = 1;
     function test3(){
         this.a = 2;
     }
     var gz = new test3();
     console.log(a);//輸出1
     console.log(this.a);//輸出1
    console.log(gz.a);//輸出2

解析：當new test3()弄成一個新的對象的時候，test3里面的this指向的是gz,所有全局變量沒有變化

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

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

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

淺談JS中的構造函數、原型對象(prototype)、實例中的屬性/方法之間的關系

摘要：同時給該構造函數自動添加一個屬性，該屬性為指針，指向原型對象。總結構造函數中的屬性和方法僅為聲明和定義，一旦實例化工作完成后。實例對象自身的屬性和方法與構造函數將不在存在關聯關系。構造函數：函數中的一種，通過關鍵字new可以創建其實例。為了便于區分，通常首字母大寫；原型對象：一種特殊的對象，構造函數創建時即自動生成；與構造函數形成一一對應，如同人和影子般的關系；實例：通過構造函數實例...

kevin 2019-08-23 12:56 評論0 收藏0
js面向對象淺談（三）

摘要：還有一個問題，就是不能在創建子類性時，像父類型的構造函數傳遞參數。組合繼承將原型鏈和借用構造函數組合到一起，發揮兩者之長的一張繼承模式，下面來看個例子。組合繼承最大的問題是無論在什么情況下，都會調用兩次父類型構造函數。繼承繼承是面向對象語言中特別重要的概念，js的繼承主要是靠原型鏈實現的。原型鏈！！！看到我給標題打了三個嘆號嗎，這里真的很重要！這里真的很重要！這里真的很重要！j...

awkj 2019-08-20 17:20 評論0 收藏0
淺談細說 JS 函數(call,apply,重載)

摘要：什么是函數引用的原話函數是一組可以隨時隨地運行的語句。函數是由這樣的方式進行聲明的關鍵字函數名一組參數，以及置于括號中的待執行代碼。什么是函數？引用 W3School 的原話: 函數是一組可以隨時隨地運行的語句。函數是 ECMAScript 的核心。函數是由這樣的方式進行聲明的：關鍵字 function、函數名、一組參數，以及置于括號中的待執行代碼。函數的基本語法是這樣的：...

U2FsdGVkX1x 2019-08-21 10:42 評論0 收藏0
淺談Vue.use

摘要：并且接收的參數的限制是兩種類型。對于這兩種類型有不同的處理。之后給這個插件添加至已經添加過的插件數組中，標示已經注冊過最后返回對象。還有一種則是將所有邏輯都編寫成一個函數暴露給。個人覺得第一種方式比較合理。先舉個? 我們先來看一個簡單的事例首先我使用官方腳手架新建一個項目vue init webpack vue-demo然后我創建兩個文件index.js plugins.js.我將這...

MingjunYang 2019-08-21 17:55 評論0 收藏0
淺談js中reduce方法

摘要：介紹方法接收一個函數作為累加器為數組中的每一個元素依次執行回調函數，不包括數組中被刪除或從未被賦值的元素，接受四個參數初始值上一次回調的返回值，當前元素值，當前索引，原數組。介紹reduce reduce() 方法接收一個函數作為累加器,reduce 為數組中的每一個元素依次執行回調函數，不包括數組中被刪除或從未被賦值的元素，接受四個參數：初始值（上一次回調的返回值），當前元素值，當...

mingzhong 2019-08-26 10:40 評論0 收藏0