JavaScript面试知识点

半藏仙人
251 阅读6分钟

一、Event-Loop，一般出题说执行顺序，有可能问与Node的区别

二、Promise

三、ES6有哪些新特性，Promise/Proxy可能会问

四、this指向，打印

五、变量提升

六、JS判断变量类型

JavaScript 具有七种内置数据类型，它们分别是：

  • null
  • undefined
  • boolean
  • number
  • string
  • object
  • symbol

类型判断常用的方法

  • typeof
  • instanceof
  • Object.prototype.toString
  • constructor

使用 typeof 判断类型

typeof 5 // "number"
typeof 'lucas' // "string"
typeof undefined // "undefined"
typeof true // "boolean"

typeof null // "object"

const foo = () => 1
typeof foo // "function"

const foo = {}
typeof foo // "object"

const foo = []
typeof foo // "object"

const foo = new Date()
typeof foo // "object"

const foo = Symbol("foo") 
typeof foo // "symbol"

总结：使用 typeof 可以准确判断出除 null 以外的基本类型，以及 function 类型、symbol 类型；null 会被 typeof 判断为 object。

使用 instanceof 判断类型 使用 a instanceof B 判断的是：a 是否为 B 的实例，即 a 的原型链上是否存在 B 构造函数。因此如果使用：

function Person(name) {
    this.name = name
}
const p = new Person('lucas')

p instanceof Person

这里 p 是 Person 构造出来的实例。同时，顺着 p 的原型链，也能找到 Object 构造函数：

p.__proto__.__proto__ === Object.prototype
p instanceof Object

注意：

5 instanceof Number // false
new Number(5) instanceof Number // true

我们使用以下代码来模拟 instanceof 原理：

// L 表示左表达式，R 表示右表达式
const instanceofMock = (L, R) => {
    if (typeof L !== 'object') {
        return false
    }
    while (true) { 
        if (L === null) {
            // 已经遍历到了最顶端
            return false
        }
        if (R.prototype === L.__proto__) {
            return true
        }
        L = L.__proto__
    } 
}

使用 constructor 和 Object.prototype.toString 判断类型

使用 Object.prototype.toString 判断类型，我们称之为“万能方法”，“终极方法”：

console.log(Object.prototype.toString.call(1)) 
// [object Number]

console.log(Object.prototype.toString.call('lucas')) 
// [object String]

console.log(Object.prototype.toString.call(undefined)) 
// [object Undefined]

console.log(Object.prototype.toString.call(true)) 
// [object Boolean]

console.log(Object.prototype.toString.call({})) 
// [object Object]

console.log(Object.prototype.toString.call([])) 
// [object Array]

console.log(Object.prototype.toString.call(function(){})) 
// [object Function]

console.log(Object.prototype.toString.call(null)) 
// [object Null]

console.log(Object.prototype.toString.call(Symbol('lucas'))) 
// [object Symbol]

使用 constructor 可以查看目标的构造函数，这也可以进行类型判断，但也存在着问题，具体请看：

var foo = 5
foo.constructor
// ƒ Number() { [native code] }

var foo = 'Lucas'
foo.constructor
// ƒ String() { [native code] }

var foo = true
foo.constructor
// ƒ Boolean() { [native code] }

var foo = []
foo.constructor
// ƒ Array() { [native code] }

var foo = {}
foo.constructor
// ƒ Object() { [native code] }

var foo = () => 1
foo.constructor
// ƒ Function() { [native code] }

var foo = new Date()
foo.constructor
// ƒ Date() { [native code] }

var foo = Symbol("foo") 
foo.constructor
// ƒ Symbol() { [native code] }

var foo = undefined
foo.constructor
// VM257:1 Uncaught TypeError: Cannot read property 'constructor' of undefined
    at <anonymous>:1:5

var foo = null
foo.constructor
// VM334:1 Uncaught TypeError: Cannot read property 'constructor' of null
    at <anonymous>:1:5

我们发现对于 undefined 和 null，如果尝试读取其 constructor 属性，将会进行报错。并且 constructor 返回的是构造函数本身，一般使用它来判断类型的情况并不多见。

七、继承、闭包

八、深度克隆，函数缓存

参考：juejin.cn/post/684490…

浅克隆

浅克隆之所以被称为浅克隆，是因为对象只会被克隆最外部的一层,至于更深层的对象,则依然是通过引用指向同一块堆内存.

// 浅克隆函数
function shallowClone(o) {
  const obj = {};
  for ( let i in o) {
    obj[i] = o[i];
  }
  return obj;
}
// 被克隆对象
const oldObj = {
  a: 1,
  b: [ 'e', 'f', 'g' ],
  c: { h: { i: 2 } }
};

const newObj = shallowClone(oldObj);
console.log(newObj.c.h, oldObj.c.h); // { i: 2 } { i: 2 }
console.log(oldObj.c.h === newObj.c.h); // true

九、手撕bind/apply/call等

十、var f = function () {} 和 function f () {}的区别

十一、模块化，AMD/CMD的区别

涉及面试题：为什么要使用模块化？都有哪几种方式可以实现模块化，各有什么特点？

使用模块化的好处：

  • 解决命名冲突
  • 提供复用性
  • 提高代码可维护性

模块化的方式

  • 立即执行函数：在早期，使用立即执行函数实现模块化是常见的手段，通过函数作用域解决了命名冲突、污染全局作用域的问题
  • AMD 和 CMD
  • CommonJS
  • ES Module

AMD/CMD的区别

很多人说requireJS是异步加载模块，SeaJS是同步加载模块，这么理解实际上是不准确的，其实加载模块都是异步的，只不过AMD依赖前置，js可以方便知道依赖模块是谁，立即加载，而CMD就近依赖，需要使用把模块变为字符串解析一遍才知道依赖了那些模块，这也是很多人诟病CMD的一点，牺牲性能来带来开发的便利性，实际上解析模块用的时间短到可以忽略

为什么我们说两个的区别是依赖模块执行时机不同，为什么很多人认为ADM是异步的，CMD是同步的（除了名字的原因。。。）

同样都是异步加载模块，AMD在加载模块完成后就会执行改模块，所有模块都加载执行完后会进入require的回调函数，执行主逻辑，这样的效果就是依赖模块的执行顺序和书写顺序不一定一致，看网络速度，哪个先下载下来，哪个先执行，但是主逻辑一定在所有依赖加载完成后才执行

CMD加载完某个依赖模块后并不执行，只是下载而已，在所有依赖模块加载完成后进入主逻辑，遇到require语句的时候才执行对应的模块，这样模块的执行顺序和书写顺序是完全一致的

这也是很多人说AMD用户体验好，因为没有延迟，依赖模块提前执行了，CMD性能好，因为只有用户需要的时候才执行的原因

1、AMD推崇依赖前置，在定义模块的时候就要声明其依赖的模块 2、CMD推崇就近依赖，只有在用到某个模块的时候再去require

十二、Object.create({}) 和 new Object()的区别

十三、对JS的看法

参考：www.cnblogs.com/SanMaoSpace… JavaScript是一种基于对象（Object）和事件驱动（Event Driven）并具有相对安全性的客户端脚本语言。它最初由网景公司（Netscape）的Brendan Eich设计，是一种动态、弱类型、基于原型的语言，内置支持类。

特点

  • 一种解释性执行的脚本语言。 JavaScript的语法基本结构形式与C、C++、Java十分类似。但在使用前，不像这些语言需要先编译，而是在程序运行过程中被逐行地解释

  • 一种基于对象的脚本语言。

  • 一种简单弱类型脚本语言。

  • 一种相对安全脚本语言。

  • 一种事件驱动脚本语言。

  • 一种跨平台性脚本语言。

优点

  • JavaScript可以使多种任务仅在用户端就可以完成，而不需要网络和服务器的参与
  • JavaScript可以方便地操纵各种页面中的对象，用户可以使用JavaScript来控制页面中各个元素的外观、状态甚至运行方式，JavaScript可以根据用户的需要“定制”浏览器，从而使网页更加友好。

缺点

  • 各浏览器厂商对JavaScript支持程度不同。
  • “Web安全性”对JavaScript一些功能牺牲。

十四、JS 异步编程及常考面试题

涉及面试题：什么是回调函数？回调函数有什么缺点？如何解决回调地狱问题？

avatar
文章
阅读
粉丝