關于javascript中this的trick

Euphoria 發布于2019-08-19 18:00 / 2951人閱讀

摘要：看如下對象定義這樣能正常調用下面的調用會出錯因為，指向已經改變，正確的方式如下所有函數都有其特殊的變量，如下面的調用會產生一個錯誤解決方案一將保存在不同的變量中解決方案二利用的第二個參數，它可以給指定一個值

看如下對象定義：

"use strict"
var jane = {
    name ： ‘Jane’,
    display : function(){
        retrun "Person named " + this.name;
    }
};

這樣能正常調用

jane.display();

下面的調用會出錯：

var func = jane.display;
func()
TypeError: Cannot read property "name" of undefined

因為，this指向已經改變，正確的方式如下：

var func2 = jane.display.bind(jane);
func2()
"Penson named Jane"

所有函數都有其特殊的this變量，如下面的forEach

var jane = {
    name : "Jane",
    friends: ["Tarzan", "Cheeta"],
    sayHiToFriends: function(){
        "use strict";
        this.friends.forEach(function(friend) {
            // "this" is undefined here
            console.log(this.name + " says hi to "+ friend);
        });
    }
}

調用sayHiToFriends會產生一個錯誤：

jane.sayHiToFriends()
TypeError: Cannot read property "name" of undefined

解決方案一：將this保存在不同的變量中

var jane = {
    name : "Jane",
    friends: ["Tarzan", "Cheeta"],
    sayHiToFriends: function(){
        "use strict";
        var that = this;
        this.friends.forEach(function(friend) {
            console.log(that.name + " says hi to "+ friend);
        });
    }
}

解決方案二：利用forEach的第二個參數，它可以給this指定一個值

var jane = {
    name : "Jane",
    friends: ["Tarzan", "Cheeta"],
    sayHiToFriends: function(){
        "use strict";
        this.friends.forEach(function(friend) {
            console.log(this.name + " says hi to "+ friend);
        }, this);
    }
}

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

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

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

Nodejs中的一些小trick

摘要：要達到想要的效果正確的做法是即用來產生一個立即作用域，保證回調函數執行的時候最近的原型作用域的就是當時循環的。判斷數組中是否存在滿足條件的項，只要有一項滿足條件，就會返回。之前常常因為不注意，習慣用寫PHP或者Java的方式來寫nodejs，產生了了一些錯誤，這里總結一些小小的trick，以便于展示nodejs的不同，和平時需要注意的地方。變量提升 var variable = g...

tomorrowwu 2019-08-20 17:44 評論0 收藏0
面試寶典

摘要：有談談面試與面試題對于前端面試的一些看法。動態規劃算法的思想及實現方法幫大家理清動態規劃的解決思路以及原理方法前端經典面試題從輸入到頁面加載發生了什么這是一篇開發的科普類文章，涉及到優化等多個方面。極客學院前端練習題道練習題，面試季練練手。由數據綁定和排序引入的幾個 JavaScript 知識點在 JavaScript 的數據綁定和做簡單的表格排序中遇到的幾個知識點 [[JS 基礎...

neu 2019-08-29 14:00 評論0 收藏0
關于JavaScript調試的十來個小Tips

摘要：系列文章的人懶事多，最近翻多寫少啊。不過當我們調試我們自己的腳本的時候也會一不小心跳到這些文件中，引發額外的調試任務。系列文章的Github Repo人懶事多，最近翻多寫少啊。原文地址這里 ‘debugger;’ 除了console.log，debugger就是另一個我很喜歡的快速調試的工具，將debugger加入代碼之后，Chrome會自動在插入它的地方停止，很像C或者Java里面...

Dongjie_Liu 2019-08-19 18:26 評論0 收藏0
【譯】讓人傾倒的 11 個 npm trick

摘要：沒有安裝全局某個項目不影響該命令的使用。該標志會安裝，忽略。這會確保開發所使用的工具及不會進入生產環境。結果就是，發布項目時，不得不審查兩個文件是否同步，防止敏感信息的泄露。確保更改默認的用戶名，作為用戶名環境變量的值。本文轉載自：眾成翻譯譯者：文藺鏈接：http://www.zcfy.cc/article/1206原文：https://nodesource.com/blog/ele...

Tangpj 2019-08-20 10:44 評論0 收藏0
2019 年值得關注的 23 個開發者博客

摘要：如果你正在尋找編程技巧，或是想了解編程界發生了哪些新鮮事那么，今天我們帶來的年最佳開發者博客列表，一定是你的菜。地址它是為數不多的印度開發者博客中，能夠提供有價值信息的博客。地址又一個專注前端開發的博客。如果你正在尋找編程技巧，或是想了解編程界發生了哪些新鮮事？那么，今天我們帶來的 2019 年最佳開發者博客列表，一定是你的菜。這些博客將會幫助你發現新的工具，并帶給你編程技巧的啟發。...

pepperwang 2019-08-30 15:55 評論0 收藏0