javascript中this指向問題總結

worldligang 發布于2019-08-23 12:38 / 329人閱讀

摘要：文章目的是總結下這個事情，如果沒有考慮周全，遺漏某一條，請過路的留言寫，我在補上。類的實例在函數中的一般指向和中括號里面的第一個參數是誰就指向誰。輸出說明指向的是輸出，說明指向的是箭頭函數中的，就是定義是所在的對象，而不是使用時所在的對象

文章目的是總結下這個事情，如果沒有考慮周全，遺漏某一條，請過路的留言寫，我在補上。

在自制行函數中，this --> window

    let obj = {
        name: "fung",
        getName: ~function(params) {
            // this-->window
           console.log(this); //window
        }() 
    };

給元素的某個事件綁定方法，當事件觸發執行，對應方法的時候，方法中的this一般是指當前操作的元素本身。

let box = document.getElementById("box");
box.onclick = function () {
    // this -- > box
    console.log("box", this); //box對象
}

當方法執行時，看方法的前面有沒有點，如果有點，點前面是誰，this就是指向誰；如果沒有點一般都是指向window

var objTest = {
    name: "fung",
    getName: function () {
        console.log("objTest", this);
    },
    timeout: function(params) {
        setTimeout(function(){
            //this --> window
            console.log("setTimeout", this);
        }, 1000);
    }
};
objTest.getName(); //this --> objTest
let fn = objTest.getName;
fn(); // this --> window

在構造函數模式中，方法體中出現的this是當前類的一個實例。

function Person(name, age, sex) {
    //this --> person(Person類的實例person)
    this.name = name;
    this.age = age;
    this.sex = sex;
    console.log("Person", this);
}
let person = new Person("fung", 19, "femail");

在setTimeout函數中的this一般指向window

objTest.timeout();

call和apply中括號里面的第一個參數是誰this就指向誰。

let oldObjec = {
    name: "oldObjec",
    age: 1000,
    getName: function() {
        console.log("oldObjec getName", this.name);
    }
};
let newObjec = {
    name: "newObjec",
    age: 00,
    getAge: function () {
        console.log("newObjec getAge", this.age);
    }
};
let name = "window";
oldObjec.getName.call(newObjec); //輸出newObjec,說明this指向的是newObjec
newObjec.getAge.call(oldObjec);//輸出1000， 說明this指向的是oldObject

箭頭函數中的this，就是定義是所在的對象，而不是使用時所在的對象

var age = 111;
function getName () {
setTimeout(() => {
        console.log("arrowObjec getName", this.age);
    }, 1000);
}
getName.call({age: 2000});

GPU云服務器云服務器 javascript中this詳解改變this指向 this的指向 javascript的this

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

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

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
javascript this的學習總結

摘要：例如通過，調用時強制把它的綁定到上。箭頭函數問題箭頭函數體內的對象就是定義時所在的對象，而不是使用時所在的對象，固定不變。剛入門javascript，關于this的學習，花了自己挺多的時間，做了比較多的功課，看了一篇又一篇的文章，也看了一些書籍，今天就結合看的那些東西總結下自己所學到的東西，方便留著以后回看，進一步的學習，這篇文章會不斷的更新，不斷的更新自己的想法，現在還是一個入門不...

A Loity 2019-08-21 17:32 評論0 收藏0
JavaScript中this總結

摘要：普通函數調用函數在全局作用域下運行在非嚴格模式下，指向全局對象，在嚴格模式下，會變成。使用來調用函數，或者說發生構造函數調用時，會自動執行下面的操作。即構造函數的指向它實例化出來的對象。 JavaScript中的this實際上是在函數被調用時發生的綁定，它指向什么完全取決于函數在哪里被調用。先來列舉一下都有哪些函數調用方式：普通函數調用對象方法調用 call()、apply()...

ghnor 2019-08-22 11:15 評論0 收藏0
JavaScript面向對象程序設計

摘要：構造函數模式這種方法創建自定義的構造函數，從而自定義對象類型的屬性和方法。借用構造函數在子類型構造函數的內部調用超類型構造函數，通過和方法來實現。 JavaScript中沒有類的概念，它不是嚴格意義上的面向對象語言，而是基于對象(Object-based)的編程語言。下面是讀《JavaScript高級程序設計（第三版）》的學習筆記，總結一些常用的創建對象和繼承的方法。一、創建對象 1...

wfc_666 2019-08-20 10:51 評論0 收藏0
你不知道的this

摘要：本內容來自你不知道的上卷，做了簡單的總結。如果不使用這段代碼該如何寫呢那就需要給和顯示傳入一個上下文對象對比發現提供了額一種更優雅的方式來隱式傳遞一個對象引用。四總結隨著你使用的模式越來越復雜，顯式傳遞上下文對象會讓代碼變得越來越混亂。本內容來自《你不知道的JavaScript(上卷)》，做了簡單的總結。 this關鍵字是javascript最復雜的機制之一。它是一個很特別的關鍵字，...

terasum 2019-08-19 17:51 評論0 收藏0