「シニアフロントエンドインタビュー」手書きのJavaScriptコードは無敵攻略です

転送： https://blog.csdn.net/sinat_17775997/article/details/88902756

手書きナビゲーションパス

1.達成するために`new`オペレータを

出典：英語で「JavaScriptを知りません」

newオペレータは、これらのことを実行します。

これは、新しいオブジェクトを作成します。
これは、実行されます[[Prototype]]（つまり__proto__）のリンクを。
それは作るthis新しく作成されたオブジェクトにポイントを。。
new作成されたすべてのオブジェクト最終的にされる[[Prototype]]の機能にリンクされprototypeたオブジェクト。
関数はオブジェクトタイプ返さない場合Object（付属のFunctoin, Array, Date, RegExg, Error）、その後、new関数呼び出し式は、オブジェクト参照を返します。

function New(func) {
var res = {};
if (func.prototype !== null) {
res.__proto__ = func.prototype;
}
var ret = func.apply(res, Array.prototype.slice.call(arguments, 1));
if ((typeof ret === "object" || typeof ret === "function") && ret !== null) {
return ret;
}
return res;
}
var obj = New(A, 1, 2);
// equals to
var obj = new A(1, 2);
复制代码

2.実装`JSON.stringify`

JSON.stringify(value[, replacer [, space]])：

Boolean | Number| String タイプは自動的に対応する元の値に変換されます。
undefined、任意の機能はsymbol、無視されるか、に変換される（非配列プロパティは、オブジェクトの値がときに表示される） null（配列で起こります）。
非可算のプロパティは無視されます
オブジェクトのプロパティの値は、いくつかの間接的な方法で、オブジェクト自体に戻って参照する場合、それは循環参照され、プロパティは無視されます。

function jsonStringify(obj) {
let type = typeof obj;
if (type !== "object" || type === null) {
if (/string|undefined|function/.test(type)) {
obj = '"' + obj + '"';
}
return String(obj);
} else {
let json = []
arr = (obj && obj.constructor === Array);
for (let k in obj) {
let v = obj[k];
let type = typeof v;
if (/string|undefined|function/.test(type)) {
v = '"' + v + '"';
} else if (type === "object") {
v = jsonStringify(v);
}
json.push((arr ? "" : '"' + k + '":') + String(v));
}
return (arr ? "[" : "{") + String(json) + (arr ? "]" : "}")
}
}
jsonStringify({x : 5}) // "{"x":5}"
jsonStringify([1, "false", false]) // "[1,"false",false]"
jsonStringify({b: undefined}) // "{"b":"undefined"}"
复制代码

3.達成するために`JSON.parse`

JSON.parse(text[, reviver])

値またはオブジェクトのJavaScriptのJSON文字列を解析するために、文字列の構成で説明。オブジェクトの変換（演算）を実行するためのオプションリバイバー関数が戻る前に得られます。

3.1最初：直接呼び出しはeval

function jsonParse(opt) {
return eval('(' + opt + ')');
}
jsonParse(jsonStringify({x : 5}))
// Object { x: 5}
jsonParse(jsonStringify([1, "false", false]))
// [1, "false", falsr]
jsonParse(jsonStringify({b: undefined}))
// Object { b: "undefined"}
复制代码

不必要に使用しないでください eval、のeval（）関数は、彼が人々を運ぶために権利を持っている危険なコードの実行です。あなたは（）のコードの文字列が悪意のある関係者（悪意のある人物）コントロールチェンジで実行されますevalを使用する場合は、ユーザーのコンピュータ上で悪質なコードを実行するために、あなたのページ/拡張右手続きに終わる可能性の下で。

これは、JSコード、XSSの脆弱性を実行します。

あなたがこの方法を覚えておきたい場合は、パラメータのJSONを確認するために行う必要があります。

var rx_one = /^[\],:{}\s]*$/;
var rx_two = /\\(?:["\\\/bfnrt]|u[0-9a-fA-F]{4})/g;
var rx_three = /"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g;
var rx_four = /(?:^|:|,)(?:\s*\[)+/g;
if (
rx_one.test(
json
.replace(rx_two, "@")
.replace(rx_three, "]")
.replace(rx_four, "")
)
) {
var obj = eval("(" +json + ")");
}
复制代码

3.2秒：機能

ソースの新しい機能を持つ魔法のeval（）を（）

コア：同じ文字列パラメータ特性。Functioneval

var func = new Function(arg1, arg2, ..., functionBody);

実際には、JSONの変換は、あなただけそうする必要があります。

var jsonStr = '{ "age": 20, "name": "jack" }'
var json = (new Function('return ' + jsonStr))();
复制代码

eval そして、 Function jsのコードでは、動的な役割をコンパイルしているが、実際のプログラミングでの使用は推奨されません。

ここでは、2つが十分で書いて、面接指向プログラミングです。再帰と関連原則面倒な状態マシンを含む、第三、第四として、具体的には見ることができます。

「三つの方法をJSON.parse」

4. 1を実装します`call`か、 `apply`

call構文：

fun.call(thisArg, arg1, arg2, ...)、関数呼び出し、これは別個に設けられ、指定された値とパラメータ（パラメータリスト）を有します。

apply構文：

func.apply(thisArg, [argsArray])、関数呼び出し、ならびにアレイ（またはオブジェクトの類似配列）提供されるパラメータ。

4.1 `Function.call`ルーチンを実現することにより

callコア：

機能設定オブジェクトのプロパティ
＆この機能を実行削除
指定されたthis特定のパラメータの受け渡しの機能を機能し、実行します
デフォルトのウィンドウを指し、パラメータを渡さない場合

なぜそれを達成するために日常的であると言いますか？本当のインタビューなので、インタビュアーは、あなたは徐々にあなたは、彼の日常に対抗することができ、簡単なバージョンを書くために、この時間を深い配慮を手放すのお気に入り：

シンプルバージョン4.1.1

var foo = {
value: 1,
bar: function() {
console.log(this.value)
}
}
foo.bar() // 1
复制代码

パーフェクトバージョン4.1.2

インタビュアーは、さらに質問があるか、この時点で考えることをふりをすることができた場合。次に、以下のバージョンを記述します。

Function.prototype.call2 = function(content = window) {
content.fn = this;
let args = [...arguments].slice(1);
let result = content.fn(...args);
delect content.fn;
return result;
}
var foo = {
value: 1
}
function bar(name, age) {
console.log(name)
console.log(age)
console.log(this.value);
}
bar.call2(foo, 'black', '18') // black 18 1
复制代码

4.2 `Function.apply`アナログ実現

apply()実現とcall()似ているが、異なる引数。直接バーコードに添付：

Function.prototype.apply2 = function(context = window) {
context.fn = this
let result;
// 判断是否有第二个参数
if(arguments[1]) {
result = context.fn(...arguments[1])
} else {
result = context.fn()
}
delete context.fn()
return result
}
复制代码

5.達成するために`Function.bind()`

bind()方法：

これは、新しい関数を作成します。この新しい関数が呼び出されると、この最初のパラメータのバインドは（）それが実行され、シーケンスパラメータの後に前の引数で、引数として渡されますよう。（MDNから）

また、bind実装はインスタンス化プロトタイプチェーンへの影響を考慮する必要があります。

Function.prototype.bind2 = function(content) {
if(typeof this != "function") {
throw Error("not a function")
}
// 若没问参数类型则从这开始写
let fn = this;
let args = [...arguments].slice(1);
let resFn = function() {
return fn.apply(this instanceof resFn ? this : content,args.concat(...arguments) )
}
function tmp() {}
tmp.prototype = this.prototype;
resFn.prototype = new tmp();
return resFn;
}
复制代码

6.連続を実装

組み合わせ寄生継承

一般的にはそうでない場合は継承が最初のインスタンスで二回親クラスのコンストラクタを呼び出すか、他の欠点を持ってしまうため、これを書くことをお勧め。

コアの実装は次のとおりです。で F 、空のコンストラクタの実装置き換えるために Parent 、このコンストラクタを。

function Parent(name) {
this.name = name;
}
Parent.prototype.sayName = function() {
console.log('parent name:', this.name);
}
function Child(name, parentName) {
Parent.call(this, parentName);
this.name = name;
}
function create(proto) {
function F(){}
F.prototype = proto;
return new F();
}
Child.prototype = create(Parent.prototype);
Child.prototype.sayName = function() {
console.log('child name:', this.name);
}
Child.prototype.constructor = Child;
var parent = new Parent('father');
parent.sayName(); // parent name: father
var child = new Child('son', 'father');
复制代码

7. JS関数カリー化を達成するために

何をカリー化されましたか？

コンピュータサイエンスでは、カリー（カリー化）は、複数のパラメータを受信する機能は、単一のパラメータ（第関数の最初のパラメータ）を受け付ける関数に変換され、新しい機能が残りの引数を返す受け入れ、結果を返します技術。

役割の主な機能とカリー化機能は、パラメータの再利用で、初期および遅延実行を返します。

7.1 通用版

function curry() {
var args = Array.prototype.slice.call(arguments);
var fn = function() {
var newArgs = args.concat(Array.prototype.slice.call(arguments));
return multi.apply(this, newArgs);
}
fn.toString = function() {
return args.reduce(function(a, b) {
return a * b;
})
}
return fn;
}
function multiFn(a, b, c) {
return a * b * c;
}
var multi = curry(multiFn);
multi(2)(3)(4);
multi(2,3,4);
multi(2)(3,4);
multi(2,3)(4);
复制代码

7.2 `ES6`サンの言葉遣い

const curry = (fn, arr = []) => (...args) => (
arg => arg.length === fn.length
? fn(...arg)
: curry(fn, arg)
)([...arr, ...args])
let curryTest=curry((a,b,c,d)=>a+b+c+d)
curryTest(1,2,3)(4) //返回10
curryTest(1,2)(4)(3) //返回10
curryTest(1,2)(3,4) //返回10
复制代码

8.手書き`Promise`（シニア義務）

のは、上で行こうPromise/A+仕様：

三州pending| fulfilled(resolved) | rejected
するとpending、時間の状態、それがに転送することができますfulfilled(resolved)またはrejected状態
ときにおけるfulfilled(resolved)状態またはrejectedときの状態、変数ではありません。

が存在する必要がありthen、非同期実行する方法thenの2つのパラメータを取り、約束を返す必要があります。

// onFulfilled 用来接收promise成功的值
// onRejected 用来接收promise失败的原因
promise1=promise.then(onFulfilled, onRejected);
复制代码

8.1 `Promise`のフローチャート

下確認するPromise使用方法：

var promise = new Promise((resolve,reject) => {
if (操作成功) {
resolve(value)
} else {
reject(error)
}
})
promise.then(function (value) {
// success
},function (value) {
// failure
})
复制代码

インタビュー十分バージョン8.2

出典：約束/ A +の仕様の約束と完全に矛盾しを達成

function myPromise(constructor){
let self=this;
self.status="pending" //定义状态改变前的初始状态
self.value=undefined;//定义状态为resolved的时候的状态
self.reason=undefined;//定义状态为rejected的时候的状态
function resolve(value){
//两个==="pending"，保证了状态的改变是不可逆的
if(self.status==="pending"){
self.value=value;
self.status="resolved";
}
}
function reject(reason){
//两个==="pending"，保证了状态的改变是不可逆的
if(self.status==="pending"){
self.reason=reason;
self.status="rejected";
}
}
//捕获构造异常
try{
constructor(resolve,reject);
}catch(e){
reject(e);
}
}
复制代码

同時に、それは必要であるmyPromiseプロトタイプの定義上の連鎖の呼び出しthen方法：

myPromise.prototype.then=function(onFullfilled,onRejected){
let self=this;
switch(self.status){
case "resolved":
onFullfilled(self.value);
break;
case "rejected":
onRejected(self.reason);
break;
default:
}
}
复制代码

测试一下：

var p=new myPromise(function(resolve,reject){resolve(1)});
p.then(function(x){console.log(x)})
//输出1
复制代码

8.3 大厂专供版

直接贴出来吧，这个版本还算好理解

const PENDING = "pending";
const FULFILLED = "fulfilled";
const REJECTED = "rejected";
function Promise(excutor) {
let that = this; // 缓存当前promise实例对象
that.status = PENDING; // 初始状态
that.value = undefined; // fulfilled状态时返回的信息
that.reason = undefined; // rejected状态时拒绝的原因
that.onFulfilledCallbacks = []; // 存储fulfilled状态对应的onFulfilled函数
that.onRejectedCallbacks = []; // 存储rejected状态对应的onRejected函数
function resolve(value) { // value成功态时接收的终值
if(value instanceof Promise) {
return value.then(resolve, reject);
}
// 实践中要确保 onFulfilled 和 onRejected 方法异步执行，且应该在 then 方法被调用的那一轮事件循环之后的新执行栈中执行。
setTimeout(() => {
// 调用resolve 回调对应onFulfilled函数
if (that.status === PENDING) {
// 只能由pending状态 => fulfilled状态 (避免调用多次resolve reject)
that.status = FULFILLED;
that.value = value;
that.onFulfilledCallbacks.forEach(cb => cb(that.value));
}
});
}
function reject(reason) { // reason失败态时接收的拒因
setTimeout(() => {
// 调用reject 回调对应onRejected函数
if (that.status === PENDING) {
// 只能由pending状态 => rejected状态 (避免调用多次resolve reject)
that.status = REJECTED;
that.reason = reason;
that.onRejectedCallbacks.forEach(cb => cb(that.reason));
}
});
}
// 捕获在excutor执行器中抛出的异常
// new Promise((resolve, reject) => {
// throw new Error('error in excutor')
// })
try {
excutor(resolve, reject);
} catch (e) {
reject(e);
}
}
Promise.prototype.then = function(onFulfilled, onRejected) {
const that = this;
let newPromise;
// 处理参数默认值保证参数后续能够继续执行
onFulfilled =
typeof onFulfilled === "function" ? onFulfilled : value => value;
onRejected =
typeof onRejected === "function" ? onRejected : reason => {
throw reason;
};
if (that.status === FULFILLED) { // 成功态
return newPromise = new Promise((resolve, reject) => {
setTimeout(() => {
try{
let x = onFulfilled(that.value);
resolvePromise(newPromise, x, resolve, reject); // 新的promise resolve 上一个onFulfilled的返回值
} catch(e) {
reject(e); // 捕获前面onFulfilled中抛出的异常 then(onFulfilled, onRejected);
}
});
})
}
if (that.status === REJECTED) { // 失败态
return newPromise = new Promise((resolve, reject) => {
setTimeout(() => {
try {
let x = onRejected(that.reason);
resolvePromise(newPromise, x, resolve, reject);
} catch(e) {
reject(e);
}
});
});
}
if (that.status === PENDING) { // 等待态
// 当异步调用resolve/rejected时将onFulfilled/onRejected收集暂存到集合中
return newPromise = new Promise((resolve, reject) => {
that.onFulfilledCallbacks.push((value) => {
try {
let x = onFulfilled(value);
resolvePromise(newPromise, x, resolve, reject);
} catch(e) {
reject(e);
}
});
that.onRejectedCallbacks.push((reason) => {
try {
let x = onRejected(reason);
resolvePromise(newPromise, x, resolve, reject);
} catch(e) {
reject(e);
}
});
});
}
};
复制代码

emmm，我还是乖乖地写回进阶版吧。

9. 手写防抖(`Debouncing`)和节流(`Throttling`)

scroll 事件本身会触发页面的重新渲染，同时 scroll 事件的 handler 又会被高频度的触发, 因此事件的 handler 内部不应该有复杂操作，例如 DOM 操作就不应该放在事件处理中。针对此类高频度触发事件问题（例如页面 scroll ，屏幕 resize，监听用户输入等），有两种常用的解决方法，防抖和节流。

9.1 防抖(`Debouncing`)实现

典型例子：限制鼠标连击触发。

一个比较好的解释是：

当一次事件发生后，事件处理器要等一定阈值的时间，如果这段时间过去后再也没有事件发生，就处理最后一次发生的事件。假设还差 0.01 秒就到达指定时间，这时又来了一个事件，那么之前的等待作废，需要重新再等待指定时间。

// 防抖动函数
function debounce(fn,wait=50,immediate) {
let timer;
return function() {
if(immediate) {
fn.apply(this,arguments)
}
if(timer) clearTimeout(timer)
timer = setTimeout(()=> {
fn.apply(this,arguments)
},wait)
}
}
复制代码

9.2 节流(`Throttling`)实现

可以理解为事件在一个管道中传输，加上这个节流阀以后，事件的流速就会减慢。实际上这个函数的作用就是如此，它可以将一个函数的调用频率限制在一定阈值内，例如 1s，那么 1s 内这个函数一定不会被调用两次

简单的节流函数:

function throttle(fn, wait) {
let prev = new Date();
return function() {
const args = arguments;
const now = new Date();
if (now - prev > wait) {
fn.apply(this, args);
prev = new Date();
}
}
复制代码

9.3 结合实践

通过第三个参数来切换模式。

const throttle = function(fn, delay, isDebounce) {
let timer
let lastCall = 0
return function (...args) {
if (isDebounce) {
if (timer) clearTimeout(timer)
timer = setTimeout(() => {
fn(...args)
}, delay)
} else {
const now = new Date().getTime()
if (now - lastCall < delay) return
lastCall = now
fn(...args)
}
}
}
复制代码

10. 手写一个JS深拷贝

有个最著名的乞丐版实现，在《你不知道的JavaScript（上）》里也有提及：

10.1 乞丐版

var newObj = JSON.parse( JSON.stringify( someObj ) );
复制代码

10.2 面试够用版

function deepCopy(obj){
//判断是否是简单数据类型，
if(typeof obj == "object"){
//复杂数据类型
var result = obj.constructor == Array ? [] : {};
for(let i in obj){
result[i] = typeof obj[i] == "object" ? deepCopy(obj[i]) : obj[i];
}
}else {
//简单数据类型直接 == 赋值
var result = obj;
}
return result;
}
复制代码

关于深拷贝的讨论天天有，这里就贴两种吧，毕竟我...

11.实现一个`instanceOf`

function instanceOf(left,right) {
let proto = left.__proto__;
let prototype = right.prototype
while(true) {
if(proto === null) return false
if(proto === prototype) return true
proto = proto.__proto__;
}
}
复制代码

作者：前端劝退师
链接：https://juejin.im/post/5c9c3989e51d454e3a3902b6
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。