JavaScript函数IIFE使用详解


Posted in Javascript onOctober 21, 2019

一、认识函数

javaScritp中的的函数

// 函数声明语法定义
function fun1(name, age) {
  console.log(name + ',' + age);
}
fun1('Amy', 18); //Amy,18
// 函数表达式定义
var fun2 = function(name, age) {
  console.log(name + ',' + age);
}
fun1('Amy', 18); //Amy,18

javaScript函数带默认参数

/* 默认参数 */
function fun1(name, age = 17) {
  console.log(name + ',' + age);
}

fun1('Amy', 18); //Amy,18
fun1('Amy', ''); // Amy,
fun1('Amy'); // Amy,17
fun1("Amy", null); // Amy,null

函数参数默认值存在暂时性死区,在函数参数默认值表达式中,还未初始化赋值的参数值无法作为其他参数的默认值。

function fun2(x, y = x) {
  console.log(x, y);
}
fun2(1); // 1 1

function fun3(x = y) {
  console.log(x);
}
fun3(); // ReferenceError: y is not defined

javaScript函数 不定参数

// 不定参数用来表示不确定参数个数
function fun4(...values) {
  console.log(values.length);
}
fun4(1, 2); //2
fun4(1, 2, 3, 4); //4

Function的构造定义

通过Function构造函数创建函数,可向构造函数中传入任意数量的参数,但值得注意的是传入的最后一个参数会作为函数体,而其他参数则作为参数传入函数中。用该方法去定义函数是不推荐使用的,因为该语法会导致解析两次代码,第一次解析常规ECMAScript代码,第二次解析传入构造函数的字符串,影响性能。

var functionName = new Function("value",...,"函数体");
var f2=new Function("n1","n2","return n1+n2;");
console.log(f2(1,2)); // 3

注:函数是引入值类型,所以函数名仅仅是指向函数的指针,当使用函数名去赋值给另一个变量名时,仅仅复制的是一个指针。即在下列a设置为null时,仅将a存的指针消除而已,不会影响b调用函数。

var a = b = function(value1){
  return value1;
}
a = null;
b(1);

function中的默认对象叫arguments,类似数组,但不是数组,该对象是传递给函数的参数。我们可以通过这个arguments知道该函数有多少个参数

function counter(){
  var sum=0;
  for(var i=0;i<arguments.length;i++){
      sum+=arguments[i];
  }
   return sum;
}
console.log(counter(199,991,1,2,3,4,5)); // 1205
console.log(counter()); // 0

注:这里的arguments是一个隐式对象,不声明也在函数中,内部函数可以访问外部函数的任意内容,但是不能直接访问外部函数的arguments与this对象。

function f1() {
  console.log(arguments.length);
  f2=function() {
    console.log(arguments.length);
  }
   return f2;
}

var f=f1(1,2,3); // 3
f(); // 0

function.call -调用一个对象的一个方法,以另一个对象替换当前对象

/*构造函数*/
function Student(name,age){
    this.name=name;
    this.age=age;
}
      
show=function(add){
    console.log(add+":"+this.name+","+this.age);
}
      
//通过new关键字调用构造函数,创建一个对象tom
var rose=new Student("rose",18);
var jack=new Student("jack",20);
     
//调用show方法,指定上下文,指定调用对象,this指向rose,“大家好是参数”
show.call(rose,"大家好"); // 大家好:rose,18
show.call(jack,"Hello"); // Hello:jack,20

call方法中的参数都可以省去,第1个参数表示在哪个对象上调用该方法,或this指向谁,如果不指定则会指向window对象。

var name="无名";
var age=18; // 全局变量
show.call(); // undefined:无名,18

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

块级作用域与函数作用域

function calc(){
   for(var i=0;i<5;i++){
      console.log(i); // //0,1,2,3,4
   }
   console.log(i); // 5
}
calc();

函数没有块级作用域所以后面输出的i是5,没有报错

解决方法,模拟一个块级作用域

function calc() {
    //IIFE
    (function() {
        for(var i = 0; i < 5; i++) {
           console.log(i); //0,1,2,3,4
        }
    })();    
   console.log(i); //报错
}
calc();

函数表达式或匿名对象立即执行

//调用匿名函数
(function() {
   console.log("这是一个函数表达式");
 })();

 //调用匿名对象
 ({
  name: "foo",
  show: function() {
  console.log(this.name);
  }
 }).show();
console.log({a: 1}.a);
console.log({a: function() {}}.a());

多种函数立即表达式的写法

//最常用的两种写法
(function(){ /* code */ }()); // 推荐写法
(function(){ /* code */ })(); // 当然这种也可以

// 括号和JS的一些操作符(如 = && || ,等)可以在函数表达式和函数声明上消除歧义
// 如下代码中,解析器已经知道一个是表达式了,于是也会把另一个默认为表达式
// 但是两者交换则会报错
var i = function(){ return 10; }();
true && function(){ /* code */ }();
0, function(){ /* code */ }();

// 如果你不怕代码晦涩难读,也可以选择一元运算符
!function(){ /* code */ }();
~function(){ /* code */ }();
-function(){ /* code */ }();
+function(){ /* code */ }();

// 你也可以这样
new function(){ /* code */ }
new function(){ /* code */ }() // 带参

立即表达函数带参数

(function (n){
   console.log(n); // 100
})(100);

最好在立即表达函数前面添加分号

var k=100
(function (n){
   console.log(n);
})(k);
// 出错,解释器会认为100是函数
var k=100
;(function (n){
     console.log(n);
})(k);

IIFE的形变

(function(n){
   console.log(n);
      
   //认为这里有30000代码
      
}(100));

如果中间有很长的代码,参数100只有到文档的末尾才可以看得到,变形后的结果:

(function(exp){
    exp(100);
}(function(n){
    console.log(n);
    //认为这里有30000代码
}));

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js操作iframe的一些方法介绍
Jun 25 Javascript
jquery获取tagName再进行判断
May 29 Javascript
js怎么覆盖原有方法实现重写
Sep 04 Javascript
jQuery操作JSON的CRUD用法实例
Feb 25 Javascript
js实现适用于素材网站的黑色多级菜单导航条效果
Aug 24 Javascript
js操作XML文件的实现方法兼容IE与FireFox
Jun 25 Javascript
AngularJS学习第二篇 AngularJS依赖注入
Feb 13 Javascript
使用JSON格式提交数据到服务端的实例代码
Apr 01 Javascript
vue中使用 pako.js 解密 gzip加密字符串的方法
Jun 10 Javascript
ES6 Promise对象的含义和基本用法分析
Jun 14 Javascript
JS自定义对象创建与简单使用方法示例
Jan 15 Javascript
vue本地构建热更新卡顿的问题“75 advanced module optimization”完美解决方案
Aug 05 Vue.js
vue实现侧边栏导航效果
Oct 21 #Javascript
vue实现吸顶、锚点和滚动高亮按钮效果
Oct 21 #Javascript
vue-cli基础配置及webpack配置修改的完整步骤
Oct 20 #Javascript
关于Vue中axios的封装实例详解
Oct 20 #Javascript
JavaScript相等运算符的九条规则示例详解
Oct 20 #Javascript
Vue.js下拉菜单组件使用方法详解
Oct 19 #Javascript
vue实现二级导航栏效果
Oct 19 #Javascript
You might like
PHP mb_convert_encoding 获取字符串编码类型实现代码
2009/04/26 PHP
Laravel 5框架学习之Laravel入门和新建项目
2015/04/07 PHP
CI操作cookie的方法分析(基于helper类库)
2016/03/28 PHP
ExtJs的Date格式字符代码
2010/12/30 Javascript
js实现点击添加一个input节点
2014/12/05 Javascript
nodejs修复ipa处理过的png图片
2016/02/17 NodeJs
Sort()函数的多种用法
2016/03/20 Javascript
Vue.js每天必学之过渡与动画
2016/09/06 Javascript
用node和express连接mysql实现登录注册的实现代码
2017/07/05 Javascript
vue绑定设置属性的多种方式(5)
2017/08/16 Javascript
vue绑定class与行间样式style详解
2017/08/16 Javascript
Express系列之multer上传的使用
2017/10/27 Javascript
解决Vue使用mint-ui loadmore实现上拉加载与下拉刷新出现一个页面使用多个上拉加载后冲突问题
2017/11/07 Javascript
vue动画之点击按钮往上渐渐显示出来的实例
2018/09/29 Javascript
jQuery点击页面其他部分隐藏下拉菜单功能
2018/11/27 jQuery
vue-cli3中vue.config.js配置教程详解
2019/05/29 Javascript
原生JavaScript实现留言板
2021/01/10 Javascript
[55:47]DOTA2上海特级锦标赛C组小组赛#2 LGD VS Newbee第三局
2016/02/27 DOTA
Python3控制路由器——使用requests重启极路由.py
2016/05/11 Python
Python随机生成数据后插入到PostgreSQL
2016/07/28 Python
pyqt5 QProgressBar清空进度条的实例
2019/06/21 Python
解决python3 requests headers参数不能有中文的问题
2019/08/21 Python
一行Python代码制作动态二维码的实现
2019/09/09 Python
matplotlib绘制多个子图(subplot)的方法
2019/12/03 Python
TensorFlow MNIST手写数据集的实现方法
2020/02/05 Python
Django Serializer HiddenField隐藏字段实例
2020/03/31 Python
浅谈python处理json和redis hash的坑
2020/07/16 Python
Python3.7安装pyaudio教程解析
2020/07/24 Python
10种CSS3实现的loading动画,挑一个走吧?
2020/11/16 HTML / CSS
blueseventy官网:铁人三项和比赛泳衣
2021/02/06 全球购物
学校百日安全生产活动总结
2014/07/05 职场文书
党性观念心得体会
2014/09/03 职场文书
个人合伙协议书范本
2014/10/14 职场文书
分居协议书范本(律师见证版)
2014/11/26 职场文书
2016教师廉洁教育心得体会
2016/01/13 职场文书
德劲DE1108畅想
2021/04/22 无线电