上下文和作用域

新的声明方式，新的声明方式带来了什么?块级作用域
在let之前，js只有全局作用域和函数作用域，先上个栗子吧

if(false){
   var aa = 111;
}
console.log(aa) // 111

for(var i=0;i<5;i++){
   var bb = 222;
}
console.log(i) //5
console.log(bb)  //222

其实从if这个单词开始到大括号结束，从for这个单词开始到大括号结束是有作用域的，叫做块级作用域块级作用域用逻辑判断跳出，return不能跳出块级作用域，只能跳出函数作用域，他能被外部访问是因为var的变量提升和函数提升，除掉一个习惯，函数的声明别放在if和for里，那就只剩变量提升了，如果把上面的代码改为let，const跟let一样的，不讲是因为没人会把const当变量

if(false){
   let aa = 111;
}
console.log(aa) // 错误

for(let i=0;i<5;i++){
   let bb = 222;
}
console.log(i) //错误
console.log(bb)  //错误

let让上面的aa，i，bb只能在那个小小的作用域内使用，如果同个函数作用域或者全局作用域有一样的变量，会安全很多，如果觉得没什么意义的话，就接着用var，没区别

let/const跟var有什么区别

// 面试题来着
// 这里是全局作用域window
var aa = "aa"
let bb = "bb"
console.log(window.aa)  //"aa"
console.log(window.bb)  //undefined
console.log(window.cc)  //undefined
console.log(aa)  //"aa"
console.log(bb) //"bb"
// bb并不在window里，因为他在自己的作用域里，只能用变量名去取值

所以目前已知作用域为全局作用域，函数作用域，块级作用域，用代码模拟就是

// 当页面被打开，就有一个全局作用域window
window = {
  // 还有页面里所有的dom和bom
  var dom = {}
  var bom = {}

  // 下面的内容就是程序员自己的代码或者插件了
  var name = "tom"
  function aa(){
    // 函数作用域
    if(true){
      // 块级作用域
      let name = "jee"
    }
    console.log(name) //"tom"
  }
}

上下文
回顾一个函数作用域里隐藏了什么东西
有个隐藏的arguments参数伪数组，如果是dom时间，还有个event事件对象，并且还有个肯定有的this上下文，函数被执行肯定有个执行者，执行者就是这个函数的this

// 这个都理解不了就转行吧
var name = "我是window"
function init(){
   console.log(this)  // window
   console.log(this.name)  // "我是window"
}
init()  //实际是window.init()

// 这个都理解不了就转行吧
var obj = {
   name: "我是obj",
   init(){
      console.log(this)  // obj
      console.log(this.name)  // "我是obj"
   }
}
obj.init()

如果我不想把init写在obj里，因为window我也要用，重复写很不好怎么办
用function的方法apply，call，bind
这三兄弟是面试的经典

var name = "我是window"
var obj = {
   name: "我是obj",
}
// 加两个
function init(x,y){
   console.log(x,y)
   console.log(this)
   console.log(this.name)
}
// 直接执行init肯定就是window了
init(1,2)
// 修改this方式一，立即执行
init.call(obj,1,2)
// 修改this方式二，立即执行
init.apply(obj,[1,2])
// 修改this方式三，不立即执行，后续执行
init.bind(obj)(1,2)

说apply
因为apply可以把参数变成数组，所以这个强大的优点让人们忘了他实际是用来改变this的

Math.max.apply(null, [14, 3, 77]) //第一个参数是空因为Math本来就是window的子对象
arr1.push.apply(arr1,arr2) //第一个参数需要是this自己，用null就没了
// 还可以这么写
Array.prototype.push.apply(arr1, arr2);
... 
//一切可以无限传参数的方法都可以用apply改成传数组

但是apply被拓展运算符代替了

Math.max(...[14, 3, 77])
arr1.push(...arr2);
arr1.push(...arguments);

保留this
在函数里执行函数肯定是window

function init(){
   console.log(this)
}
document.querySelector("#id").onclick = function(){
   console.log(this) //dom#id....
   console.log(this.style.color)
   init() // 我们总是以为这个是当前this执行的，但实际是window执行的
}

为了让init能拿到前一个函数的this，最常见的做法是var that = this
然后把that当做参数传过去，这个是没问题的，只是维护很难，很吐血，判断很多

function cb(that){
   console.log(that)
}
var obj = {
   name: "我是obj",
   init(cb){
      console.log(this)
      var that = this; 
      cb(that)
   }
}
obj.init(cb)

上面的call，apply，bind直接修改上下文this，而不是把上下文当做参数去传递

function cb(that){
   console.log(that)
}
var obj = {
   name: "我是obj",
   init(cb){
      console.log(this)
      cb.call(this)
   }
}
obj.init(cb)

箭头函数也可以保存this，但是必须声明在父函数内部

var obj = {
   name: "我是obj",
   init(){
      console.log(this)
      // 箭头函数执行是往上找执行者，直到找到一个执行者后停下来
      // 如果如果上一级也是箭头函数就继续往上找
      // 箭头函数没有三个改变this的方法
      // 一般也不会在这里声明一个cb函数，cb函数一般都是作为参数传进来的
      var cb = () => { console.log(this) };
      cb()  // obj 
   }
}
obj.init()

箭头函数在定时器效果最明显

var name = "name1";
function init(){
   var name = "name2";
   // 这个改的是window的name
   setTimeout(function(){
      this.name = "new"
   },2000)
   // 这个改的是上面的name
   setTimeout(()=>{
      this.name = "new"
   },2000)
}

this的使用是很少的，也不会需要经常去修改this，自定义插件就用的挺多的

上班的时候学习java后自己做了个js的面向AOP开发的功能

function aop(funArr,beforeFun,afterFun,context){
    var thatContext = context;
    var that = this;
    this.init = function(){
        that.funArrEach(funArr,thatContext);
        return that;
    }
    this.funArrEach = function(arr,context){
        arr.forEach(function(fun){
            that.addAop(fun,context)
        })
    }
    this.addAop = function(fun,context){
        var context = context || window;
        context[fun.name] = function(){
           beforeFun()
           fun.call(context,...arguments)
           afterFun()
        }
    }
    this.push = function(opt,context){
        var context = context || thatContext;
        if(Object.prototype.toString.call(opt)=="[object Array]"){
            that.funArrEach(opt,context);
        }
        if(Object.prototype.toString.call(opt)=="[object Function]"){
            that.addAop(opt,context);
        }
    }
}

function aopBeforeFun() { ... }

function aopAfterFun() { ... }

new aop([a,b,c],aopBeforeFun,aopAfterFun).init()

改进版，有时候aopBefore需要判断是否执行

this.addAop = function(fun,context){
    var context = context || window;
    context[fun.name] = function(){
       if(beforeFun(fun,context,arguments)){

       }else{
          fun.call(context,...arguments)
       }
       afterFun()
    }
}
function aopBeforeFun(cb,context,arg) {
    if(true){
      // 自己执行
      cb.call(context,...arg)
      return true;
    }else{
      // 跳过不执行了
      return true
    }    
}

aopAfter也可以按上面这么改