35道面向初中级前端的基础面试题

1. 原生提供了3个方法实现自定义事件

2. document.createEvent('Event') 创建事件

3. initEvent 初始化事件

4. dispatchEvent 触发事件

const events = {}

function registerEvent(name) {

const event = document.createEvent(‘Event’)

event.initEvent(name, true, true) // 事件名称，是否允许冒泡，该事件的默认动作是否可以被取消

events[name] = event

}

function triggerEvent(name) {

window.dispatchEvent(events[name])

}

registerEvent(‘resize’) // 注册 resize 事件

triggerEvent(‘resize’) // 触发 resize 事件

MDN

寄生组合式继承

function SuperType(name) {

this.name = name

this.colors = [‘red’]

}

SuperType.prototype.sayName = function() {

console.log(this.name)

}

// 继承实例属性

function SubType(name, age) {

SuperType.call(this, name)

this.age = age

}

function inheritPrototype(subType, superType) {

let prototype = Object.create(superType.prototype)

prototype.constructor = subType

subType.prototype = prototype

}

// 继承原型方法

inheritPrototype(SubType, SuperType)

// 定义自己的原型方法

SubType.prototype.sayAge = function() {

console.log(this.age)

}

const test = (function () {

let value = 0

return {

getVal() { return value },

setVal(val) { value = val }

}

})()

上面的代码实现了一个私有属性 value，它只能用过 getVal() 来取值，通过 setVal(val) 来设置值。

如果一个对象没有被其他对象引用，那它将被垃圾回收机制回收。

let o = { a: 1 }

一个对象被创建，并被 o 引用。

o = null

刚才被 o 引用的对象现在是零引用，将会被回收。

这个算法假定设置一个叫做根（root）的对象（在Javascript里，根是全局对象）。垃圾回收器将定期从根开始，找所有从根开始引用的对象，然后找这些对象引用的对象……从根开始，垃圾回收器将找到所有可以获得的对象和收集所有不能获得的对象。

对于刚才的例子来说，在 f() 执行后，由于 o 和 o2 从全局对象出发无法获取到，所以它们将会被回收。

function curry(fn, …args1) {

// length 是函数对象的一个属性值，指该函数有多少个必须要传入的参数，即形参的个数。

if (fn.length == args1.length) {

return fn(…args1)

}

return function(…args2) {

return curry(fn, …args1, …args2)

}

}

function add(a, b) {

return a + b

}

console.log(curry(add, 1)(2)) // 3

console.log(curry(add, 1, 2)) // 3

• 交互性更好。来自服务器的新内容可以动态更改，无需重新加载整个页面。

• 减少与服务器的连接，因为脚本和样式只需要被请求一次。

• 状态可以维护在一个页面上。JavaScript 变量和 DOM 状态将得到保持，因为主容器页面未被重新加载。

• 基本上包括大部分 SPA 的优点。

用 var 声明的变量的作用域是它当前的执行上下文，它可以是嵌套的函数，也可以是声明在任何函数外的变量。let 和 const 是块级作用域，意味着它们只能在最近的一组花括号（function、if-else 代码块或 for 循环中）中访问。

var 声明的全局变量和函数都会成为 window 对象的属性和方法。使用 let 和 const 的顶级声明不会定义在全局上下文中，但在作用域链解析上效果是一样的。

function foo() {

// 所有变量在函数中都可访问

var bar = ‘bar’;

let baz = ‘baz’;

const qux = ‘qux’;

console.log(bar); // bar

console.log(baz); // baz

console.log(qux); // qux

}

console.log(bar); // ReferenceError: bar is not defined

console.log(baz); // ReferenceError: baz is not defined

console.log(qux); // ReferenceError: qux is not defined

if (true) {

var bar = ‘bar’;

let baz = ‘baz’;

const qux = ‘qux’;

}

// 用 var 声明的变量在函数作用域上都可访问

console.log(bar); // bar

// let 和 const 定义的变量在它们被定义的语句块之外不可访问

console.log(baz); // ReferenceError: baz is not defined

console.log(qux); // ReferenceError: qux is not defined

var会使变量提升，这意味着变量可以在声明之前使用。let和const不会使变量提升，提前使用会报错。

console.log(foo); // undefined

var foo = ‘foo’;

console.log(baz); // ReferenceError: can’t access lexical declaration ‘baz’ before initialization

let baz = ‘baz’;

console.log(bar); // ReferenceError: can’t access lexical declaration ‘bar’ before initialization

const bar = ‘bar’;

用var重复声明不会报错，但let和const会。

var foo = ‘foo’;

var foo = ‘bar’;

console.log(foo); // “bar”

let baz = ‘baz’;

let baz = ‘qux’; // Uncaught SyntaxError: Identifier ‘baz’ has already been declared

let和const的区别在于：let允许多次赋值，而const只允许一次。

// 这样不会报错。

let foo = ‘foo’;

foo = ‘bar’;

// 这样会报错。

const baz = ‘baz’;

baz = ‘qux’;

这种方法有缺陷，详情请看关于JSON.parse(JSON.stringify(obj))实现深拷贝应该注意的坑

let o1 = {a:{

b:1

}

}

let o2 = JSON.parse(JSON.stringify(o1))

基础版

function deepCopy(target) {

if (typeof target == ‘object’) {

const result = Array.isArray(target) [] : {}

for (const key in target) {

if (typeof target[key] == ‘object’) {

result[key] = deepCopy(target[key])

} else {

result[key] = target[key]

}

}

return result

} else if (typeof target == ‘function’) {

return eval(‘(’ + test.toString() + ‘)’)

} else {

return target

}

}

完整版

const mapTag = ‘[object Map]’

const setTag = ‘[object Set]’

const arrayTag = ‘[object Array]’

const objectTag = ‘[object Object]’

const symbolTag = ‘[object Symbol]’

function deepCopy(origin, map = new WeakMap()) {

if (!origin || !isObject(origin)) return origin

if (typeof origin == ‘function’) {

return eval(‘(’ + origin.toString() + ‘)’)

}

const objType = getObjType(origin)

const result = createObj(origin, objType)

// 防止循环引用，不会遍历已经在 map 中的对象，因为在上一层正在遍历

if (map.get(origin)) {

return map.get(origin)

}

map.set(origin, result)

// set

if (objType == setTag) {

for (const value of origin) {

result.add(deepCopy(value, map))

}

return result

}

// map

if (objType == mapTag) {

for (const [key, value] of origin) {

result.set(key, deepCopy(value, map))

}

return result

}

// 对象或数组

if (objType == objectTag || objType == arrayTag) {

for (const key in origin) {

result[key] = deepCopy(origin[key], map)

}

return result

}

return result

}

function getObjType(obj) {

return Object.prototype.toString.call(obj)

}

function createObj(obj, type) {

if (type == objectTag) return {}

if (type == arrayTag) return []

if (type == symbolTag) return Object(Symbol.prototype.valueOf.call(obj))

return new obj.constructor(obj)

}

function isObject(origin) {

return typeof origin == ‘object’ || typeof origin == ‘function’

}

如何写出一个惊艳面试官的深拷贝?

1. Undefined

2. Null

3. Boolean

4. Number

5. String

6. Object

7. symbol(ES6新增)

有时 JavaScript 会自动为代码行补上缺失的分号，即自动分号插入（Automatic SemicolonInsertion，ASI）。

因为如果缺失了必要的 ; ，代码将无法运行，语言的容错性也会降低。ASI 能让我们忽略那些不必要的 ; 。

请注意，ASI 只在换行符处起作用，而不会在代码行的中间插入分号。

如果 JavaScript 解析器发现代码行可能因为缺失分号而导致错误，那么它就会自动补上分号。并且，只有在代码行末尾与换行符之间除了空格和注释之外没有别的内容时，它才会这样做。

| 特性 | cookie | localStorage | sessionStorage |

| — | — | — | — |

| 由谁初始化 | 客户端或服务器，服务器可以使用Set-Cookie请求头。 | 客户端 | 客户端 |

| 数据的生命周期 | 一般由服务器生成，可设置失效时间，如果在浏览器生成，默认是关闭浏览器之后失效 | 永久保存，可清除 | 仅在当前会话有效，关闭页面后清除 |

| 存放数据大小 | 4KB | 5MB | 5MB |

| 与服务器通信 | 每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题 | 仅在客户端保存 | 仅在客户端保存 |

| 用途 | 一般由服务器生成，用于标识用户身份 | 用于浏览器缓存数据 | 用于浏览器缓存数据 |

| 访问权限 | 任意窗口 | 任意窗口 | 当前页面窗口 |

1. 声明一个匿名函数

2. 马上调用这个匿名函数。

作用：创建一个独立的作用域。

有如下几个方式：

• cookie

• web worker

• localeStorage和sessionStorage