js中this的四種使用場景

lk20150415 發布于2019-08-20 19:08 / 2648人閱讀

摘要：最近讀到了一篇介紹中的四種使用場景的文章，感覺總結的很好，所以我認真讀了讀，并且動手實踐了其中的，與大家共享。

最近讀到了一篇介紹js中this的四種使用場景的文章，感覺總結的很好，所以我認真讀了讀，并且動手實踐了其中的demo，與大家共享。原文鏈接：
https://github.com/alsotang/n...
遇到this，一直要記得這句：函數執行時，this總是指向調用該函數的對象（即：判斷this所在的函數屬于誰）。

1、函數有所屬對象，則指向所屬對象

var myObject={
    value:100
};
myObject.getValue=function(){
    console.log(this.value);
    console.log(this);
    return this.value;
}
console.log(myObject.getValue());

這里的getValue屬于對象myObject，所以this就指向myObject，執行結果如下：

2、函數沒有所屬對象時，就指向全局對象（window或global）

var myObject={
    value:100
};
myObject.getValue=function(){
    var foo=function(){
        console.log(this.value);
        console.log(this);
    }
    foo();
    return this.value;
}
console.log(myObject.getValue());

在這里，foo屬于全局對象，所以foo函數打印的this.value為undefined。

寫到這里，我又想起setTimeout和setInterval方法也是屬于全局對象的，所以在這兩個函數體內this是指向全局的，所以也是這種情況，如下：

var myObject={
    value:100
};
myObject.getValue=function(){
    setTimeout(function(){
        console.log(this.value);
        console.log(this);
    },0);
    return this.value;
}
console.log(myObject.getValue());

執行結果如下：

所以，如果要得到想要的結果，就要這樣寫了吧：

myObject.getValue=function(){
    let self=this;//用一個self保存當前的實例對象，即myObject
    setTimeout(function(){
        console.log(self.value);
        console.log(self);
    },0);
    return this.value;
}
console.log(myObject.getValue());

結果如下：

這又讓我想起來了es6中箭頭函數的妙用了（這個this綁定的是定義時所在的作用域，而不是運行時所在的作用域；箭頭函數其實沒有自己的this，所以箭頭函數內部的this就是外部的this）（可詳看es6教程：http://es6.ruanyifeng.com/#do...箭頭函數），如下：

var myObject={
    value:100
};
myObject.getValue=function(){
    // let self=this;//因為用了箭頭函數，所以這句不需要了
    setTimeout(()=>{
        console.log(this.value);
        console.log(this);
    },0);
    return this.value;
}
console.log(myObject.getValue());

執行結果同上：

3、使用構造器new一個對象時，this就指向新對象：

var oneObject=function(){
    this.value=100;
};
var myObj=new oneObject();
console.log(myObj.value);

這里的this就指向了new出來的新對象myObj，執行結果如下：

4、apply，call，bind改變了this的指向

var myObject={
    value:100
}
var foo=function(){
    console.log(this);
    console.log(this.value);
    console.log("...............");
}
foo();
foo.apply(myObject);
foo.call(myObject);
var newFoo=foo.bind(myObject);
newFoo();

foo本來指向全局對象window，但是call，apply和bind將this綁定到了myObject上，所以，foo里面的this就指向了myObject。執行代碼如下：

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

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

Vue.js應用的四種AJAX請求數據模式

摘要：應用的四種請求數據模式翻譯原文出處鄙人翻譯略差，別見笑。每個都有自己的利弊，應根據要求進行判斷。二組件在使用框架時，組件負責管理自己的請求和獨立狀態。相反，將初始應用程序狀態注入頁面的內聯腳本中，以便應用程序作為全局變量在需要時可用。 Vue.js應用的四種AJAX請求數據模式翻譯原文出處：4 AJAX Patterns For Vue.js Apps 鄙人翻譯略差，別見笑。如果...

iKcamp 2019-08-20 19:00 評論0 收藏0
[摘譯]js內存泄漏常見的四種情況

摘要：本文主要選取了這篇文章中的一小部分來說明一下中產生內存泄漏的常見情況對于較難理解的第四種情況參考了一些文章來進行說明意外的全局變量中如果不用聲明變量該變量將被視為對象全局對象的屬性也就是全局變量上面的函數等價于所以你調用完了函數以后變量仍然本文主要選取了4 Types of Memory Leaks in JavaScript and How to Get Rid Of Them 這...

Moxmi 2019-08-19 18:04 評論0 收藏0
MyBatis 中 @Param 注解的四種使用場景，最后一種經常被人忽略！

摘要：如果我們在動態中用到了參數作為判斷條件，那么也是一定要加注解的，例如如下方法定義出來的如下這種情況，即使只有一個參數，也需要添加注解，而這種情況卻經常被人忽略好了，不知道大家有沒有到呢有問題歡迎留言討論。有一些小伙伴覺得 MyBatis 只有方法中存在多個參數的時候，才需要添加 @Param 注解，其實這個理解是不準確的。即使 MyBatis 方法只有一個參數，也可能會用到 @Par...

BothEyes1993 2019-08-16 18:40 評論0 收藏0
JavaScript創建對象的四種方式

摘要：這種方式和有異曲同工之處，因為是對象的構造函數，它的原型對象也是的方式四這種方式叫做使用對象字面量創建對象，這是最簡單的一種方式，也是我經常使用的方法，目的是在于簡化創建包含大量屬性的對象的過程。關鍵字 Object.create; new Object(); new Fn(); {} 背景此段可跳過不讀……在平時的使用中，創建對象最常用的方式是使用{}直接創建，里面直接寫方法和屬...

2450184176 2019-08-22 18:32 評論0 收藏0
react關于事件綁定this的四種方式

摘要：在組件中，每個方法的上下文都會指向該組件的實例，即自動綁定為當前組件而且還會對這種引用進行緩存，以達到和內存的最大化。在react組件中，每個方法的上下文都會指向該組件的實例，即自動綁定this為當前組件,而且react還會對這種引用進行緩存，以達到cpu和內存的最大化。在使用了es6 class或者純函數時，這種自動綁定就不復存在了，我們需要手動實現this的綁定以下是幾種綁定的方...

張利勇 2019-08-22 15:12 評論0 收藏0