一、箭头函数是在es6中添加的一种规范,它相当于匿名函数,简化了函数的定义。

  1、语法

    a、function用var,let,cost来表示;

    b、参数要写在第一个等号后面;

       参数有多个,需要加一个小括号,参数用逗号隔开);只有一个参数时,可以不需要括号;没有参数,写一对空的小括号。

    c、函数的主体内容是放在箭头后面

       如果主体有多条语句,需要把它们放在一对大括号里;如果主体只有一条语句,那就直接写(如果这条语句里有return,依然需要加上大括号);如果主体只有一条语句,并且是个对象,需要把它用括号括起来。

    <script>
//多个参数
const fn = (a, b) => {
let result = a + b;
console.log(result);//3
}
fn(1, 2) //只有一个参数
var fn2 = c => {
console.log(c); //davina
}
fn2('davina'); //没有参数
let fn3 = () => {
console.log('123');
}
fn3(); //123 //函数里只有一句话
const fn4 = d => console.log(d); //lisa
fn4('lisa'); //函数里只有return一句话时
const fn5=()=>{return{a:10,b:20}};
console.log(fn5()); //{a: 10, b: 20}
</script>

  2、需要注意的是:

    箭头函数只能先定义再使用,箭头函数里没有this对象,函数在哪里定义的,this就指向谁(箭头函数会继承外层函数调用的this绑定);

    没有this也就不能调用函数的call,apply,bind方法了;没有this就不是构造函数,不能用new去调用;箭头函数里没有arguments对象。

    <script>
const dog = {
color: 'white',
show1: function () {
console.log(this.color);
},
show2: () => {
console.log(this.color);
},
show3: function () {
const show4 = () => {
console.log(this.color);
}
show4();
}
}
dog.show1();//white
dog.show2();//undefined
dog.show3(); //white //不用用call和没有arguments对象
const bigDog =
{
color: 'black'
}
dog.show2.call(bigDog); //undefined const fn6 = () => {
console.log(arguments) // ReferenceError: arguments is not defined
}
fn6(1, 3);
</script>

  二、自执行函数:函数被定义后它可以自动执行。

    函数表达式可以直接加上小括号调用但函数声明不能直接调用,因为小括号里只能放表达式,不能放语句,function关键字既可以当作语句,也可以当作表达式,但是js规定function关键字出现在行首,一律解释成语句。

    <script>
var fn1 = function () {
console.log('这是一个函数表达式'); //这是一个函数表达式
}(); // function fn2(){
// console.log('这是一个函数声明'); //函数声明加上小挌号报错
// }();</script>

    解决方法:不让function出现在行首

      a. 用括号把function主体括起来,转成表达式,后面加括号

      b.借助运算符(new + - ! typeof && || ...)

    <script>
//1、加括号
(function fn2() {
console.log('这是一个函数声明'); //这是一个函数声明
})(); (function fn2() { console.log('这是一个函数声明') }());//这是一个函数声明 //两种模式
(function () { })();
(function () { }()); //2、函数变成表达式
0 + function (a) {
console.log(a) //与数字相加变成表达式
}('与数字相加变成表达式') true && function (a) {
console.log(a) //1.利用逻辑运算符变成表达式
}('1.利用逻辑运算符变成表达式') false || function (b) {
console.log(b)
}('2.利用逻辑运算符变成表达式') //2.利用逻辑运算符变成表达式 ~function (c) {
console.log(c)
}('利用+ - !~ 变成表达式') //利用+ - !~ 变成表达式 typeof function (d) {
console.log(d)
}('利用typeof') //利用typeof
</script>
        {
let x = 10;
((x) => {
console.log(x); //10
})(x);
}

    

    

    

      

函数——箭头函数&自执行函数(二)的更多相关文章

  1. js中的匿名函数和匿名自执行函数

    1.匿名函数的常见场景 js中的匿名函数是一种很常见的函数类型,比较常见的场景:   <input type="button" value="点击" id ...

  2. JavaScript闭包函数&箭头函数调用与执行

    一.标准的闭包函数 //一.标准的闭包函数 function A() { var i=0; ++i; console.log('i : ' + i); return function b() { re ...

  3. js中函数表达式和自执行函数表达式的用法总结

    立即调用函数表达式 给函数体加大括号,在有变量声明的情形下,没有任何区别 但是,如果只是[自动执行]的情形下,就会不同 因为,一个匿名函数,不赋值或函数体不加小括号,是不能自动执行的 //以下情形并无 ...

  4. jquery中ready函数,$(function(){})与自执行函数的区别

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  5. lua 根据函数名字符串来执行函数

    function myfunction(msg) print("this is msg fun " .. msg); end local fun =_G["myfunct ...

  6. 使用"立即执行函数"(Immediately-Invoked Function Expression,IIFE)

    一.原始写法 模块就是实现特定功能的一组方法. 只要把不同的函数(以及记录状态的变量)简单地放在一起,就算是一个模块. function m1(){ //... } function m2(){ // ...

  7. 立即执行函数(IIFE)的理解与运用

    作为JavaScript的常用语法,立即执行函数IIFE(Immediately-Invoked Function Expression)是值得我们认真去学习探究的. 一.创建函数的两种方式 我们先从 ...

  8. JS执行顺序-函数声明提升、匿名函数、函数表达式

    大方向上: JS 是按照 代码块 进行 编译.执行 的. 学习至: 1.变量声明提升 2.新唐的博客 3.js中匿名函数的创建与调用方法分析 4.前端圣经 - <高程三> 5.深入理解变量 ...

  9. 【JavaScript专题】--- 立即执行函数表达式

    一 什么是立即执行函数表达式 立即执行函数表达式,其实也可以叫初始化函数表达式,英文名:IIFE,immediately-inovked-function expression.立即执行函数表达式就是 ...

  10. (译)详解javascript立即执行函数表达式(IIFE)

    写在前面 这是一篇译文,原文:Immediately-Invoked Function Expression (IIFE) 原文是一篇很经典的讲解IIFE的文章,很适合收藏.本文虽然是译文,但是直译的 ...

随机推荐

  1. Handler常见两种用法

    1.Handler在Android的两个功能 1.1表示未来某时做某事 1.2线程间通信 2.演示源码如下: package com.example.datastrorage; import andr ...

  2. 无法下载golang.org-x-net解决方法

    由于go的很多包都依赖了google官方的包,而google官方的包都在google服务器上,因为某些原因无法直接访问,在搜索了很多解决方案后,找到了最简单的一个方法: 1. 找到对应包在github ...

  3. HBase管理与监控——统计表行数

    背景 HBase统计 RowCount 的方法有好几种,并且执行效率差别巨大,以下3种方法效率依次提高.   一.hbase-shell的count命令 这是最简单直接的操作,但是执行效率非常低,适用 ...

  4. nginx重新编译不停服

    找到安装nginx的源码根目录,如果没有就下载新的安装包 .tar.gz 查看ngixn版本极其编译参数 /usr/local/nginx/sbin/nginx -V 进入nginx源码目录 cd n ...

  5. 取消一个本地svn目录与svn的联系

    第一种方法: 直接.逐级地删除目标目录中的隐藏属性的.svn目录 这个方法试了,好牛蛋...,省事,快速... 第二种方法: 如果用的是TortoiseSVN客户端,则先在另外一处建立一个新目录A,右 ...

  6. Spark快速大数据分析之RDD基础

    Spark 中的RDD 就是一个不可变的分布式对象集合.每个RDD 都被分为多个分区,这些分区运行在集群中的不同节点上.RDD 可以包含Python.Java.Scala中任意类型的对象,甚至可以包含 ...

  7. 集群架构04·NFS服务,环境安装

    初识 网络文件系统Netwrok File System,类似于wiin10的网络共享 功能:通过网络让不同主机系统之间可以共享文件或目录 客户端通过挂载的方式将服务器端共享的目录挂载到本地系统. 集 ...

  8. 【转载】DOS系统的安装

    <电脑爱好者>报转载第一辑第一篇之DOS系统的安装 DOS系统的安装 一.DOS的历史 DOS是Diskette Operating System的缩写,意思是磁盘操作系统,主要有MS-D ...

  9. 【ARM-Linux开发】Linux下查看机器的CPU负载

    负载(load)是Linux机器的一个重要指标,直观了反应了机器当前的状态.如果机器负载过高,那么对机器的操作将难以进行. Linux的负载高,主要是由于CPU使用.内存使用.IO消耗三部分构成.任意 ...

  10. [转帖]IBM开源Power指令集:国产高性能CPU迎来新机遇?

    IBM开源Power指令集:国产高性能CPU迎来新机遇? https://www.cnbeta.com/articles/tech/880971.htm cnbeta的新闻.. 希望高性能CPU 能快 ...