摘要：返回作為構(gòu)造器當(dāng)函數(shù)作為構(gòu)造器使用關(guān)鍵詞，它的綁定為新構(gòu)造的對(duì)象。注意當(dāng)然默認(rèn)的構(gòu)造器返回的對(duì)象為當(dāng)前調(diào)用對(duì)象，它能被當(dāng)前對(duì)象中的新對(duì)象所取代如果對(duì)象的返回值不是對(duì)象，那么仍指向當(dāng)前對(duì)象。

javascript this 基礎(chǔ) call apply

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

Javascript函數(shù)中的this關(guān)鍵字的行為相比其他語言有很多不同。在Javascript的嚴(yán)格模式下和非嚴(yán)格模式下也略有不同。

在大多數(shù)情況下，函數(shù)的調(diào)用方式?jīng)Q定了this的值。this不能在執(zhí)行期間被賦值，在每次函數(shù)被調(diào)用時(shí)this的值也會(huì)不同。ES5增加了bind方法，可以在不對(duì)函數(shù)進(jìn)行調(diào)用的情況下傳入this值。

在全局上下文中（在任何函數(shù)體外部），this指代全局對(duì)象，無論是否在嚴(yán)格模式下。

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

在函數(shù)內(nèi)部， this的值取決于函數(shù)是如何調(diào)用的。

function f1() {
        return this;
    }

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

在這個(gè)例子中，this的值不是由函數(shù)調(diào)用設(shè)定。因?yàn)榇a不運(yùn)行在嚴(yán)格模式下，this的值始終是一個(gè)對(duì)象且默認(rèn)為全局對(duì)象。

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

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

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

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

當(dāng)一個(gè)函數(shù)作為一個(gè)對(duì)象的方法被調(diào)用，它的this會(huì)被設(shè)置為調(diào)用該方法的對(duì)象。
在下面的例子中，當(dāng)o.f()被調(diào)用，function內(nèi)部的this會(huì)綁定到這個(gè)object。

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

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

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

o.f = independent;

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

這個(gè)例子只有o對(duì)象中的f才會(huì)令這個(gè)函數(shù)被調(diào)用。

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

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

...在原型鏈中

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

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對(duì)象并沒有它自己的實(shí)例f屬性，它繼承于原型鏈。但是沒有關(guān)系f能在o對(duì)象中找到；查找以一個(gè)p.f的引用開始，因此這個(gè)function中的this取對(duì)象p的引用值。也就是說，當(dāng)f函數(shù)作為p的對(duì)象被調(diào)用，它的this指向p。這是Javascript原型繼承中非常有趣的特征。

...或者作為一個(gè)getter或者setter

當(dāng)方法被getter或者setter調(diào)用同樣的概念仍然成立，當(dāng)對(duì)象的屬性被set或者是gotten時(shí)，它的getter或者setter函數(shù)中的this對(duì)象會(huì)被綁定到當(dāng)前對(duì)象。

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

當(dāng)函數(shù)作為構(gòu)造器（使用new關(guān)鍵詞），它的this綁定為新構(gòu)造的對(duì)象。
注意：當(dāng)然默認(rèn)的構(gòu)造器返回的this對(duì)象為當(dāng)前調(diào)用對(duì)象，它能被當(dāng)前對(duì)象中return的新對(duì)象所取代（如果對(duì)象的返回值不是對(duì)象，那么this仍指向當(dāng)前對(duì)象）。

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

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

構(gòu)造器示例

/*
 * 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

在上一個(gè)例子中（c2），因?yàn)橛幸粋€(gè)對(duì)象在構(gòu)建中返回，所以this對(duì)象綁定到了返回的對(duì)象上。

在function內(nèi)部使用this關(guān)鍵詞時(shí)，它的值可以在使用call或apply（所有的function對(duì)象都繼承自Function.prototype）調(diào)用時(shí)綁定為該函數(shù)中傳入的對(duì)象。

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

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

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());

當(dāng)一個(gè)function被用作為一個(gè)事件處理程序，它的this被設(shè)置為當(dāng)前的元素（一些瀏覽器并不遵循這個(gè)規(guī)則而是動(dòng)態(tài)的添加方法比如使用addEventListener）。

//當(dāng)元素被調(diào)用，其被激活為藍(lán)色
function bluify(e) {
    console.log(this === e.target);
    console.log(this === e.currentTarget);
    this.style.backgroundColor = "#A5D9F3";
}

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

//當(dāng)元素被點(diǎn)擊時(shí)元素被調(diào)用
for(var i = 0; i < elements.length; i++) {
    elements[i].addEventListener("click",bluify,false);
}

當(dāng)代碼被行內(nèi)事件處理程序調(diào)用，它的this就是當(dāng)前元素：

Show this

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

Show inner this

在這個(gè)例子中，內(nèi)部的function的this并未設(shè)置因此返回為window/global對(duì)象。