面接の知識ポイントをjsで整理する

ここにリンクの内容を書いてください1. JavaScript の typeof はどのようなデータ型を返しますか? まず、JavaScript のデータ型はプリミティブ型と参照型の 2 つのカテゴリに分類されます。これが皆さんの役に立つことを願っています。

プリミティブ型: null、未定義、数値、文字列、ブール型
参照型: オブジェクト、シンボル (ES6)
(プリミティブ型と参照型の違いについては、私のブログ投稿の 1 つを参照してください: Js 基本構文、変数、データ型)
その後、typeof 演算子はすべてのプリミティブ型を決定できます。 typeof は、「数値」、「文字列」、「ブール値」、「オブジェクト」、「シンボル」、「関数」、「未定義」の 7 つの値を返します。

2. 以下の演算結果を書いてください

alert(typeof null); //object 
alert(typeof undefined);//undefined 
alert(typeof NaN);//number 
alert(NaN == undefined);//false 
alert(NaN == NaN);//false 
var str = “123abc”; 
alert(typeof str++); 
alert(str);//string

3. instanceof演算子があるのはなぜですか?

typeof はオペランドの前に置かれる単項演算であり、オペランドは任意の型にすることができます。 typeof 演算子を使用する場合、参照型を使用して値を格納すると問題が発生します。typeof 演算子は、参照されるオブジェクトの型に関係なく「object」を返します。 Array や Null などの特殊なオブジェクトの場合、typeof を使用すると常に object が返されます。これが typeof の制限です。

instanceof は、変数がオブジェクト、

のインスタンスであるかどうかを判断するために使用されます。例: <br/> var a=新しい配列(); alert(配列のインスタンス)は true を返します <br/> それと同時に、<br/> alert(オブジェクトのインスタンス) も true を返します;<br/>

別の例:

関数テスト(){}; var a=新しいテスト(); さらに、より重要な点は、instanceof を継承関係で使用して、インスタンスがその親の型に属するかどうかを判断できることです。例: <br/><br/>

function Aoo(){} 
function Foo(){} 
Foo.prototype = new Aoo();//JavaScript 原型继承var foo = new Foo(); 
console.log(foo instanceof Foo)//true console.log(foo instanceof Aoo)//true

<br/> 上記のコードは、1 レベルの継承関係で親クラスを決定します。複数レベルの継承関係では、instanceof 演算子も適用できます。

console.log(Object instanceof Object);//true console.log(Function instanceof Function);//true console.log(Number instanceof Number);//false console.log(String instanceof String);//false console.log(Function instanceof Object);//true console.log(Foo instanceof Function);//true console.log(Foo instanceof Foo);//false

上記のコードを読んでまた混乱しませんか?オブジェクトと関数のinstanceof自体はtrueに等しいのに、他のクラスのinstanceof自体はtrueに等しくないのはなぜですか?どのように説明すればよいでしょうか？ instanceof の謎を根本的に理解するには、次の 2 つの側面から始める必要があります:

1. この演算子が言語仕様でどのように定義されているか。 2. JavaScript プロトタイプの継承メカニズム。 JavaScriptのinstanceof演算子のコード:

function instance_of(L, R) {//L 表示左表达式，R 表示右表达式
 var O = R.prototype;// 取 R 的显示原型
 L = L.__proto__;// 取 L 的隐式原型
 while (true) { 
   if (L === null) 
     return false; 
   if (O === L)// 这里重点：当 O 严格等于 L 时，返回 true 
     return true; 
   L = L.__proto__; 
 } 
}

instanceofの複雑な使用法については、次のリンクを参照してください:

JavaScriptのinstanceof演算子の詳細な分析

<br/>3. 少なくとも3つの強制的な型変換と2つの暗黙的な型の例。変換?<br/> <br/>

独自のブログ投稿を参照できます: JS データ型変換

<br/>

強制型変換: 組み込み関数を明示的に呼び出して、ある型の値を別の型に強制的に変換します。強制的な型変換には主に次のものがあります: Boolean、Number、String、parseInt、parseFloat

暗黙的な型変換: 算術演算子を使用する場合、演算子の両側のデータ型は任意です。たとえば、文字列を組み合わせることができます。数字を合計します。異なるデータ型の間で操作を実行できる理由は、JavaScript エンジンが操作を実行する前に暗黙的な型変換を実行するためです。暗黙的な型変換には主に次のものが含まれます: +、–、==、!

1. 5. JavaScript のイベント フロー モデルとは何ですか?

2. イベント フローは、ページからイベントを受け取る順序を記述します。 DOM 構造はツリー構造です。ページ内の要素がイベントをトリガーすると、イベントは最上位のウィンドウ オブジェクトから開始され、パス内の祖先ノードが対応するイベントをトリガーします。現在のノードのイベントがイベント処理関数にバインドされている場合、イベントがターゲット要素に到達し、バインディング関数が実行されると (バインディングがある場合)、イベントは上向きに伝播されます。 window 要素、およびパスの祖先ノードが対応するイベントをトリガーします

イベント フローには 3 つのステージが含まれます:

イベント キャプチャ ステージ ターゲットステージ内

<br/>

イベントバブリングステージ

イベントキャプチャステージ: イベントは最上位オブジェクトによってトリガーされ始め、ターゲット要素まで段階的に下方に伝播します

ターゲットステージ内: onイベントにバインドされた要素 <br/>イベントバブリング段階: イベントは最初に特定の要素によって受信され、その後、不特定の要素まで段階的に上方に伝播されます。

BOM オブジェクトとは何ですか?

<br/>1. ウィンドウ オブジェクトは、JS の最上位オブジェクトです。

2. ドキュメント オブジェクト、ドキュメント オブジェクト、

<br/>3. <br/>

4. ナビゲータ オブジェクト、ブラウザ自体の情報

6. 履歴オブジェクト、ブラウザのアクセス履歴情報

7. AJAX とその基本的な手順について説明してください。

私のブログ投稿を参照してください: Ajax

参考回答:

AJAX の簡単な説明: AJAX は「Asynchronous Javascript And XML」(非同期 JavaScript および XML) の略で、インタラクティブな Web アプリケーションを作成するための Web 開発テクノロジを指します。 AJAX を使用すると、バックグラウンドでサーバーと少量のデータを交換することで、Web ページを非同期に更新できます。これは、ページ全体を再読み込みしなくても、Web ページの一部を更新できることを意味します。

AJAXの基本手順:

ajaxオブジェクトを初期化する <br/>アドレスを接続し、データを準備する <br/>リクエストを送信する <br/>データを受信する(受信中、まだ完了していない) <br/>データの受信が完了する <br/>//ajaxオブジェクトを初期化する <br/>var xhr = new XMLHttpRequest() <br/>; //アドレスを接続してデータを準備する <br/>xhr.open("method", "address"、非同期かどうか) <br/>//データの受信完了によってトリガーされるイベント <br/>xhr.onload =function(){} <br/>//データの送信 <br/> xhr.send();

8. HTTP ステータス メッセージ 200 302 304 403 404 500 は何を意味しますか?

200: リクエストは成功し、リクエストで予期される応答ヘッダーまたはデータ本体がこの応答とともに返されます。 <br/>302: 要求されたリソースは、別の URI からの要求に一時的に応答しました。このようなリダイレクトは一時的なものであるため、クライアントは今後も元のアドレスにリクエストを送信し続ける必要があります。この応答は、Cache-Control または Expires で指定されている場合にのみキャッシュ可能です。 <br/>304: クライアントが条件付き GET リクエストを送信し、そのリクエストが許可されたが、ドキュメントの内容が (最後のアクセス以来、またはリクエストの条件に従って) 変更されていない場合、サーバーはこのステータス コードを返す必要があります。 304 応答にはメッセージ本文を含めてはなりません。そのため、常にメッセージ ヘッダーの後の最初の空行で終了します。 <br/>403: サーバーはリクエストを理解しましたが、実行を拒否しました。 <br/>404: リクエストは失敗しました。リクエストされたリソースがサーバー上に見つかりませんでした。 <br/>500: サーバーで予期しない状況が発生したため、リクエストを完了できませんでした。一般に、この問題はサーバー側のソース コードにエラーがある場合に発生します。

9. 同期と非同期の違いは何ですか?

まず第一に、同期と非同期はブロッキングと非ブロッキングとは何の関係もありません。同期と非同期は主に、物事が完了した後にどのように処理するか、またはメッセージ通信メカニズムに焦点を当てます。

同期と非同期は依頼先向け、依頼先が処理結果を通知する方法と言えます。

同期の場合、メッセージ ハンドラーはメッセージがトリガーされるのを待ちます。<br/>非同期の場合、トリガー メカニズムはメッセージ ハンドラーに、主にリクエスターに通知します。

ブロッキング: リクエストを作成し、結果が返されるのを待ってから、その後の処理を実行します。

ノンブロッキング: 結果が返されるのを待たずにリクエストを作成し、その後の処理を続行できます。 10. GET と POST の違い、POST をいつ使用するか? <br/><br/>

GET: 通常、URL を使用してパラメータを渡すために使用されます。ブラウザにはアドレス バーの長さに制限があるため、同時に get メソッドを使用して送信される情報の量にも制限があります。ブラウザは、アドレスの背後にあるデータを含む、リクエスト アドレスに関する情報を記録します（履歴、キャッシュ）。 get はプレーン形式 (URL エンコード形式) でのみデータを送信できます。

POST: 通常、サーバーにデータを送信するために使用されます。理論的には、ブラウザーはアドレスをキャッシュして記録しますが、ポストで送信されたデータは記録しません。 post は、プレーン テキスト、URL エンコード形式、バイナリ形式の文字列をさまざまな形式で送信できます。

次の状況で POST リクエストを使用してください:

送信のリクエスト (セマンティクスと同様、get はリクエストを意味し、post は送信を意味します);

プライベート データ (ユーザー名、パスワード) の送信 (ブラウザのキャッシュの記録特性のため);サーバーへの大量のデータ (データ サイズ制限の違い)

11. AJAX はブラウザーの戻るボタンをサポートしていません。

2. セキュリティの問題 AJAX はサーバーとのやり取りの詳細を公開します。 <br/>3. 検索エンジンのサポートは比較的弱いです。 JS スクリプトは実行されませんが、Web ページのソース コードのみが操作されます。<br/>4. クロスドメイン リクエストには特定の制限があります。解決策: jsonp; <br/>

1. 新しいオブジェクトを作成します。3. 関数内のコンテキスト (スコープ) オブジェクトを実行します。コードを作成し、これを通じて新しいオブジェクトに属性またはメソッドを追加します。

13. null と未定義の違いは何ですか? <br/><br/><br/>null: null は null 値を意味し、数値に変換すると 0 になります。

未定義: unknown は「欠損値」を意味し、ここに値があるはずですが、まだ定義されていないことを意味します。 変数が宣言されているが、値が割り当てられていない場合、それは未定義と等しくなります。

オブジェクトにはプロパティが割り当てられておらず、このプロパティの値は未定義です。

関数が値を返さない場合は、デフォルトで未定義を返します。 <br/><br/>詳細については、私のブログ投稿を参照してください: JS はデータ型、null と未定義の違いを決定しますか? <br/>

14. JavaScript プロトタイプ、プロトタイプ チェーンの特徴は何ですか?スコープチェーン?

作用域链的理解： <br/> 当执行一段JavaScript代码（全局代码或函数）时，JavaScript引擎会创建为其创建一个作用域又称为执行上下文（Execution Context），在页面加载后会首先创建一个全局的作用域，然后每执行一个函数，会建立一个对应的作用域，从而形成了一条作用域链。每个作用域都有一条对应的作用域链，链头是全局作用域，链尾是当前函数作用域。 <br/> 作用域链的作用是用于解析标识符，当函数被创建时（不是执行），会将this、arguments、命名参数和该函数中的所有局部变量添加到该当前作用域中，当JavaScript需要查找变量X的时候（这个过程称为变量解析），它首先会从作用域链中的链尾也就是当前作用域进行查找是否有X属性，如果没有找到就顺着作用域链继续查找，直到查找到链头，也就是全局作用域链，仍未找到该变量的话，就认为这段代码的作用域链上不存在x变量，并抛出一个引用错误（ReferenceError）的异常。

JavaScript 原型： 每创建一个函数，函数上都有一个属性为 prototype，它的值是一个对象。 这个对象的作用在于当使用函数创建实例的时候，那么这些实例都会共享原型上的属性和方法。

原型链： 在 JavaScript 中，每个对象都有一个指向它的原型（prototype）对象的内部链接（proto）。这个原型对象又有自己的原型，直到某个对象的原型为 null 为止（也就是不再有原型指向）。这种一级一级的链结构就称为原型链（prototype chain）。 当查找一个对象的属性时，JavaScript 会向上遍历原型链，直到找到给定名称的属性为止;到查找到达原型链的顶部（Object.prototype），仍然没有找到指定的属性，就会返回 undefined。

十五、JavaScript代理 <br/>当我们需要对很多元素添加事件的时候，可以通过将事件添加到它们的父节点而将事件委托给父节点来触发处理函数。

比如我们需要向一个ul中动态添加很多个li，需要遍历li逐个添加点击事件

<ul id=&#39;list&#39;></ul> var count = 100; var ulList = document.getElementById("list"); //动态构建节点
 for(var i = count;i--;){  var liDom = document.createElement(&#39;li&#39;);
  ulList.appendChild(liDom);
 } //绑定点击事件
 var liNode = ulList.getElementByTagName("li"); for(var i=0, l = liNodes.length; i < l; i++){
  liNode[i].onClick = function(){
   //li点击事件
  }
 }

众所周知，DOM操作是十分消耗性能的。所以重复的事件绑定简直是性能杀手。而事件代理的核心思想，就是通过尽量少的绑定，去监听尽量多的事件。如何做呢？答案是利用事件冒泡机制,对其父节点ul进行事件绑定（Event Bubble),然后通过event.target来判断是哪个节点触发的事件，从而减少很多EventHandler的绑定。

“` 
var count = 100; 
var ulList = document.getElementById(“list”); 
//动态构建节点 
for(var i = count;i–;){ 

 var liDom = document.createElement(‘li’); 

 ulList.appendChild(liDom); 
} 
//绑定点击事件 
var liNode = ulList.getElementByTagName(“li”); 
liNode.onClick = function(e){ 

 if(e.target && e.target.nodeName.toUpperCase == “LI”) { 

  // li点击事件 

 } 
}

十六、如何理解闭包？
闭包

十七、call和apply的作用是什么？区别是什么？
call和apply的功能基本相同，都是实现继承或者转换对象指针的作用；
唯一不通的是前者参数是罗列出来的，后者是存到数组中的；
call或apply功能就是实现继承的；与面向对象的继承extends功能相似；但写法不同；
语法：
.call(对象[,参数1，参数2,….]);//此地参数是指的是对象的参数，非方法的参数；
.apply(对象,参数数组)//参数数组的形式:[参数1，参数2,……]

十八、JavaScript 如何实现继承？

(1)构造继承 (2)原型继承 (3)实例继承 (4)拷贝继承
 //原型prototype机制或apply和call方法去实现较简单，建议使用构造函数与原型混合方式。 function Parent()
 {  
     this.name = ‘song’; } function Child() {
     this.age = 28; } Child.prototype = new Parent(); //通过原型,继承了Parent var demo = new Child(); alert(demo.age); alert(demo.name); //得到被继承的属性

十九、JavaScript 有哪几种创建对象的方式？

JavaScript でオブジェクトを作成するということは、組み込みオブジェクトやさまざまなカスタム オブジェクトを使用することを意味します。もちろん、JSON を使用することもできますが、それらを記述する方法は数多くあり、それらを混合することもできます。 //
(1) オブジェクトリテラルメソッド
person={名:「マーク」、姓:「ユン」、年齢:25、目の色:「黒」
(2) 関数を使用してパラメータなしのコンストラクター関数 Person(){} var person = new Person() をシミュレートします。 //関数を定義します。新しい「インスタンス化」を使用すると、関数はクラス person.name =
とみなすことができます。 "Xiaosong"; person.age = "23"; person.work = function() {
alert(“Hello ” + person.name); } person.work(); (3) 関数を使用してパラメーター コンストラクターをシミュレートします (コンストラクターのコンテキスト属性を定義するには this キーワードを使用します)
人(名前、年齢、趣味) {
This.name = 名前; // このスコープ: 現在のオブジェクト
This.age = 年齢
This.work = 仕事
This.info = function() {
alert("私の名前" + this.name + "今年" + this.age + "year old" + this.work); } } var Xiaosong = new Person("WooKong",23,"Programmer"); //オブジェクト Xiaosong.info() を呼び出して、ファクトリ メソッドを使用して作成します。 (組み込みオブジェクト) var jsCreater = 新しい
Object(); jsCreater.name = “ブレンダン・アイヒ” //JavaScript の発明者
; jsCreater.work = “JavaScript” = jsCreater.info = function() {
alert("私は "+this.work+""+this.name); } jsCreater.info(); (5) プロトタイプ メソッドを使用して関数 Standard() を作成します{} Standard.prototype.name =
"ECMAScript"; Standard.prototype.event = function() {
alert(this.name+"はスクリプト言語の標準仕様です"); } var jiaoben = new Standard(); (6) 混合メソッドを使用して関数 iPhone(name,event) を作成します This.name = 名前; This.event = イベント } iPhone.prototype.sell = function() {
alert("私は "+this.name+"、私は iPhone5s "+this.event+" ~ ははは!"); } var SE = new iPhone("iPhone SE","正規整備品マシン"); );



20. JavaScriptでオブジェクト検索を行う際にプロトタイプを検索しない関数がありますが、これはどの関数ですか？

hasOwnProperty // JavaScript の hasOwnProperty function メソッドは、オブジェクトに指定された名前のプロパティがあるかどうかを示すブール値を返します。このメソッドは、プロパティがオブジェクトのプロトタイプ チェーン内にあるかどうかを確認できません。プロパティはオブジェクト自体のメンバーである必要があります。

//

使用法: object.hasOwnProperty(proName) ここで、パラメータ object は必須オプション、つまりオブジェクトのインスタンスです。 proName は必須であり、属性名の文字列値です。

// オブジェクトに指定された名前のプロパティがある場合、JavaScript の hasOwnProperty 関数メソッドは true を返し、そうでない場合は
を返します。 間違い。



21. Ajax とは何ですか? Ajax を作成するにはどうすればよいですか?

ajaxの正式名称：Asynchronous Javascript And XML、非同期送信+js+xml。 いわゆる非同期とは、簡単に説明すると、サーバーにリクエストを送信するときに結果を待つ必要はなく、結果が得られるとそれ以降の処理を同時に行うことができます。同時に、ページ全体の更新が行われないため、ユーザー エクスペリエンスが向上します。

(1) XMLHttpRequest オブジェクトの作成、つまり非同期呼び出しオブジェクトの作成

(2) 新しいHTTPリクエストを作成し、HTTPリクエストのメソッド、URL、検証情報を指定します

(3) HTTPリクエストのステータス変化に応答する関数を設定します
(4) 非同期呼び出しで返されたデータを取得します
(5)JavaScriptとDOMを使用して部分更新を実装します

以上が面接の知識ポイントをjsで整理するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。