前端面试题（十八）

102. JavaScript 中 this 的指向问题

• this 的定义：
  this 是 JavaScript 中的一个关键字，它的值取决于函数调用的上下文。this 的指向在不同的调用方式下会有所不同。

• this 指向的几种情况：

  1. 全局作用域下：在全局作用域中，this 指向 window 对象（严格模式下为 undefined）。

     console.log(this === window); // true
     

  2. 对象方法调用：当 this 出现在对象的方法中时，this 指向调用该方法的对象。

     const obj = {
       name: 'Junjie',
       getName() {
         console.log(this.name);
       }
     };
     obj.getName(); // 输出 'Junjie'
     

  3. 构造函数调用：在构造函数中，this 指向新创建的实例对象。

     function Person(name) {
       this.name = name;
     }
     const person = new Person('Hu');
     console.log(person.name); // 输出 'Hu'
     

  4. 箭头函数：箭头函数没有自己的 this，它的 this 是在定义时继承自外部上下文的 this。

     const obj = {
       name: 'Arrow',
       getName: () => {
         console.log(this.name); // 输出全局上下文中的 this.name
       }
     };
     obj.getName(); // undefined
     

• this 绑定的几种方法：

  1. call 和 apply：显式改变函数中的 this 指向。
  2. bind：返回一个绑定了 this 的新函数。

103. JavaScript 中的继承

• 原型继承：
  在 JavaScript 中，继承通常通过原型链实现。一个对象可以通过原型链访问另一个对象的属性和方法。

  原型继承的示例：

  function Animal(name) {
    this.name = name;
  }
  Animal.prototype.speak = function() {
    console.log(`${this.name} makes a sound`);
  };
  
  function Dog(name, breed) {
    Animal.call(this, name);
    this.breed = breed;
  }
  Dog.prototype = Object.create(Animal.prototype);
  Dog.prototype.constructor = Dog;
  
  const myDog = new Dog('Fido', 'Labrador');
  myDog.speak(); // Fido makes a sound
  

• class 继承（ES6）：
  ES6 引入了 class 语法，使得继承更加清晰和简洁。

  class 继承示例：

  class Animal {
    constructor(name) {
      this.name = name;
    }
    speak() {
      console.log(`${this.name} makes a sound`);
    }
  }
  
  class Dog extends Animal {
    constructor(name, breed) {
      super(name);
      this.breed = breed;
    }
  }
  
  const myDog = new Dog('Buddy', 'Golden Retriever');
  myDog.speak(); // Buddy makes a sound
  

104. 什么是 Promise？

• Promise 的定义：
  Promise 是一种处理异步操作的方式。它表示一个未来将完成（或失败）的操作，并提供 .then()、.catch() 和 .finally() 来处理结果。

• Promise 的三种状态：

  1. Pending（进行中）：初始状态，异步操作尚未完成。
  2. Fulfilled（已完成）：异步操作成功完成，并返回结果。
  3. Rejected（已失败）：异步操作失败，并返回错误信息。

• Promise 的基本用法：

  const promise = new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('操作成功');
    }, 1000);
  });
  
  promise
    .then((result) => {
      console.log(result); // 输出 '操作成功'
    })
    .catch((error) => {
      console.error(error);
    });
  

• 链式调用：
  Promise 允许链式调用，这样可以将多个异步操作串联起来执行。

  promise
    .then((result) => {
      console.log(result);
      return '下一步操作';
    })
    .then((nextStep) => {
      console.log(nextStep); // 输出 '下一步操作'
    });
  

105. CSS 布局中的 Flexbox 和 Grid

• Flexbox 布局：
  Flexbox 是 CSS3 中的一种布局模式，适合用于一维布局，即一行或一列中的元素对齐和分布。

  常见的 Flexbox 属性：

  • display: flex;：定义弹性容器。
  • justify-content：定义主轴上的对齐方式（如 flex-start、center、space-between）。
  • align-items：定义交叉轴上的对齐方式（如 stretch、center）。

  Flexbox 布局示例：

  .container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
  }
  

• Grid 布局：
  Grid 是一种二维布局系统，适合复杂的页面布局。

  常见的 Grid 属性：

  • display: grid;：定义网格容器。
  • grid-template-columns：定义列的数量和宽度。
  • grid-template-rows：定义行的数量和高度。
  • grid-gap：设置行与列之间的间距。

  Grid 布局示例：

  .grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px;
  }
  

106. 前端安全（XSS、CSRF）

• XSS（跨站脚本攻击）：
  XSS 攻击是指攻击者向网页中注入恶意脚本，利用浏览器执行该脚本来窃取用户信息、劫持会话等。

  防范措施：

  1. 输入验证和输出编码：严格验证用户输入，并在输出时对特殊字符进行编码。
  2. 使用 CSP（内容安全策略）：CSP 可以防止外部脚本执行，限制 XSS 攻击。

• CSRF（跨站请求伪造）：
  CSRF 攻击是指攻击者伪造请求并诱使受害者在已登录状态下执行该请求，从而利用受害者的身份进行恶意操作。

  防范措施：

  1. 使用 CSRF Token：为每个请求生成唯一的 token，服务器验证 token 以确保请求的合法性。
  2. SameSite Cookie 属性：设置 Cookie 的 SameSite 属性为 Strict 或 Lax，防止跨站点请求携带 Cookie。