作用域和闭包

现有声明后有赋值

声明在编译时会提升位置，提升时函数会优先变量，如果是同名函数顺序排在后面的会覆盖前面的函数

函数表达式：

立即执行的函数表达式

var a = 2;
(function IIFE(global) {
     var a = 3;
     console.log(a)//3
})(window);

块作用域和闭包

闭包：

function foo(){
  var a = 3;
  function bar() {
        console.log(a);
    } 
    return bar
}

var baz = foo();
baz() // 3

 

for(var i = 0; i< 5; i++){
    setTimeout(function timer(){
      console.log(i);
    },i*1000)
}
// 5
// 5
// 5
// 5
// 5
// 不是期待的结果,因为他们要找i的话就要取的同一个i

解决方式
闭包：
for(var i = 0; i< 5; i++){
    (function(j){
      setTimeout(function timer(){
        console.log(j);
      },i*1000)
    })(i)
}
块作用域：
for(let i = 0; i< 5; i++){
    setTimeout(function timer(){
      console.log(i);
    },i*1000)
}

es6之前模块化：

var foo = (function Greeting() {
  function goodMorning(){
    console.log("goodMorning");
  }
  function goodAfternoon(){
    console.log("goodAfternoon");
  }
  function goodEvening(){
    console.log("goodEvening");
  }
   return {
    goodMorning:goodMorning,
    goodAfternoon:goodAfternoon,
    goodEvening:goodEvening
  }
})()

var MyMoudles = (function Manager() {
  var modules = {};
  function define(name,deps,impl){
    for(var i=0;i<deps.length;i++){
      deps[i]= modules[deps[i]];
    }
    modules[name]= impl.apply(impl,deps);
  }
  function get(name){
    return modules[name];
  }
  return {
    define:define,
    get:get
  }
})()
// 添加例子
MyMoudles.define("bar",[],function(){
  function hello(who){
    console.log("hello!"+who);
  }
})

var bar = MyModules.get("bar");
bar.hello("xiao jie jie");

es6模块化：

//bar.js
function hello(who){
  console.log("hello!"+who);
}
export hello;

//main.js
// import bar from "bar"
module bar from "bar"


bar.hello("xiao jie jie");
// import 是将一个模块中的一个或者多个api倒入当前作用域中
// module是将整个模块的api导入并绑定到一个变量上

this与词法作用域

this指向问题：

var obj = {
  id = "awesome",
  cool: function coolFn() {
    console.log(this.id);
  }
}
var id = "not awesome";
obj.cool();// awesome
setTimeout(obj.cool,100);//not awesome

解决方法：

第一种

var obj = {
  count: 0,
  cool: function coolFn() {
    var self = this;
    if(self.count < 1){
      setTimeout(function timer(){
        self.count++;
        console.log("awesome");
      },100)
    }
  }
}
obj.cool();// awesome

第二种

var obj = {
  count: 0,
  cool: function coolFn() {
    if(this.count < 1){
      setTimeout(function timer(){
        this.count++;
        console.log("awesome");
      }.bind(this),100)
    }
  }
}
obj.cool();// awesome

第三种

var obj = {
  count: 0,
  cool: function coolFn() {
    if(this.count < 1){
      setTimeout(()=>{
        this.count++;
        console.log("awesome");
      },100)
    }
  }
}
obj.cool();// awesome