Javascript中this對象詳解

glumes 發布于2019-08-19 14:44 / 3290人閱讀

摘要：返回作為構造器當函數作為構造器使用關鍵詞，它的綁定為新構造的對象。注意當然默認的構造器返回的對象為當前調用對象，它能被當前對象中的新對象所取代如果對象的返回值不是對象，那么仍指向當前對象。

javascript this 基礎 call apply

Redirected from https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/this

Introduction 導言

Javascript函數中的this關鍵字的行為相比其他語言有很多不同。在Javascript的嚴格模式下和非嚴格模式下也略有不同。

在大多數情況下，函數的調用方式決定了this的值。this不能在執行期間被賦值，在每次函數被調用時this的值也會不同。ES5增加了bind方法，可以在不對函數進行調用的情況下傳入this值。

Global context 全局上下文

在全局上下文中（在任何函數體外部），this指代全局對象，無論是否在嚴格模式下。

console.log(this.doucment === document)   //true
//In web browsers, the window object is also the global object:
console.log(this === window);   //true

this.a = 37;
console.log(window.a);  //37

Function context 函數上下文

在函數內部， this的值取決于函數是如何調用的。

Simple call 直接調用

function f1() {
        return this;
    }

f1() === window;  //global object

在這個例子中，this的值不是由函數調用設定。因為代碼不運行在嚴格模式下，this的值始終是一個對象且默認為全局對象。

function f2() {
    "use strict";
    return this
    }

f2() === undefined;  //return undefined

在嚴格模式下，this的值根據執行時的上下文，this所保存的值決定。若為定義，this仍是undefined, 它可能被設置為任何的值，比如null，42或者是 " I"am not this "。

在第二個例子中，this的值應該是undefined。因為f2被調用時未基于任何對象（e.g.window.f2()）。這個功能并未在所有第一次開始支持嚴格模式的瀏覽器中都得到廣泛支持，在不支持的瀏覽器中，仍然返回window，比如chrome。

As an object method 作為對象方法

當一個函數作為一個對象的方法被調用，它的this會被設置為調用該方法的對象。
在下面的例子中，當o.f()被調用，function內部的this會綁定到這個object。

var o = {};
o.prop = 37;
o.f = function() {
    return this.prop;
    };
console.log(o.f()); //37

注意，如何調用或者在何處定義這個函數并不影響this的行為，在前一個例子中，我們在定義的object中為成員f添加了一個匿名函數，然而，我們能
更簡便的先定義這些函數然后再將其附屬到o.f上。這樣做this的行為也是一致。

var o = {prop:37};
function independent(){
    return this.prop;
}

o.f = independent;

console.log(o.f());     //logs 37

這個例子只有o對象中的f才會令這個函數被調用。

同樣的，this綁定只會被最當前的引用所決定。在接下來的例子中，當我們調用這個function，把它當作o.b對象的g方法調用。在執行中，this會附屬到o.b上。這個對象本身作為o的成員沒有結果，其返回結果就是當前引用。
如下例：

o.b = {g: independent, prop:37}
console.log(o.b.g());    //返回37

...在原型鏈中

只要方法是定義在對象的原型鏈中上面的調用同樣的仍然正確，如果方法在一個對象的原型鏈中，this對象指向調用這個方法的對象，就像這個方法存在于這個對象中一樣。

var o = {
    f:function(){return this.a + this.b;}
}
var p = Object.create(o);
p.a = 1;
p.b = 5;
console.log(p.f());   //6

在此例中，p對象并沒有它自己的實例f屬性，它繼承于原型鏈。但是沒有關系f能在o對象中找到；查找以一個p.f的引用開始，因此這個function中的this取對象p的引用值。也就是說，當f函數作為p的對象被調用，它的this指向p。這是Javascript原型繼承中非常有趣的特征。

...或者作為一個getter或者setter

當方法被getter或者setter調用同樣的概念仍然成立，當對象的屬性被set或者是gotten時，它的getter或者setter函數中的this對象會被綁定到當前對象。

function modulus(){
    return Math.sqrt(this.re*this.re + this.im*this.im);
}

var o = {
    re : 1,
    im : -1,
    get phase(){
        return Math.atan2(this.im,this.re);
    }
};

Object.defineProperty(o,"modulus",{get: modulus,enumerable: true,configurable:true});

console.log(o.phase,o.modulus); //返回-7.86  1.414

As a Constructor作為構造器

當函數作為構造器（使用new關鍵詞），它的this綁定為新構造的對象。
注意：當然默認的構造器返回的this對象為當前調用對象，它能被當前對象中return的新對象所取代（如果對象的返回值不是對象，那么this仍指向當前對象）。

/*注意中示例*/
var o = {
    a : 12,
    f : function(){
        return this.a;
    }
    };
var p = {
    a : 21,
    f : function(){
    return o.f();
    }
    };

console.log(p.f()); //返回12

構造器示例

/*
 * Constructors work like this:
 *
 * function MyConstructor(){
 *   // Actual function body code goes here.  Create properties on |this| as
 *   // desired by assigning to them.  E.g.,
 *   this.fum = "nom";
 *   // et cetera...
 *
 *   // If the function has a return statement that returns an object, that
 *   // object will be the result of the |new| expression.  Otherwise, the
 *   // result of the expression is the object currently bound to |this|
 *   // (i.e., the common case most usually seen).
 * }
 */

 function C(){
    this.a = 37;
 }
 var  o = new C();
 console.log(o.a);   //返回37

 function C2(){
    this.a = 38;
    return {a:38};
}
o = new C2();
console.log(o.a);    //返回38

在上一個例子中（c2），因為有一個對象在構建中返回，所以this對象綁定到了返回的對象上。

call和apply

在function內部使用this關鍵詞時，它的值可以在使用call或apply（所有的function對象都繼承自Function.prototype）調用時綁定為該函數中傳入的對象。

function add(c,d) {
    return this.a + this.b + c + d;
}
var o = {
    a : 2,
    b : 2
}
console.log(add.call(o,2,2)); //返回8

console.log(add.apply(o,[2,4])); //返回10

Bound functions 綁定函數

ECMAScript 5介紹 Function.prototype.bind.調用f.bind(someObject).創建一個新的function擁有相同的內容和作用域，比如f，但是this對象仍然出現在原來的function中，在新的function中他仍然永久的被綁定在第一個bind的參數（someObj）上，比如下面的g函數，無論這個function被調用了多少次。

function f(){
    return this.a;
}

var g = f.bind({a : "penouc"});
console.log(g());

var  o = {a : 37,f : f, g : g};
console.log(o.f(),o.g());

As a DOM event handler 作為一個DOM事件處理程序

當一個function被用作為一個事件處理程序，它的this被設置為當前的元素（一些瀏覽器并不遵循這個規則而是動態的添加方法比如使用addEventListener）。

//當元素被調用，其被激活為藍色
function bluify(e) {
    console.log(this === e.target);
    console.log(this === e.currentTarget);
    this.style.backgroundColor = "#A5D9F3";
}

//獲得整個document的元素
var elements = document.getElementsByTagsName("*");

//當元素被點擊時元素被調用
for(var i = 0; i < elements.length; i++) {
    elements[i].addEventListener("click",bluify,false);
}

In an in-line event handler 在行內的事件處理程序

當代碼被行內事件處理程序調用，它的this就是當前元素：

以上警告為button。注意無論如何只有在存在外層代碼才設置為這樣：

在這個例子中，內部的function的this并未設置因此返回為window/global對象。

GPU云服務器云服務器 javascript中this詳解 javascript對象詳解對象名this javascript的this

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

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

JavaScript深入淺出

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

blair 2019-08-21 18:26 評論0 收藏0
JavaScript 中 this 的詳解

摘要：作為構造函數調用中沒有類，但是可以從構造器中創建對象，并提供了運算符來進行調用該構造器。構造器的外表跟普通函數一樣，大部分的函數都可以當做構造器使用。如果構造函數顯式的返回一個對象，那么則會指向該對象。 this 的指向 this 是 js 中定義的關鍵字，它自動定義于每一個函數域內，但是它的指向卻讓人很迷惑。在實際應用中，this 的指向大致可以分為以下四種情況。 1.作為普通函數調...

cyrils 2019-08-21 15:27 評論0 收藏0
JavaScript之this對象詳解

摘要：再來看一個小的示例淘寶騰訊淘寶為什么輸出的依然是淘寶呢調用的是對象中的方法，方法里面有一個定時器，而定時器的一個參數是這里的指的就是的對象，然后方法里面有調用了，但是定時器中的指的是對象，所以最終調用的是對象中。 1.看前熱身看一段代碼 var name = javascript; var obj = { name:js, foo:f...

Integ 2019-08-22 13:56 評論0 收藏0
javaScript原型及原型鏈詳解（二）

摘要：當然這還沒完，因為我們還有重要的一步沒完成，沒錯就是上面的第行代碼，如果沒有這行代碼實例中的指針是指向構造函數的，這樣顯然是不對的，因為正常情況下應該指向它的構造函數，因此我們需要手動更改使重新指向對象。第一節內容：javaScript原型及原型鏈詳解（二）第一節中我們介紹了javascript中的原型和原型鏈，這一節我們來講利用原型和原型鏈我們可以做些什么。普通對象的繼承 ...

widuu 2019-08-20 16:37 評論0 收藏0
JavaScript 中 apply 、call 的詳解

摘要：參數和是放在數組中傳入函數，分別對應參數的列表元素。而原函數中的并沒有被改變，依舊指向全局對象。保存原函數保存需要綁定的上下文剩余的參數轉為數組返回一個新函數下一篇介紹閉包中閉包的詳解。 apply 和 call 的區別 ECMAScript 規范給所有函數都定義了 call 與 apply 兩個方法，它們的應用非常廣泛，它們的作用也是一模一樣，只是傳參的形式有區別而已。 apply(...

Meils 2019-08-21 15:27 評論0 收藏0
javascript中new關鍵字詳解

摘要：本文給大家詳細介紹了下中關鍵字的使用方法，以及使用關鍵字的區別，有需要的小伙伴可以參考下。第行通過關鍵字創建了一個新對象行對象嘗試訪問和屬性，并調用方法。一般情況下，函數對象在產生時會內置屬性并將函數名作為賦值僅函數對象。本文給大家詳細介紹了下javascript中new關鍵字的使用方法，以及javascript 使用new關鍵字的區別，有需要的小伙伴可以參考下。 function ...

alaege 2019-08-21 16:45 評論0 收藏0