ホームページ > 記事 > ウェブフロントエンド > 高頻度の知識ポイントを習得するために、これらのフロントエンドの面接の質問を見てください (7)
高頻度の知識ポイントを習得するために、これらのフロントエンドの面接の質問を見てください (7)
- 青灯夜游転載
- 2023-02-27 18:59:101441ブラウズ
毎日 10 問、100 日後には、フロントエンド面接の高頻度の知識ポイントをすべてマスターしていることになります。さあ! ！ ！ , 記事を読みながら、答えを直接見るのではなく、まず知っているかどうか、知っている場合の答えは何かを考えてください。考えて、答えと比べてみてください。それが良いでしょうか? もちろん、私の答えよりも良い答えがある場合は、コメント欄にメッセージを残して、テクノロジーの美しさについて一緒に話し合ってください。
#インタビュアー: JS のこの指摘の問題について話してください
私: えー~、これについてはこれでわかりました1) これをグローバルに取得すると、グローバルに使用するものはすべてウィンドウにマウントされるため、これはウィンドウを指すことになることを知っておく必要があります。電話をかける人は誰を指すというルールがあります。この文は微妙に誤解を招きます。考えられるエラーは次のように要約され、コードが提供されます:
<script>
console.log(this) // 指向window
function a(){
console.log(this)
}
a() // 相当于 window.a()，指向的依旧是 window
</script>2) このポイントが前の呼び出し元を指すことを知る必要があります。コードは次のとおりです: コードを読んだ後、d 関数は本質的には a によって呼び出されますが、 c が d 関数を呼び出す層がまだ中間にあるため、これは上位レベルを指しており、近接原理が存在します。これは非常に重要です。 ！ ！
<script>
var a = {
b:10,
c:{
b:12,
d:function(){
console.log(this)
}
}
}
a.c.d() // {b: 12, d: ƒ}
</script>3) アロー関数にはスコープがないこと、つまり独自の this がないことを知っておく必要があります。this は常に上位レベルの this を指しています。以下は例です。大手メーカーの面接での質問ですが、最終的な印刷結果がどのようになるかわかりますか? このインタビューの質問を注意深く読んでいるとすると、答えは 66 であることがすでにわかっていると思います。なぜですか?アロー関数には独自の this がないため、上位レベルに移動して this を見つける必要があり、上位レベルはグローバル スコープ内にあるため、出力されるのはグローバルにマウントされた ID 番号 66 であることを知っておく必要があります。
<script>
var id = 66
function a(){
setTimeout(()=>{
console.log(this.id)
},500)
}
a({id:22}) // 猜猜结果是什么？
</script>では、この のポイントを変更して、必要な結果を指すようにこれを制御するにはどうすればよいでしょうか?以下の 3 つのメソッドが挙げられます。
<script>
var id = 66
function a(){
setTimeout(()=>{
console.log(this.id || this)
},500)
}
// call => {} 改变之后并执行一次
a.call({id:22}) // 打印22
// apply => [] 改变之后并执行一次
a.apply([12]) // 打印 [12]
// bind() 不调用，只改变this指向
a.bind(a(id=32)) // 32
</script>
インタビュアー: call apply binding の機能と違いについて教えてください。
私: えー、わかりました。要約は次のとおりです。 applybind を呼び出す 3 つのメソッドを使用して、関数のこの点、具体的な違いは次のとおりです。 1) fn.call (newThis,params) call 関数の最初のパラメーターは this の新しいポインターであり、次に、fn によって使用される関数が順番に渡されます。 fn 関数はすぐに実行されます。
2) fn.apply (newThis,paramsArr) apply 関数の最初のパラメーターは this の新しいポインターで、2 番目のパラメーターは fn によって使用されるパラメーター配列であり、fn 関数は次のようになります。すぐに実行されました。 3) fn.bind (newThis,params) バインド関数の最初のパラメータは this の新しいポインタで、後続のパラメータは直接または配列の形式で渡すことができます。 fn 関数はすぐには実行されず、fn 関数のポインティングは 1 回しか変更できず、それ以降のバインドによる変更は無効になります。返されるのは、この要点を変更した新しい fn です。 インタビュアー: イベント委任についてのあなたの理解を話してください
私:そうですね、イベント委任はイベント バブリングを使用して、イベント ハンドラーを 1 つだけ指定することで、特定の種類のすべてのイベントを管理します。端的に言えば、すでに起こっている出来事に、まだ起こっていない出来事をくっつけるということです。コード全体は次のとおりです:
<body>
<ul id="ul">
<li>0</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<button id="btn">点我添加一个li</button>
<script>
// 事件委托
let ul = document.getElementById("ul")
ul.addEventListener('click',(event)=>{
console.log(event)
event = event || window.event
let target = event.target
if(target.nodeName == 'LI'){
alert(target.innerHTML)
}
})
let btn = document.getElementById('btn')
btn.addEventListener('click',()=>{
let li = document.createElement('li')
li.textContent = ul.children.length
ul.appendChild(li)
})
</script>
</body>
インタビュアー: Promise とは何か、またその使い方を教えてください。
インタビュー担当者: クロスドメインとは何ですか?クロスドメインの問題を解決するにはどうすればよいですか?私: えっと、わかりました。Promise は ES6 が提供するコンストラクターです。Promise コンストラクター new を使用してインスタンスを作成できます。Promise コンストラクターはパラメーターとして関数を受け取ります。これ関数には 2 つのパラメータがあります。つまり、2 つの関数 resolve と reject、resolve Promise の状態を待機状態から成功に変更し、非同期操作の結果をパラメータとして渡します。reject は状態を待機状態から失敗に変更し、非同期操作が完了したときに呼び出します。非同期操作によって報告されたエラーはパラメータとして渡されます。インスタンスの作成後、then メソッドを使用して成功または失敗のコールバック関数をそれぞれ指定するか、catch を使用できます。失敗をキャプチャするには、##then と catch は最終的に Promise を返すため、チェーン内で呼び出すことができます。
Promise の役割:
Promise は非同期マイクロタスクであり、非同期多層ネストされたコールバックの問題を解決し、コードが読みやすいPromise を使用するとパフォーマンスが向上し、保守が容易になる Promise の特徴:
1) オブジェクトの状態は、次の影響を受けません。外の世界2) 一度状態が変化すると、再度変化することはありません。この結果はいつでも取得できます。#3) 解決メソッドのパラメータは、コールバックのパラメータです。 then の関数であり、reject メソッドのパラメータは catch のパラメータです。パラメータ
4) then メソッドと catch メソッドはエラーを報告しない限り、完全に埋められた Promise を返します
アプリケーションシナリオ:地獄のコールバック問題を解決する
具体的な使用方法については、以前の記事を参照してください:
JS の Promise を 1 つの記事で理解する
私: えー、わかりました。概要は次のとおりです。
インタビュアー: JavaScript には変数の型を決定するメソッドがいくつありますか?クロスドメインとは:現在のページのインターフェイスによって要求されたアドレスが現在のページのアドレスと異なる場合、そのインターフェイスはクロスドメインであると言われます。
クロスドメイン制限の理由:
Web ページのセキュリティを確保するために、ブラウザには同一生成元プロトコル ポリシーがあります。クロスドメイン ソリューション：
cors：現在 1 つ最も一般的な解決策は、バックエンドを設定してクロスドメイン実装を可能にすることです。
res.setHeader('アクセス制御許可オリジン', '*');res.setHeader("アクセス制御許可メソッド", "GET, PUT, OPTIONS, POST");
ノード ミドルウェア、nginx リバース プロキシ：クロスドメイン制限がある場合、ブラウザはドメインを越えてサーバーにアクセスできません。ノード ミドルウェアとnginx リバース プロキシを使用すると、プロキシ サーバーにリクエストを送信できます。静的ページとプロキシ サーバーは同じオリジンを持ち、プロキシ サーバーはバックエンド サーバーにリクエストを送信します。サーバーとサーバーの間に相同性の制限はありません。 。
JSONP:使用される原則は、スクリプト タグがドメイン間でリソースをリクエストできること、およびコールバック関数が URL にパラメータ。バックエンドはリクエストを受信し、コールバック関数を呼び出し、データをパラメータとして返します。ドキュメント タイプを返すようにレスポンス ヘッダーを設定することに注意してください。ドキュメント タイプは JavaScript に設定する必要があります。
私: そうですね、JavaScript には変数の型を決定する 4 つの方法があり、要約すると次のようになります。
: 基本的なデータ型を決定するためによく使用されます。関数を除く参照データ型の場合は、「関数」を返し、残りは「オブジェクト」を返します。instanceof
: は主に参照データ型を区別するために使用され、検出方法は現在のプロトタイプ チェーン上の型を検出することです。インスタンスを作成して使用します。検出された結果はすべて trueです。Object.prototype.toString.call()(オブジェクト プロトタイプ チェーンの判定メソッド):
あらゆる種類の判定検出に適用できる、検出メソッドは次のとおりです。 Object .prototype.toString.call(data) は、このデータ型の文字列を返します。
コンストラクタ(参照データ型用):
は参照データ型を検出するために使用されます。検出方法は、インスタンスのコンストラクタを取得することです。この方法では、プロトタイプチェーン上に他のクラスを追加せず、プロトタイプチェーンからの干渉を回避します。
インタビュアー: JS での非同期実装の方法について教えてください。
私: え～、わかりました。同期タスクの実行が完了した後、非同期タスクはすべてタスクキューから取り出して順次実行されます。非同期実装の一般的な方法は次のとおりです:
コールバック関数、イベント リスニング、setTimeout (タイマー)、Promise、async/await、ジェネレーター ジェネレーター
インタビュアー: Tell配列の重複排除にはどのような方法がありますか?
#私: そうですね、配列から重複を削除する方法はたくさんあります。以下に、いくつかの例と簡単な説明を示します。 #Use Object 属性キーは重複を除外します
:配列を走査し、属性がオブジェクトに存在するかどうかを毎回確認します。存在しない場合は、新しい配列に保存し、次を使用します配列要素をキーとして設定します。値はオブジェクトに格納され、最終的に新しい配列が返されます。
重複をなくすには Set 型データを使用してください
:パラメータが重複排除する必要がある配列である新しい Set を作成します。セットは自動的に削除されます要素を複製し、Set を配列に変換して返します。
重複排除のインデックスをフィルターする
:Array に付属するフィルター メソッドを使用して、インデックスの数に等しい arr.indexOf(num) を返します。 。
reduce には重複排除が含まれます
:reduce を使用して重複排除後の新しい配列として空の配列を走査し、内部で決定します。 new 現在トラバースされている要素が配列内に存在するかどうか。存在しない場合は、新しい配列に挿入されます。
インタビュアー: es6 のアロー機能について教えてください。
私: そうですね、アロー関数は無名関数と同等なので、関数定義が簡素化されます。アロー関数の書き方には2通りあり、関数本体が単一文の場合は{}とreturnを省略できます。もう 1 つは複数のステートメントを含むもので、{} と return は省略できません。アロー関数の最大の特徴はthisを持たず、thisを外部から取得する、つまり外部の実行コンテキストでthisを継承するということですが、thisキーワードがないためアロー関数をアロー関数として利用することはできません。コンストラクタ。
アロー関数は、通常の関数の定義よりも簡潔、明確、高速です。ただし、両者には違いがあり、アロー関数にはプロトタイププロトタイプやスーパーがないため、これを作成することはできませんが、これは外部関数環境の変数を継承して取得するため、call、bind、applyで変更することはできません。 this のポイント; 探している 最も外側の通常の関数に到達すると、this は通常 window を指します; アロー関数は new を使用できません; アロー関数には引数がありません; ジェネレータ関数として使用できず、yield コマンドを使用できません; アロー関数は使用できませんオブジェクト フィールドおよびコールバック関数の動的な this に使用されます。通常、この参照なしで内部的に使用されます。インタビュアー: JS 変数のプロモーションについて話しましょうか?
私: ええと、わかりました。変数のプロモーションとは、コードのコンパイル期間中に JS の変数と関数の宣言が
,## になることを意味します #コードの先頭に昇格します。変数の昇格は Var キーワードを使用して変数が宣言されていることが前提であり、変数を昇格させる場合は宣言のみが昇格され、代入は昇格されず、同時に関数の宣言の昇格が優先されます。変数の昇格について。変数の昇格の結果、変数が初期化される前に変数にアクセスできるようになり、未定義が返されます。関数は、関数が宣言される前に呼び出すことができます。 let および const を使用して宣言された変数は作成およびプロモートされ、一時的なデッド ゾーンが形成されます。初期化前に let および const によって作成された変数にアクセスすると、エラーが発生します。 [推奨学習:
JavaScript 上級チュートリアル]
以上が高頻度の知識ポイントを習得するために、これらのフロントエンドの面接の質問を見てください (7)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。