xgqfrms™, xgqfrms® : xgqfrms's offical website of cnblogs! xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!

javascript IIFE in depth

javascript IIFE in depth

function type

  1. 函数表达式

x = function (){
    console.log(x); 
}
ƒ (){
    console.log(x); 
}

x;
ƒ (){
    console.log(x); 
}

x();
ƒ (){
    console.log(x); 
}

window.x;
ƒ (){
    console.log(x); 
}

x = function x(){
    console.log(x); 
}
ƒ x(){
    console.log(x); 
}

x();
ƒ x(){
    console.log(x); 
}

window.x;
ƒ x(){
    console.log(x); 
}

  1. 函数声明

function x(){
    console.log(x); 
}

x();
ƒ x(){
    console.log(x); 
}

window.x
ƒ x(){
    console.log(x); 
}

考察知识点

  1. closure
  2. IIFE
  3. hoisting
  4. scope
  5. function declaration / function expression
  6. named function / anonymous function

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions

closure

https://javascript.info/closure

js var hoisting

  1. function

  2. var


demo

https://muyiy.cn/question/js/33.html

// 下面的代码打印什么内容,为什么?

var b = 10;
(function b(){
    b = 20;
    console.log(b); 
})();

var b = 10;
(function b(){
    b = 20;
    console.log(b); 
    console.log(window.b); 
})();


ƒ b(){
    b = 20;
    console.log(b); 
    console.log(window.b); 
}
// 10

函数表达式的函数名是常量,无法二次赋值(在正常模式下静默失效,在严格模式下报错)

非匿名自执行函数,函数名只读

'use strict';

var b = 10;
(function b(){
    'use strict';
    b = 20;
    console.log(b); 
    console.log(window.b); 
})();

//  Uncaught TypeError: Assignment to constant variable.
    at b (<anonymous>:4:7)
    at <anonymous>:7:3

https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/48#issuecomment-615547271



scope & hoisting

https://www.adequatelygood.com/JavaScript-Scoping-and-Hoisting.html

https://repl.it/@xgqfrms/Function-hoisting-greater-var-hoisting

https://stackoverflow.com/questions/7506844/javascript-function-scoping-and-hoisting

https://www.sitepoint.com/5-typical-javascript-interview-exercises/



©xgqfrms 2012-2020

www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!


posted @   xgqfrms  阅读(203)  评论(6编辑  收藏  举报
编辑推荐:
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
阅读排行:
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布:重大改进与新特性概览!
· .NET10 - 预览版1新功能体验(一)
历史上的今天:
2019-04-18 Base 64 & decodeURIComponent
2019-04-18 cmd & tree & bash & tree ignore & tree --help & tree All In One
2019-04-18 web pages & mobile adaptor & css media query All In One
点击右上角即可分享
微信分享提示