前端面试题集

function Person(name) {
  this.name = name;
}

Person.prototype.sayHello = function() {
  console.log(`Hello, my name is ${this.name}`);
};

const alice = new Person('Alice');
alice.sayHello(); // "Hello, my name is Alice"

// 原型链示例
console.log(alice.__proto__ === Person.prototype); // true
console.log(Person.prototype.__proto__ === Object.prototype); // true
console.log(Object.prototype.__proto__ === null); // true

// var 示例
var x = 1;
if (true) {
  var x = 2; // 同一个变量
}
console.log(x); // 2

// let 示例
let y = 1;
if (true) {
  let y = 2; // 不同的变量
}
console.log(y); // 1

// const 示例
const z = { value: 1 };
z.value = 2; // 可以修改属性
console.log(z.value); // 2
// z = { value: 3 }; // 错误：不能重新赋值

console.log('1'); // 同步代码

setTimeout(() => {
  console.log('2'); // 宏任务
}, 0);

Promise.resolve().then(() => {
  console.log('3'); // 微任务
});

console.log('4'); // 同步代码

// 输出顺序：1, 4, 3, 2

// 闭包示例 - 计数器
function createCounter() {
  let count = 0; // 私有变量
  
  return {
    increment: function() {
      count++;
      return count;
    },
    decrement: function() {
      count--;
      return count;
    },
    getCount: function() {
      return count;
    }
  };
}

const counter = createCounter();
console.log(counter.increment()); // 1
console.log(counter.increment()); // 2
console.log(counter.decrement()); // 1

// Promise 示例
function fetchDataPromise() {
  return fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => {
      console.log(data);
      return data;
    })
    .catch(error => {
      console.error('Error:', error);
    });
}

// async/await 示例
async function fetchDataAsync() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
    return data;
  } catch (error) {
    console.error('Error:', error);
  }
}

// Vue 2 响应式系统简化示例
function defineReactive(obj, key, val) {
  const dep = new Dep(); // 依赖收集器
  
  Object.defineProperty(obj, key, {
    get() {
      if (Dep.target) {
        dep.depend(); // 收集依赖
      }
      return val;
    },
    set(newVal) {
      if (newVal === val) return;
      val = newVal;
      dep.notify(); // 通知依赖更新
    }
  });
}

// Vue 3 响应式系统简化示例
function reactive(obj) {
  return new Proxy(obj, {
    get(target, key, receiver) {
      track(target, key); // 收集依赖
      return Reflect.get(target, key, receiver);
    },
    set(target, key, value, receiver) {
      const result = Reflect.set(target, key, value, receiver);
      trigger(target, key); // 触发更新
      return result;
    }
  });
}

// Hash 模式路由简单实现
class HashRouter {
  constructor() {
    this.routes = {};
    window.addEventListener('hashchange', this.handleHashChange.bind(this));
    this.handleHashChange();
  }
  
  route(path, callback) {
    this.routes[path] = callback;
  }
  
  handleHashChange() {
    const hash = window.location.hash.slice(1) || '/';
    const handler = this.routes[hash];
    if (handler) {
      handler();
    }
  }
}

// History 模式路由简单实现
class HistoryRouter {
  constructor() {
    this.routes = {};
    window.addEventListener('popstate', this.handlePopState.bind(this));
    this.handlePopState();
  }
  
  route(path, callback) {
    this.routes[path] = callback;
  }
  
  navigate(path) {
    history.pushState(null, null, path);
    this.handlePopState();
  }
  
  handlePopState() {
    const path = window.location.pathname;
    const handler = this.routes[path];
    if (handler) {
      handler();
    }
  }
}

// Redux 示例
// 创建 reducer
function counterReducer(state = { count: 0 }, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    case 'DECREMENT':
      return { count: state.count - 1 };
    default:
      return state;
  }
}

// 创建 store
const store = Redux.createStore(counterReducer);

// 订阅变化
store.subscribe(() => {
  console.log(store.getState());
});

// 发送 action
store.dispatch({ type: 'INCREMENT' }); // { count: 1 }
store.dispatch({ type: 'INCREMENT' }); // { count: 2 }
store.dispatch({ type: 'DECREMENT' }); // { count: 1 }

// Vuex 示例
const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    },
    decrement(state) {
      state.count--;
    }
  },
  actions: {
    incrementAsync({ commit }) {
      setTimeout(() => {
        commit('increment');
      }, 1000);
    }
  },
  getters: {
    doubleCount: state => state.count * 2
  }
});

// Pinia 示例 (Vue 3)
import { defineStore } from 'pinia';

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0
  }),
  getters: {
    doubleCount: (state) => state.count * 2
  },
  actions: {
    increment() {
      this.count++;
    },
    async incrementAsync() {
      await new Promise(resolve => setTimeout(resolve, 1000));
      this.increment();
    }
  }
});

// 导出 (math.js)
module.exports = {
  add: (a, b) => a + b,
  subtract: (a, b) => a - b
};

// 导入
const math = require('./math');
console.log(math.add(2, 3)); // 5

// 定义模块
define('math', [], function() {
  return {
    add: function(a, b) { return a + b; },
    subtract: function(a, b) { return a - b; }
  };
});

// 使用模块
require(['math'], function(math) {
  console.log(math.add(2, 3)); // 5
});

// 导出 (math.js)
export function add(a, b) {
  return a + b;
}

export function subtract(a, b) {
  return a - b;
}

// 导入
import { add, subtract } from './math.js';
console.log(add(2, 3)); // 5

// webpack.config.js 示例
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  // 入口
  entry: './src/index.js',
  
  // 输出
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.[contenthash].js'
  },
  
  // 模式
  mode: 'production',
  
  // 模块处理
  module: {
    rules: [
      // 处理 JavaScript
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      },
      // 处理 CSS
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      // 处理图片
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: 'asset/resource'
      }
    ]
  },
  
  // 插件
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ],
  
  // 优化
  optimization: {
    splitChunks: {
      chunks: 'all'
    }
  }
};

// 性能监测示例
// 使用 Performance API 测量关键指标
const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    console.log(`${entry.name}: ${entry.startTime}ms`);
  }
});

// 监听各种性能指标
observer.observe({ entryTypes: ['paint', 'largest-contentful-paint', 'layout-shift'] });

// 自定义性能标记
performance.mark('app-init-start');
// ... 初始化应用 ...
performance.mark('app-init-end');
performance.measure('app-initialization', 'app-init-start', 'app-init-end');

// 输入转义示例
function escapeHTML(str) {
  return str
    .replace(/&/g, '&')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;')
    .replace(/'/g, '&#039;');
}

// CSP 示例
// 在 HTTP 头中设置
// Content-Security-Policy: default-src 'self'; script-src 'self' https://trusted-cdn.com;

// CSRF Token 示例
// 服务端生成 token 并在表单中包含
const csrfToken = generateRandomToken();
session.csrfToken = csrfToken;

// HTML 表单
<form action="/api/update" method="POST">
  <input type="hidden" name="csrf_token" value="{{csrfToken}}">
  <!-- 其他表单字段 -->
</form>

// 服务端验证
if (request.body.csrf_token !== session.csrfToken) {
  return response.status(403).send('CSRF token 验证失败');
}

// X-Frame-Options 示例
// 在 HTTP 头中设置
// X-Frame-Options: DENY
// 或
// X-Frame-Options: SAMEORIGIN

// CSP frame-ancestors 示例
// Content-Security-Policy: frame-ancestors 'none';

// 简单的路由分发示例
const routes = {
  '/app1': loadApp1,
  '/app2': loadApp2,
  '/app3': loadApp3
};

function router() {
  const path = window.location.pathname;
  const route = Object.keys(routes).find(route => path.startsWith(route));
  
  if (route) {
    routes[route]();
  } else {
    loadDefaultApp();
  }
}

window.addEventListener('popstate', router);
router();

// Web Components 示例
class MicroApp extends HTMLElement {
  connectedCallback() {
    const appName = this.getAttribute('name');
    const appUrl = this.getAttribute('url');
    
    // 加载微应用
    fetch(`${appUrl}/asset-manifest.json`)
      .then(res => res.json())
      .then(manifest => {
        // 加载 JS 和 CSS
        this.loadResources(manifest, appUrl);
      });
  }
  
  loadResources(manifest, baseUrl) {
    // 加载 CSS
    if (manifest.css) {
      const link = document.createElement('link');
      link.rel = 'stylesheet';
      link.href = `${baseUrl}/${manifest.css}`;
      this.appendChild(link);
    }
    
    // 加载 JS
    if (manifest.js) {
      const script = document.createElement('script');
      script.src = `${baseUrl}/${manifest.js}`;
      script.onload = () => {
        // 调用微应用的挂载函数
        window[`mount${this.getAttribute('name')}`](this);
      };
      this.appendChild(script);
    }
  }
  
  disconnectedCallback() {
    // 调用微应用的卸载函数
    const appName = this.getAttribute('name');
    if (window[`unmount${appName}`]) {
      window[`unmount${appName}`]();
    }
  }
}

customElements.define('micro-app', MicroApp);

// 动态加载模块示例
function loadApp(name, url) {
  return new Promise((resolve, reject) => {
    const script = document.createElement('script');
    script.src = url;
    script.onload = () => {
      resolve(window[name]);
    };
    script.onerror = reject;
    document.head.appendChild(script);
  });
}

// 使用
loadApp('app1', 'https://app1.example.com/bundle.js')
  .then(app => {
    app.mount(document.getElementById('app1-container'));
  });

// single-spa 示例
import { registerApplication, start } from 'single-spa';

// 注册应用
registerApplication({
  name: 'app1',
  app: () => import('app1'),
  activeWhen: '/app1'
});

registerApplication({
  name: 'app2',
  app: () => import('app2'),
  activeWhen: '/app2'
});

// 启动
start();