xxx科技-前端工程师

null == undefined      // true（特殊规则）
null === undefined     // false（类型和值都要相同）
Object.is(null, null)  // true
Object.is(NaN, NaN)    // true（与 == 和 === 不同）

function Parent() {}
Parent.prototype.method = 'parent';
 
const obj = new Parent();
obj.own = 'own';
 
// hasOwnProperty 只检查自身属性
console.log(obj.hasOwnProperty('own'));          // true
console.log(obj.hasOwnProperty('method'));       // false
 
// in 操作符检查自身和原型链
console.log('own' in obj);                       // true
console.log('method' in obj);                    // true
 
// for...in 遍历自身和可枚举的原型属性
for (let key in obj) {
  console.log(key); // 'own', 'method'
}

function introduce(job, hobby) {
  return `我是${this.name}，职位是${job}，爱好是${hobby}`;
}
 
const person = { name: '小明' };
 
// call：逐个传递参数
introduce.call(person, '前端工程师', '编程');
// 输出：我是小明，职位是前端工程师，爱好是编程
 
// apply：使用数组传递参数
introduce.apply(person, ['前端工程师', '编程']);
// 输出：我是小明，职位是前端工程师，爱好是编程
 
// bind：返回新函数，不立即执行
const boundFunc = introduce.bind(person, '前端工程师');
boundFunc('编程'); // 我是小明，职位是前端工程师，爱好是编程

var a = {};
var b = Object.prototype;
[a.prototype === blur, Object.getProtoTypeOf(a) === b]

var a = {};
var b = Object.prototype;

var a = {};
var b = Object.prototype;
 
console.log(Object.getPrototypeOf(a) === b);  // true
console.log(a.__proto__ === b);               // true
console.log(a.hasOwnProperty('prototype'));   // false

// 父组件（祖先）
export default {
  provide() {
    return {
      message: '来自祖先的数据'
    }
  }
}
 
// 孙组件（后代）
export default {
  inject: ['message'],
  setup() {
    // 可以使用 message
  }
}

// Vue 使用数据劫持
Object.defineProperty(obj, 'count', {
  get() { /* 依赖收集 */ },
  set(newVal) { /* 触发更新 */ }
});
 
// AngularJS 使用脏检查
// 在每个事件循环中检查数据是否变化

// 全局函数
parseFloat('3.14');           // 3.14
setTimeout(() => {}, 1000);   // 延迟 1s 执行
eval('2 + 3');               // 5（不推荐）
escape('hello world');        // 已弃用
 
// Window 方法
alert('提示');
prompt('输入');
confirm('确认');

const p = new Promise((resolve, reject) => {
  // pending 状态
  setTimeout(() => {
    resolve('成功');  // 变为 fulfilled
  }, 1000);
});

function outer() {
  let count = 0;  // 这个变量会被保留在内存中
  
  return function inner() {
    count++;
    console.log(count);
  };
}
 
const counter = outer();
counter();  // 1
counter();  // 2
counter();  // 3
 
// count 变量始终保存在内存中，不会被清除

// Vue 2：Object.defineProperty（有局限性）
Object.defineProperty(obj, 'count', {
  get() { /* 依赖收集 */ },
  set(val) { /* 触发更新 */ }
});
 
// Vue 3：Proxy（更强大）
const proxy = new Proxy(obj, {
  get(target, key) { /* 依赖收集 */ },
  set(target, key, val) { /* 触发更新 */ }
});

// Cookie
document.cookie = 'name=john; max-age=3600; path=/';
console.log(document.cookie);
 
// SessionStorage（浏览器关闭清除）
sessionStorage.setItem('user', 'john');
console.log(sessionStorage.getItem('user'));
sessionStorage.removeItem('user');
 
// LocalStorage（永久保存）
localStorage.setItem('theme', 'dark');
console.log(localStorage.getItem('theme'));
localStorage.clear(); // 清除所有

app.use((req, res, next) => {
  // 静态资源缓存 1 年
  if (req.url.match(/\.(js|css|png|jpg)$/)) {
    res.set('Cache-Control', 'public, max-age=31536000');
  }
  // HTML 不缓存
  else if (req.url.endsWith('.html')) {
    res.set('Cache-Control', 'no-cache');
  }
  next();
});

// 简化的 Vue 响应式系统
 
class Vue {
  constructor(options) {
    this.data = options.data;
    this.template = options.template;
    this.methods = options.methods;
    
    this.observe(this.data);
    this.render();
  }
  
  observe(obj) {
    Object.keys(obj).forEach(key => {
      let value = obj[key];
      const dep = new Dep(); // 依赖收集
      
      Object.defineProperty(obj, key, {
        get() {
          Dep.target && dep.addSub(Dep.target);
          return value;
        },
        set(newValue) {
          if (newValue !== value) {
            value = newValue;
            dep.notify(); // 触发更新
          }
        }
      });
    });
  }
  
  render() {
    Dep.target = new Watcher(); // 创建观察者
    // 解析模板并更新视图
    document.body.innerHTML = this.parseTemplate();
    Dep.target = null;
  }
  
  parseTemplate() {
    let html = this.template;
    Object.keys(this.data).forEach(key => {
      html = html.replace(`{{ ${key} }}`, this.data[key]);
    });
    return html;
  }
}
 
class Dep {
  constructor() {
    this.subs = [];
  }
  
  addSub(sub) {
    this.subs.push(sub);
  }
  
  notify() {
    this.subs.forEach(sub => sub.update());
  }
}
 
class Watcher {
  update() {
    console.log('视图需要更新');
    // 重新渲染
  }
}

// 恶意 URL
https://example.com/search?q=<img src=x onerror=alert('XSS')>
 
// 服务器响应（未转义）
<p>您搜索的内容：<img src=x onerror=alert('XSS')></p>

// 1. 服务器端转义（推荐）
function escapeHtml(text) {
  const map = {
    '&': '&',
    '<': '&lt;',
    '>': '&gt;',
    '"': '&quot;',
    "'": '&#39;'
  };
  return text.replace(/[&<>"']/g, m => map[m]);
}
 
console.log(escapeHtml('<img src=x onerror=alert(1)>'));
// 输出：&lt;img src=x onerror=alert(1)&gt;
 
// 2. CSP（内容安全政策）
// 响应头：Content-Security-Policy: script-src 'self'
 
// 3. 前端防护
const userInput = document.getElementById('input').value;
const escaped = escapeHtml(userInput);
document.getElementById('output').textContent = escaped; // 用 textContent 而不是 innerHTML

/* 状态伪类 */
a:hover {}      /* 鼠标悬停 */
a:visited {}    /* 已访问 */
a:active {}     /* 被激活 */
input:focus {}  /* 获得焦点 */
 
/* 结构伪类 */
li:first-child {}   /* 第一个子元素 */
li:last-child {}    /* 最后一个子元素 */
li:nth-child(2) {}  /* 第二个子元素 */
 
/* 其他 */
input:checked {}    /* 复选框被选中 */
input:disabled {}   /* 禁用状态 */

/* 创建虚拟元素 */
p::first-line {}    /* 第一行 */
p::first-letter {}  /* 第一个字符 */
p::before {}        /* 前面插入内容 */
p::after {}         /* 后面插入内容 */
input::placeholder {}  /* 输入框占位符 */
 
/* 实际应用 */
h1::before {
  content: '标题：';
  color: red;
}

console.log('1. 同步');
 
setTimeout(() => {
  console.log('2. 宏任务(setTimeout)');
}, 0);
 
Promise.resolve()
  .then(() => {
    console.log('3. 微任务(Promise)');
  })
  .then(() => {
    console.log('4. 微任务(Promise)');
  });
 
console.log('5. 同步');
 
// 输出顺序：
// 1. 同步
// 5. 同步
// 3. 微任务(Promise)
// 4. 微任务(Promise)
// 2. 宏任务(setTimeout)

function debounce(fn, delay) {
  let timer = null;
  return function(...args) {
    clearTimeout(timer);
    timer = setTimeout(() => {
      fn.apply(this, args);
    }, delay);
  };
}
 
// 使用场景：搜索输入、窗口 resize、自动保存等
const search = debounce((query) => {
  console.log(`搜索：${query}`);
}, 500);
 
input.addEventListener('input', (e) => {
  search(e.target.value);
});

function throttle(fn, delay) {
  let lastTime = 0;
  return function(...args) {
    const now = Date.now();
    if (now - lastTime >= delay) {
      fn.apply(this, args);
      lastTime = now;
    }
  };
}
 
// 使用场景：滚动加载、按钮点击、鼠标移动等
const scroll = throttle(() => {
  console.log('滚动中...');
}, 300);
 
window.addEventListener('scroll', scroll);

// Vue 2
Vue.directive('lazy', {
  inserted(el, binding) {
    const imageUrl = binding.value;
    
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          el.src = imageUrl;
          el.style.opacity = '1';
          observer.unobserve(el);
        }
      });
    });
    
    el.style.opacity = '0';
    el.style.transition = 'opacity 0.5s';
    observer.observe(el);
  }
});
 
// 使用
// <img v-lazy="imageUrl" />

<!-- Vue 3 -->
<script setup>
const vLazy = (el, binding) => {
  const imageUrl = binding.value;
  
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        el.src = imageUrl;
        el.style.opacity = '1';
        observer.unobserve(el);
      }
    });
  });
  
  el.style.opacity = '0';
  el.style.transition = 'opacity 0.5s';
  observer.observe(el);
};
</script>
 
<template>
  <img v-lazy="imageUrl" />
</template>

// 方式1：闭包 + 缓存
function createFibonacci() {
  const cache = { 0: 0, 1: 1 };
  
  function fib(n) {
    if (n in cache) {
      return cache[n];
    }
    const result = fib(n - 1) + fib(n - 2);
    cache[n] = result;
    return result;
  }
  
  return fib;
}
 
const fib = createFibonacci();
console.log(fib(10));  // 55
console.log(fib(50));  // 快速计算
 
// 方式2：装饰器模式
function memoize(fn) {
  const cache = {};
  return function(n) {
    if (n in cache) {
      return cache[n];
    }
    const result = fn(n);
    cache[n] = result;
    return result;
  };
}
 
const fibonacci = memoize(function fib(n) {
  if (n <= 1) return n;
  return fib(n - 1) + fib(n - 2);
});
 
console.log(fibonacci(10));  // 55
 
// 方式3：动态规划（最高效）
function fibonacciDP(n) {
  if (n <= 1) return n;
  
  const dp = [0, 1];
  for (let i = 2; i <= n; i++) {
    dp[i] = dp[i - 1] + dp[i - 2];
  }
  return dp[n];
}
 
console.log(fibonacciDP(50));  // 12586269025