Javascriptこのキーワード詳細解説_基礎知識

1. これはコンストラクターによってインスタンス化されたオブジェクトを指します

前の記事では、次の例に示すように、new を使用してコンストラクターを呼び出す場合と、new を使用しない場合の違いについて説明しました。

コードをコピーします コードは次のとおりです:

function Benjamin(ユーザー名, 性別) {
This.username = ユーザー名;
This.sex = セックス;
}
var benjamin = new Benjamin("zuojj", "male");
//出力: Benjamin{性別: "男性",ユーザー名: "zuojj"}
console.log(ベンジャミン);
var ben = Benjamin("張三", "女性");
//出力: 未定義
console.log(ベン);

コンストラクターが通常の関数として呼び出された場合、戻り値はなく、グローバル オブジェクトを指します。では、新しいキーワードの欠如によって引き起こされる問題を回避するにはどうすればよいでしょうか?

コードをコピーします コードは次のとおりです:

function Benjamin(ユーザー名, 性別) {
//「this」が「Benjamin」オブジェクトかどうかを確認します
if(ベンジャミンのこのインスタンス) {
This.username = ユーザー名;
This.sex = セックス;
}else {
新しい Benjamin(ユーザー名、性別) を返します;
}
}
var benjamin = new Benjamin("zuojj", "male");
//出力: Benjamin{性別: "男性",ユーザー名: "zuojj"}
console.log(ベンジャミン);
var ben = Benjamin("張三", "女性");
//出力: Benjamin {ユーザー名: "zhangsan"、性別: "女性"}
console.log(ベン);

上記の例では、まずこれが Benjamin のインスタンスであるかどうかを確認します。そうでない場合は、new を使用してコンストラクターを自動的に呼び出し、インスタンスを作成します。これは、インスタンスを作成するための new キーワードが見つからないことを心配する必要がなくなったことを意味します。コンストラクター。もちろん、悪い習慣が身につく可能性がありますが、この現象を回避したらどうなるでしょうか。次のようなエラーをスローできます:

コードをコピーします コードは次のとおりです:

function Benjamin(ユーザー名, 性別) {
//「this」が「Benjamin」オブジェクトかどうかを確認します
if(ベンジャミンのこのインスタンス) {
This.username = ユーザー名;
This.sex = セックス;
}else {
// そうでない場合は、エラーをスローします。
throw new Error("`new` なしで`Benjamin` が呼び出されました");
}
}

2. これは関数

を呼び出すオブジェクトを指します。

以下の例を見てください:

コードをコピーします コードは次のとおりです:

var x = 10;
var obj = {
x: 10、
出力: function() {
//出力: true
console.log(this === obj);
this.x を返します;
}、
innerobj: {
x: 30、
出力: function() {
//出力: true
console.log(this === obj.innerobj);
this.x を返します;
}
}
};
//出力: 10
console.log(obj.output());
//出力: 30
console.log(obj.innerobj.output());

3. これはグローバル オブジェクトを指します

上記のコンストラクターについて説明したときに、 new が適用できない場合、これがグローバル オブジェクトを指すことについても説明しました。よくある間違いの 2 つの例を見てみましょう。

コードをコピーします コードは次のとおりです:

var x = 100;
var obj = {
x: 10、
出力: function() {
(関数() {
//出力: true
console.log(この === ウィンドウ);
//出力: 内部: 100
console.log("内部:" this.x);
})();

this.x を返します;
}
};
//出力: 10
console.log(obj.output());

クロージャーを使用すると、スコープが変更され、これは (ブラウザー内の) ウィンドウを指します。

コードをコピー コードは次のとおりです:

var x = 100;
var obj = {
x: 10、
出力: function() {
this.x を返します;
}
};
var 出力 = obj.output;
//出力: 10
console.log(obj.output());
//出力: 100
console.log(output());
var obj2 = {
x: 30、
出力: obj.output
}
//出力: 30
console.log(obj2.output());

現時点では、関数が呼び出されたときに this は常にオブジェクトを指します。

4. これは apply/call() メソッドによって割り当てられたオブジェクトを指します

コードをコピーします コードは次のとおりです:

var x = 100;
var obj = {
x: 10、
出力: function() {
this.x を返します;
}
};
//出力: 10
console.log(obj.output());
var obj2 = {
x: 40、
出力: obj.output
}
//出力: 40
console.log(obj.output.call(obj2));
//出力: 10
console.log(obj2.output.apply(obj));

5. コールバック関数内の this は、コールバック

を呼び出す関数内の this が指すオブジェクトを指します。

コードをコピーします コードは次のとおりです:

//
$("#ユーザー名").on("クリック", function() {
console.log(this.value);
});

6. Function.prototype.bind 内のこれ

bind() メソッドは、呼び出されたときに this キーワードが指定された値に設定された新しい関数を作成します。新しい関数の呼び出し時に、指定された一連の引数が指定された引数の前に置かれます。
例 1:

コードをコピーします コードは次のとおりです:

関数 person() {
this.name を返します;
}
//Function.prototype.bind
var per = person.bind({
名前：「ズオジ」
});
console.log(per);
var obj = {
名前: "ベン"、
人: 人、
あたり:
あたり };
//出力: Ben、zuojj
console.log(obj.person(), obj.per());

例 2:

コードをコピーします コードは次のとおりです:

this.x = 9; var module = {
x: 81、
getX: function() { return this.x }
};
//出力: 81
console.log(module.getX()); var getX = module.getX;
//出力: 9、この場合、「this」はグローバル オブジェクトを参照しているため
コンソール.log(getX); // module
にバインドされた 'this' を使用して新しい関数を作成します varboundGetX = getX.bind(module);
//出力: 81
console.log(boundGetX());