这篇文章不先放定义，现放个碰到的例子。
下图是需求，大概要制作这么一个表格。（前提，我们项目是React + Ant Design）
需求
根据组件api所定义的，我们要声明一个columns对象，存放列对象。然后分上下两块的需要定义对象冲的children属性，属性的值是一个列对象组成的数组。大概就是下面这样：
this.columns = [{
title: '角色名称',
dataIndex: 'roleName',
width: "12%"
}, {
title: '角色介绍',
dataIndex: 'roleIntroduction',
className: "role-table-align-left",
width: "38%"
}, {
title: '哈哈',
dataIndex: 'functionList',
children: [{title: '1',width: "10%"},
{title: '2',width: "10%"},
{title: '3',width: "10%"},
{title: '4',width: "10%"},
{title: '5',width: "10%"}]
}];
看着像是完成了，但是这边我想将这个children里面的内容动态加载，又不想在render中每次render都重新声明一遍，所以这个我放在了componentWillMount中。这是一个写死的对象，后面不会进行修改。（当然也可以声明一个挂在this底下的数组，或者用别的方法，反正当时脑子一抽，就用了这个方法，可能就是想尝试一下。）
然后这边需要用函数执行循环，返回一个数组。
一开始想的使用的是在children那边声明一个function，然后直接return。发现这样children直接就是一个function了，根本不是array。
然后就突然想到了自执行函数。代码大概如下了：
this.columns = [{
title: '角色名称',
dataIndex: 'roleName',
width: "12%"
}, {
title: '角色介绍',
dataIndex: 'roleIntroduction',
className: "role-table-align-left",
width: "38%"
}, {
title: '哈哈',
dataIndex: 'functionList',
children: (() => {
let columnList = [];
privilegeRuleList.map((item) => {
columnList.push({
title: item.name,
width: "10%",
render: (value, record) => {
if (record.functionList && record.functionList.length > 0) {
for (let i = 0; i < record.functionList.length; i++) {
let thisItem = record.functionList[i];
if (thisItem.privilegeCode === item.code && thisItem.checked && !thisItem.checkable) {
return <i className="iconfont icon-checkbox-checked disabled" />
} else if (thisItem.privilegeCode === item.code && thisItem.checked) {
let params = {
roleCode: record.roleCode,
privilegeCode: thisItem.privilegeCode
};
return <i className="iconfont icon-checkbox-checked" onClick={this.closeThis.bind(this, params)}/>
} else if (thisItem.privilegeCode === item.code && thisItem.checkable) {
let params = {
roleCode: record.roleCode,
privilegeCode: thisItem.privilegeCode
};
return <i className="iconfont icon-checkbox-normal" onClick={this.openThis.bind(this, params)}/>
}
}
}
return "";
}
});
});
return columnList;
})()
}];
后来又找到了一个简单很多的例子，代码如下：
app.isMock = true;
var api = (function () {
// 服务器真实请求url
if (!app.isMock) {
return {
mock: app.isMock,
url1: "backend/url1"
}
}
// mock数据
return {
mock: app.isMock,
url1: "data.json"
}
})()
上面两个例子其实都是一些可被别的方法替代的例子。但是也算是提供了一种可供选择的可行性方案。具体的定义，用处放下面详述。
自执行函数
1、自执行函数主要的作用在于隔离作用域。js中没有块级作用域，用来隔离作用域避免污染，或者截断作用域链，避免闭包造成引用变量无法释放。
var currentTime = (function() {
var time = new Date();
var year = time.getFullYear();
var month = time.getMonth + 1;
var day = time.getDate();
var hour = time.getHours();
var minute = time.getMinutes();
var second = time.getSeconds();
return year + ":" + month + ":" + day + " " + hour + ":" + minute + ":" + second;
})()
2、利用立即执行特性，返回需要的业务函数或对象，避免每次通过条件判断来处理。（这就是我那两种情况）
