立即执行函数

也叫做匿名函数自调用，可以在定义一段函数之后直接让其执行。

 ;(function () { //匿名函数自调用var a = "hello"console.log(a) })()//会直接打印hello

立即执行函数可以对外部隐藏代码的实现，还可以将变量私有化，不会对外部变量造成影响。
书写立即执行函数时注意如果你没有在代码后加分号的习惯那么建议在函数之前加上分号，否则如果前面是一个函数会表示函数调用。

function test () {console.log("bbb")
}
var  a = test
//这里如果没有分号会认为是
//var  a = test(function () { console.log("aaa") })() 程序会报错
(function () { //匿名函数自调用console.log("aaa")})()

立即执行函数由于可以使得数据私有化，所以其最主要运用场景就是js的模块化。
首先简单介绍一下模块化

由于现在项目功能越来越多，代码量便也会越来越多，后期的维护难度会增大，此时在JS方面就会考虑使用模块化规范去管理。

什么是模块?

将一个复杂的程序依据一定的规则(规范)封装成几个块(文件), 并进行组合在一起
块的内部数据/实现是私有的, 只是向外部暴露一些接口(方法)与外部其它模块通信

我们分别采用对象和立即执行函数的方式来模拟以上两个过程，
我们定义module1.js和module2.js两个文件

//module1.js通过对象定义一个模块
let obj = {msg: 'module1',foo(){console.log(this.msg)}
}

在使用时：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>02_namespace模式</title>
</head>
<body>
<script type="text/javascript" src="module1.js"></script>
<script type="text/javascript">myModule1.foo()myModule.msg = 'other data' //由于能直接修改模块内部的数据，不符合模块化规范myModule.foo()</script>
</body>
</html>

可见采用对象的方法虽然实现了文件的独立，但无法实现数据独立。

//module2.js
(function () {let msg =  'module2';function foo(){console.log(msg)}window.module2 = {foo}
})()

在使用时：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>02_namespace模式</title>
</head>
<body>
<script type="text/javascript" src="module1.js"></script>
<script type="text/javascript">msg = "aaa" //在此定义的msg为window对象的msg，对模块中的msg无影响。module2.foo() //打印‘module2’。
</script>
</body>
</html>

模块化的方式不止这一种，commonjs、ES6都有相应的规范，并且都比这个简单，这里主要借助模块化说明一下立即执行函数的用法，大家有需要可以自行去学习。

this关键字

this是JS中最让人头疼的东西，要理解这个概念需要我们先理解this是什么。

任何函数本质上都是通过某个对象来调用的，所有函数内部都有一个变量this，它的值是调用函数的当前对象。

  function Person(color) {console.log(this)this.color = color;this.getColor = function () {console.log(this)return this.color;};this.setTime = function() {setTimeout(function(){console.log(this);},1000);}}Person("red");var p = new Person("yello"); // this为p，通过new的方式p.getColor(); //pp.setTime(); //window

Person(“red”) 的this为window函数直接调用时可以理解为window.Person(“red”)。

var p = new Person(“yello”); this为p，new Person(“yello”)等价于将Person(color)这个函数改写为如下代码。

 function newPerson(color) {var this = new Object();console.log(this)this.color = color;this.getColor = function () {console.log(this)return this.color;};this.setTime = function() {setTimeout(function(){console.log(this);},1000);}return this;}

此时显而易见this指向p。

调用p.getColor();时 console.log(this)打印的是getColor()这个函数的this，该函数由p调用，所以this为p。

调用p.setTime();由于setTimeout和setInterval方法为window的方法，在调用时this会变为window，通过ES6中的箭头函数可以很好的解决这个问题。

  //源对象setTime修改为this.setTime =  function() { setTimeout( ()=> { //箭头函数中this是静态的，始终指向函数声明时所在作用域下的this值console.log(this);},1000);}var p = new Person("yello"); p.setTime(); //this为p

如果我们希望在调用函数时可以直接指定this，那可以通过call和apply来实现。
接上面的例子

 var obj = {};p.getColor.call(obj, "black"); //this为obj，第一个参数为this所指的对象，之后的参数为函数的输入参数
p.getColor.apply(obj, ["green"]); //this为obj，第一个参数为this所指的对象，第二个参数为一个数组，数组的元素为函数的输入参数//注意call和apply不会影响箭头函数this指向如果getColor修改为this.getColor =  () =>  {console.log(this)return this.color;};var p = new Person("yello"); p.getColor.call(obj, "black"); //this还是为p

call() 和 apply() 的用法基本相同，唯一的之间的不同之处是：call() 方法分别接受参数。apply() 方法接受数组形式的参数。

JavaScript重难点解析2（立即执行函数IIFE，this关键字）相关推荐

JavaScript重难点解析3（原型与原型链、执行上下文与执行上下文栈）
JavaScript重难点解析3(原型与原型链.执行上下文与执行上下文栈) 原型与原型链原型(prototype) 显示原型与隐式原型原型链 instanceof是如何判断执行上下文与执行上下文 ...
JavaScript重难点解析6（Promise）
JavaScript重难点解析6(Promise 概念为什么要使用Promise Promise 的状态 Promise 对象的值 Promise工作流程基本用法 Promise其他方法 asyn ...
JavaScript重难点解析5（对象高级、浏览器内核与事件循环模型（js异步机制））
JavaScript重难点解析5(对象高级.浏览器内核与事件循环模型(js异步机制) 对象高级对象创建模式 Object构造函数模式对象字面量模式工厂模式自定义构造函数模式构造函数+原型的组 ...
JavaScript重难点解析4（作用域与作用域链、闭包详解）
JavaScript重难点解析4(作用域与作用域链.闭包详解) 作用域与作用域链作用域作用域与执行上下文作用域链闭包闭包理解将函数作为另一个函数的返回值将函数作为实参传递给另一个函数调用 ...
JavaScript重难点解析1（数据类型——var、let、const区别，类型补充，“===”、“typeof”、“instanceof”区别，Symbol数据类型）
JavaScript重难点解析1(数据类型) var.let.const区别: 类型补充 "==="."typeof"."instanceof&quo ...
计算机学科专业基础综合简称,2010年考研北京大学计算机学科专业基础综合(408)重难点解析...
2010年考研北京大学计算机学科专业基础综合(408)重难点解析考研全程辅导专家 2010年考研北京大学计算机学科专业基础综合(408)重难点解析跨考专业课特别奉献,为广大考研学子加油助力! 计算 ...
快速排序的难点_数据结构考研重难点解析：快速排序
数据结构是计算机专业考研重点内容,大部分院校都是考到了数据结构,其中快速排序是其中的重点难点内容,因此中公考研计算机教研室为大家整理的"数据结构考研重难点解析:快速排序",希望对大 ...
跨考408计算机学科专业基础综合,考研北京航空航天大学计算机学科专业基础综合（408）重难点解析.doc...
2010年考研北京航空航天大学计算机学科专业基础综合(408)重难点解析跨考专业课特别奉献,为广大考研学子加油助力! 1.操作系统今天我们来解析一下计算统考大纲操作系统部分的知识点.操作系统的研发 ...
jacascript 立即执行函数(IIFE)与闭包
前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! 一直没搞清楚立即执行函数和闭包之间的关系,总结一下: 闭包有很多种理解:访问不到内部作用域,函数就是这样, ...

JavaScript重难点解析2（立即执行函数IIFE，this关键字）

JavaScript重难点解析2（立即执行函数IIFE，this关键字）

立即执行函数

this关键字

JavaScript重难点解析2（立即执行函数IIFE，this关键字）相关推荐

最新文章

热门文章