首页 > 编程语言 >JavaScript普通函数与箭头函数有怎样的区别?

JavaScript普通函数与箭头函数有怎样的区别?

时间:2022-12-27 21:22:42浏览次数:62  
标签:console 函数 JavaScript 箭头 arguments fn log


 

比较点

普通函数

箭头函数

具体案例

简写

/

箭头函数如果没有参数,同时函数体的返回值只有一句,则{}和return都可以省略。

1、函数简写

this指向

this总是指向调用它的对象,如果作为构造函数,它指向创建的对象实例

箭头函数的this指向的是父级作用域的this,是通过查找作用域链来确定 this 的值,也就是说看的是上下文的this,指向的是定义它的对象,而不是使用时所在的对象。

2、this指向

this改变

call()、apply()、bind()等方法能改函数中this的指向

call()、apply()、bind()等方法不能改变箭头函数中this的指向

3、改变this指向

构造函数

可以作为构造函数,用来创建对象实例

箭头函数不能作为构造函数使用

4、构造函数

arguments对象

每一个普通函数调用后都具有一个arguments对象,用来存储实际传递的参数。

箭头函数没有自己的arguments,取而代之用rest(剩余)参数...arg来解决

5、arguments与...args

prototype原型

具有prototype

没有prototype原型

6、prototype原型

     

 

1、箭头函数简写:

  • 箭头函数如果没有参数,同时函数体的返回值只有一句,则{}和return都可以省略
var fn = () => console.log("123");//去掉了{} 和 return
fn(); //'123'

2、this指向:

  • 普通函数中this指向的是调用它的对象,如果作为构造函数,它指向创建的对象实例
  • 箭头函数不会创建自己的this, 所以它没有自己的this,它只会在自己作用域的上一层继承this。所以箭头函数中this的指向在它在定义时已经确定了,之后不会改变。

普通函数中this指向的9大场景:

 

函数的调用方式

this指向

对象.函数( )

对象

函数( )

window

IIFE 立即执行函数

window

定时器

window

DOM事件处理函数

添加事件监听的元素

数组[下标 ]( )

数组

call(对象,arg1,arg2)

对象

apply(对象,arry)

对象

new 函数()

对象的实例

     

9大场景对应的案例代码,太多放不下,需要粉丝群获取。

箭头函数中this指向

箭头函数不会创建自己的this, 所以它没有自己的this,它只会在自己作用域的上一层继承this。所以箭头函数中this的指向在它在定义时已经确定了,之后不会改变。

<div id="box"></div>
<script>
   var fn = () => console.log(this); //window
   //var fn=function(){console.log(this);} // <div id="box"></div>
   document.getElementById("box").onclick = fn;
</script>

如果fn是普通函数,则this指向的是#box,如果是箭头函数,则this指向的是window

3、改变this指向

  • 普通函数通过调用call()、apply()、bind()可以改变this指向。
  • 箭头函数无法通过调用call()、apply()、bind()改变this指向。

普通函数

<script>
   const obj = {};
   function fn() {
       console.log(this);
  }
   fn(); //window
   fn.apply(obj); //obj  
   fn.call(obj); //obj
   fn.bind(obj)(); //obj
</script>

箭头函数

<script>
   const obj = {};
   const fn = () => console.log(this);
   fn(); //window
   fn.apply(obj); //window
   fn.call(obj); //window
   fn.bind(obj)(); //window
</script>

4、构造函数

  • 普通函数可以作为构造函数来创建对象实例
  • 箭头函数不能作为构造函数来使用,因为箭头函数没有自己的this

普通函数-用作构造函数

<script>
   function Person(name) {
       this.name = name;
  }
   const p = new Person("张三");
   console.log(p); //{name: '张三'}
</script>

箭头函数-用作构造函数会报错

<script>
   const fn = (a) => {
       console.log(a);
  };
   fn(1); //1
   console.log(new fn(1)); //Uncaught TypeError: fn is not a constructor
</script>

5、arguments与...args

  • 每一个普通函数调用后都具有一个arguments对象,用来存储实际传递的参数。
  • 箭头函数中访问arguments如果存在,则是来自于他的外层普通函数的arguments
  • 箭头函数没有自己的arguments对象,取而代之用rest(剩余)参数...args解决

普通函数中arguments

function sum(a) {
   console.log(arguments);
   console.log(arguments[0]);
}
sum(1, 2, 3);
//Arguments(3) [1, 2, 3, callee: ƒ, Symbol(Symbol.iterator): ƒ]
//1  

箭头函数没有arguments对象

const sum = () => console.log(arguments);//arguments未定义
sum(); //Uncaught ReferenceError: arguments is not defined
  • 箭头函数中访问arguments如果存在,则是来自于他的外层普通函数的arguments
function a() {
   var b = () => console.log(arguments);//arguments是a函数中的
   b();
}
a(1, 2, 3); //Arguments(3) [1, 2, 3, callee: ƒ, Symbol(Symbol.iterator): ƒ]

箭头函数中 ...args剩余参数

const sum = (a, ...args) => console.log(args);
sum(1, "a", "b", 3); // ['a', 'b', 3]

arguments包含实际传递的所有参数,...args是剩余参数,只能放在所有参数后,并且不包含剩余参数前的参数。以下是错误写法

const sum = (a, ...args,b) => console.log(args);

6、prototype原型

  • 普通函数具有prototype原型属性
  • 箭头函数没有prototype原型属性
<script>
   //箭头函数
   var a = () => 1;
   //普通函数
   function b() {
       return 2;
  }
   console.log(a.prototype); // undefined
   console.log(b.prototype); // {constructor: ƒ}
</script>

学习更多的JavaScript

如果你正在学习JS或者已经在我们的三十天计划中完成了4个综合项目实战,那不妨可以听下这个课程体系,三十天计划群里还提供了算法、数组等知识体系!

 

 

 

前端工程师成长方法

更多完整JavaScript课程体系在我们的系统班你有完整的呈现,包含了JavaScript基础篇、重点、算法、原理、面试题、实战案例讲解!同时也为你提供了前端高级工程师成长体系!(详细看下图内容)

 

如果需要深度学习的同学可以练习助理老师了解详细的课程以及课程的报名方式!(不定期会推出活动,有大额优惠券推出,活动详情联系助理老师了解即可!)如果你才开始学习前端,那么可以先学习我们的三十天计划(零基础的同学报名系统班同学可以和老师沟通制定学习计划,可以得到更快的成长!)

 

为帮助到一部分同学不走弯路,真正达到一线互联网大厂前端项目研发要求,首次实力宠粉,打造了《30天挑战学习计划》,内容如下:

HTML/HTML5,CSS/CSS3,JavaScript,真实企业项目开发,云服务器部署上线,从入门到精通

  • PC端项目开发(1个)
  • 移动WebApp开发(2个)
  • 多端响应式开发(1个)

共4大完整的项目开发 !一行一行代码带领实践开发,实际企业开发怎么做我们就是怎么做。从学习一开始就进入工作状态,省得浪费时间。

从学习一开始就同步使用 Git 进行项目代码的版本的管理,Markdown 记录学习笔记,包括真实大厂项目的开发标准和设计规范,命名规范,项目代码规范,SEO优化规范

从蓝湖UI设计稿 到 PC端,移动端,多端响应式开发项目开发

  • 真机调试,云服务部署上线;
  • Linux环境下 的 Nginx 部署,Nginx 性能优化;
  • Gzip 压缩,HTTPS 加密协议,域名服务器备案,解析;
  • 企业项目域名跳转的终极解决方案,多网站、多系统部署;
  • 使用 使用 Git 在线项目部署;

这些内容在《30天挑战学习计划》中每一个细节都有讲到,包含视频+图文教程+项目资料素材等。只为实力宠粉,真正一次掌握企业项目开发必备技能,不走弯路 !

过程中【不涉及】任何费用和利益,非诚勿扰 。

如果你没有添加助理老师微信,可以添加下方微信,说明要参加30天挑战学习计划,来自公众号!老师会邀请你进入学习,并给你发放相关资料。

30 天挑战学习计划 Web 前端从入门到实战 | arry老师的博客-艾编程

标签:console,函数,JavaScript,箭头,arguments,fn,log
From: https://www.cnblogs.com/icodingedu/p/17009035.html

相关文章

  • Vue3之watchEffect函数
    watchEffect函数watch的套路是:既要指明监视的属性,也要指明监视的回调。watchEffect的套路是:不用指明监视哪个属性,监视的回调中用到哪个属性,那就监视哪个属性。wat......
  • 11个案例讲透 Python 函数参数
    今天给大家分享一下自己整理的一篇Python参数的内容,内容非常的干,全文通过案例的形式来理解知识点,自认为比网上80%的文章讲的都要明白,如果你是入门不久的python新手,......
  • 用云函数开发掘金钉钉机器人
    前言前段时间看了B站UP主@​​人工智能小黄鸭​​的出的视频,可以利用飞书机器人在线刷题,非常牛逼,行云流水。自从我在稀土掘金社区技术更文以来,每天非常关注文章点赞评论......
  • 理解JavaScript中的“面向对象”
    理解JavaScript中的“面向对象”一引子面向对象,是程序开发者再熟悉不过的一个概念。一说到它,你首先会想到的是什么?类?继承?方法与属性?不同技术栈的开发者或许有不同的第一反......
  • SQL Server分割函数
       USE[数据库名]GOcreatefunction[dbo].[f_split](@cvarchar(2000),--需要分割的字符串(例如:1,2,3,4,5我|和|你)@splitvarchar(2)--分隔符(例如,......
  • cocos2d-x 通过JNI实现c/c++和Android的java层函数互调
    文章摘要: 本文主要实现两个功能:(1)通过Androidsdk的API得到应用程序的包名(PackageName),然后传递给c++层函数。(2)通过c++函数调用Android的java层函数,显示一个对话框......
  • 生成函数 学习笔记
    定义:数列\(F\)的生成函数为\(F(x)=\sum_{i=0}F[i]x^i\),其中的\(x\)并没有实际意义几何级数定理\[\sum_{i=0}x^i={1\over1-x}\]证明考虑等比数列求和,由于\(......
  • C++11 新特性之Lambda函数(匿名函数)
    声明:本文参考了AlexAllain的文章​​http://www.cprogramming.com/c++11/c++11-lambda-closures.html​​加入了自己的理解,不是简单的翻译C++11终于知道要在语言中加入......
  • SpiderMonkey-让你的C++程序支持JavaScript脚本
    译序有些网友对为什么D2JSP能运行JavaScript脚本程序感到奇怪,因此我翻译了这篇文章,原文在​​这里​​​。这篇教程手把手教你如何利用SpiderMonkey创建一个能执行JavaScri......
  • JavaScript-C/C++ (SpiderMonkey) 引擎嵌入开发指南(中文向导)
    JavaScript-C/C++引擎概览本文档提供了一个JavaScript(JS)引擎的C语言实现的概述,他介绍了你如何在你的应用程序中嵌入脚本引擎来让它们可以使用JS。有两大理由让你在应用程......