關于JavaScript中this的問題

mgckid 發布于2019-08-22 15:53 / 2484人閱讀

摘要：本文主要是自己學習時記錄的，僅供參考，如有錯誤可幫忙提出，謝謝。

本文主要是自己學習時記錄的，僅供參考，如有錯誤可幫忙提出，謝謝。

對象方法的調用：（當一個函數作為一個對象的屬性時，我們稱它為方法）

var name = "window";
var obj = {
    name: "obj",
    //箭頭函數
    sayName: () => {
        console.log(this); // window對象
        console.log(this.name);  // "window"
    },
    // 普通函數
    getName: function(){
        console.log(this); // obj對象
        console.log(this.name); // "obj"
    }
}
obj.sayName();
obj.getName();
var obj_1 = {name: "obj_1"}
obj.sayName.apply(obj_1) // window對象，"window"

正常的函數調用：

// 當函數被當做函數調用時，this是綁定在window對象上面的，這是javaScript語言上設計的錯誤
// 在ES6的箭頭函數，糾正的以上的錯誤，但是并沒有完全糾正錯誤，
//【箭頭函數中的this的綁定在執行上下文的整個封閉函數的this，如果沒有封閉的函數將綁定到window上面】

//常見的調用
function m(){
    console.log(this); // window對象
}
m();

var n = () => {
    console.log(this); // window對象
}
n();

//對象方法中函數的this
var name = "window";
var obj = {
    name: "obj",
    sayName: function(){
        console.log(this); // 復習一下，此處為obj對象
        f();
        function f(){
            console.log(this); // window對象
            console.log(this.name); // "window"
        }
        return function(){
            console.log(this); // window對象
            console.log(this.name); // "window"
        }
     }
}
obj.sayName()();

// 用箭頭函數看看this
var name = "window";
var obj = {
    name: "obj",
    sayName: function(){
        var f = () => {
            console.log(this); // obj對象
            console.log(this.name); // "obj"
        }
        f();
        return () => {
            console.log(this); // obj對象
            console.log(this.name); // "obj"
        }
     }
}
obj.sayName()();
var obj_1 = {name: "kangkang"};
obj.sayName().apply(obj_1); //和上面輸出相同

構造函數中的this：（構造函數不能使用箭頭函數，所以不考慮箭頭函數）

// 構造函數中的this指向新創建的對象本身

var Person = function(name){
    this.name = name;
}
Person.prototype.getName = fucntion() {
    return this.name;
}
var obj = new Person("kangkang");
obj.getName(); // kangkang

bind/call/apply 改變this的指向這里不想詳細介紹

// 由于箭頭函數沒有自己的this，所以bind、call、apply方法對箭頭函數失效

待后續完善......

GPU云服務器云服務器關于javascript的問題 javascript中this詳解 javascript的this 關于php的問題

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

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

JavaScript深入淺出

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

blair 2019-08-21 18:26 評論0 收藏0
關于javascript 中的高級定時器的若干問題

摘要：閉包閉包是指有權訪問另一個函數作用域中的變量的函數當某個函數被調用時，會創建一個執行環境及相應的作用域鏈。要注意通過第句聲明的這個方法屬于構造函數生成的對象，而不屬于構造函數的變量對象，也就是說，并不存在于作用域鏈中。看到評論里有仁兄建議我試試箭頭函數，真是受寵若驚，本來寫這篇文章也只是想記錄寫要點給自己日后看的。今天早上看到一篇總結javascript中this的文章JavaScr...

zr_hebo 2019-08-21 11:22 評論0 收藏0
[譯] 你想知道的關于 JavaScript 作用域的一切

摘要：原文鏈接原文作者你想知道的關于作用域的一切譯中有許多章節是關于的但是對于初學者來說甚至是一些有經驗的開發者這些有關作用域的章節既不直接也不容易理解這篇文章的目的就是為了幫助那些想更深一步學習了解作用域的開發者尤其是當他們聽到一些關于作用域的原文鏈接: Everything you wanted to know about JavaScript scope原文作者: Todd Mott...

Flands 2019-08-19 18:38 評論0 收藏0
JavaScript之關于this對象

摘要：不過匿名函數的執行環境具有全局性，因此其對象通常指向。在閉包中使用對象可能會導致一些問題。這個對象還包含一個方法它返回一個匿名函數，而匿名函數又返回，這個匿名函數就是閉包。偽代碼過程在定義匿名函數之前，把對象賦值給了一個名叫的變量。 this對象前言：最近在細讀Javascript高級程序設計，對于我而言，中文版，書中很多地方翻譯的差強人意，所以用自己所理解的，嘗試解讀下。如有紕漏...

happyfish 2019-08-23 12:35 評論0 收藏0
【譯】javascript的this關鍵詞理解

摘要：在中，當使用關鍵字調用函數構造函數時，函數構造函數中也有這個概念，但是它不是惟一的規則，而且常常可以引用來自不同執行上下文的不同對象。因此，我們使用調用函數，可以看到這是對象，并且的屬性是正常的。一直以來，javascript里邊的this都是一個很難理解的東西，之前看的最多的就是阮一峰老師關于this的理解： http://www.ruanyifeng.com/blo... htt...

tainzhi 2019-08-23 17:06 評論0 收藏0