JavaScript面试必备题目及解析

2023-12-13 18:59:04

学习目标:

  1. 请解释一下JavaScript中的闭包是什么,并举一个例子来说明它的用途。

  2. 如何在JavaScript中实现继承?请提供至少两种不同的方法,并对它们进行比较和讨论。

  3. 请解释一下什么是事件冒泡和事件捕获,并说明它们之间的区别。


学习内容:

  1. JavaScript中的闭包是指函数可以访问其词法环境中定义的变量,即使函数在被定义的作用域之外被调用。闭包可以通过将内部函数返回或传递给其他函数来创建。

下面是一个闭包的示例:

function outerFunction() {
  var outerVariable = 'I am from outer function';

  function innerFunction() {
    console.log(outerVariable);
  }

  return innerFunction;
}

var closure = outerFunction();
closure(); // 输出:I am from outer function

在这个例子中,innerFunction是一个闭包,它可以访问并输出outerVariable,尽管outerVariable是在outerFunction作用域内定义的。闭包能够保留对它们定义时的词法环境的引用。

闭包的用途之一是创建私有变量,因为外部函数的变量对外是不可访问的。另一个用途是在异步操作中保存状态。

  1. 在JavaScript中,我们可以使用原型链和构造函数来实现继承。

方法一:原型链继承

function Parent() {
  this.parentProperty = 'I am from parent';
}

Parent.prototype.parentMethod = function() {
  console.log(this.parentProperty);
}

function Child() {
  this.childProperty = 'I am from child';
}

Child.prototype = Object.create(Parent.prototype);
Child.prototype.constructor = Child;

var child = new Child();
child.parentMethod(); // 输出:I am from child

在这个例子中,Child构造函数继承了Parent构造函数的属性和方法,通过将Child.prototype设置为Object.create(Parent.prototype)来实现原型链继承。这使得Child的实例可以访问Parent原型上定义的属性和方法。

方法二:构造函数继承

function Parent() {
  this.parentProperty = 'I am from parent';
  this.parentMethod = function() {
    console.log(this.parentProperty);
  }
}

function Child() {
  Parent.call(this);
  this.childProperty = 'I am from child';
}

var child = new Child();
child.parentMethod(); // 输出:I am from parent

在这个例子中,Child构造函数使用Parent.call(this)Parent的属性和方法应用到Child实例上。这种方法实现了属性和方法的继承,但是无法继承Parent原型上的方法。

对比:

原型链继承适用于继承方法和属性,但可能会在修改子类原型时对父类产生影响。构造函数继承只能继承属性,但是不会对原型链造成影响。

  1. 事件冒泡和事件捕获是指处理DOM事件时,事件的传播方式。

事件冒泡是从内到外的传播方式,即事件首先在触发元素上被处理,然后向上冒泡到父元素,最终到达文档根节点。

<div id="outer">
  <div id="inner">
    <button id="button">Click me</button>
  </div>
</div>

<script>
document.getElementById('button').addEventListener('click', function() {
  console.log('Button clicked');
}, false);
</script>

在这个例子中,当按钮被点击时,控制台将输出Button clicked。事件冒泡使得父元素也可以监听到子元素上的事件。

事件捕获是从外到内的传播方式,即事件首先在文档根节点被捕获,然后向下捕获到触发元素。

<div id="outer">
  <div id="inner">
    <button id="button">Click me</button>
  </div>
</div>

<script>
document.getElementById('button').addEventListener('click', function() {
  console.log('Button clicked');
}, true);
</script>

在这个例子中,当按钮被点击时,控制台将先输出Button clicked,然后才是事件冒泡阶段。

区别:

事件冒泡和事件捕获是两种不同的事件传播方式。事件冒泡从内到外,而事件捕获从外到内。默认情况下,事件是按照事件冒泡方式传播的。你可以通过在addEventListener中将第三个参数设置为true来使用事件捕获方式。

?

文章来源:https://blog.csdn.net/weixin_70007095/article/details/134977908
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。