【综合】js基础

发表于 更新于 分类于 阅读次数： Changyan： 本文字数： 2k 阅读时长 ≈ 4 分钟

1. 隐式类型转换

img

  • P 表示toPrimitive
    • 先调用 valueOf 若返回不是原始类型
      • 原始类型的包装类型调用valueOf会返回原始类型(例如String，BigInt)
    • 再调用 toString 若返回不是原始类型
    • 则报错

所有比较都有转化为数字类型的趋势

2. 实现函数缓存

1
2
3
4
5
6
7
8
9
const memoize = function (fun, content) {
	let cache = Object.create(null)
	content = content || this 
	return (...key)=> {
		if(!cache[key]) 
			cache[key] = fun.apply(content, key)
		return cache[key]
	}
}

3. requestAnimationFrame

window.requestAnimationFrame(callback)

  • 作用： 告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画
  • 参数： callback回调函数，第一个参数是回调函数被触发时的时间戳。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
const element = document.getElementById("some-element-you-want-to-animate");
let start, previousTimeStamp;
let done = false;

function step(timestamp) {
  if (start === undefined) {
    start = timestamp;
  }
  const elapsed = timestamp - start;

  if (previousTimeStamp !== timestamp) {
    // 这里使用 Math.min() 确保元素在恰好位于 200px 时停止运动
    const count = Math.min(0.1 * elapsed, 200);
    element.style.transform = `translateX(${count}px)`;
    if (count === 200) done = true;
  }

  if (elapsed < 2000) {
    // 2 秒之后停止动画
    previousTimeStamp = timestamp;
    if (!done) {
      window.requestAnimationFrame(step);
    }
  }
}

window.requestAnimationFrame(step);

4. 严格模式

1
"use strict"
  1. 禁止使用关键字声明变量
1
2
3
4
5
let x = true;
if(x){
  function g() {} // 相当于没有用关键字声明变量
}
console.log(g) //

5. this指向

1
2
(obj.fn2)(); // 函数内this指向obj
(obj.fn2 = obj.fn2)(); //函数内this指向全局作用域
  • 获取url参数
    1
    2
    let searchUrl = link.search.substr(1); // 获取问号后面字符串
    let hashUrl = link.hash.substr(1); // 获取#后面的值
    1
    2
    3
    4
    5
    6
    7
    let URL = "http://www.baidu.com?name=elephant&age=25&sex=male&num=100"
    function queryURLParams(URL) {
      let url = URL.split("?")[1];
      const urlSearchParams = new URLSearchParams(url);
      const params = Object.fromEntries(urlSearchParams.entries());
      return params
    }

6. 闭包

作用

  1. 模拟私有变量
  2. 阻止变量被回收

闭包导致的内存泄露

  1. 持有不需要的函数引用，导致函数关联词法环境无法销毁

    1
    2
    3
    4
    5
    function useArr(){
      const arr = [1];
      return ()=> arr;
    }
    const arr = useArr();

  2. 当多个函数共享词法环境，导致出现无法触及也无法回收的内存

    1
    2
    3
    4
    5
    6
    7
    8
    function useArr(){
      const arr = [1];
      function fn(){
        arr;
      }
      return ()=> [];
    }
    const arr = useArr();

继承

🔗几种继承方式

7. class

class 是ES6的新的实现继承的方式，他的本质还是寄生式组合继承

特点：

  1. class 必须用new调用
  2. class 没有变量提升