函数柯里化

1. 函数柯里化

1. 定义：函数柯里化其实就是将一个接受多个参数的函数，分成两个函数，每一个都接受一个参数，利用闭包的原理，拿到之前的函数

2. 小技巧： * js function fn (a, ...arr){ console.log(arr) // 此时arr打印出来是一个数组不管里面有什么东西，他会从第二个形参开始都接收到数组中 } fn(1,2,3,4) // (1,[2,3,4]) * js function fun(a,b,c,d){ console.log(fun.length) // 此时打印的是形参数量 } fun(1,2,3) // 此时打印也是形参数量

2. 封装函数柯里化

function fn(a, b, c, d) {
          return a + '://' + b + ':' + c + d
      }
function fn1(callback,...arr){
  return function(..._arr){
    _arr = [...arr, ..._arr]
    if(_arr.length >= callback.length){
      return callback(..._arr)
    }else{
      return fn1(callback,..._arr)
    }
  }
}
let s = fn1(fn,'http','www.baidu.com')
let s1 = s('80')
let s2 = s1('/index.html')
console.log(s2)

2. 数据劫持

1. 后续开发都是使用框架，框架中的思想就是数据驱动视图 * 数据驱动视图的核心：数据劫持 js Object.defineProperty(添加到哪一个对象,'添加的属性名是什么',{配置项}) // 配置项的内容： // value(访问这个属性得到的值) // 这种方式添加的属性默认不允许修改,配置项加的内容默认不能被遍历(枚举)到 // writable：是否允许修改(默认值false，给true允许修改) // enumerable：是否允许遍历(枚举)到 // get(){}：是一个函数，在访问这个属性时会触发 // 注意点：get(){ return 100 也可以完成数据劫持，替代value} 不能跟value还有writable一起使用 // set(val){console.log(val)}：设置get拿到的值，重新进行设置 let obj = {} Object.defineProperty(obj,'name',{ value:'liSi', enumerable:true, // 是否可以遍历到 writable:true // 是否允许修改 }) for(let key in obj){ console.log(key) }

2. 实现数据劫持：

let obj = {
  name:'qf001',
  age:18
}
let newObj = {}
Object.defineProperty(newObj,'name'{
  get(){
    console.log()
    return obj.name
  }
  set(val){
    console.log()
    obj.name = val
  }
  // 数据劫持的核心是set和get
})

3. 封装数据劫持

let div = document.querySelector('div')
  let obj = {
    name: '张三',
    age: 18
  }
  function fn(origin, han) {
    let newObj = {}
    for (let key in origin) {
      Object.defineProperty(newObj, key, {
        get() {
          return origin[key]
        },
        set(val) {
          origin[key] = val
          han(newObj)
        }
      })
    }
    // 1. 首次执行, 调用渲染函数, 防止页面首次打开没有数据
    han(newObj)

    return newObj
  }
  function fn1(res) {
    div.innerHTML = `${res.name}<br>${res.age}`
  }
  let a = fn(obj, fn1)
  a.age = 20000
  a.name = '李四'

3. Vue框架

1. 响应式对象