码迷,mamicode.com
首页 > 其他好文 > 详细

立即执行函数表达式(自执行函数)

时间:2019-12-29 12:55:16      阅读:78      评论:0      收藏:0      [点我收藏+]

标签:this   console   cti   业务   参数   oba   感叹号   比较   global   

立即执行函数表达式

立即执行函数表达式,大部分人也称为自执行函数。

自执行函数的写法

匿名函数

(function(){
        console.log(2)
    })()

具名函数

(function log(){
        console.log(2)
    })()

自执行函数的传参

(function add(a, b){
        console.log(a + b)
    })(1,2)

返回值

let fn =  (function add(a,b){
        return a + b;
    })(2,4);

console.log(fn)

自执行函数也可以传递函数作为参数

var a = 2;

(function log(fn){
        fn(window)
    })(function fn(global){
        var a = 3;
        console.log(a); // 3
        console.log(global.a); // 2
    });

为什么要使用立即执行函数表达式

function add(a, b){
    var c = 2;
    console.log(a + b);
}
add(1,2);

有些时候我们要实现需求,为了实现这些业务逻辑,为了不让变量污染全局环境,定义了函数,但是这些函数,却不是等待调用的,程序一启动,那些函数也跟着执行,但像上面的代码,尽管函数里面的变量是没有污染全局,但add这个函数名变量,却还是污染了全局,有点不美,所以使用立即执行函数表达式就能解决这种情况。

(function add(a, b){
    var c = 2;
    console.log(a + b);
})(1,2)

注意事项

虽说javaScript的分号是可有可无的,但有些时候还是必要的。

console.log(5)

(function add(a, b){
    var c = 2;
    console.log(a + b);
})(1,2)

上面代码会报错,因为javaScript确实是有分号这个规则的,代表着语句的结束。

这种时候加个分号就行了

console.log(5);

(function add(a, b){
    var c = 2;
    console.log(a + b);
})(1,2)

但是很多时候我们已经习惯不加分号了,显得比较麻烦,这种时候就要知道,什么情况下该加分号。

只要语句开头是括号,方括号,正则开头的斜杠,加号,减号的情况下,在前面加分号就行了,当然也可以加别的符号,比如感叹号,不过一般都是加分号

console.log(5)

;(function add(a, b){
    var c = 2;
    console.log(a + b);
})(1,2)

!(function add(a, b){
    console.log(a * b);
})(3,2)

在对象里使用自执行函数

var a = 5
var obj = {
    a: 1,
    b: function(){
        console.log(this.a)// 5
    }(),
    c: 4
}
var a = 5
var obj = {
    a: 1,
    b: +function(){
        console.log(this.a)// 5
    }(),
    c: 4
}

以上两种都可以,但需要注意的是对象里的立即执行表达式改变了原本this的指向,这时的thiswindow

var a = 5
var obj = {
    a: 1,
    b: function(){
        console.log(this.a)// 1
    },
    c: 4
}
obj.b()

这种时候,this是指向obj

立即执行函数表达式(自执行函数)

标签:this   console   cti   业务   参数   oba   感叹号   比较   global   

原文地址:https://www.cnblogs.com/tourey-fatty/p/12114649.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!