これは、非常に誤解され、誤って使用されやすい Javascript の機能です。したがって、次の記事では、JavaScript でのこのキーワードの問題に関する関連情報を紹介します。この記事のテスト問題は、必要な方は一緒に参照してください。
はじめに
Javascript はオブジェクトベースの動的言語です。つまり、すべてがオブジェクトです。非常に典型的な例として、関数も通常のオブジェクトと見なされます。 Javascript は特定の設計パターンを通じてオブジェクト指向プログラミングを実装できますが、この「ポインタ」はオブジェクト指向プログラミングを実現する上で非常に重要な機能です。この記事では、JavaScript の this キーワードが指す関連コンテンツについて詳しく説明します。最初に簡単なテストを行ってみましょう。すべて正解した場合は、これ以上読む必要はありません。
テストの質問
最初の質問
RREEEE
2番目の質問
RREEEE
3番目の質問質問
<script>
var str = 'zhangsan';
function demo() {
var str = 'lisi';
alert(this.str);
}
window.demo(); // ??
var obj = {
str: "wangwu",
say: function() {
alert(this.str);
}
}
obj.say(); // ??
var fun = obj.say;
window.fun(); // ??
</script>ログイン後にコピー
4番目の質問
<script>
var username = 'zhangsan';
(function() {
var username = 'lisi';
alert(this.username); // ??
})()
function demo() {
var username = 'wangwu';
function test() {
alert(this.username);
}
test(); // ??
}
demo();
</script>ログイン後にコピー
答え
最初の質問: zhangsan wanguu zhangsan
2番目の質問: zhangsan zhangsan
質問3 : 私の名前は張山です 私の名前は張山です
質問4: zhangsan zhangsan zhangsan lisi wangwu
(下に詳細な分析があります)
this
1. 呼び出し関数を指すオブジェクト
<script>
function Person() {
this.username = 'zhangsan';
this.say = function() {
alert('我叫' + this.username);
}
}
var p = new Person();
p.say(); // ??
var p1 = new Person();
p1.say(); // ??
</script>ログイン後にコピー
<script>
var username = 'zhangsan';
function demo() {
alert(this.username)
}
var obj1 = {
username: "lisi"
};
var obj2 = {
username: "wangwu"
};
demo(); // ??
demo(obj1); // ??
demo(obj2); // ??
demo.call(obj1); // ??
demo.apply(obj2); // ??
</script>ログイン後にコピー
を指します。匿名関数には名前がないため、testを呼び出す人が誰を指すかがwindow
にリンクされます。もちろん、テスト後は、ウィンドウによって呼び出されることはありません。誰も気にしない場合は、ウィンドウを指します。これは、呼び出す所有者がいないメインレス関数と同等です。 3. new で生成されたオブジェクト 価値あるものにするためには、new を使用して関数内の属性とメソッドを使用します
<script>
// this:指向调用函数的对象
var str = 'zhangsan';
function demo() {
var str = 'lisi';
//this->window
console.log(this);
alert(this.str);
}
window.demo(); // zhangsan
var obj = {
str: "wangwu",
say: function() {
// this->obj
alert(this.str);
}
}
obj.say(); // wangwu
var fun = obj.say;
window.fun(); // zhangsan
</script>ログイン後にコピー
注: 関数 function が呼び出されますが、this は thisObj を指します。関数内で thisObj を指します (オブジェクトの内部ポインターを変更します)
2. thisObj がパラメーターを渡さない場合、デフォルトでグローバル オブジェクトになります - 3. call()/apply() の接続と相違点
連絡先: 関数は同じで、最初のパラメータはすべて thisObj です
違い: さらにパラメータが渡される場合
call() の実際のパラメータは 1 つずつリストされています
実際のパラメータapply() のすべては 2 番目の配列パラメータに配置されます
apply()/call() の理解例:
<script>
// 2.匿名函数自执行|匿名函数|无主函数 this->window
var username = 'zhangsan';
// 匿名函数自执行 this->window
(function() {
var username = 'lisi';
console.log(this); // window
alert(this.username); // zhangsan
})()
function demo() {
var username = 'wangwu';
// 无主函数 this->window
function test() {
// this->window
alert(this.username);
}
test(); // zhangsan
}
demo();
</script>ログイン後にコピー
this の 4 番目の使用例
<script>
// 3.通过new的对象：this指向产生的对象
// 函数
function Person() {
// 属性
this.username = 'zhangsan';
// 方法
this.say = function() {
// this->p
console.log(this); // Person对象
alert('我叫' + this.username);
}
}
// 实例化出一个对象:p就具有了username属性和say方法
var p = new Person();
console.log(p); // Person对象
console.log(p.username); // zhangsan
p.say(); // 我叫zhangsan
// this->p1
var p1 = new Person();
p1.say(); // Person对象 我叫zhangsan
</script>ログイン後にコピー
obj1 であれ obj2 であれ、デモに書かれたものを直接呼び出した場合、デモはウィンドウによって呼び出されます。
call を使用するか apply を使用するかに関係なく、最後の呼び出しはデモ関数ですが、これが obj1/obj2 を指すように強制され、this が最初のパラメーター オブジェクトを指すように強制されます。
以上がJavascript でのこのキーワードの使用法の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
