2024年JavaScript逐点突破第4篇之语言基础，外加3道题目练习(1)，2024年最新Web前端开发实习面试题

JavaScript

• js的基本类型有哪些？引用类型有哪些？null和undefined的区别。

• 如何判断一个变量是Array类型？如何判断一个变量是Number类型？（都不止一种）

• Object是引用类型嘛？引用类型和基本类型有什么区别？哪个是存在堆哪一个是存在栈上面的？

• JS常见的dom操作api

• 解释一下事件冒泡和事件捕获

• 事件委托（手写例子），事件冒泡和捕获，如何阻止冒泡？如何组织默认事件？

• 对闭包的理解？什么时候构成闭包？闭包的实现方法？闭包的优缺点？

• this有哪些使用场景？跟C,Java中的this有什么区别？如何改变this的值？

• call，apply，bind

• 显示原型和隐式原型，手绘原型链，原型链是什么？为什么要有原型链

• 创建对象的多种方式

• 实现继承的多种方式和优缺点

• new 一个对象具体做了什么

• 手写Ajax，XMLHttpRequest

• 变量提升

• 举例说明一个匿名函数的典型用例

• 指出JS的宿主对象和原生对象的区别，为什么扩展JS内置对象不是好的做法？有哪些内置对象和内置函数？

• attribute和property的区别

• document load和document DOMContentLoaded两个事件的区别

• JS代码调试

• 开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

  

区分大小写

你需要知道，ECMAScript中一切都区分大小写。无论是变量、函数名还是操作符，都区分大小写。举个例子，变量XHS 和变量xhs是两个不同的变量。

###标识符

所谓标识符，就是变量、函数、属性或函数参数的名称。标识符可以由一或多个下列字符组成:

• 第一个字符必须是一个字母、下划线(_)或美元符号($);

• 剩下的其他字符可以是字母、下划线、美元符号或数字。

标识符中的字母可以是扩展 ASCII(Extended ASCII)中的字母，也可以是 Unicode 的字母字符.

按照惯例，ECMAScript标识符使用驼峰大小写形式，即第一个单词的首字母小写，后面每个单词的首字母大写，如:

xhsRookies

xhsRookiesBoy

虽然这种写法并不是强制性的，但因为这种形式跟 ECMAScript 内置函数和对象的命名方式一致， 所以算是最佳实践。

注意 关键字、保留字、true、false 和 null 不能作为标识符。

代码注释

JavaScript 中有两种注释方式：单行注释和多行注释。

注释的代码在程序中不会执行

单行注释以两个斜杠字符开头，如:

// 单行注释

多行注释以一个斜杠和一个星号(/)开头，以它们的反向组合(/)结尾，如：

/* 这是多行

注释 */

严格模式

ECMAScript 5增加了严格模式(strict mode)的概念。严格模式是一种不同的 JavaScript 解析和执行模型，ECMAScript 3 的一些不规范写法在这种模式下会被处理，对于不安全的活动将抛出错误。要对整个脚本启用严格模式，在脚本开头加上这一行:

‘use strict’

虽然看起来像个没有赋值给任何变量的字符串，但它其实是一个预处理指令。任何支持 JavaScript 的引擎看到它都会切换到严格模式。选择这种语法形式的目的是不破坏 ECMAScript 3语法。

也可以单独指定一个函数在严格模式下执行，只要把这个预处理指令放到函数体开头即可:

function doSomething() {

‘use strict’

// 函数体

}

严格模式会影响 JavaScript 执行的很多方面，所有现代浏览器都支持严格模式。

语句

ECMAScript中的语句以分号结尾。省略分号意味着由解析器确定语句在哪里结尾，如下面的例子所示:

var sum = a + b // 没有分号也有效，但不推荐

var diff = a - b // 加分号有效，推荐

即使语句末尾的分号不是必需的，也应该加上。记着加分号有助于防止省略造成的问题，比如可以避免输入内容不完整。此外，加分号也便于开发者通过删除空行来压缩代码(如果没有结尾的分号，只删除空行，则会导致语法错误)。加分号也有助于在某些情况下提升性能，因为解析器会尝试在合适的位置补上分号以纠正语法错误。

关键字与保留字

ECMA-262描述了一组保留的关键字，这些关键字有特殊用途，比如表示控制语句的开始和结束，或者执行特定的操作。按照规定，保留的关键字不能用作标识符或属性名。

break do in typeof

case else instanceof var

catch export new void

class extends return while

const finally super with

continue for switch yield

debugger function this

default if throw

delete import try

规范中也描述了一组未来的保留字，同样不能用作标识符或属性名。虽然保留字在语言中没有特定用途，但它们是保留给将来做关键字用的。以下是 ECMA-262第 6 版为将来保留的所有词汇。

始终保留：

enum

严格模式下保留

implements package public

interface protected static

let private

模块代码中保留

await

声明变量并赋值

---

在 JavaScript 中，有 3 个关键字可以声明变量: var、const 和 let。其中，var在 ECMAScript的所有版本中都可以使用，而 const 和let 只能在ECMAScript 6(将在后面学到) 及更晚的版本中使用。

var 关键字

要定义变量，可以使用 var关键字，后跟变量名:

var xhsRookies

这行代码定义了一个名为 xhsRookies的变量，可以用它保存任何类型的值。ECMAScript实现变量初始化，因此可以同时定义变量并设置它的值:

var xhsRookies = ‘hi’

xhsRookies被定义为一个保存字符串值hi的变量。像这样初始化变量不会将它标识为字符串类型，只是一个简单的赋值而已。随后，不仅可以改变保存的值，也可以改变值的类型:

var xhsRookies = ‘hi’

xhsRookies = 100 // 合法，但不推荐

在这个例子中，变量 xhsRookies首先被定义为一个保存字符串值hi的变量，然后又被重写为保存了数值 100 。虽然不推荐改变变量保存值的类型，但这在ECMAScript中是完全有效的。

1. var 声明作用域

使用 var操作符定义的变量会成为包含它的函数的局部变量。比如，使用 var在一个函数内部定义一个变量，就意味着该变量将在函数退出时被销毁:

function xhsTest() {

var xhsRookies = ‘hi’ // 局部变量

}

xhsTest()

console.log(xhsRookies) // 出错!

这里，xhsRookies变量是在函数内部使用var 定义的。函数叫 xhsTest()，调用它会创建这个变量并给它赋值。调用之后变量随即被销毁，因此示例中的最后一行会导致错误。不过，在函数内定义变量时省略 var操作符，可以创建一个全局变量:

function xhsTest() {

xhsRookies = ‘hi’ // 全局变量

}

xhsTest()

console.log(xhsRookies) // “hi”

去掉之前的 var之后，xhsRookies 就变成了全局变量。只要调用一次函数 xhsTest()，就会定义这个变量，并且可以在函数外部访问到。

虽然可以通过省略 var 操作符定义全局变量，但不推荐这么做。在局部作用域中定义的全局变量很难维护，也会造成困惑。

如果需要定义多个变量，可以在一条语句中用逗号分隔每个变量(及可选的初始化):

var xhsRookies = ‘hi’,

xhsFound = false,

xhsNumber = 29

这里定义并初始化了 3 个变量。

2. var 声明提升

使用 var时，下面的代码不会报错。这是因为使用这个关键字声明的变量会自动提升到块作用域 5 顶部:

{

console.log(xhsNumber) // undefined

var xhsNumber = 26

}

之所以不会报错，是因为 ECMAScript 运行时把它看成等价于如下代码:

{

var xhsNumber

console.log(xhsNumber) // undefined

xhsNumber = 26

}

这就是所谓的“提升”(hoist)，也就是把所有变量声明都拉到块作用域的顶部。

let 声明

let跟 var的作用差不多，但有着非常重要的区别。最明显的区别是，let声明的范围是块作用域， 而var 声明的范围是函数作用域。

{

var xhsRookies = ‘xhs-rookies’

console.log(xhsRookies) // xhs-rookies

}

console.log(xhsRookies) // xhs-rookies

{

let xhsNumber = 26

console.log(xhsNumber) // 26

}

console.log(xhsNumber) // ReferenceError: xhsNumber 没有定义

在这里，xhsNumber变量之所以不能在块作用域外部被引用，是因为它的作用域仅限于该块内部。块作用域是函数作用域的子集，因此适用于 var的作用域限制同样也适用于let。

let也不允许同一个块作用域中出现冗余声明。这样会导致报错:

var xhsRookies

var xhsRookies

let xhsNumber

let xhsNumber // SyntaxError;标识符xhsNumber已经声明过了

当然，JavaScript 引擎会记录用于变量声明的标识符及其所在的块作用域，因此嵌套使用相同的标识符不会报错，而这是因为同一个块中没有重复声明:

var xhsRookies = ‘xhs-rookies’

console.log(xhsRookies) // ‘xhs-rookies’

{

var xhsRookies = ‘xhs-rookies-boy’

console.log(xhsRookies) // ‘xhs-rookies-boy’

文末

js前端的重头戏，值得花大部分时间学习。

推荐通过书籍学习，《 JavaScript 高级程序设计（第 4 版）》你值得拥有。整本书内容质量都很高，尤其是前十章语言基础部分，建议多读几遍。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

另外，大推一个网上教程 现代 JavaScript 教程 ，文章深入浅出，很容易理解，上面的内容几乎都是重点，而且充分发挥了网上教程的时效性和资料链接。

学习资料在精不在多，二者结合，定能构建你的 JavaScript 知识体系。

面试本质也是考试，面试题就起到很好的考纲作用。想要取得优秀的面试成绩，刷面试题是必须的，除非你样样精通。

这是288页的前端面试题