[Js]常识三

文章目录

    • 作用域
    • GC
    • closure
    • 变量和函数提升
    • 函数参数
    • 箭头函数
      • 箭头函数的this
      • DOM中的箭头函数
    • 解构赋值
      • 数组解构赋值
      • 数组解构必须加分号
      • 对象解构赋值
    • 深入对象
    • js built-in functions
      • Object
      • Array
      • string
    • js oop
      • 构造函数
    • js 原型
      • 原型
      • 原型继承
      • `constructor`
      • 对象原型
      • 原型继承
      • 原型链
      • 原型小案例-- Modal
    • 深浅拷贝
    • 异常处理
    • this
      • 普通函数this
      • 箭头函数的this
    • 改变this指向
      • call (有点类似java的反射)
      • apply
      • bind
      • 小结
    • 性能优化
      • 防抖 debounce
      • 节流 throttle
      • 清除定时器的trap
      • 小结
    • 综合案例:如何保存视频的上一次观看的进度

作用域

[Js]常识三_第1张图片
[Js]常识三_第2张图片
[Js]常识三_第3张图片
[Js]常识三_第4张图片

GC

[Js]常识三_第5张图片

Js Gc 算法

  • 引用计数(已淘汰)
  • 标记清除
    [Js]常识三_第6张图片[Js]常识三_第7张图片

closure

  • 一句话:内层函数 + 外层函数的变量 = 闭包
  • 作用:私有化数据,or 私有化状态
    [Js]常识三_第8张图片

变量和函数提升

  • Js 祖传var变量,目前不会再用
  • 变量的提升:只提升声明,不提升赋值
  • 除了变量提升,函数也可以提升,但是函数赋值并不能提升(!!!)
fun()

// 这种方式能正常输出到console 【函数声明提升】
// function fun(){
//     console.log('done')
// }

// 这种方式能正常 不能 输出到console 【函数赋值不能提升】 
fun = function fun(){
    console.log('done')
}

函数参数

  • 形参、实参
  • 默认参数
  • arguments
//arguments 是特殊的参数,本质是个【伪数组】,它只存在于函数
function sum() {
    let sum = 0;
    for (let index = 0; index < arguments.length; index++) {
        const element = arguments[index];
        sum += element;
    }
    return sum;
}
console.log(sum(1, 2, 3))
  • 剩余参数
// 剩余参数,有点像java中的可变参数 【开发过程中还是多使用剩余参数,而不是 arguments】
function config(baseURL, ...other) {
  console.log(baseURL)
  console.log(other) //Array
}

config('www.a.com', 'get', 'post')
  • 展开运算符
// 展开运算符,可以展开数组;注意【展开数组,不会修改原数组】
const arr1 = [1, 2, 3]
// 比如数组最大值
console.log(Math.max(...arr1)) // (method) Math.max(...values: number[]): number
console.log(Math.min(...arr1))

// 合并数组
const arr2 = [4, 5, 6]
console.log(...arr1, ...arr2)

箭头函数

跟java的lamda类似,不过js箭头函数还可以直接生成对象

//【箭头函数生成对象时,注意外面包裹着括号; 同时记得 js对象的属性是不需要引号的】
const f = (name) => ({ name: name }) 
console.log(typeof (f)) //function
console.log(f('ht')) // {name: 'ht'} ,注意name没有引号,这是个对象,不是个json

箭头函数的this

[Js]常识三_第9张图片

const f1 = () => {
   //【虽然this指window,但window是从上下文,也就是
                    
                    

你可能感兴趣的:(前端,javascript,开发语言,ecmascript)