快到金九银十了，送上 20 道大厂面试题

function _new() {    let target = {}; //创建的新对象    //第一个参数是构造函数    let [constructor, ...args] = [...arguments];    //执行[[原型]]连接;target 是 constructor 的实例    target.__proto__ = constructor.prototype;    //执行构造函数，将属性或方法添加到创建的空对象上    let result = constructor.apply(target, args);    if (result && (typeof (result) == "object" || typeof (result) == "function")) {        //如果构造函数执行的结构返回的是一个对象，那么返回这个对象        return result;    }    //如果构造函数返回的不是一个对象，返回创建的新对象    return target;}

function Super(age) {    this.age = age;}
let instance = new Super('26');console.log(instance.age); //26

function Super(age) {    this.age = age;    let obj = {a: '2'};    return obj;}
let instance = new Super('hello'); console.log(instance);//{ a: '2' }console.log(instance.age); //undefined

function info(){    console.log(this.age);}var person = {    age: 20,    info}var age = 28;var info = person.info;info.call(person);   //20info.apply(person);  //20info.bind(person)(); //20

function info(){    //node环境中:非严格模式 global，严格模式为null    //浏览器环境中:非严格模式 window，严格模式为null    console.log(this);    console.log(this.age);}var person = {    age: 20,    info}var age = 28;var info = person.info;//严格模式抛出错误；//非严格模式，node下输出undefined（因为全局的age不会挂在 global 上）//非严格模式。浏览器环境下输出 28（因为全局的age会挂在 window 上）info.call(null);

function info(){    console.log(this.age);}var person = {    age: 20,    info}var age = 28;person.info(); //20;执行的是隐式绑定

function info(){    console.log(this.age);}var age = 28;//严格模式；抛错//非严格模式，node下输出 undefined（因为全局的age不会挂在 global 上）//非严格模式。浏览器环境下输出 28（因为全局的age会挂在 window 上）//严格模式抛出，因为 this 此时是 undefinedinfo(); 

let obj = {    age: 20,    info: function() {        return () => {            console.log(this.age); //this继承的是外层上下文绑定的this        }    }}
let person = {age: 28};let info = obj.info();info(); //20
let info2 = obj.info.call(person);info2(); //28

let obj = {    name: 'Yvette',    age: 18,    hobbies: ['reading', 'photography']}let obj2 = Object.assign({}, obj);let obj3 = {...obj};
obj.name = 'Jack';obj.hobbies.push('coding');console.log(obj);//{ name: 'Jack', age: 18,hobbies: [ 'reading', 'photography', 'coding' ] }console.log(obj2);//{ name: 'Yvette', age: 18,hobbies: [ 'reading', 'photography', 'coding' ] }console.log(obj3);//{ name: 'Yvette', age: 18,hobbies: [ 'reading', 'photography', 'coding' ] }

function deepClone(obj, hash = new WeakMap()) { //递归拷贝    if (obj instanceof RegExp) return new RegExp(obj);    if (obj instanceof Date) return new Date(obj);    if (obj === null || typeof obj !== 'object') {        //如果不是复杂数据类型，直接返回        return obj;    }    if (hash.has(obj)) {        return hash.get(obj);    }    /**     * 如果obj是数组，那么 obj.constructor 是 [Function: Array]     * 如果obj是对象，那么 obj.constructor 是 [Function: Object]     */    let t = new obj.constructor();    hash.set(obj, t);    for (let key in obj) {        //递归        if (obj.hasOwnProperty(key)) {//是否是自身的属性            t[key] = deepClone(obj[key], hash);        }    }    return t;}

Function.prototype.call = function() {    let [thisArg, ...args] = [...arguments];    if (!thisArg) {        //context为null或者是undefined        thisArg = typeof window === 'undefined' ? global : window;    }    //this的指向的是当前函数 func (func.call)    thisArg.func = this;    //执行函数    let result = thisArg.func(...args);    delete thisArg.func; //thisArg上并没有 func 属性，因此需要移除    return result;}

Function.prototype.apply = function(thisArg, rest) {    let result; //函数返回结果    if (!thisArg) {        //context为null或者是undefined        thisArg = typeof window === 'undefined' ? global : window;    }    //this的指向的是当前函数 func (func.call)    thisArg.func = this;    if(!rest) {        //第二个参数为 null / undefined         result = thisArg.func();    }else {        result = thisArg.func(...rest);    }    delete thisArg.func; //thisArg上并没有 func 属性，因此需要移除    return result;}

const curry = (fn, ...args) =>    args.length < fn.length        //参数长度不足时，重新柯里化该函数，等待接受新参数        ? (...arguments) => curry(fn, ...args, ...arguments)        //参数长度满足时，执行函数        : fn(...args);

function sumFn(a, b, c) {    return a + b + c;}var sum = curry(sumFn);console.log(sum(2)(3)(5));//10console.log(sum(2, 3, 5));//10console.log(sum(2)(3, 5));//10console.log(sum(2, 3)(5));//10

//部署 [Symbol.toPrimitive] / valueOf/ toString 皆可//一次返回1，2，3 即可。let a = {    [Symbol.toPrimitive]: (function(hint) {            let i = 1;            //闭包的特性之一：i 不会被回收            return function() {                return i++;            }    })()}

let i = 1;let a = new Proxy({}, {    i: 1,    get: function () {        return () => this.i++;    }});

let a = [1, 2, 3];a.join = a.shift;

<script src="../XXX.js" defer></script>

let script = document.createElement('script');script.src = 'XXX.js';// 添加到html文件中才会开始下载document.body.append(script);

let xhr = new XMLHttpRequest();xhr.open("get", "js/xxx.js",true);xhr.send();xhr.onreadystatechange = function() {    if (xhr.readyState == 4 && xhr.status == 200) {        eval(xhr.responseText);    }}

function SuperType() {    this.name = 'Yvette';    this.colors = ['pink', 'blue', 'green'];}SuperType.prototype.getName = function () {    return this.name;}function SubType() {    this.age = 22;}SubType.prototype = new SuperType();SubType.prototype.getAge = function() {    return this.age;}SubType.prototype.constructor = SubType;let instance1 = new SubType();instance1.colors.push('yellow');console.log(instance1.getName()); //'Yvette'console.log(instance1.colors);//[ 'pink', 'blue', 'green', 'yellow' ]
let instance2 = new SubType();console.log(instance2.colors);//[ 'pink', 'blue', 'green', 'yellow' ]

function SuperType(name) {    this.name = name;    this.colors = ['pink', 'blue', 'green'];}function SubType(name) {    SuperType.call(this, name);}let instance1 = new SubType('Yvette');instance1.colors.push('yellow');console.log(instance1.colors);//['pink', 'blue', 'green', yellow]
let instance2 = new SubType('Jack');console.log(instance2.colors); //['pink', 'blue', 'green']

function SuperType(name) {    this.name = name;    this.colors = ['pink', 'blue', 'green'];}SuperType.prototype.sayName = function () {    console.log(this.name);}function SuberType(name, age) {    SuperType.call(this, name);    this.age = age;}SuberType.prototype = new SuperType();SuberType.prototype.constructor = SuberType;SuberType.prototype.sayAge = function () {    console.log(this.age);}let instance1 = new SuberType('Yvette', 20);instance1.colors.push('yellow');console.log(instance1.colors); //[ 'pink', 'blue', 'green', 'yellow' ]instance1.sayName(); //Yvette
let instance2 = new SuberType('Jack', 22);console.log(instance2.colors); //[ 'pink', 'blue', 'green' ]instance2.sayName();//Jack

function object(o) {    function F() { }    F.prototype = o;    return new F();}

var person = {    name: 'Yvette',    hobbies: ['reading', 'photography']}var person1 = Object.create(person);person1.name = 'Jack';person1.hobbies.push('coding');var person2 = Object.create(person);person2.name = 'Echo';person2.hobbies.push('running');console.log(person.hobbies);//[ 'reading', 'photography', 'coding', 'running' ]console.log(person1.hobbies);//[ 'reading', 'photography', 'coding', 'running' ]

function createAnother(original) {    var clone = object(original);//通过调用函数创建一个新对象    clone.sayHi = function () {//以某种方式增强这个对象        console.log('hi');    };    return clone;//返回这个对象}var person = {    name: 'Yvette',    hobbies: ['reading', 'photography']};
var person2 = createAnother(person);person2.sayHi(); //hi

function inheritPrototype(subType, superType) {    var prototype = object(superType.prototype); //创建对象    prototype.constructor = subType;//增强对象    subType.prototype = prototype;//指定对象}

function SuperType(name) {    this.name = name;    this.colors = ['pink', 'blue', 'green'];}//...codefunction SuberType(name, age) {    SuperType.call(this, name);    this.age = age;}SuberType.prototype = new SuperType();inheritPrototype(SuberType, SuperType);//...code

display: none;

<div hidden></div>

position:absolute;left: -99999px;

position: relative;left: -99999px;height: 0

margin-left: -99999px;height: 0;

transform: scale(0);height: 0;

transform: translateX(-99999px);height: 0

transform: rotateY(90deg);

height: 0;width: 0;font-size: 0;

height: 0;width: 0;overflow: hidden;

opacity: 0;

visibility: hidden;

position: relative;z-index: -999;

clip-path: polygon(0 0, 0 0, 0 0, 0 0);

<div aria-hidden="true"></div>

const a = 20;const b = {    age: 18,    star: 500}

function fun3() {    console.log('fun3')}
function fun2() {    fun3();}
function fun1() {    fun2();}
fun1();

//全局执行上下文首先入栈ECStack.push(globalContext);
//执行fun1();ECStack.push(<fun1> functionContext);
//fun1中又调用了fun2;ECStack.push(<fun2> functionContext);
//fun2中又调用了fun3;ECStack.push(<fun3> functionContext);
//fun3执行完毕ECStack.pop();
//fun2执行完毕ECStack.pop();
//fun1执行完毕ECStack.pop();
//javascript继续顺序执行下面的代码，但ECStack底部始终有一个 全局上下文（globalContext）;

var a = 10;function fn1() {    var b = 20;    console.log(fn2)    function fn2() {        a = 20    }    return fn2;}fn1()();

function debounce(func, wait, immediate = true) {    let timeout, result;    // 延迟执行函数    const later = (context, args) => setTimeout(() => {        timeout = null;// 倒计时结束        if (!immediate) {            //执行回调            result = func.apply(context, args);            context = args = null;        }    }, wait);    let debounced = function (...params) {        if (!timeout) {            timeout = later(this, params);            if (immediate) {                //立即执行                result = func.apply(this, params);            }        } else {            clearTimeout(timeout);            //函数在每个等待时延的结束被调用            timeout = later(this, params);        }        return result;    }    //提供在外部清空定时器的方法    debounced.cancel = function () {        clearTimeout(timeout);        timeout = null;    };    return debounced;};

function throttle(func, wait, options = {}) {    var timeout, context, args, result;    var previous = 0;    var later = function () {        previous = options.leading === false ? 0 : (Date.now() || new Date().getTime());        timeout = null;        result = func.apply(context, args);        if (!timeout) context = args = null;    };
    var throttled = function () {        var now = Date.now() || new Date().getTime();        if (!previous && options.leading === false) previous = now;        //remaining 为距离下次执行 func 的时间        //remaining > wait，表示客户端系统时间被调整过        var remaining = wait - (now - previous);        context = this;        args = arguments;        //remaining 小于等于0，表示事件触发的间隔时间大于设置的 wait        if (remaining <= 0 || remaining > wait) {            if (timeout) {                //清空定时器                clearTimeout(timeout);                timeout = null;            }            //重置 previous            previous = now;            //执行函数            result = func.apply(context, args);             if (!timeout) context = args = null;        } else if (!timeout && options.trailing !== false) {            timeout = setTimeout(later, remaining);        }        return result;    };
    throttled.cancel = function () {        clearTimeout(timeout);        previous = 0;        timeout = context = args = null;    };
    return throttled;}

function foo() {    var a = 2;    return function fn() {        console.log(a);    }}let func = foo();func(); //输出2

function base() {    let x = 10; //私有变量    return {        getX: function() {            return x;        }    }}let obj = base();console.log(obj.getX()); //10

var a = [];for (var i = 0; i < 10; i++) {    a[i] = (function(j){        return function () {            console.log(j);        }    })(i);}a<a href="">6; // 6</a href="">

function coolModule() {    let name = 'Yvette';    let age = 20;    function sayName() {        console.log(name);    }    function sayAge() {        console.log(age);    }    return {        sayName,        sayAge    }}let info = coolModule();info.sayName(); //'Yvette'

let p = Promise.all([p1, p2, p3]);

Promise.all = function (promises) {    //promises 是可迭代对象，省略参数合法性检查    return new Promise((resolve, reject) => {        //Array.from 将可迭代对象转换成数组        promises = Array.from(promises);        if (promises.length === 0) {            resolve([]);        } else {            let result = [];            let index = 0;            for (let i = 0;  i < promises.length; i++ ) {                //考虑到 i 可能是 thenable 对象也可能是普通值                Promise.resolve(promises[i]).then(data => {                    result[i] = data;                    if (++index === promises.length) {                        //所有的 promises 状态都是 fulfilled，promise.all返回的实例才变成 fulfilled 态                        resolve(result);                    }                }, err => {                    reject(err);                    return;                });            }        }    });}

flattenDeep([1, [2, [3, [4]], 5]]); //[1, 2, 3, 4, 5]

function flattenDeep(arr, deepLength) {    return arr.flat(deepLength);}console.log(flattenDeep([1, [2, [3, [4]], 5]], 3));

function flattenDeep(arr) {    //当然，大多时候我们并不会有这么多层级的嵌套    return arr.flat(Math.pow(2,53) - 1); }console.log(flattenDeep([1, [2, [3, [4]], 5]]));

function flattenDeep(arr){    return arr.reduce((acc, val) => Array.isArray(val) ? acc.concat(flattenDeep(val)) : acc.concat(val), []);}console.log(flattenDeep([1, [2, [3, [4]], 5]]));

function flattenDeep(input) {    const stack = [...input];    const res = [];    while (stack.length) {        // 使用 pop 从 stack 中取出并移除值        const next = stack.pop();        if (Array.isArray(next)) {            // 使用 push 送回内层数组中的元素，不会改动原始输入 original input            stack.push(...next);        } else {            res.push(next);        }    }    // 使用 reverse 恢复原数组的顺序    return res.reverse();}console.log(flattenDeep([1, [2, [3, [4]], 5]]));

uniq([1, 2, 3, 5, 3, 2]);//[1, 2, 3, 5]

function uniq(arry) {    return [...new Set(arry)];}

function uniq(arry) {    var result = [];    for (var i = 0; i < arry.length; i++) {        if (result.indexOf(arry[i]) === -1) {            //如 result 中没有 arry[i],则添加到数组中            result.push(arry[i])        }    }    return result;}

function uniq(arry) {    var result = [];    for (var i = 0; i < arry.length; i++) {        if (!result.includes(arry[i])) {            //如 result 中没有 arry[i],则添加到数组中            result.push(arry[i])        }    }    return result;}

function uniq(arry) {    return arry.reduce((prev, cur) => prev.includes(cur) ? prev : [...prev, cur], []);}

function uniq(arry) {    let map = new Map();    let result = new Array();    for (let i = 0; i < arry.length; i++) {        if (map.has(arry[i])) {            map.set(arry[i], true);        } else {            map.set(arry[i], false);            result.push(arry[i]);        }    }    return result;}

let arry = [1, 2, 3, 4];let iter = arry<a href="">Symbol.iterator;console.log(iter.next()); //{ value: 1, done: false }console.log(iter.next()); //{ value: 2, done: false }console.log(iter.next()); //{ value: 3, done: false }</a href="">

function jsonp({url, params, callback}) {    return new Promise((resolve, reject) => {        //创建script标签        let script = document.createElement('script');        //将回调函数挂在 window 上        window[callback] = function(data) {            resolve(data);            //代码执行后，删除插入的script标签            document.body.removeChild(script);        }        //回调函数加在请求地址上        params = {...params, callback} //wb=b&callback=show        let arrs = [];        for(let key in params) {            arrs.push(`${key}=${params[key]}`);        }        script.src = `${url}?${arrs.join('&')}`;        document.body.appendChild(script);    });}

function show(data) {    console.log(data);}jsonp({    url: 'http://localhost:3000/show',    params: {        //code    },    callback: 'show'}).then(data => {    console.log(data);});

//express启动一个后台服务let express = require('express');let app = express();
app.get('/show', (req, res) => {    let {callback} = req.query; //获取传来的callback函数名，callback是key    res.send(`${callback}('Hello!')`);});app.listen(3000);