前端高频面试题---js篇(三)

69 阅读5分钟

1. javascript怎么获得对象上的属性?如何遍历对象的属性?

在JavaScript中,您可以使用 object.property 的方式获取对象的属性。例如:

let obj = {
  name: 'John',
  age: 30,
  city: 'New York'
};

console.log(obj.name);  // 输出 'John'
console.log(obj.age);   // 输出 30
console.log(obj.city);  // 输出 'New York'

要遍历对象的属性,您可以使用 for...in 循环。例如:

let obj = {
  name: 'John',
  age: 30,
  city: 'New York'
};

for (let key in obj) {
  console.log(key + ": " + obj[key]);
}

这段代码会输出:

name: John
age: 30
city: New York

在这个例子中,key 是属性的名字,obj[key] 是属性的值。我们使用 console.log 来打印每个属性和它的值。

2. javascript 函数中 arguments 是什么?接收的是实参还是形参?

在JavaScript中,arguments是一个特殊的数组-类对象,它存在于函数体内,用来收集传递给函数的参数。arguments对象保存了函数的参数信息,包括函数传递的参数、参数的数量、参数的名称等。

arguments对象可以用来访问函数的所有参数,不论它们是否在函数声明中定义。例如,如果你有一个函数,它接受两个参数,但是在函数内部你需要访问所有的参数,包括那些没有在函数声明中定义的参数。这种情况下,你可以使用arguments对象来实现。

例如:

function myFunction() {
  console.log(arguments[0]); // 输出第一个参数
  console.log(arguments[1]); // 输出第二个参数
}

myFunction('Hello', 'World'); // 输出 'Hello' 和 'World'

在这个例子中,arguments[0]对应于传递给函数的第一个参数('Hello'),arguments[1]对应于传递给函数的第二个参数('World')。

需要注意的是,arguments对象在函数内部接收的是实参(实际传递给函数的参数),而不是形参(在函数声明中定义的参数)。在函数声明中声明的参数被视为该函数的局部变量,它们的值会被初始化为传递给该函数的第一个、第二个等参数的值。

3. javascript中什么是作用域链?

作用域链的主要作用是确定变量、函数和对象的可见性。在一个作用域中声明的变量、函数和对象只能在相同或更内层的作用域中访问。当我们在一个作用域中查找变量或函数时,会沿着作用域链从上到下进行查找。如果找到了匹配的标识符,就会停止查找。

在JavaScript中,函数的作用域链由两部分组成:局部作用域和全局作用域。局部作用域包括函数内部声明的所有变量、函数和对象,这些变量、函数和对象只能在函数内部访问。全局作用域包括在所有函数外部声明的变量、函数和对象,这些变量、函数和对象可以在任何地方访问。

当我们在一个函数内部查找变量或函数时,会首先在局部作用域中查找。如果找不到,就会在全局作用域中查找。如果仍然找不到,就会在全局作用域的父级作用域中查找,以此类推,直到找到第一个匹配的标识符为止。

此外,作用域链也与变量提升和闭包有关。变量提升使得变量可以在其声明之前被访问。闭包则允许一个函数保留对其词法作用域的引用,即使该函数在其词法作用域之外执行。

总之,作用域链是理解JavaScript中变量、函数和对象的可见性和生命周期的关键概念。它决定了哪些变量、函数和对象可以在某个特定的代码块内被访问,以及如何在不同的作用域之间传递数据和调用函数。

4. JavaScript的事件捕获和事件冒泡

事件冒泡和事件捕获是 JavaScript 中两种不同的事件传播机制。

事件捕获(Event Capturing):事件捕获是从最外层(通常是 document 对象)开始,一层一层向下传递的。当一个事件被触发时,它首先在最外层被处理,然后逐层向下传递,直到到达目标元素。这种机制叫做事件捕获。

事件冒泡(Event Bubbling):事件冒泡与事件捕获相反,它是从最内层开始,一层一层向外传递的。当一个事件被触发时,它首先在最内层被处理,然后逐层向外传递,直到到达最外层。这种机制叫做事件冒泡。

这两种事件传播机制可以通过设置事件处理函数的 addEventListener 方法的第三个参数来选择。当该参数为 true 时,使用事件冒泡机制;当该参数为 false 或不提供时,使用事件捕获机制。

这是一个使用事件冒泡的例子:

var outer = document.getElementById("outer");
var inner = document.getElementById("inner");

outer.addEventListener("click", function() {
  console.log("outer clicked");
}, false); // 注意这里的第三个参数设置为 false,表示使用事件冒泡

inner.addEventListener("click", function() {
  console.log("inner clicked");
}, false); // 同上,也设置为事件冒泡

在这个例子中,如果点击 inner 元素,会先打印 "inner clicked",然后打印 "outer clicked"。这就是事件冒泡的效果。

5. javascript中如何阻止事件冒泡?

在JavaScript中,你可以使用event.stopPropagation()方法来阻止事件冒泡。以下是一个例子:

document.getElementById("myElement").addEventListener("click", function(event){
  event.stopPropagation();
});

在这个例子中,当用户点击myElement元素时,click事件不会向上冒泡到父元素。只有当在myElement元素上直接触发的事件才会被触发。

值得注意的是,使用event.stopPropagation()只会阻止事件冒泡,并不会阻止事件在同级元素(与事件目标直接相邻的元素)之间的传播。如果你想阻止事件在同级元素之间的传播,你可以使用event.stopImmediatePropagation()