螺竹编程
发布于 2024-08-04 / 1 阅读
0

Web前端面试题/web前端基础:JavaScript面试题

什么是 JavaScript?

JavaScript 是一种解释型的、基于对象和事件驱动的客户端脚本语言,常用于网页开发中实现动态效果和交互功能。

JavaScript 的数据类型有哪些?

JavaScript 的数据类型包括原始类型(Primitive Types)和对象类型(Object Types)。原始类型包括:Undefined、Null、Boolean、Number、String、Symbol(ES6新增),对象类型包括:Object、Array、Function、Date、RegExp、Error 等。

如何定义一个变量?

使用关键字 varletconst 定义变量,例如:

// 使用 var 定义变量
var a = 1;

// 使用 let 定义变量
let b = 'hello';

// 使用 const 定义常量
const PI = 3.14;

如何判断一个变量的类型?

可以使用 typeof 操作符,例如:

typeof 123;     // "number"
typeof 'hello'; // "string"
typeof true;    // "boolean"
typeof undefined; // "undefined"
typeof null;    // "object"
typeof {};      // "object"
typeof [];      // "object"
typeof function(){};  // "function"

需要注意的是,typeof null 的结果是 "object",这是一个历史遗留问题。

什么是闭包?

闭包是指有权访问另一个函数作用域中的变量的函数。例如:

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

var counter1 = createCounter();
console.log(counter1()); // 1
console.log(counter1()); // 2
console.log(counter1()); // 3

var counter2 = createCounter();
console.log(counter2()); // 1
console.log(counter2()); // 2

在上面的例子中,createCounter 函数返回一个内部函数,该函数可以访问 createCounter 函数作用域中的变量 count,并且每次调用该函数都会返回一个递增的计数器值。

什么是原型链?

JavaScript 中的对象有一个内部属性 [[Prototype]],它指向该对象的原型。如果一个对象的属性或方法在该对象上不存在,那么 JavaScript 引擎就会沿着该对象的原型链向上查找,直到找到该属性或方法或者到达原型链的顶端(即 Object.prototype)为止。

例如:

var obj = {name: 'Tom'};
console.log(obj.toString()); // "[object Object]"

// 等价于
console.log(obj.__proto__.toString.call(obj)); // "[object Object]"
console.log(Object.prototype.toString.call(obj)); // "[object Object]"

在上面的例子中,obj.toString() 方法在 obj 对象上不存在,因此 JavaScript 引擎沿着 obj 对象的原型链向上查找,最终找到了 Object.prototype.toString 方法,并调用它返回了字符串 "[object Object]"。

JavaScript 中的事件是什么?

事件是在特定条件下(例如用户点击、页面加载完成等)发生的操作或行为。JavaScript 中可以通过 DOM API 或者在 JavaScript 代码中使用事件处理程序来响应事件。

例如:

<button id="btn">点击我</button>

<script>
var btn = document.getElementById('btn');
btn.addEventListener('click', function() {
  alert('按钮被点击了');
});
</script>

在上面的例子中,当用户点击按钮时,会触发 click 事件,JavaScript 代码中的 addEventListener 方法会注册一个事件处理程序,当事件发生时会执行该处理程序中的代码。

如何阻止事件的默认行为?

可以使用 event.preventDefault() 方法来阻止事件的默认行为。例如:

<a href="https://www.example.com" id="link">点击跳转</a>

<script>
var link = document.getElementById('link');
link.addEventListener('click', function(event) {
  event.preventDefault();
  alert('链接被点击了,但是不会跳转');
});
</script>

在上面的例子中,事件处理程序中调用了 event.preventDefault() 方法,阻止了点击链接后的默认行为(即跳转到链接指向的页面)。