Frontend Developer 面试题与答案

问题 21. Explain the concept of event delegation in JavaScript.

Event delegation involves attaching a single event listener to a common ancestor rather than individual elements. It leverages event bubbling to handle events on multiple child elements.

Example:

```javascript
// HTML: 
Item 1
Item 2

const list = document.getElementById('myList');
list.addEventListener('click', function(event) {
  if (event.target.tagName === 'LI') {
    console.log('Clicked on:', event.target.textContent);
  }
});
```

问题 22. Explain the concept of CORS (Cross-Origin Resource Sharing) and how to handle it in JavaScript.

CORS is a security feature implemented by web browsers to restrict web pages from making requests to a different domain than the one that served the web page. In JavaScript, you can handle CORS by setting appropriate headers on the server or using JSONP for cross-origin requests.

Example:

```javascript
// Example using Fetch API with CORS
fetch('https://api.example.com/data', { mode: 'cors' })
  .then(response => response.json())
  .then(data => console.log(data));
```

问题 23. What is the Virtual DOM, and how does it improve performance in frameworks like React?

The Virtual DOM is a lightweight copy of the actual DOM. React uses it to optimize updates by comparing the virtual DOM with the real DOM and making minimal changes. This reduces the number of manipulations needed on the actual DOM, improving performance.

问题 24. How does the 'this' keyword work in JavaScript?

The 'this' keyword refers to the current execution context. In a function, 'this' depends on how the function is called. It can refer to the global object, the object the method is called on, or be explicitly set using methods like 'call', 'apply', or 'bind'.

Example:

```javascript
function sayHello() {
  console.log('Hello, ' + this.name);
}

const person = { name: 'John' };
sayHello.call(person); // Outputs: Hello, John
```

问题 25. What is the purpose of the 'localStorage' and 'sessionStorage' objects in JavaScript?

'localStorage' and 'sessionStorage' are Web Storage APIs for storing key-value pairs in a web browser. 'localStorage' persists data even after the browser is closed, while 'sessionStorage' stores data for the duration of a page session.

Example:

```javascript
// Storing data in localStorage
localStorage.setItem('username', 'JohnDoe');

// Retrieving data from localStorage
const username = localStorage.getItem('username');
```