zoukankan      html  css  js  c++  java
  • 作用域和闭包

    现有声明后有赋值

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

    函数表达式:

    立即执行的函数表达式

    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
    

      

  • 相关阅读:
    关于Cocos2d-x开发一个游戏的过程自述
    关于JDK环境变量的配置问题
    lnmp、lamp、lnmpa一键安装包(Updated: 2015-10-25)
    成大事者必备的九种能力、九种手段、九种心态
    燕十八mysql笔记
    cmake 安装 mysql5.5 版本
    IOS 中微信 网页授权报 key[也就是code]失效 解决办法
    js 复制 功能
    php 二维数组排序
    php获取前一天,前一个月,前一年的时间
  • 原文地址:https://www.cnblogs.com/codingFan/p/15622329.html
Copyright © 2011-2022 走看看