JavaScript の詳細な紹介: これは正確に何を指しているのでしょうか? (写真とテキスト)

JavaScript は、関数型プログラミング、クロージャ、プロトタイプベースの継承などの高度な機能をサポートするスクリプト言語です。 JavaScript は最初は簡単に始められるように見えますが、より深く使用すると、実際には JavaScript を習得するのが非常に難しく、いくつかの基本概念がわかりにくいことがわかります。 JavaScript の this キーワードは比較的わかりにくい概念であり、さまざまなシナリオでさまざまなオブジェクトに変換されます。 JavaScript の this キーワードを正しくマスターすることによってのみ、JavaScript 言語の限界に入ることができるという見方があります。主流のオブジェクト指向言語 (Java、C# など) では、この意味は明確かつ具体的です。つまり、現在のオブジェクトを指します。通常はコンパイル時にバインドされます。 JavaScript の this は実行時にバインドされます。これが、JavaScript の this キーワードが複数の意味を持つ本質的な理由です。

JavaScript は実行時にバインディングする機能があるため、JavaScript の this はグローバル オブジェクト、現在のオブジェクト、または任意のオブジェクトにすることができます、すべては関数の呼び出し方法によって異なります。 JavaScript で関数を呼び出す方法はいくつかあります。オブジェクト メソッドとして、関数として、コンストラクターとして、および apply または call を使用します。よく言われるように、言葉は言葉ほどではなく、表現は絵ほどではない。これが指す JavaScript をよりよく理解するには?画像を使って説明しましょう:

上の画像を「JavaScript この決定木」と呼びます (非厳密モード)。以下は、この図がこれを判断するのにどのように役立つかを示す例です:

var point = { 
 x : 0, 
 y : 0, 
 moveTo : function(x, y) { 
     this.x = this.x + x; 
     this.y = this.y + y; 
     } 
 };
//决策树解释：point.moveTo(1,1)函数不是new进行调用，进入否决策，
//是用dot(.)进行调用，则指向.moveTo之前的调用对象，即point
point.moveTo(1,1); //this 绑定到当前对象,即point对象

point.moveTo() 「JavaScript この決定木」で関数を判断するプロセスは次のとおりです:

1) point.moveTo関数呼び出しは new を使用して行われますか?これは明らかに当てはまりません。「いいえ」分岐に進みます。つまり、関数は dot(.) で呼び出されますか? ;

2) point.moveTo 関数は dot(.) で呼び出されます。つまり、「yes」分岐に入ります。つまり、ここでは point.moveTo の前のオブジェクト ポイントを指します。

これの図point.moveTo 関数のポイントの分析図は以下のとおりです:

別の例として、次のコードを見てください:

function func(x) { 
 this.x = x; 
 } 
func(5); //this是全局对象window，x为全局变量
//决策树解析：func()函数是用new进行调用的么？为否，进入func()函数是用dot进行调用的么？为否，则 this指向全局对象window
x;//x => 5

func() 関数は、「JavaScript でこの決定を行います」

1) func(5) 関数呼び出しは new を使用していますか?これは明らかに当てはまりません。「いいえ」分岐に進みます。つまり、関数は dot(.) で呼び出されますか? ;

2) func(5) 関数は dot(.) で呼び出されません。つまり、「No」分岐に入ります。つまり、ここでは this がグローバル変数 window を指しており、this.x は実際には window です。 .x;

図解 func 関数内でこれが何を指しているのかの解析図は以下のようになります:

関数として直接呼び出す方法については、複雑な例を見てみましょう:

var point = { 
 x : 0, 
 y : 0, 
 moveTo : function(x, y) { 
     // 内部函数
     var moveX = function(x) { 
     this.x = x;//this 指向什么？window
    }; 
    // 内部函数
    var moveY = function(y) { 
    this.y = y;//this 指向什么？window
    }; 
    moveX(x); 
    moveY(y); 
    } 
 }; 
 point.moveTo(1,1); 
 point.x; //=>0 
 point.y; //=>0 
 x; //=>1 
 y; //=>1

point。 moveTo(1,1) 実際に内部で呼び出される関数はmoveX()関数とmoveY()関数です。 moveX()関数内のthisは「

JavaScript this決定木」で以下のように判定されます。 ) moveX(1) 関数は new Of? で呼び出されます。これは明らかに当てはまりません。「いいえ」分岐に進みます。つまり、関数は dot(.) で呼び出されますか? ;

2) moveX(1) 関数は dot(.) で呼び出されません。つまり、「No」分岐に入ります。つまり、ここでは this がグローバル変数 window を指しており、this.x は実際には window です。 .x;

以下、コンストラクターとして呼び出す例を見てください:

function Point(x,y){ 
    this.x = x; // this ?
    this.y = y; // this ?
 }
var np=new Point(1,1);
np.x;//1
var p=Point(2,2);
p.x;//error, p是一个空对象undefined
window.x;//2

Point(1,1) 関数は、var np=new Point(1,1) でこれを決定します。「

JavaScript この決定木

」次のように:

1) var np=new Point(1,1) への呼び出しは new を使用していますか?これは明らかに、「yes」分岐に入ります。つまり、これは

2 を指します。そして、 this.x=1、つまり、

Point(2,2) 関数が入ります。 var p= Point(2, 2)の「

JavaScript this決定木

」でこれを決定するプロセスは次のとおりです:

1) var p= Point(2,2)の呼び出しはnewを使用していますか?これは明らかに当てはまりません。「いいえ」分岐に進みます。つまり、関数は dot(.) で呼び出されますか? ;

2) Point(2,2) 関数は dot(.) で呼び出されませんか?判断は no です。つまり、「no」分岐に入ります。つまり、this はグローバル変数 window を指しますが、this.x は実際には window です。call および apply を使用して呼び出される関数の例を見てください。 :

function Point(x, y){ 
    this.x = x; 
    this.y = y; 
    this.moveTo = function(x, y){ 
        this.x = x; 
        this.y = y; 
    } 
 } 

var p1 = new Point(0, 0); 
var p2 = {x: 0, y: 0}; 
p1.moveTo.apply(p2, [10, 10]);//apply实际上为p2.moveTo(10,10)
p2.x//10

p1.moveTo.apply(p2,[10,10]) 「

JavaScript this決定木

」の関数の決定プロセスは次のとおりです:

applyとcallの2つのメソッドが次のとおりであることがわかります。非常に強力で、関数実行のコンテキスト、つまりこれにバインドされているオブジェクトを切り替えることができます。 p1.moveTo.apply(p2,[10,10]) は実際には p2.moveTo(10,10) です。 p2.moveTo(10,10) は次のように解釈できます:

1) p2.moveTo(10,10) 関数呼び出しは new を使用していますか?これは明らかに当てはまりません。「いいえ」分岐に進みます。つまり、関数は dot(.) で呼び出されますか? ;

2) p2.moveTo(10,10) 関数は dot(.) で呼び出されます。つまり、「yes」分岐に入ります。つまり、ここでは、これは p2.moveTo( 内の前のオブジェクト p2 を指します) 10,10) 、つまり p2 はオブジェクトのメソッドとしても実行できます。これが、関数が実行されるときにすべての動作環境 (ExecutionContext) が作成される主な理由です。関数の実行環境がこの実行環境で発生し、実行環境が構築されると、JavaScript はまず

グローバル オブジェクト、現在のオブジェクトなどを作成します。この時点で、関数の実行環境 (ExecutionContext) が正常に作成されます。は 1 行ずつ実行を開始し、必要な変数は以前に構築された実行環境 (ExecutionContext) から読み込まれます。」

この段落を理解することは、JavaScript の関数を理解するのに非常に役立ちます。

arguments变量，其中包含调用函数时传入的参数。接下来创建作用域链。然后初始化变量，首先初始化函数的形参表，值为 arguments变量中对应的值，如果 arguments变量中没有对应值，则该形参初始化为 undefined。如果该函数中含有内部函数，则初始化这些内部函数。如果没有，继续初始化该函数内定义的局部变量，需要注意的是此时这些变量初始化为 undefined，其赋值操作在执行环境（ExecutionContext）创建成功后，函数执行时才会执行，这点对于我们理解 JavaScript 中的变量作用域非常重要，鉴于篇幅，我们先不在这里讨论这个话题。最后为 this变量赋值，如前所述，会根据函数调用方式的不同，赋给 this

以上がJavaScript の詳細な紹介: これは正確に何を指しているのでしょうか? (写真とテキスト)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。