this

teren 發布于2019-08-22 17:12 / 3498人閱讀

摘要：在中一共有四種調用模式方法調用模式函數調用模式構造器調用函數和調用模式。以此模式調用函數時，會被綁定到全局變量，也就是對象。當然這樣的構造器函數形式我們并不常用。方法讓我們構建一個參數數組傳遞給調用函數，同時它也允許我們選擇的值。

this

this在面向對象編程過程中非常重要，它的值取決于調用模式。

在js中一共有四種調用模式：_方法調用模式、函數調用模式、構造器調用函數和apply調用模式_。這四種模式在初始化參數this上是存在著差異的。

方法調用模式

當函數被保存為對象的一個屬性，我們稱之為它的一個方法。

方法調用模式定義：調用表達式包含一個提取屬性的動作（即包含一個.點表達式或者[]下標表達式），那么它就是當作一個方法來調用。

看個簡單的例子：

var name = "window";   
var xiaoming = {
    name: "xiaoming",
    lastname:"wang",
    saylastname:function(){
        console.log(this.lastname)
    }
};
console.log(xiaoming.saylastname()); //wang

方法是可以使用this訪問自己所屬的對象。this對對象的綁定是發生在調用的時候！（強調）是發生調用的時候。

這樣通過this取得他們所屬對象的上下文的方法也稱之為公共方法。

函數調用模式

函數調用模式定義：當一個函數并非一個對象的屬性時，那么它就是被當作一個函數來調用的。以此模式調用函數時，this會被綁定到全局變量，也就是window對象。需要??的是，在嚴格模式下，this的值為undefined。

延續上個模式的例子：

var a = xiaoming.saylastname;
a();  //window

這個例子最好的說明：函數調用并非一個對象的屬性，就被當作一個函數來調用。

構造器函數

構造器調用模式定義：如果創建的目的就是i 希望結合new關鍵字前綴來調用，那它就被稱為構造器函數。

如果在一個函數前面帶上new來調用，那么就會創建一個鏈接到該函數的prototype成員的新對象，同時也會被綁定到哪個欣對象上。

看這個例子：

var Person = function(Name){
        this.name = Name;
    };
//給person的所有對象提供一個公共方法
Person.prototype.say = function(){
    return this.name;
};
//構造一個person實例
var xiaoming = new Person("xiaoming");  
console.log(xiaoming.say()); //xiaoming

在構造區函數中，通常會以大寫約定，這樣它們會保存在以大寫格式命名的變量中。這樣的約定會得意更加容易區分這是構造器函數變量。

?? 當然這樣的構造器函數形式我們并不常用。之后我也會介紹更好的替代方式。

apply調用模式

apply調用模式定義:函數可以擁有方法。apply方法讓我們構建一個參數數組傳遞給調用函數，同時它也允許我們選擇this的值。

簡單的說就時綁定this指向的對象。

apply可以接收2個參數，參數1:要綁定給this的值；參數2:數組參數。

看兩個例子：

var add = function(num1,num2){
    return num1 +num2;
}
var arr = [4,5];
var sum = add.apply(null,arr);
console.log(sum); //9

var xiaohong = {
    name:"xiaohong"
}
var xiaohongname = Person.prototype.say.apply(xiaohong);
console.log(xiaohongname); //xiaohong

第一個例子：是最典型的aplly方法的使用。

第二個例子中本身小紅對象沒有say方法，但是我們可以通過apply方法將say方法傳遞給調用對象，也可以說綁定給指定的對象，而this也指向這個對象。

總結

所以說我們應該牢牢記住this的值取決于調用的模式。這樣才會讓我們了解初始化參數this存在的差異。

GPU云服務器云服務器 this[] this _this this變量

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

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

node那點事(一) -- Readable streams（可讀流）

摘要：流的類型中有四種基本的流類型可讀的流例如可寫的流例如可讀寫的流例如在讀寫過程中可以修改和變換數據的流例如可讀流可讀流有兩種模式流動模式可讀流自動讀取數據，通過接口的事件盡快將數據提供給應用。流的簡介流（stream）在 Node.js 中是處理流數據的抽象接口（abstract interface）。 stream 模塊提供了基礎的 API 。使用這些 API 可以很容易地來構建實...

rickchen 2019-08-22 15:58 評論0 收藏0
原生js實現移動端+pc端輪播插件

摘要：原生寫的輪播兼容移動端插件，支持輪播速度，輪播內容，輪播間隔，手勢靈敏度自定義，導航圓點點擊跳轉手勢滑動。使用說明文件包含小部分語法編寫的文件，在移動端有兼容性問題，僅供于源碼參考。移動端跟端開發引用文件直接下載進行引入使用。 slide.js 原生js寫的輪播兼容 pc+移動端插件，支持輪播速度，輪播內容，輪播間隔，手勢靈敏度自定義，導航圓點點擊跳轉,手勢滑動。使用說明：sli...

leanxi 2019-08-22 16:25 評論0 收藏0
手把手教你用原生JavaScript造輪子（2）——輪播圖（更新：ES6版本）

摘要：綁定輪播事件然后是鼠標移入移出事件的綁定鼠標移入移出事件移入時停止輪播播放的定時器，移出后自動開始下一張的播放。通過上一篇文章的學習，我們基本掌握了一個輪子的封裝和開發流程。那么這次將帶大家開發一個更有難度的項目——輪播圖，希望能進一步加深大家對于面向對象插件開發的理解和認識。 So, Lets begin! 目前項目使用 ES5及UMD 規范封裝，所以在前端暫時只支持標簽的引入方式...

jasperyang 2019-08-23 10:57 評論0 收藏0
基本數據結構和查找算法

摘要：本文包括簡單的數據結構和查找算法，屬于個人整理。初學編程可以用這里的東西聯系一下，看一看也挺有意思博主個人不認為中算法數據結構不重要，畢竟這是程序開發的基本功。本文包括簡單的數據結構和查找算法，屬于個人整理。初學編程可以用這里的東西聯系一下，看一看也挺有意思博主個人不認為js中算法數據結構不重要，畢竟這是程序開發的基本功。本文還會根據博主學習進展和時間安排不定期更新數據結構部分列...

姘擱『 2019-08-23 11:47 評論0 收藏0
ionic 2+ 手勢解鎖界面

摘要：手勢解鎖界面一些對安全要求比較高的少不了鎖屏頁面，而手勢解鎖對于用戶來說使用方便，對于程序員來說小有挑戰，怎么有棄之不用的道理。 ionic 2+ 手勢解鎖界面一些對安全要求比較高的app少不了鎖屏頁面，而手勢解鎖對于用戶來說使用方便，對于程序員來說小有挑戰，怎么有棄之不用的道理。效果圖效果圖處理短，方便大家閱讀showImg(https://segmentfault.co...

Hancock_Xu 2019-08-22 17:18 評論0 收藏0