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 相关文章推荐
javascript 二分法(数组array)
Apr 24 Javascript
整理Javascript基础语法学习笔记
Nov 29 Javascript
深入浅析JSON.parse()、JSON.stringify()和eval()的作用详解
Apr 03 Javascript
Jquery EasyUI实现treegrid上显示checkbox并取选定值的方法
Apr 29 Javascript
jQuery表单验证简单示例
Oct 17 Javascript
JavaScript日期选择功能示例
Jan 16 Javascript
three.js实现围绕某物体旋转
Jan 25 Javascript
引入JavaScript时alert弹出框显示中文乱码问题
Sep 16 Javascript
详细分析JS函数去抖和节流
Dec 05 Javascript
使用vue脚手架(vue-cli)搭建一个项目详解
May 09 Javascript
Javascript设计模式之原型模式详细
Oct 05 Javascript
四十九个javascript小知识实用技巧
Nov 20 Javascript
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函数
2010/01/11 PHP
php中比较简单的导入phpmyadmin生成的sql文件的方法
2011/06/28 PHP
php入门学习知识点三 PHP上传
2011/07/14 PHP
laravel开发环境homestead搭建过程详解
2020/07/03 PHP
学习YUI.Ext第七日-View&amp;JSONView Part Two-一个画室网站的案例
2007/03/10 Javascript
jQuery的deferred对象使用详解
2011/08/20 Javascript
很好用的js日历算法详细代码
2013/03/07 Javascript
jQuery去掉字符串起始和结尾的空格(多种方法实现)
2013/04/01 Javascript
JS复制到剪贴板示例代码
2013/10/30 Javascript
在JS数组特定索引处指定位置插入元素
2014/07/27 Javascript
node.js中的querystring.unescape方法使用说明
2014/12/10 Javascript
jQuery()方法的第二个参数详解
2015/04/29 Javascript
JavaSacript中charCodeAt()方法的使用详解
2015/06/05 Javascript
易被忽视的js事件问题总结
2016/05/14 Javascript
Webpack path与publicPath的区别详解
2018/05/03 Javascript
layui数据表格重载实现往后台传参
2019/11/15 Javascript
js+canvas实现转盘效果(两个版本)
2020/09/13 Javascript
[01:12](回顾)DOTA2国际邀请赛,全世界DOTAer的盛宴
2014/07/01 DOTA
[59:48]LGD vs IG 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
[57:29]Alliance vs KG 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/17 DOTA
Python合并字符串的3种方法
2015/05/21 Python
Python CVXOPT模块安装及使用解析
2019/08/01 Python
Django发送邮件功能实例详解
2019/09/02 Python
python多线程高级锁condition简单用法示例
2019/11/07 Python
python计算导数并绘图的实例
2020/02/29 Python
欧洲最古老的鞋厂:Peter Kaiser
2019/11/05 全球购物
医学院校毕业生自荐信范文
2014/01/01 职场文书
社区包粽子活动方案
2014/01/21 职场文书
公司面试感谢信
2014/02/01 职场文书
大堂副理的岗位职责范文
2014/02/17 职场文书
募捐倡议书
2014/04/14 职场文书
村道德模范事迹材料
2014/08/28 职场文书
2015年度酒店客房部工作总结
2015/05/25 职场文书
毕业生学校组织意见
2015/06/04 职场文书
祝福语集锦:送给闺蜜的生日祝福语
2019/10/08 职场文书
canvas 中如何实现物体的框选
2022/08/05 Javascript