毎日 10 問、100 日後には、フロントエンド面接の高頻度の知識ポイントをすべてマスターしていることになります。さあ! ！ ！ , 記事を読みながら、答えを直接見るのではなく、まず知っているかどうか、知っている場合の答えは何かを考えてください。考えて、答えと比べてみてください。それが良いでしょうか? もちろん、私の答えよりも良い答えがある場合は、コメント欄にメッセージを残して、テクノロジーの美しさについて一緒に話し合ってください。
私: えー~、これについてはこれでわかりました1) これをグローバルに取得すると、グローバルに使用するものはすべてウィンドウにマウントされるため、これはウィンドウを指すことになることを知っておく必要があります。電話をかける人は誰を指すというルールがあります。この文は微妙に誤解を招きます。考えられるエラーは次のように要約され、コードが提供されます:
<script>
console.log(this) // 指向window
function a(){
console.log(this)
}
a() // 相当于 window.a()，指向的依旧是 window
</script><script>
var a = {
b:10,
c:{
b:12,
d:function(){
console.log(this)
}
}
}
a.c.d() // {b: 12, d: ƒ}
</script><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>私: えー、わかりました。要約は次のとおりです。 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 です。 インタビュアー: イベント委任についてのあなたの理解を話してください
<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 は 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 に設定する必要があります。
: 基本的なデータ型を決定するためによく使用されます。関数を除く参照データ型の場合は、「関数」を返し、残りは「オブジェクト」を返します。instanceof
: は主に参照データ型を区別するために使用され、検出方法は現在のプロトタイプ チェーン上の型を検出することです。インスタンスを作成して使用します。検出された結果はすべて trueです。Object.prototype.toString.call()(オブジェクト プロトタイプ チェーンの判定メソッド):
あらゆる種類の判定検出に適用できる、検出メソッドは次のとおりです。 Object .prototype.toString.call(data) は、このデータ型の文字列を返します。
コンストラクタ(参照データ型用):
は参照データ型を検出するために使用されます。検出方法は、インスタンスのコンストラクタを取得することです。この方法では、プロトタイプチェーン上に他のクラスを追加せず、プロトタイプチェーンからの干渉を回避します。
私: え～、わかりました。同期タスクの実行が完了した後、非同期タスクはすべてタスクキューから取り出して順次実行されます。非同期実装の一般的な方法は次のとおりです:
コールバック関数、イベント リスニング、setTimeout (タイマー)、Promise、async/await、ジェネレーター ジェネレーター
#私: そうですね、配列から重複を削除する方法はたくさんあります。以下に、いくつかの例と簡単な説明を示します。 #Use Object 属性キーは重複を除外します
:配列を走査し、属性がオブジェクトに存在するかどうかを毎回確認します。存在しない場合は、新しい配列に保存し、次を使用します配列要素をキーとして設定します。値はオブジェクトに格納され、最終的に新しい配列が返されます。
重複をなくすには Set 型データを使用してください
:パラメータが重複排除する必要がある配列である新しい Set を作成します。セットは自動的に削除されます要素を複製し、Set を配列に変換して返します。
重複排除のインデックスをフィルターする
:Array に付属するフィルター メソッドを使用して、インデックスの数に等しい arr.indexOf(num) を返します。 。
reduce には重複排除が含まれます
:reduce を使用して重複排除後の新しい配列として空の配列を走査し、内部で決定します。 new 現在トラバースされている要素が配列内に存在するかどうか。存在しない場合は、新しい配列に挿入されます。
インタビュアー: es6 のアロー機能について教えてください。
インタビュアー: JS 変数のプロモーションについて話しましょうか?
,## になることを意味します #コードの先頭に昇格します。変数の昇格は Var キーワードを使用して変数が宣言されていることが前提であり、変数を昇格させる場合は宣言のみが昇格され、代入は昇格されず、同時に関数の宣言の昇格が優先されます。変数の昇格について。変数の昇格の結果、変数が初期化される前に変数にアクセスできるようになり、未定義が返されます。関数は、関数が宣言される前に呼び出すことができます。 let および const を使用して宣言された変数は作成およびプロモートされ、一時的なデッド ゾーンが形成されます。初期化前に let および const によって作成された変数にアクセスすると、エラーが発生します。 [推奨学習:
JavaScript 上級チュートリアル]
以上が高頻度の知識ポイントを習得するために、これらのフロントエンドの面接の質問を見てください (7)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
