JavaScript 自执行函数剖析

回想一下，我们平时写的一些具名函数（也就是区别于匿名函数的函数），如下面一个例子：

1 function sayHello(){
2     console.log("hello,我是林丽君");
3 }
4 sayHello();

分析一下上面的调用方式，sayHello是我们的函数名，当我们想要它执行的时候，我们就在这个函数名的后面添加一对括号()，像这样sayHello()，我们的函数就会被执行了。还不懂？没关系，我们再来分析一个例子：

1 var sayHello=function(){
2     console.log("hello,我是林丽君");
3 }
4  sayHello();//hello,我是林丽君

在上面的例子中，我们定义了一个匿名函数，这个匿名函数干的事就是在控制台输出“hello,我是林丽君”，然后把这个匿名函数赋给变量sayHello，那么我们调用的时候就是在这个变量名的后面直接加上一对括号()，这样我们的函数就会被执行，在上面的例子中，如果我们不加后面那对括号，我们调用这个sayHello会输出什么呢？我们来用代码测试一下：

1 function sayHello(){
2     console.log("hello,我是林丽君");
3 }
4 console.log(sayHello);

在控制台我们会看到：

它会输出整个函数的定义，所以我们在这个函数的后面加上一个()，其实是在调用这个函数，所以自执行函数的另外一种更明确的叫法应该是“立即调用的函数表达式”，它并不是自己能够自动执行，而是我们使用者自己在显式的调用它。注意在这里我们要提醒各位读者，你可不能贪图方便将我们的代码写成这样：

1 function(){
2     console.log("hello，我是林丽君");
3 }();

这段代码会导致语法错误，因为JavaScript将function关键字当做一个函数声明的开始，而函数声明的后面不能跟圆括号，但是函数表达式的后面可以跟圆括号，想要将我们的函数声明转变成函数表达式，我们只需要将我们的函数声明加上一对圆括号，像这样：

1 (function(){
2     console.log("hello，我是林丽君");
3 })();

如果我们的函数是需要传参的话，像下面这样，我们直接在后面的圆括号里面把我们的参数传进去就可以了

1 (function sayLove(i,you){
2 console.log(i+" love "+you);
3 })("林丽君","张俊祺");
4 //这个时候会输出  林丽君 love 张俊祺

看到这里你一定很疑惑我们为什么要这样写，你经常看到别人说这样写是为了创建作用域，或许你只是人云亦云，并不是真的理解这个话的意思，下面我们来分析它的作用：

在JavaScript里面，我们并没有块级作用域的概念，这个话怎么理解呢？下面来看一段代码：

1 function countNum(num){
2     for(var i=0;i<num;i++){
3     }
4     //这里我们调用一下i
5     console.log(i);
6     //这个时候我们控制台会输出i,一开始变量i的值是0，在java和C++等语言中，变量i在循环之后会被销毁，但是在JavaScript里面，这个i可以在函数的内部的任何地方被调用
7 }

如果你在函数里面重复声明了这个i，JavaScript是不是提示你重复定义了这个i，在java语言中，会直接报错，因为一个变量不能再一个函数中被重复定义多次，所以匿名函数可以用来模仿块级作用域来避免这些问题，像这样：

function countNum(num){(for(var i=0;i<num;i++){})();    console.log(i);
//这里我们再调用一下i，这个时候会报错
}

所以这种技术通常用在全局作用域中被用在函数的外部，从而限制向全局作用域添加过多的变量和函数，同时可以避免命名冲突

这种技术我们比较关注的的点就是我们的this对象，首先我们必须明白这一点，我们的this是基于函数的执行环境的，在全局函数中，我们的this是window对象，当函数被当做某个对象的方法调用的时候，this是指向那个对象，不过，匿名函数的执行环境具有全局性，因此其this对象通常指向window，当然根据我们编写闭包的方式，这个分界线并不总是那么清楚。

转载于:https://www.cnblogs.com/baby-lijun/p/5321443.html

JavaScript 自执行函数剖析相关推荐

JavaScript立即执行函数报错--立即执行函数原理分析
JavaScript立即执行函数报错 1.'()'在JavaScript环境中有提升运算符优先级和执行函数的作用如果直接在JavaScript环境中执行'()',环境会报出语法错误提示. 2.'()' ...
JavaScript自执行函数,自执行函数是什么,存在的意义?
JavaScript自执行函数 1.自执行函数是什么 2.自执行函数存在的意义 2.1封装 3.自执行函数两种常见的的写法 3.1自执行函数的第一种写法 3.2自执行函数的第二种写法 4.自执行函数的 ...
Javascript 立即执行函数
http://weizhifeng.net/immediately-invoked-function-expression.html var f1 = function() {var res = [] ...
Javascript 自执行函数
前言大家学JavaScript的时候,经常遇到自执行匿名函数的代码,今天我们主要就来想想说一下自执行. 在详细了解这个之前,我们来谈了解一下"自执行"这个叫法,本文对这个功能的叫 ...
JavaScript 立即执行函数的两种写法
(function(str){console.log(str+'欢迎你~');})('行步至春深');(function(str) {console.log(str+'欢迎你~');}('行路易知难' ...
JavaScript 自执行函数和 jQuery扩展方法
我们通常将JS代码写在一个单独的JS文件中,然后在页面中引入该文件.但是,有时候引入后会碰到变量名或函数名与其它JS代码冲突的问题.那么如何解决这个问题呢?作用域隔离.在JS中,作用域是通过函数来划分 ...
javascript自执行函数
概述自执行函数又被称为立即调用函数,顾名思义,就是可以函数声明后可以立即被执行,我们在读常用js库(如jquery)源码时,经常会发现自执行函数的身影,下面说下我的理解. 写法自执行函数有两种写法 ...
JavaScript立即执行函数学习
1.新建对象,方法内变量作用域理解错误 var md1 = {count: 0,add: function () {count++;},sub: function () {count--;},show ...
JavaScript 自执行函数（闭包）
1. 全局污染在变量声明的时候有一个规则:重复声明无效 var num = 123; var num = 'abc'; 重复声明的代码不会报任何错误,但是其声明特征就没有了,会转换成普通赋值语句故 ...

JavaScript 自执行函数剖析

JavaScript 自执行函数剖析相关推荐

最新文章

热门文章