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 发布文章使用:只允许注册用户才可以访问!


javascript IIFE in depth的更多相关文章

  1. [javascript]IIFE立即执行的函数表达式

    近况:最近一直忙着找实习没有更新,不过学习还是在继续的.最近在写Node.js又稍带把javascript的角落知识捡了一遍,过半个月打算去看看python和一些CSS深层的书和博客.工作找的还好,拿 ...

  2. [Javascript] IIFE

    Javascript modules are a design pattern that allow you to encapsulate your code into smaller self ma ...

  3. [Javascript] Array methods in depth - filter

    Array filter creates a new array with all elements that pass the test implemented by the provided fu ...

  4. 每个JavaScript开发人员应该知道的33个概念

    每个JavaScript开发人员应该知道的33个概念 介绍 创建此存储库的目的是帮助开发人员在JavaScript中掌握他们的概念.这不是一项要求,而是未来研究的指南.它基于Stephen Curti ...

  5. 用简单的方法学习ES6

    ES6 简要概览 这里是ES6 简要概览.本文大量参考了ES6特性代码仓库,请允许我感谢其作者@Luke Hoban的卓越贡献,也感谢@Axel Rauschmayer所作的[优秀书籍]//explo ...

  6. JS学习笔记3_函数表达式

    1.函数表达式与函数声明的区别 函数声明有“提升”(hoisting)的特性,而函数表达式没有.也就是说,函数声明会在加载代码时被预先加载到context中,而函数表达式只有在执行表达式语句时才会被加 ...

  7. NodeJS反序列化漏洞利用

    原文来自:http://www.4hou.com/web/13024.html node.js是一个服务器端的运行环境,封装了Google V8引擎,V8引擎执行JavaScript速度非常快,性能非 ...

  8. JavaScript学习笔记(二)——闭包、IIFE、apply、函数与对象

    一.闭包(Closure) 1.1.闭包相关的问题 请在页面中放10个div,每个div中放入字母a-j,当点击每一个div时显示索引号,如第1个div显示0,第10个显示9:方法:找到所有的div, ...

  9. JavaScript学习总结(二)——闭包、IIFE、apply、函数与对象

    一.闭包(Closure) 1.1.闭包相关的问题 请在页面中放10个div,每个div中放入字母a-j,当点击每一个div时显示索引号,如第1个div显示0,第10个显示9:方法:找到所有的div, ...

随机推荐

  1. Salt (cryptography)

    Salt (cryptography) Here is an incomplete example of a salt value for storing passwords. This first ...

  2. 急~为啥我指定的的maven依赖版本没有生效?不是最短路径原则吗?

    女朋友他们项目用了 spring-boot,以 spring-boot-parent 作为 parent: <parent> <groupId>org.springframew ...

  3. Node 使用webpack编写简单的前端应用

    编写目的 1. 使用 Node 依赖webpack.jQuery编写简单的前端应用. 操作步骤 (1)新建一个目录 $ mkdir simple-app-demo $ cd simple-app-de ...

  4. 如何手动封装Promise函数

    第一步:Promise构造函数接受一个函数作为参数,该函数的两个参数分别是:resolve和reject; function Promise(task) { // 缓存this let that = ...

  5. Spring MVC—模型数据,转发重定向,静态资源处理方式

    Spring MVC处理模型数据 添加模型数据的方法 ModelAndView Map及Model SessionAttribute ModelAttribute Spring MVC转发和重定向 S ...

  6. MySQL常见优化

    MySQL常见优化 1.操作符优化 1.1<> 操作符(不等于) 1.2LIKE优化 1.3in,not in,exists与not exists 1.3.1in和exists 2.whe ...

  7. Spark高级数据分析——纽约出租车轨迹的空间和时间数据分析

    Spark高级数据分析--纽约出租车轨迹的空间和时间数据分析 一.地理空间分析: 二.pom.xml 原文地址:https://www.jianshu.com/p/eb6f3e0c09b5 作者:II ...

  8. docker(mysql-redmine)

    一.安装docker 首先查看自己的版本,我的是centos 版本为 [root@localhost redmine]# uname -r 3.10.0-862.el7.x86_64 移除旧版本 yu ...

  9. 小白搭建WNMP详细教程---PHP安装与设置

    php的安装请参考WAMP中PHP的安装教程https://www.cnblogs.com/missbye/p/12049925.html 需要注意的是,我们下载的PHP版本要下载Non Thread ...

  10. CR和LF

    现在的电脑操作系统主要有windows.unix/linux.macos这三种. 首先, 回车:英文(carriage return ),缩写CR 换行:英文(line  feed),缩写LF 在wi ...