ホームページ > 記事 > ウェブフロントエンド > JavaScript でのこのポインターの概要と詳細な説明
JavaScript でのこのポインターの概要と詳細な説明
- 黄舟オリジナル
- 2017-07-22 17:02:081035ブラウズ
次のエディターは、JavaScript に基づいてこの指摘の概要を提供します。編集者はこれがとても良いものだと思ったので、皆さんの参考として今から共有します。エディターをフォローして見てみましょう
JavaScript での this の指摘は、フロントエンドの同僚にとって常に悩みの種であり、さまざまな面接の質問の最初の選択肢でもあります。次に、js での this の指摘をまとめてみましょう。まず、いくつかの概念を理解する必要があります:
1: グローバル変数はデフォルトで window オブジェクトの下にマウントされます
2: 通常、これは呼び出し元を指します
3: es6アロー関数では、これは呼び出し元ではなく作成者を指します
4: この点はcall、apply、bindによって変更できます
詳しく分析してみましょう
1 : 関数呼び出し内
(非厳密モード)
const func = function () {
console.log(this);
const func2 = function () {
console.log(this);
};
func2(); //Window
};
func(); //Window(厳密モード) の場合
'use strict'
const func = function () {
console.log(this);
const func2 = function () {
console.log(this);
};
func2(); //undefined
};
func(); //undefined4 番目と最初の 2 つのルールと組み合わせる: func 関数はグローバルですwindow オブジェクトの下では、this は呼び出し元 window を指すため、window オブジェクトが出力されます。ただし、strict モードでは、これがグローバル変数 window を指すことは許可されないため、出力は未定義になります (func2 がポイントします)。実際、これは JavaScript の設計上の欠陥であり、内部関数の this をその外部関数に対応するオブジェクトにバインドする必要があります。この設計上の欠陥を回避するために、賢明な JavaScript プログラマは、慣例により変数置換メソッドを考案しました (このメソッドについては次に説明します)。
2: オブジェクトメソッドとして
const user = {
userName: '小张',
age: 18,
selfIntroduction: function () {
const str = '我的名字是:' + this.userName + ",年龄是:" + this.age;
console.log(str);
const loop = function () {
console.log('我的名字是:' + this.userName + ",年龄是:" + this.age);
};
loop(); //我的名字是:undefined,年龄是:undefined
}
};
user.selfIntroduction(); //我的名字是:小张,年龄是:18最初のルールによれば、これは self Introduction() メソッドの呼び出し元を指します。そのため、 self Introduction() メソッド内では this がポイントされます。この場合、通常、これを self Introduction() メソッドでキャッシュすることを選択します。
const user = {
userName: '小张',
age: 18,
selfIntroduction: function () {
const str = '我的名字是:' + this.userName + ",年龄是:" + this.age;
console.log(str);
const that=this;
const loop = function () {
console.log('我的名字是:' + that.userName + ",年龄是:" + that.age);
};
loop(); //我的名字是:小张,年龄是:18
}
};
user.selfIntroduction(); //我的名字是:小张,年龄是:18現時点では、ループのこのポイントが理想的です。
const user={
userName:'小张',
age:18,
selfIntroduction:function(){
const str='我的名字是:'+this.userName+",年龄是:"+this.age;
console.log(str);
}
};
const other =user.selfIntroduction;
other(); //我的名字是:undefined,年龄是:undefined
const data={
userName:'小李',
age:19,
};
data.selfIntroduction=user.selfIntroduction;
data.selfIntroduction(); //我的名字是:小李,年龄是:19このコードを見ると、self Introduction() がグローバル変数 other に代入され、other() メソッドがグローバル関数 window オブジェクトの下にマウントされています。 window オブジェクトなので、出力は未定義です。 2 番目のコードは、username 属性と age 属性を含むデータ オブジェクトを宣言します。一般的に、これは data が self Introduction() 関数の呼び出し元であることを理解しています。とデータの古さが出力されます。
3: html のイベントとしてトリガーされます
<body> <p id="btn">点击我</p> </body>
const btn=document.getElementById('btn');
btn.addEventListener('click',function () {
console.log(this); //<p id="btn">点击我</p>
})この場合、通常、これは呼び出し元を指し、this はイベントを指します。イベントソースはイベントです。
4: 新しいキーワード (コンストラクター)
const fun=function(userName){
this.userName=userName;
}
const user=new fun('郭德纲');
console.log(user.userName); //郭德纲 ここでは詳しく説明しません。そのため、userName がユーザーの属性になります。
5:es6 (アロー関数)
const func1=()=>{
console.log(this);
};
func1(); //Window
const data={
userName:'校长',
selfIntroduction:function(){
console.log(this); //Object {userName: "校长", selfIntroduction: function}
const func2=()=>{
console.log(this); //Object {userName: "校长", selfIntroduction: function}
}
func2();
}
}
data.selfIntroduction(); 誰もが最初に述べた 3 番目のルールに注目しています。es6 のアロー関数では、これは作成者を指します。呼び出し元の fun1 はグローバル関数の下に作成されるため、グローバル ウィンドウを指します。 fun2 はオブジェクト data の下に作成され、データ オブジェクトを指します。したがって、func2 関数内では、this はデータ オブジェクトを指します。 es6 のアロー機能のこの点は、いわゆる JavaScript の設計上の欠陥の改善を指していると思います (個人的な認識)。
6: this のポイントを変更する
3 つの関数 call、apply、bind は、関数の this のポイントを人為的に変更できます。ここでは、これら 3 つの違いについては詳しく説明しません。 3つの違いについては、ブログで詳しく説明します。例として 1 つを取り上げてみましょうconst func=function(){
console.log(this);
};
func(); //window
func.apply({userName:"郭德纲"}); //Object {userName: "郭德纲"}これら 3 つのメソッドは this のポインタを人為的に変更できます。違いは、call と apply がメソッドを this にバインドしてすぐに実行するのに対し、bind メソッドは実行可能ファイルを返すことです。関数。
これを要約すると、冒頭で述べた4つのポイントです
1: グローバル変数はデフォルトでウィンドウオブジェクトの下にマウントされます
2: 通常の下状況によって、これは呼び出し元を指します
3: es6 のアロー関数では、これは呼び出し元ではなく作成者を指します
4: これの方向は、call、apply、bind を通じて変更できます
正直に言うと、初めてブログを書くのですが、誰かが私のブログを読んでくれるかとても心配です。間違って書かれた可能性はありますか？ ...私はもっとよく考えて要約しました: 欠点についての修正は歓迎します。
以上がJavaScript でのこのポインターの概要と詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。