13个 JavaScript 面试难题及代码实现

开发 前端
今天我将带你深入了解 14 个常见的 JavaScript 高级面试问题。这些问题涵盖了 JavaScript 的面向对象、事件循环机制、Promise 等高级概念,以及函数柯里化和深度复制等实用技术。

今天我将带你深入了解 14 个常见的 JavaScript 高级面试问题。这些问题涵盖了 JavaScript 的面向对象、事件循环机制、Promise 等高级概念,以及函数柯里化和深度复制等实用技术。

我们不仅从概念层面对每个问题进行了分析,还提供了具体的代码实现。

那我们现在就开始吧。

1.this关键字指向

this关键字指向当前执行上下文中的一个对象。在函数中,this关键字通常指向函数的调用者。

问题:以下代码输出什么?为什么?

const obj = {
  name: 'obj',
  getName: function() {
    return function() {
      return this.name;
    }
  }
}


const fn = obj.getName();
fn();

答案:undefined

分析:因为getName函数内部是在全局作用域内执行的,这里的this指向window/global,而window/global没有name属性,所以返回undefined。

如果想让内部函数的this也指向obj,可以使用箭头函数或者bind绑定this:

const obj = {
  name: 'obj',
  getName: function() {
    return () => { 
      return this.name;
    }
  }
}

2.闭包的实现与应用

问题:实现一个计数器工厂函数:

function createCounter() {
  let count = 0;
  return function() {
    return count++; 
  }
} 


const counter1 = createCounter();
const counter2 = createCounter();
counter1(); // 1
counter1(); // 2 
counter2(); // 1

解析:不同的计数器之所以能独立递增,是因为利用了闭包的特性。createCounter函数创建了一个闭包,在其外层作用域中可以访问变量count,counter1和counter2引用不同的闭包函数实例,从而实现了计数独立性。

3.事件循环机制

问:对事件循环机制做一下解释说明。

答:事件循环机制主要有以下几个流程:

  1. 同步任务在主线程执行,形成执行上下文栈。
  2. 执行栈中同步任务执行完后,系统会读取队列中的异步任务,如Promise.then()、setTimeout、AJAX回调等。
  3. 异步任务会被加入到任务队列中
  4. 清空执行栈后,系统会检查任务队列,如果不为空,则取出第一个任务放到执行栈中执行。
  5. 主线程重复了栈和队列交替执行的过程,从而实现了线程的排队执行。

事件循环允许在同一个线程中交替执行同步任务和异步任务,充分利用CPU资源。这对于支持UI交互和响应性的JavaScript来说很重要。

4.Promise对象

问题:实现Promise的简单版本:

Promise对象是处理异步事件的异步编程解决方案。Promise对象可以表示异步操作的状态,包括:

  • pending
  • fulfilled
  • rejected

Promise对象的实现如下:

class MyPromise {
  constructor(executor) {
    this._state = "pending";
    this._value = undefined;
    this._reason = undefined;
    this._onFulfilledCallbacks = [];
    this._onRejectedCallbacks = [];


    executor(this.resolve.bind(this), this.reject.bind(this));
  }
  resolve(value) {
    if (this._state !== "pending") {
      return;
    }
    this._state = "fulfilled";
    this._value = value;
    setTimeout(() => {
      for (const callback of this._onFulfilledCallbacks) {
        callback(value);
      }
    });
  }
  reject(reason) {
    if (this._state !== "pending") {
      return;
    }
    this._state = "rejected";
    this._reason = reason;
    setTimeout(() => {
      for (const callback of this._onRejectedCallbacks) {
        callback(reason);
      }
    });
  }
  then(onFulfilled, onRejected) {
    return new MyPromise((resolve, reject) => {
      if (this._state === "pending") {
        this._onFulfilledCallbacks.push((value) => {
          setTimeout(() => {
            try {
              const result = onFulfilled(value);
              resolve(result);
            } catch (error) {
              reject(error);
            }
          });
        });
        this._onRejectedCallbacks.push((reason) => {
          setTimeout(() => {
            try {
              const result = onRejected(reason);
              resolve(result);
            } catch (error) {
              reject(error);
            }
          });
        });
      } else {
        setTimeout(() => {
          try {
            if (this._state === "fulfilled") {
              const result = onFulfilled(this._value);
              resolve(result);
            } else {
              const result = onRejected(this._reason);
              resolve(result);
            }
          } catch (error) {
            reject(error);
          }
        });
      }
    });
  }
  catch(onRejected) {
    return this.then(null, onRejected);
  }
  isFulfilled() {
    return this._state === "fulfilled";
  }
  isRejected() {
    return this._state === "rejected";
  }
}

分析:

  1. MyPromise类是一个自定义的Promise类,其构造函数接受一个执行函数作为参数。
  2. 构造函数中的执行函数会被立即执行,并接受两个参数resolve和reject,用于修改Promise的状态。
  3. resolve方法用于将Promise的状态从“pending”修改为“fulfilled”,并将值传递给后续的handler。
  4. reject方法用于将Promise的状态从“pending”修改为“rejected”,并将原因传递给后续的handler。
  5. then方法用于注册一个回调函数,在Promise完成或被拒绝时执行,它接受两个参数onFulfilled和onRejected,分别在Promise完成或被拒绝时调用。
  6. then方法返回一个新的MyPromise实例,以支持链式调用。如果 onFulfilled 或 onRejected 返回一个值,它将被用作下一个 MyPromise 实例的解析值。
  7. catch 方法是 then(null, onRejected) 的简写形式。
  8. isFulfilled 方法用于检查 Promise 是否处于已实现状态。
  9. isRejected 方法用于检查 Promise 是否处于已拒绝状态。

5.类继承实现

原型链是每个对象的一个属性,它指向该对象构造函数的原型对象。一个构造函数的原型对象指向另一个构造函数的原型对象,依此类推。

问题:要实现一个 People 类,可以通过构造函数或 new 操作符实例化对象。同时,它有一个继承 Person 类的方法。Person 类有一个 sayHi 方法:

class Person {
  constructor(name) {
    this.name = name;
  }


  sayHi() {
    console.log(`Hello ${this.name}`)
  }
}


class People extends Person {
  constructor(name) {
    super(name);
  }
  method() {
    console.log('people method')
  }
}
const people = new People('John')
people.sayHi() // Hello John
people.method() // people method

分析:通过构造函数调用super继承属性,原型链实现方法继承。

6.MVC与MVVM模式

问:简述MVC与MVVM的概念和区别?

答:MVC模式中:

  1. Model负责管理数据逻辑
  2. View负责显示界面
  3. Controller连接Model与View并传递数据

MVVM模式中:

  1. Model负责管理数据逻辑
  2. View负责显示界面
  3. ViewModel作为View与Model的交互代理,将Model同步到View,将View的变化同步回Model。

区别在于:

  • MVVM中没有Controller的角色,View直接将数据绑定到ViewModel。
  • ViewModel负责将数据转换成View可以识别的格式,提供给View使用。
  • ViewModel可以将View的变化通知回Model层,实现双向数据绑定。
  • MVVM可以解耦View与Model之间的紧耦合,利于单元测试和组件开发。

7.Ajax实现

问题:实现一个ajax请求函数:

ajax('/api/users', {
  method: 'GET'  
})
.then(data => {
  console.log(data)
})

回答:

function ajax(url, options) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    const method = options.method || 'GET';
    const headers = options.headers || {};
    const body = options.body || null;
    const timeout = options.timeout || 0;


    xhr.open(method, url);
    xhr.onload = () => {
      if (xhr.status >= 200 && xhr.status < 300) {
        resolve(xhr.response);
      } else {
        reject(new Error(xhr.statusText));
      }
    };
    xhr.onerror = () => reject(xhr.error);
    xhr.ontimeout = () => reject(new Error('Request timeout'));
    xhr.timeout = timeout;
    for (const [header, value] of Object.entries(headers)) {
      xhr.setRequestHeader(header, value);
    }
    xhr.send(body);
  });
}

实现一个支持Promise的ajax请求函数:

  • 使用XMLHttpRequest对象发送请求
  • 初始化open方法,配置请求方法和url
  • 添加onload和onerror回调函数
  • onload判断状态码是否在200–300范围内resolve,否则reject

onerror直接reject

  • 请求成功后resolve返回response,失败后reject报错。
  • 支持options配置请求参数和请求体
  • 返回一个Promise对象,可以使用then/catch进行外部处理

分析:使用Promise封装异步ajax请求,实现同步编程风格。

8.JSONP跨域实现

问题:实现一个JSONP跨域请求:

jsonp('/api/data', {
  params: {
    name: 'jsonp'
  }  
})

回答:

function jsonp(url, options) {
  return new Promise((resolve, reject) => {
    const script = document.createElement('script');
    const callbackName = `jsonpCallback_${Date.now()}_${Math.floor(Math.random() * 10000)}`;
    const timer = setTimeout(() => {
      cleanup();
      reject(new Error('JSONP request timeout'));
    }, options.timeout || 5000);
    function cleanup() {
      delete window[callbackName];
      clearTimeout(timer);
      script.remove();
    }
    window[callbackName] = function(data) {
      cleanup();
      resolve(data);
    };
    options.params = options.params || {};
    options.params['callback'] = callbackName;
    const paramsArr = Object.keys(options.params).map(key => {
      return `${encodeURIComponent(key)}=${encodeURIComponent(options.params[key])}`;
    });
    script.src = `${url}?${paramsArr.join('&')}`;
    script.onerror = () => {
      cleanup();
      reject(new Error('JSONP request error'));
    };
    document.body.appendChild(script);
  });
}

分析:创建脚本节点script.src,设置回调函数callbackName,解析参数并拼接URL,动态插入body中实现JSONP跨域请求,返回Promise接口。

9.实现深度克隆

问题:实现一个函数deepClone,实现对象的深度克隆:

答案:

function deepClone(source, clonedMap) {
  clonedMap = clonedMap || new Map();


  if (source === null || typeof source !== 'object') {
    return source;
  }
  if (clonedMap.has(source)) {
    return clonedMap.get(source);
  }
  var result;
  var type = getType(source);
  if (type === 'object' || type === 'array') {
    result = type === 'array' ? [] : {};
    clonedMap.set(source, result);
    for (var key in source) {
      if (source.hasOwnProperty(key)) {
        result[key] = deepClone(source[key], clonedMap);
      }
    }
  } else {
    result = source;
  }
  return result;
}
function getType(source) {
  return Object.prototype.toString
    .call(source)
    .replace(/^\[object (.+)\]$/, '$1')
    .toLowerCase();
}
const obj = {
  a: 1,
  b: {
    c: 2
  }
}
const clone = deepClone(obj)

分析:递归实现对象和数组的深度克隆,直接返回基本类型,引用类型递归分层调用深度克隆。

10.函数柯里化

问题:实现一个可以把1+2+3加起来的add函数:

function add() {
     // When executing for the first time, define an array specifically to store all parameters
     var _args = [].slice.call(arguments);


     // Declare a function internally, use the characteristics of closure to save _args and collect all parameter values
     var adder = function () {
         var _adder = function() {
             // [].push.apply(_args, [].slice.call(arguments));
             _args.push(...arguments);
             return _adder;
         };
         //Using the characteristics of implicit conversion, implicit conversion is performed when it is finally executed, and the final value is calculated and returned.
         _adder.toString = function () {
             return _args.reduce(function (a, b) {
                 return a + b;
             });
         }
         return _adder;
     }
     // return adder.apply(null, _args);
     return adder(..._args);
}
var a = add(1)(2)(3)(4); // f 10
var b = add(1, 2, 3, 4); // f 10
var c = add(1, 2)(3, 4); // f 10
var d = add(1, 2, 3)(4); // f 10
// You can use the characteristics of implicit conversion to participate in calculations
console.log(a + 10); // 20
console.log(b + 20); // 30
console.log(c + 30); // 40
console.log(d + 40); // 50
// You can also continue to pass in parameters, and the result will be calculated using implicit conversion again.
console.log(a(10) + 100); // 120
console.log(b(10) + 100); // 120
console.log(c(10) + 100); // 120
console.log(d(10) + 100); // 120
//In fact, the add method in Shangli is the curried function of the following function, but we do not use the general formula to convert, but encapsulate it ourselves.
function add(...args) {
     return args.reduce((a, b) => a + b);
}

分析:add函数的柯里化是通过递归调用一个不断接受参数的函数来实现的。

11.实现promise.all方法

问题:实现一个myAll方法,类似Promise.all:

myAll([
  myPromise1, 
  myPromise2
]).then(([res1, res2]) => {
  //...
})

回答:

function myAll(promises) {
  return new Promise((resolve, reject) => {
    const result = new Array(promises.length);
    let count = 0;
    promises.forEach((p, index) => {
      p.then(res => {
        result[index] = res;
        count++;
        if (count === promises.length) {
          resolve(result);
        }
      })
      .catch(reject);
    });
  });
}

分析:利用Promise.all原理,通过计数器和结果数组同步Promise状态。

12.实现Instanceof

问题:实现一个instanceof操作符

答案:

function instanceof(left, right) {
  if (arguments.length !== 2) {
    throw new Error("instanceof requires exactly two arguments.");
  }
  if (left === null) {
    return false;
  }
  if (typeof left !== "object") {
    return false;
  }
  let proto = Object.getPrototypeOf(left);
  while (proto !== null) {
    if (right.prototype === proto) {
      return true;
    }
    proto = Object.getPrototypeOf(proto);
  }
  return false;
}

以上代码用于判断一个对象是否是另一个对象的实例。

JavaScript 中的 instanceof 运算符可用于判断一个对象是否是另一个对象的实例。但是,instanceof 运算符有一些限制,例如:

  1. instanceof 运算符只能确定与原型链直接相连的对象。
  2. instanceof 运算符无法检测具有循环原型链的对象。
  3. 因此,以上代码提供了一个更通用的 instanceof 函数,可以确定任意两个对象之间的关系。
  4. 该函数的实现原理是:
  5. instanceof 函数接收两个参数:left 和 right。
  6. 首先,代码检查参数数量是否为 2,如果不是,则抛出错误。
  7. 接下来,代码检查左操作数 left 是否为 null。如果是,则直接返回 false,因为 null 不能是任何对象的实例。
  8. 然后,代码检查左操作数 left 的类型是否为对象。如果不是,则直接返回false,因为只有对象才能是构造函数的实例。
  9. 接下来,代码使用Object.getPrototypeOf()获取左操作数left的原型,并将其赋值给变量proto。
  10. 在循环中,代码继续遍历proto的原型链,直到proto为null。
  11. 在循环中,代码检查右操作数right的原型是否等于当前的proto,如果相等,则表示左操作数left是右操作数right的实例,返回true。
  12. 如果在循环结束时没有找到匹配的原型,即proto为null,则表示左操作数left不是右操作数right的实例,返回false。

该函数可以在以下场景中使用:

  1. 判断一个对象是否是另一个对象的实例。
  2. 判断一个对象是否从另一个对象继承而来。
  3. 判断一个对象是否属于某个特定的类。

13. 实现 debounce 防抖功能

问题:实现 debounce 防抖功能

答案:

function debounce(fn, delay = 500) {
   let timer;


   return function(...args) {
     clearTimeout(timer);
     timer = setTimeout(() => {
       fn.apply(this, args);
     }, delay);
     // Return to clear function
     return () => {
       clearTimeout(timer);
     }
   }
}
// use
const debouncedFn = debounce(fn, 1000);
const cancel = debouncedFn();
// clear
cancel();


责任编辑:华轩 来源: web前端开发
相关推荐

2011-04-22 10:43:37

JavaScript

2020-08-21 17:40:15

JavaScript开发 技巧

2017-09-15 10:36:17

前端JavaScript面试题

2022-11-28 23:48:06

JavaScript编程语言技巧

2021-01-06 08:34:21

Spring核心组件

2023-08-04 17:52:22

2021-12-19 22:48:53

JavaScript开发代码

2024-05-28 10:14:31

JavaScrip模板引擎

2010-08-26 15:59:38

DIV圆角

2022-07-22 10:06:17

JavaScript代码

2022-11-28 23:44:26

JavaScript技巧程序员

2015-03-10 13:55:31

JavaScript预解析原理及实现

2022-08-27 15:03:43

Python损失函数算法

2015-08-27 09:27:34

JavaScript面试题

2023-10-11 16:12:07

2018-08-21 13:25:01

编程语言Java面试题

2025-01-09 12:00:00

JavaScript前端数组

2021-12-03 23:28:11

JavaScript开发代码

2024-10-09 14:45:41

2011-04-18 12:55:04

JavaScript开发者
点赞
收藏

51CTO技术栈公众号