JavaScriptのネイティブ知識

1.基本的な種類があるのですか?オブジェクトがnullの場合?基本データ型と複雑なデータ型の違いは何ですか?保存

6つの基本的なタイプ、すなわち、未定義、ヌル、ブール値、文字列、あり数字、記号(ES6 新しいは)。
typeof演算ヌル値は、オブジェクトではなく、NULLオブジェクトが、基本データ型を返されません。
基本データ型は、値が格納され、スタックメモリに格納されています。
ヒープメモリアドレスに格納されている複合データ型の値(スタックの値のポイント)がスタックメモリに記憶されています。私たちは、一つのオブジェクトの変更、他のオブジェクトが変更されたときに、アドレスをコピーし、同じメモリ空間にポイントを別の変数に割り当てられたオブジェクトを置くとき。

決意の2、三種類

typeof演算:元の値は、例えば、判定することができますstring number boolean symbol undefinedオブジェクトへの裁判官をゼロにします(参照前の記事では、それはjavascriptのバグと言いました)。等アレイ、日付、などの基準値の種類を判断できないことがタイプオブジェクトは、それが単独で機能を決定することができると判断されるであろう。
instanceof例えば、A instanceof B層はプロトタイプチェーンBに目を通す、これまでにnullを発見されました。元の型の値を決定していない正しくinstanceofは注意してください、あなたは試すことができconsole.log(1 instanceof Number)
実装コードのinstanceof:

// L instanceof R
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__;  //继续向上一层原型链查找
    } 
}


Object.prototype.toString     任何类型都能判断
function type(object){
    var toString = Object.prototype.toString.call(object);
    return /\s+(\S+)]/.exec(toString)[1].toLowerCase();
}

var x = [];
console.log(type(x));

3、浅いと深いコピーのコピー

シャローコピー:
キーをループ用
Object.assign
ES6オブジェクト展開事業者のために...
ディープコピーが
再帰的にトラバース(DFS、環状問題、境界処理、https://github.com/Advanced-Frontend/Daily-Interview-Question/非行/ 10
JSON.parse(JSON.stringify())
この方法は、いくつかの制限を有しているが未定義無視し、シンボル無視、関数はシリアライズすることができない、円形の参照オブジェクトを解決しません。しかし、深いコピーの問題のほとんどを解決することができます。

4、のために...のために... forEachのマップの差

for...ofのみトラバース「イテレータオブジェクトのオブジェクトは...イテレータサイクル呼び出しの、そのような配列として天然イテレータオブジェクトの歩行者生成方法Symbol.iterator特性に展開されなければならないためのインタフェースで提供される場合、発電機は、文字列など、オブジェクト。
for...inオブジェクト自体を横断または列挙属性継承することができる
forEachだけ循環をブロックしない反復
map配列を介して
のforEachとmapアレイプロトタイピングであるが

図4に示すように、アレイとアレイベースの間の差

アレイは、長さ特性を有する、のみ正常オブジェクトクラスであり、そのようなのようなポッププッシュとして全くアレイプロトタイピング、
アレイは、アレイのインスタンスコンストラクタはありません。
クラスの一般的な配列は次のとおりです。パラメータ関数の引数、(例えば、document.querySelectorAll結果のリストによる)DOMオブジェクトリスト、jQueryのオブジェクト(のような$(「div要素」))
の変換方法は以下のとおりです。

//第一种方法
Array.prototype.slice.call(arrayLike, start);
//第二种方法
[...arrayLike];
//第三种方法:
Array.from(arrayLike);

5、==及び===差は
==、最初の暗黙的な変換とは、比較するであろうが、変換ステップの後
、第1は、マッチタイプと同じであれば同一の比較値
2、比較辺かどうかnullundefined、リターン場合true
3は、かどうかの両側に決定されます変換する場合、元の値であるnumberを比較します。(ここでは、例えば、bool number string統一に変換されnumber、症例の異なる種類の両側ことに注意)
4が、再びされobject、再び元の値は、今であろうobject周り(元の値に変わり、そして次に比較object、最後に元の値に変換ルールの種類)の必要性を考えます

考えは:[] == ![] [] == []
問題は、[]は何の生の値に変換されることである
ことがうobjectに変換されNumber、デジタルに変換空配列、対応する値をデジタルに0(空の配列に変換される配列が一つだけである場合、対応する値は0でありますデジタルは、その後に変わりnumber、他の例であるその数字NaN
![]に変わり0そう返すtrue [] == 0 true [1] == 1 [2] == 2
[] == []、それはとても異なる参照型、偽のリターンアドレスであるため、両サイド、変換なしタイプの同じタイプの
非常に面白い感じていません

6、クラスのES6とクラスES5の違いは何ですか?

ES6 classすべての定義されたメソッドが列挙されていない内部の、
ES6 class何の可変リフトはありません。
ES6 classサブクラスは、親クラスのコンストラクタを呼び出す必要がありますsuper()ようにのみ、thisオブジェクト、ES5クラスの継承関係が逆転し、最初のサブクラスをthis、その後、親クラスで使用される方法thisで。

7letconstなどvarの違いは何ですか?

let constブロックレベルのスコープはありますが、varスコープなしブロックレベルが存在しない
let const変数が存在しない場合、アップグレードは、デッドゾーンは、一時的、文を繰り返すように許可されていない、持っているvarがあり、可変リフト
let const束縛されることはありませんグローバルスコープ内windowのオブジェクトの下に、そしてvar意志、それがあるためでありますlet const声明は、字句の環境です。

8、実行スタックのコンテキストとJSのスコープチェーンのご理解について話しています。

あなたがコードを実行する最初の時間は、関数の実行コンテキストを生成し、現在の実行スタックスタックを進めます、関数呼び出しが発生するたびに、現在の実行スタックを進め、グローバルな実行コンテキストを作成します。

9、閉鎖

生成関数または関数Bを返し、関数Bは、その後、Bが閉鎖機能と呼ばれ、ローカル変数または関数方法Aを使用し続けることができます。
なぜBの機能は、それの機能ローカル変数を使用することができますか?
通常の機能は、その実行コンテキストの実行を完了した場合は、=オブジェクト変数JSエンジンのクリーンアップ機能、リターンメモリ空間を実行コンテキストスタックをポップ。
関数発生器/ B関数が返す場合閉鎖は、メモリリークが発生しやすくなるように、オブジェクト変数関数は、関数Bの継続的な使用のために、メモリ空間に保持されます。
クロージャの使用シナリオ:
1は、パッケージプライベート変数
2、ブロックレベルのスコープが模倣
3、実装モジュールJS
防振絞りをカリー化を

10、適用および実装をバインド呼び出します

コールの簡単な実装、使用this暗黙的結合の

Function.prototype.call = function (context) {
    /** 如果第一个参数传入的是 null 或者是 undefined, 那么指向this指向 window/global */
    /** 如果第一个参数传入的不是null或者是undefined, 那么必须是一个对象 */
    if (!context) {
        //context为null或者是undefined
        context = typeof window === 'undefined' ? global : window;
    }
    context.fn = this; //this指向的是当前的函数(Function的实例)
    let rest = [...arguments].slice(1);//获取除了this指向对象以外的参数, 空数组slice后返回的仍然是空数组
    let result = context.fn(...rest); //隐式绑定,当前函数的this指向了context.
    delete context.fn;
    return result;
}

//测试代码
var foo = {
    name: 'Selina'
}
var name = 'Chirs';
function bar(job, age) {
    console.log(this.name);
    console.log(job, age);
}
bar.call(foo, 'programmer', 20);
// Selina programmer 20
bar.call(null, 'teacher', 25);
// 浏览器环境: Chirs teacher 25; node 环境: undefined teacher 25

実現を適用し、ちょうどパラメータの配列を受け取り適用

Function.prototype.apply = function (context, rest) {
    if (!context) {
        //context为null或者是undefined时,设置默认值
        context = typeof window === 'undefined' ? global : window;
    }
    context.fn = this;
    let result;
    if(rest === undefined || rest === null) {
        //undefined 或者 是 null 不是 Iterator 对象,不能被 ...
        result = context.fn(rest);
    }else if(typeof rest === 'object') {
        result = context.fn(...rest);
    }
    delete context.fn;
    return result;
}
var foo = {
    name: 'Selina'
}
var name = 'Chirs';
function bar(job, age) {
    console.log(this.name);
    console.log(job, age);
}
bar.apply(foo, ['programmer', 20]);
// Selina programmer 20
bar.apply(null, ['teacher', 25]);
// 浏览器环境: Chirs programmer 20; node 环境: undefined teacher 25

実装のパラメータと戻りバインドスプライス閉鎖

Function.prototype.bind = function (context){
    if(typeof this !== "function"){
        throw new TypeError("not a function");
    }

    var args = [...arguments].slice(1);//参数
    var _this = this;
    var binded = function (){
        args = args.concat([...arguments]);//参数的合并
        return _this.apply(context, args)
    };

    //如果是构造函数,还需要实现prototype的继承
    binded.prototype = Object.create(this.prototype);
    return binded;
}

function test(param1, param2){
    console.log(this.name)
    console.log(param1);
    console.log(param2);
}
var obj = {
    name: 1,
}
var binded = test.bind(obj, 2);
binded(3);

11、どのような新しいものであることは原則ありますか?違いは何ですか新たな方法を通って、文字通りの創造を通じてオブジェクトを作成しますか?

4つのステップ新しい原則、
新:
新しいオブジェクトを作成します。
この新しいオブジェクトは、[[プロトタイプ]]の接続が実行されます。
プロパティとメソッドは、このことにより、参照されるオブジェクトに追加されます。そして、コンストラクタ内のメソッドの実装。
機能は、他のオブジェクトを返さない場合、これはオブジェクトのコンストラクタリターンに新しいオブジェクト、そうでない場合は、この時点を指します。

function new(func) {
    let target = {};
    target.__proto__ = func.prototype;
    let res = func.call(target);
    if (typeof(res) == "object" || typeof(res) == "function") {
        return res;
    }
    return target;
}

リテラルは、オブジェクトを作成し、オブジェクトのコンストラクタ、簡潔で優れたパフォーマンスを呼び出すことはありませんが、
new Object()方法が発見されたときにオブジェクトの上に作成する方法は、基本的にメソッドの呼び出しで、この方法は、プロトチェーンを横断含み、それは必要なメソッド呼び出しを生成しますスタック情報、メソッド呼び出しの終わりでなく、スタックのリリースでは、リテラルの方法と同様に行います。
オブジェクトはオブジェクトリテラルで定義されている場合、それは、Objectコンストラクタを呼び出すことはありません。

12、試作品のご理解について話?

オブジェクトが定義されるたびに、オブジェクトがいくつかの事前定義されたプロパティを含むことになるときにJavaScriptでは、(また、オブジェクトの機能)。ここで、各オブジェクトは、関数のプロトタイプオブジェクトを指す関数プロトタイプの性質を有しています。プロトタイプオブジェクトのプロパティとメソッドを使用する利点は、それがすべてのオブジェクトインスタンスのシェアが含まれていることです。

13、プロトタイプチェーンは何ですか?[解決するためのプロトタイプチェーンが問題でしょうか?]

主な問題を解決するためのプロトタイプチェーンを継承しています。
各オブジェクトは、プロトタイプオブジェクトを有しproto、そのプロトタイプオブジェクトへのポインタ、および属性およびメソッドを継承するだけでなく、プロトタイププロトタイプオブジェクトを有していてもよく、層によって層は、そのように、最終的に点nullObject.proptotype.__proto__点までnull)。この関係は、プロトタイプチェーン(プロトタイプチェーン)と呼ばれ、プロトタイプオブジェクトによってチェーンは、他のオブジェクトに定義されたプロパティおよびメソッドを有することができます。
コンストラクタはParentParent.prototype次のようにPと例との関係である:( p.__proto__ === Parent.prototype


14、prototypeそして__proto__どのような違いがありますか?

prototypeこれは、コンストラクタのプロパティです。
__proto__各インスタンスは、プロパティを持っている、あなたがアクセスできる[[prototype]]プロパティを。
例としては__proto__、そのコンストラクタprototype同じオブジェクトを指します。

function Student(name) {
    this.name = name;
}
Student.prototype.setAge = function(){
    this.age=20;
}
let Jack = new Student('jack');
console.log(Jack.__proto__);
//console.log(Object.getPrototypeOf(Jack));;
console.log(Student.prototype);
console.log(Jack.__proto__ === Student.prototype);//true

ES5で継承を達成するために15、

寄生組み合わせ

16、ES6新機能は何ですか?

添加ブロックレベルのスコープ(LET、CONST)
構文糖クラス(クラス)の定義を提供する
基本的なデータ・タイプ(シンボル)を加え
解体可変割当追加
機能パラメータのデフォルト値を設定することができ、残りの部分が導入されますパラメーター、新しい機能矢印
アレイは、このような方法の/からでIsArray /ように、いくつかのAPIを追加した;実施例アレイエントリ()、キー()と値()メソッドなどを添加
オブジェクトおよび新しい演算子拡張のアレイ
ES6をモジュラーは、(インポート/エクスポート)を加え
ES6は、マップセットデータ構造を追加し、
プロキシ・インスタンスを生成するプロキシコンストラクタでES6ネイティブ
ES6は、発電機(ジェネレータ)とトラバース装置(イテレータ)を添加しました

17、のsetTimeout

私たちは、メインスレッドのタスクの実行時間を保証できないためのsetTimeoutは、時間は、正確ではない
とのrequestAnimationFrame区別を?
requestAnimationFrameの機能は
1、の正確な時間
ごと16.7msワークを加工する機械を想像し、ブラウザを一度16.7msを再描画するために、あなたは10ミリ秒に各マシンにワークを提供する必要がある場合:2、約(コマ落ちフレーム落ち処理、それは)バッテリーとCPUの損失が発生します、しかし、機械が処理するために、原因となる障害物のタスクになります
setTimeoutメソッドで、(ページが非アクティブ状態にあるとき、例えば、ページを切り取って、アニメーションが実行されません)CPUのオーバーヘッドを節約し、3下位互換性
4、滑らかなアニメーションコヒーレンス(同期アニメーションおよびレンダリングUI)

18.なぜ0.1 + 0.2!= 0.3?

小数バイナリ変換
加算モジュロ2つの小数点以下の桁数:整数ビット2によって0.1バイナリに丸めは無限ループされた
システムの変換が発生し、計算ステップの精度は0.1 + 0.2 = 0.3の削除につながる!
精度の問題を解決する方法?
1.デジタル整数に変換
これは比較的単純な最も容易に発生しています

function add(num1, num2) {
 const num1Digits = (num1.toString().split('.')[1] || '').length;
 const num2Digits = (num2.toString().split('.')[1] || '').length;
 const baseNum = Math.pow(10, Math.max(num1Digits, num2Digits));
 return (num1 * baseNum + num2 * baseNum) / baseNum;
}

しかし、この方法では依然として貧困層の多くでサポートされています
。2.三者ライブラリ
Math.js big.js
詳細参照:https://juejin.im/post/5b90e00e6fb9a05cf9080dff

19、JSの非同期開発の歴史

1、コールバック関数
コールバック関数は、いくつかの問題につながることができます:
コールバック地獄

fs.readFile(A, 'utf-8', function(err, data) {  
    fs.readFile(B, 'utf-8', function(err, data) {  
        fs.readFile(C, 'utf-8', function(err, data) {  
            fs.readFile(D, 'utf-8', function(err, data) {  
                //....  
            });  
        });  
    });  
});

維持することは困難でコーディングするエラーのtryキャッチ、鉛得ることができない
2を、約束
の約束は主に、コールバック地獄の問題を解決するためのPromise最初のコミュニティによって提案と実現、ES6がでネイティブ標準言語、統一された用法に書き込まれPromiseたオブジェクト。
その後、我々は見てPromise、まだテキストreadFileの例の上、コールバック地獄の問題を解決する方法。

function read(url) {
    return new Promise((resolve, reject) => {
        fs.readFile(url, 'utf8', (err, data) => {
            if(err) reject(err);
            resolve(data);
        });
    });
}
read(A).then(data => {
    return read(B);
}).then(data => {
    return read(C);
}).then(data => {
    return read(D);
}).catch(reason => {
    console.log(reason);
});

より多くのPromise研究の詳細は、以下を参照してください。https://juejin.im/post/5cc4671c5188252e8a038874ソースコードを理解することを推奨し、面接を慌てる必要はありません。
3は、非同期/待つ
シンタックスシュガーとしてのawaitの非同期/発電機は、最も重要な知識が共同モジュール、手書き問題なしです原理を理解することをお勧めします。
http://es6.ruanyifeng.com/#docs/generator-async

20、webWorkerの理解

HTML5のWebワーカーが基準を完全に制御下で複数のスレッドが、メインスレッドの子スレッドを許可し、DOMを操作することはできませんJS表す提案されている本質はまだシングルスレッドjsの言語であるので、唯一のメインスレッドは、DOMを操作することができます。
簡単な例:

var worker = new Worker('./worker.js'); //创建一个子线程
worker.postMessage('Hello');
worker.onmessage = function (e) {
    console.log(e.data); //Hi
    worker.terminate(); //结束线程
};

//worker.js           
onmessage = function (e) {
    console.log(e.data); //Hello
    postMessage("Hi"); //向主进程发送消息
};

webWorkerの特徴:
1、サブプロセス口
2、およびのpostMessageのonMessageプロセスでは、マスターと通信
3、動作することができないDOM
ようなコンピューティング・アルゴリズムなどの計算のより大きな量の一部に一般的に適用webWorkerアプリケーションシナリオ、時間がかかるシーンを、。

21、ES6モジュールとcommonJS分化

コンパイル時にES6モジュールは、モジュールが決定することができ依存関係、および入力および出力変数。
CommonJSモジュールは、実行時にロードされます。
ES6モジュールが自動的にかかわらず、モジュールのヘッダが書いたかどうかに、厳密モードを採用し"use strict"
ロードを動的に行うことができるザ必要とする、インポートステートメントは、インポートステートメントは、トップレベルの範囲でなければならないことはできません。
ES6モジュールトップthisundefinedCommonJSトップモジュールのthis現在のブロックを指します。
CommonJSモジュール出力値のコピーである、ES6モジュールの出力が基準値です。
CommonJSをキャッシュすることができます。

22、クロスドメイン

。1、JSONP
2、CORS
http://www.ruanyifeng.com/blog/2016/04/cors.html
。3、及びのpostMessageのonMessage window.openまたはのpostMessageにおける
4、クロスドメイン剤nginxの
5のWebSocketない相同戦略影響
6、ノードのミドルウェア(開発ツールで使用VUEエージェント)
以下のようにクロスドメインの動作を達成するノードのミドルウェア:
1.クライアントの要求を受け入れる
2.転送をサーバに要求を。
3.サーバーの応答データを取得します。
4.クライアントへの応答を転送します。
次の三つの方法間はほとんど興味があれば、自分で関連情報にアクセスすることができ、使用されません。
+はwindow.nameインラインフレーム
location.hash +は、インラインフレーム
(必要プライマリドメインと同じ)をdocument.domainを

23は、非同期ロードおよび非同期の延期JS

同じポイントが非同期的にロードされます。
非同期は(JS UIスレッドとレンダリングスレッドが相互に排他的である)レンダリングエンジンを中断し、直ちに実行ダウンロードされ、実行順序を保証するものではありません。
レンダリングが完了してから実行され延期。順序を保証します。

24、双方向結合ProxyObject.definePropertyどのようにこれは長所と短所を比較しません

DefineProperty双方向結合
https://codepen.io/xiaomuzhu/pen/jxBRgj/
https://www.jianshu.com/p/2df6dcddb0d7

25、Function._proto_(getPrototypeOf)とは何ですか?

クロムにより、オブジェクトプロトタイプを取得する__proto__の形態、又はES6を介してObject.getPrototypeOfフォーム。
どのような機能.__ことをproto__?私たちが差別として何をすべきかによって継承され、その関数オブジェクト。

Function.__proto__==Object.prototype //false
Function.__proto__==Function.prototype//true

私たちは、ことがわかったFunctionプロトタイプですFunction
我々は明らかにこの関係をマッピングすることができます。

おすすめ

転載: www.cnblogs.com/chenlei987/p/11220973.html