javascript中this用法例項詳解

阿新 • • 發佈：2018-11-12

JavaScript中的this含義非常豐富，它可以是全域性物件，當前物件或者是任意物件，這都取決於函式的呼叫方式。函式有以下幾種呼叫方式：作為物件方法呼叫、作為函式呼叫、作為建構函式呼叫、apply或call呼叫。

物件方法呼叫

作為物件方法呼叫的時候，this會被繫結到該物件。

var point = {

x : 0,

y : 0,

moveTo : function(x, y) {

this.x = this.x + x;

this.y = this.y + y;

}

};

point.moveTo(1, 1)//this 繫結到當前物件，即 point 物件

這裡我想強調一點內容，就是this是在函式執行的時候去獲取對應的值，而不是函式定義時。即使是物件方法呼叫，如果該方法的函式屬性以函式名的形式傳入別的作用域，也會改變this的指向。我舉一個例子：

var a = {

aa : 0,

bb : 0,

fun : function(x,y){

this.aa = this.aa + x;

this.bb = this.bb + y;

}

};

var aa = 1;

var b = {

aa:0,

bb:0,

fun : function(){return this.aa;}

}

a.fun(3,2);

document.write(a.aa);

//3，this指向物件本身

document.write(b.fun());//0,this指向物件本身

(function(aa){//注意傳入的是函式，而不是函式執行的結果

var c = aa();

document.write(c);//1 , 由於fun在該處執行，導致this不再指向物件本身，而是這裡的window

})(b.fun);

這樣就明白了吧。這是一個容易混淆的地方。

函式呼叫

函式也可以直接被呼叫，這個時候this被繫結到了全域性物件。

var x = 1;

function test(){

this.x = 0;

}

test();

alert(x); //0

但這樣就會出現一些問題，就是在函式內部定義的函式，其this也會指向全域性，而和我們希望的恰恰相反。程式碼如下：

var point = {

x : 0,

y : 0,

moveTo : function(x, y) {

// 內部函式

var moveX = function(x) {

this.x = x;//this 繫結到了全域性

};

// 內部函式

var moveY = function(y) {

this.y = y;//this 繫結到了全域性

};

moveX(x);

moveY(y);

}

};

point.moveTo(1, 1);

point.x; //==>0

point.y; //==>0

x; //==>1

y; //==>1

我們會發現不但我們希望的移動呢效果沒有完成，反而會多出兩個全域性變數。那麼如何解決呢？只要要進入函式中的函式時將this儲存到一個變數中，再運用該變數即可。程式碼如下：

var point = {

x : 0,

y : 0,

moveTo : function(x, y) {

var that = this;

// 內部函式

var moveX = function(x) {

that.x = x;

};

// 內部函式

var moveY = function(y) {

that.y = y;

}

moveX(x);

moveY(y);

}

};

point.moveTo(1, 1);

point.x; //==>1

point.y; //==>1

建構函式呼叫

在javascript中自己建立建構函式時可以利用this來指向新建立的物件上。這樣就可以避免函式中的this指向全域性了。

var x = 2;

function test(){

this.x = 1;

}

var o = new test();

alert(x); //2

apply或call呼叫

這兩個方法可以切換函式執行的上下文環境，也就是改變this繫結的物件。apply和call比較類似，區別在於傳入引數時一個要求是陣列，一個要求是分開傳入。所以我們以apply為例：

var name = "window";

var someone = {

name: "Bob",

showName: function(){

alert(this.name);

}

};

var other = {

name: "Tom"

};

someone.showName(); //Bob

someone.showName.apply(); //window

someone.showName.apply(other); //Tom

可以看到，正常訪問物件中方法時，this指向物件。使用了apply後，apply無引數時，this的當前物件是全域性，apply有引數時，this的當前物件就是該引數。

箭頭函式呼叫

這裡需要補充一點內容，就是在下一代javascript標準ES6中的箭頭函式的 this始終指向函式定義時的 this，而非執行時。我們通過一個例子來理解:

var o = {

x : 1,

func : function() { console.log(this.x) },

test : function() {

setTimeout(function() {

this.func();

}, 100);

}

};

o.test(); // TypeError : this.func is not a function

上面的程式碼會出現錯誤，因為this的指向從o變為了全域性。我們需要修改上面的程式碼如下：

var o = {

x : 1,

func : function() { console.log(this.x) },

test : function() {

var _this = this;

setTimeout(function() {

_this.func();

}, 100);

}

};

o.test();

通過使用外部事先儲存的this就行了。這裡就可以利用到箭頭函數了，我們剛才說過，箭頭函式的 this始終指向函式定義時的 this，而非執行時。所以我們將上面的程式碼修改如下：

var o = {

x : 1,

func : function() { console.log(this.x) },

test : function() {

setTimeout(() => { this.func() }, 100);

}

};

o.test();

這回this就指向o了，我們還需要注意一點的就是這個this是不會改變指向物件的，我們知道call和apply可以改變this的指向，但是在箭頭函式中是無效的。

var x = 1,

o = {

x : 10,

test : () => this.x

};

o.test(); // 1

o.test.call(o); // 依然是1

這樣就可以明白各種情況下this繫結物件的區別了。

javascript中this用法例項詳解

JavaScript中的this含義非常豐富，它可以是全域性物件，當前物件或者是任意物件，這都取決於函式的呼叫方式。函式有以下幾種呼叫方式：作為物件方法呼叫、作為函式呼叫、作為建構函式呼叫、apply或call呼叫。物件方法呼叫作為物件方法呼叫的時候，this會被繫結到該物件。 ?

第149天：javascript中this的指向詳解

doc ava 常見每一個 document () 學習知識對象 js中的this指向十分重要，了解js中this指向是每一個學習js的人必學的知識點，今天沒事，正好總結了js中this的常見用法，喜歡的可以看看： 1、全局作用域或者普通函數中this指向全局對象wi

JavaScript中window.open用法例項詳解

本文較為詳細的分析了JavaScript中window.open用法。分享給大家供大家參考。具體如下：複製程式碼程式碼如下: <script LANGUAGE="javascript"> window.open ('page.html', 'newwind

JavaScript中的閉包詳解

bsp 參考參數 med ica 如果 bar 描述 javascrip 閉包是JavaScript的重要特性，非常強大，可用於執行復雜的計算，可並不容易理解，尤其是對之前從事面向對象編程的人來說，對 JavaScript 認識和編程顯得更難。特別是在看一些開源的Java

PHP和javascript中url編碼解碼詳解

http 遇到註意 spa color 空格 www. col test 在實際開發中，我們可能會遇到路徑編碼解碼的問題，下面總結了一下： PHP中：　　1、urlencode(編碼)，urldecode（解碼） $a = urlencode(‘http://www.

JavaScript中的邏輯運算子詳解！

今天我們來總結一下Js中的三種邏輯運算子：與 && 或 || 非 ! &&操作符（全真為真，有假則假）。 "與" 翻譯過來就是並且的意思，只有當條件1到條件n都滿足，結果才成立。

js事件監聽器用法例項詳解

本文例項講述了js事件監聽器用法。分享給大家供大家參考。具體分析如下： 1、當同一個物件使用.onclick的寫法觸發多個方法的時候，後一個方法會把前一個方法覆蓋掉，也就是說，在物件的onclick事件發生時，只會執行最後繫結的方法。而用事件監聽則不會有覆蓋的現象，每個繫結的事件都會被執行。

Javascript中的 “&” 和 “|” 詳解

轉自：https://www.jb51.net/article/104394.htm 一、前言：在文章開始之前，先出幾個題目給大家看看： var num1 = 1 &

vue 元件高階用法例項詳解

　　一、遞迴元件　　　　元件在它的模板內可以遞迴地呼叫自己，只要給元件設定name 的選項就可以了。　　　　示例如下：　　　　<div id="app19">　　　　<my-component19 :count="1"></my-component19>　　　　</

JavaScript引用型別Function例項詳解

Function型別函式是物件，函式名是指標：每個函式都是Function型別的例項。由於函式是物件，因此函式名是一個指向函式物件的指標，不會與某個函式繫結，一個函式可能會有多個名字。 function getSum(a, b) { return a +

MySQL欄位自增長AUTO_INCREMENT用法例項詳解

之前有碰到過開發同事指出一張InnoDB表的自增列 AUTO_INCREMENT 值莫明的變大，由於這張表是通過mysqldump匯出匯入的。問題排查： 1、首先，查看錶表義的sql部分的 auto_increment 值部分是正常，所以排除是匯入表問題所引起的；2、最後，經過溝通了解懷疑是插入時

Python多程序併發(multiprocessing)用法例項詳解

python多執行緒的限制python多執行緒有個討厭的限制，全域性直譯器鎖（global interpreter lock），這個鎖的意思是任一時間只能有一個執行緒使用直譯器，跟單cpu跑多個程式一個意思，大家都是輪著用的，這叫“併發”，不是“並行”。手冊上的解釋是為了保證

C++ pair的用法例項詳解（結構體模板應用初探）

1 pair的應用（結構體模板）pair是將2個數據組合成一個數據，當需要這樣的需求時就可以使用pair，如stl中的map就是將key和value放在一起來儲存。另一個應用是，當一個函式需要返回2個數據的時候，可以選擇pair。標頭檔案：#include<utilit

Oracle觸發器用法例項詳解

本文例項講述了Oracle觸發器用法。分享給大家供大家參考，具體如下：一、觸發器簡介觸發器的定義就是說某個條件成立的時候，觸發器裡面所定義的語句就會被自動的執行。因此觸發器不需要人為的去呼叫，也不能呼叫。然後，觸發器的觸發條件其實在你定義的時候就已經設定好了。這裡面需

C++中this指標的詳解：

成員函式中this是指向正在呼叫該函式的物件，this指正在建立物件內部的成員。同一個類中的函式可以通過this相互呼叫，普通函式不能通過this呼叫建構函式，但建構函式可以通過this訪問普通函式！.h檔案ifndef TEACHER_H_#define TEACHER_H

Linux 在Shell指令碼中使用函式例項詳解

Shell的函式 Shell程式也支援函式。函式能完成一特定的功能，可以重複呼叫這個函式。函式格式如下： 1 2 3 4 函式名() { 函式體 } 函式呼叫方式：函式

Ajax用法例項詳解

本文例項講述了jQuery學習筆記之Ajax用法。分享給大家供大家參考，具體如下：一、Ajax請求 1、jQuery.ajax(options) 通過 HTTP 請求載入遠端資料。jQuery 底層 AJAX 實現。簡單易用的高層實現見 .get,.post 等。

PHP單例模式和工廠模式用法例項詳解

設計模式是一套被反覆使用、多數人知曉的、經過分類編目的、程式碼設計經驗的總結。使用設計模式是為了可重用程式碼、讓程式碼更容易被他人理解、保證程式碼可靠性。毫無疑問，設計模式於己於他人於系統都是多贏的；設計模式使程式碼編制真正工程化；設計模式是軟體工程的基石脈絡，如同大廈的結

JavaScript 中的相等操作符 ( 詳解 [] == []、[] == ![]、{} == !{} )

class 特殊 [] UNC efi 內存方法 java 基本類 ECMAScript 中的相等操作符由兩個等於號 ( == ) 表示，如果兩個操作數相等，則返回 true。相等操作符會先轉換操作數（通常稱為強制轉型），然後比較它們的相等性。在轉換不同的數據類型

詳解javascript中this的工作原理

new 變量 person get 工作 func 存在嚴格 es5 在 JavaScript 中 this 常常指向方法調用的對象，但有些時候並不是這樣的，本文將詳細解讀在不同的情況下 this 的指向。一、指向 window：在全局中使用 this，它將會指向全局

javascript中this用法例項詳解

相關推薦