Javascriptにおけるthisの使い方

私達はjsを書く時、特にコールバック関数を使う時、thisの指代の対象はいつも自分の考えから逸脱して変化が発生することができることを発見します.対象言語の特性に対してthisは常にその使用者を指すことを教えてくれます.jsでは、コールバック関数の内部のthisは、デフォルトではグローバル環境すなわち最終コンテキストを指しています.だから、thisオブジェクトの宣言バインディングをしないと、エラーが発生し、私たちが欲しい値が見つけられなくなります.

関数宣言式は、returnオブジェクトがありません.このとき、関数内のthisはグローバルwindow

に相当します.

function test(){
    this.a = 1;
    console.log(a);
}
test(); //1
console.log(a);  //1
console.log(this.a); //1
console.log(window.a); //1

//    
function test(){
    var a = 1;
    console.log(a);  //1
    console.log(this.a); //undefined
}
test();

を対象とした方法で呼び出すと、thisは上位

を指す.

function test(){
    console.log(this.x);
}
var o = {};
o.x = 1;
o.m = test;
o.m(); // 1

は構成関数として呼び出され、thisはnewのオブジェクトを指す.コンストラクタは一般的に頭文字が大文字で、newでオブジェクトを宣言して、普通のfunction

を区別します.

var x = 2;　　
function Test() {　　　　 
    this.x = 1;　　//      this      
}　　
var o = new Test();　　
console.log(o.x); // 1
console.log(this.x); //2

関数は、returnオブジェクトがあるとき、thisは、構造関数オブジェクト自体を指します.returnは複数の値を返し、オブジェクトの属性によってアクセスします.

function Test() {　　　
    this.b = 1;　//this = Test{}
    return {
        a: 2
    }
}　　

var o = new Test();　　
console.log(o.a); // 2
console.log(this.b); //undefined

// JavaScript     ：  return   ，           ，          ；  return    （  ，  ，  ），                ；
function Super(a){  
    this.a=a;  
    return 123;  
}  
Super.prototype.sayHello=function(){  
     console.log("Hello")  
}  
function Super1(a){  
     this.a=a;  
     return {a:2};  
}  
Super1.prototype.sayHello=function(){  
     console.log("Hello")  
}  
console.log(new Super(1));      //  Super{a:1},     sayHello  
console.log(new Super1(2));     //  Object{a:2},      sayHello  

ES 6に矢印関数が導入され、矢印関数はオペレータ=>で定義されている.矢印関数は、上の4つのthisバインディング規則を使用せずに、外層作用領域に基づいてthisを決定します.foo内部の矢印関数が作成されると、foo関数内のthisがObj 1に結合され、bar(矢印関数)のthisもObj 1に結合されます.矢印関数内のthisは修正されません.

function foo() {
    // this.b = 1;　//this = Test{}
    return (a) => {
        console.log(this.a);
    };
}

var obj1 = { a: 2 };
var obj2 = { a: 3 };

var bar = foo.call(obj1);  
bar.call(obj2); //  2

参考文献1、JSにおけるthisの4つの用法