JavaScript---this

「this」はJavaScriptの中での指し示すのは大きな難点です.いつも変化が激しいからです.花を移して木を接ぎますが、張冠の李はそれの身で表現するのが詳しくて徹底的ですが、しかし幸いにもそれは痕跡があります.この文章では「this」というものをかき集めます.
「this」は誰を指していますか?関数呼び出し時にのみ確認できます.関数を呼び出す方法によって、thisの方向を判断する方法が異なります.したがって、本稿は以下のいくつかの方向から検討する.

 関数呼び出し関数

 オブジェクト呼び出し関数

 call()、appy()、bind()と「this」

一、関数呼び出し関数
直接例は最も直観的な方法であるので、関数の「this」をこのいくつかの例から感じてみよう.

function fun(){　　　　　　// demo 1
    alert(this);
}
fun();    //[object window]

 

function fn() {　　　　　　// demo 2
    function foo() {
        alert(this);
    }
    foo();
}
fn();  // [object Window]

 

function foo() {　　　　　　// demo 3
    function fun(){
        function bar(){
            function fn(){
                alert(this);
            }
            fn();
        }
        bar();
    }
    fun();
}
foo(); // [object Window]

 

var a = 0;　　　　　     　// demo 4
function foo() {
    var a = 1;
    alert(this.a);
}
function fn() {
    var a = 2;
    foo()
}

foo();  // ?
fn();   // ?

 

"use strict"　　　　　　　　// demo 5
function fun(){
    alert(this);
}
fun();    // undefined

 
demo 1/2/3からは、関数内部の小包の「this」が最終的に全体のオブジェクトを指していることが分かります.デモ4は?実は答えは全部「0」ですが、何かネコミュがありますか? 
見ても分かりませんでしたが、大丈夫です.続いて下を見てください.対象の中で関数を呼び出す時の「this」はどうなりますか?
　　
二、オブジェクト呼び出し関数
対象関数を呼び出したら次のデモを思い出しますが、絶対面白いです.

var a = 0;                // demo 6

function fun(){
    return this.a;
}

var obj1 = {
    a : 1,
    b : this.a,
    fn : function(){
        return this.a;
    },
    fun : fun
}

var obj2 = {
    a : 2,
    bar : fun,
    obj3 : obj1
}

alert(fun());
alert(obj1.b);
alert(obj1.fn());
alert(obj2.bar());
alert(obj2.obj3.b);
alert(obj2.obj3.fn());
alert(obj2.obj3.fun());

//  ：0 、 0 、 1 、 2 、 0 、 1 、 1

 
 「関数呼出関数」と「オブジェクト呼出関数」を比較すると、対象はバルブのようになり、「this」はこれらの調合者の中を下から上に移動し、バルブに当たるとブロックされ、バルブがないとまっすぐに上がります.「this」が指しているのは誰ですか?最初に出会ったバルブはどれですか?
もし一緒に通行しても大丈夫なら、最後に文書が厳格なモードであるかどうかを見ます.もし「use strict」でないなら、demo 1、2、3、4の結果です.厳格なモードであれば、デモ5の結果です.
次に私達は重点的にデモを分析します.
alert(fun)------結果は0です.これは通行に支障がない場合、Fun()はグローバル環境で直接呼び出され、非厳格モードで直接windowオブジェクトを指す.
alert(obj 1.b)------結果は0です.これはobj 1.b=this.aのためです.これはグローバルスコープの中で直接にobj 1.bに値を与えますので、「this」は全体の対象を指します.
alert(obj 1.fn)------結果は1です.ここでfn()はobj 1という対象に呼び出されて、obj 1というバルブに遭遇したら、obj 1の上に止められます.だから結果はobj 1.aです.
alert(obj 2.bar)------結果は2です.Obj 1.fn()と同じコールプロセス.
alert(obj 2.obj 3.b)------結果は0です.同じObj 1.bは、グローバル環境の中でobj 2.obj 3.bに価値を付与するのがthis.aである.
alert(obj 2.obj 3.fn)------結果は1です.fn()の中の「this」は上に向かって、最初にobj 3という対象に出会います.正確にはobj.obj 3という対象であるべきです.したがって、「this」はobj 2.obj 3を指します.だから、this.a=obj 2.obj 3.aは1です.
alert(obj 2.obj 3.fun)------同obj 2.obj 3.fn().
三、call()、appy()、bind()と「this」
call()、appy()、bind()の3つの方法は「this」の方向を明示的に設定することができますので、上記の推理よりも明らかです.
1、call()、appy()
call()、appy()の役割は同じです.

function fun(){  　　　　　　　　// demo 7
    return this.num;
}
var obj = {
    num : 1
};
alert(fun.call(obj));  //1

 私たちはdemo 7からcall()、apply()の役割を見ました.call()、apply()はfunという関数の中の「this」の明示的な設定をobjとしていますので、fun関数の中のthis.numを通じてobjのnum属性にアクセスしました.call()とappy()の違いは、ありふれた話、つまりパラメータの入り方の違いです.
2、bind()
ビnd()公式サイトの説明:
bind方法は、結合関数と呼ばれる新しい関数を作成します.このバインディング関数を呼び出すと、バインディング関数は、その作成時にbind法に導入された最初のパラメータをthisとして使用します.例:

var foo = {
    a : 1
}
function fun(){
    return this.a;
}
var boundFun = fun.bind(foo);
alert(boundFun());

 
　　 bind()とcall()、apply()は同様で、その違いはcall()、apply()関数の作用領域を修正することであり、bind()はバインディング関数を作成することである.
 
(上記の見解に誤りがあれば、ご指摘ください)
転載先:https://www.cnblogs.com/huanqna/p/8159131.html