JavaScript でこれを包括的に分析

JavaScriptオブジェクトはもちろん、 this キーワードが不可欠です!このキーワードJavaScriptを使用すると、コードが削減されます。今日はこれをJavaScriptで分析します。

暗黙的なバインディング

これについて、一般的に言えば、メソッドを呼び出す人は誰でも、このメソッドが指す人を次のように指します:

function foo(){
    console.log(this.a)
}
var a = 3;
var obj = {
    a: 2,
    foo: foo
};
obj.foo(); // 输出2,因为是obj调用的foo，所以foo的this指向了obj，而obj.a = 2

複数の呼び出しがある場合、オブジェクトプロパティ参照チェーンのみ上位層または最後の層は、呼び出し位置で次のような役割を果たします。

function foo() {
    console.log( this.a )
}
var obj2 = { 
    a: 42,
    foo: foo
}
var obj1 = {
    a: 2,
    obj2: obj2
}
obj1.obj2.foo(); // 42

暗黙的な損失

このバインディングで最も一般的な問題の 1 つは、暗黙的にバインドされた関数が失われることです。 オブジェクトをバインドします。これは、デフォルトのバインディングを適用する必要があることを意味し、厳密モードかどうかに応じて、これをグローバル オブジェクトまたは未定義のオブジェクトにバインドします。

function foo() {
    console.log( this.a )
}
var obj1 = {
    a: 2,
    foo: foo
}
var bar = obj1.foo; // 函数别名！
var a = "oops, global"; // a是全局对象的属性
bar(); // "oops, global"

barはobj.fooへの参照ですが、実際にはfoo関数そのものを参照しているため、このときのbar()は実際には何も変更せずに関数呼び出しとなっているため、デフォルトのバインディングが適用されます

A more コールバック関数を渡すときに、微妙でよくある予期せぬ状況が発生します:

function foo() {
    console.log( this.a )
}
function doFoo( fn ){
    // fn 其实引用的是 foo
    fn(); // <-- 调用位置！
}
var obj = {
    a: 2,
    foo: foo
}
var a = "oops, global"; // a是全局对象的属性
doFoo( obj.foo ); // "oops, global"

パラメータの受け渡しは、実際には暗黙的な代入の一種であるため、関数を渡すと暗黙的に代入されるため、結果は同じになります前の例のように、関数が自分で宣言した関数 (setTimeout など) の代わりに言語の組み込み関数に渡された場合も、結果は同じになります

put は、call、apply、bind、new binding などを指定することです。

ハードバインディング

function foo( something ) {
    console.log( this.a, something)
    return this.a + something
}
var obj = {
    a: 2
}
var bar = function() {
    return foo.apply( obj, arguments)
}
var b = bar(3); // 2 3
console.log(b); // 5

ここで簡単に説明します: bar 関数では、foo は apply 関数を使用して obj をバインドします。つまり、foo の This は obj を指します。同時に、引数 (渡されるパラメータの数に制限はありません) がパラメータとして使用され、foo 関数に渡されます。そのため、bar(3) を実行するときは、obj. a が最初に出力され、2 と 3 が渡され、その後 foo は 2 つの合計を返すため、b の値は 5 になります

同様に、この例では、bind:

function foo( something ) {
    console.log( this.a, something)
    return this.a + something
}
var obj = {
    a: 2
}
var bar = foo.bind(obj)
var b = bar(3); // 2 3
console.log(b); // 5

を使用することもできます。従来のnew binding

クラス指向言語では、newを使ってクラスを初期化する際、クラス内のコンストラクタが呼び出されますが、JSのnewの仕組みは実はクラスの仕組みとは全く異なります。 -指向と言語指向。

new を使用して関数を呼び出すか、コンストラクターの呼び出しが発生すると、次の操作が自動的に実行されます: 新しいオブジェクトを作成 (または構築) します

この新しいオブジェクトは [[プロトタイプ]] 接続で実行されます

この新しいオブジェクトは、関数呼び出しの this にバインドされます

関数が他のオブジェクトを返さない場合、new

expression

の関数は、次のようなこの新しいオブジェクトを自動的に返します:

function foo(a){
    this.a = a
}
var bar = new foo(2);
console.log(bar.a); // 2

new を使用して呼び出した場合foo(...) の場合、新しいオブジェクトを構築し、 foo(...) 呼び出しでこれにバインドします。 new は、関数が呼び出されたときにこのバインディングの動作に影響を与えることができる最後のメソッドです。これを新しいバインディングと呼びます。

これは

の優先順位です

デフォルトのバインディングの優先順位が 4 つのルールの中で最も低いことは間違いないため、最初は無視できます。

暗黙的バインディングと明示的バインディングではどちらが優先されますか?テストしてみましょう:

function foo(a){
    console.log(this.a)
}
var obj1 = {
    a: 2,
    foo: foo
}
var obj2 = {
    a: 3,
    foo: foo
}
obj1.foo(); // 2
obj2.foo(); // 3
obj1.foo.call(obj2); // 3
obj2.foo.call(obj1); // 2

明示的なバインディングの優先順位が高いことがわかります。これは、判断を下す際に、明示的なバインディングが存在できるかどうかを最初に考慮する必要があることを意味します。

ここで、新しいバインディングと暗黙的バインディングの間でどちらの優先度が高く、どちらの優先度が低いかを判断する必要があります:

function foo(something){
    this.a = something
}
var obj1 = {
    foo: foo
}
var obj2 = {}
obj1.foo(2); 
console.log(obj1.a); // 2
obj1.foo.call(obj2,3);
console.log(obj2.a); // 3
var bar = new obj1.foo(4)
console.log(obj1.a); // 2
console.log(bar.a); // 4

新しいバインディングの優先度が暗黙的バインディングよりも高いことがわかります。しかし、新しいバインディングと明示的なバインディングではどちらの方が優先されるのでしょうか?

function foo(something){
    this.a = something
}
var obj1 = {}
var bar = foo.bind(obj1);
bar(2);
console.log(obj1.a); // 2
var baz = new bar(3);
console.log(obj1.a); // 2
console.log(baz.a); // 3

新しいバインディングはハード バインディングでこれを変更するため、新しいバインディングは明示的なバインディングよりも高い優先順位を持っていることがわかります。

new でハードバインド関数を使用する主な目的は、関数の一部のパラメーターを事前に設定して、new で初期化するときに残りのパラメーターのみを渡すことができるようにすることです。 bind(...) の機能の 1 つは、最初のパラメーター (最初のパラメーターはこれをバインドするために使用されます) を除くすべてのパラメーターを基礎となる関数に渡すことができることです (この手法は「部分アプリケーション」と呼ばれ、一種のアプリケーションです)。 「カレー」）。例:

function foo(p1,p2){
    this.val = p1 + p2;
}
// 之所以使用null是因为在本例中我们并不关心硬绑定的this是什么
// 反正使用new时this会被修改
var bar = foo.bind(null,'p1');
var baz = new bar('p2');
baz.val; // p1p2
}

カリー化: カリー化は直感的に、「いくつかのパラメーターを修正すると、残りのパラメーターを受け入れる関数が得られる」と述べています。したがって、2 つの変数を持つ関数 yx の場合、y = 2 が固定されている場合、1 つの変数を持つ関数 2x が得られます

アロー関数のこのアプリケーション

アロー関数は this の 4 つの標準ルールを使用しませんが、これは、外部 (関数またはグローバル) スコープに基づいて決定されます。

我们来看一下箭头函数的词法作用域：

function foo() {
    // 返回一个箭头函数
    return (a) => {
        // this继承自foo()
        console.log(this.a)
    };
}
var obj1 = {
    a: 2
};
var obj2 = {
    a: 3
};
var bar = foo.call(obj1);
bar.call(obj2); // 2, 不是3！

foo()内部创建的箭头函数会捕获调用时foo()的this。由于foo()的this绑定到obj1，bar（引用箭头函数）的this也会绑定到obj1，箭头函数的绑定无法被修改。（new也不行!）

总结

如果要判断一个运行中的函数的this绑定，就需要找到这个函数的直接调用位置。找到之后就可以顺序应用下面这四条规则来判断this的绑定对象。

由new调用？绑定到新创建的对象。

由call或者apply（或者bind）调用？绑定到指定的对象。

由上下文对象调用？绑定到那个上下文对象。

默认：在严格模式下绑定到undefined，否则绑定到全局对象。

相关推荐：

JavaScript学习笔记之基础语法

JavaScript 是真正的 OOP 语言吗？

如何用JavaScript修改伪类样式

以上がJavaScript でこれを包括的に分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。