JavaScript 箭头函数与function函数区别

结合以下注释理解代码,有空再分步骤讲解

// 执行正常 function 方法名() 会直接将函数提升到顶部所以此步成功
normalFun(2);
// 执行失败 因var会将arrowFun变量提升但赋值仍在原本行无法在赋值前调用
// arrowfun();
// 箭头函数
var arrowFun = ()=>{console.log(this)}
// 正常函数
function normalFun(a){this.a = a; console.log(this)}
// 定义对象cat有两个属性分别保存箭头函数和正常函数所定义的函数
var cat = {arrowfun: arrowFun,normalfun: normalFun
}
// 箭头函数所使用的this不会因调用域不同发生改变(会指向创建时作用域的this)
arrowFun(); // this =  window
cat.arrowfun()  // this = window
// 正常函数所使用this会跟随调用域不同发生改变
normalFun(1); // this = window
cat.normalfun(1); // this = cat
// 执行正常且this指针将指向自身
// ❌使用new以后会变成一个对象无法以函数方式调用,newNormal()
var newNormal = new normalFun(1);
console.log(newNormal.a);
// 下行代码报错:Uncaught ReferenceError: arrowfun is not defined
// 因箭头函数无法使用new方法调用因箭头函数无构造方法
// var newArrow = new arrowfun();
// 总结:
// 1. 定义方式不同 // 箭头函数 ()=>{}// 正常函数 function name(){}
// 2. this指向不同 // 箭头函数所使用的this不会因调用域不同发生改变(会指向创建时作用域的this)// 正常函数所使用this会跟随调用域不同发生改变
// 3. 构造函数不同// 箭头函数无构造函数无法使用new方式// 正常函数有构造函数可以使用new方式但new后不再是函数而是对象
// 4. 变量提升不同// 箭头函数因会使用var来保存,所以会先将var变量名提升但赋值不会提升,所以无法在赋值前调用// 正常函数会直接提升到最顶部,所以可以在声明前调用

JavaScript 箭头函数与function函数区别相关推荐

箭头函数与function的区别
1.箭头函数与function定义函数的写法不同 //function function fn(a, b){return a + b; } //arrow function var foo = (a, ...
ES6---箭头函数()={} 与function的区别（转载）
1.箭头函数与function定义函数的写法: //function function fn(a, b){return a + b; } //arrow function var foo = (a, ...
MySQL函数(CREATE FUNCTION 函数名(参数列表) RETURNS 返回类型)
MySQL函数 /* 含义:一组预先编译好的SQL语句的集合,理解成批处理语句 1.提高代码的重用性 2.简化操作 3.减少了编译次数并且减少了和数据库服务器的连接次数,提高了效率区别: 存储过程: ...
html 定义函数调用函数,HTML function函数怎么定义和调用？
HTML function函数怎么定义和调用实例: function myFunction() { alert("Hello World!"); } Try it 扩展资料 1.函 ...
第十节 javascript之第四节函数
本文来自赵庆贝博客一.函数:函数是一段命名的代码块,当调用函数时,函数里的代码块是做为一个整体一起被执行的. 1.定义声明函数: A.书写位置:一般情况下,写在<head>与</h ...
MySQL---- 自定义函数（FUNCTION）
MySQL 自带的函数可能完成不了我们的业务需求,这时候就需要自定义函数. 自定义函数是一种与存储过程十分相似的过程式数据库对象.它与存储过程一样,都是由 SQL 语句和过程式语句组成的代码片段,并且 ...
JavaScript【流程控制】【数组】【函数】【函数作用域】经典！！
表达式和语句表达式一个表达式可以产生一个值,有可能是运算.函数调用.有可能是字面量.表达式可以放在任何需要值的地方. 语句语句可以理解为一个行为,循环语句和判断语句就是典型的语句.一个程序有很多 ...
Oracle进阶（八）自定义函数（Function）
1.函数语法 1.1 创建语法 --创建函数 CREATE OR REPLACE FUNCTION 函数名(参数1 模式参数类型)RETURN 返回值类型 AS变量1 变量类型;变量2 变量类型; ...
Python零基础速成班-第5讲-Python函数，Function和Lambda基础
Python零基础速成班-第5讲-Python函数,Function和Lambda基础学习目标 Function函数 Lambda Function函数课后作业(4必做) 友情提示:将下文中代码拷 ...

JavaScript 箭头函数与function函数区别

JavaScript 箭头函数与function函数区别相关推荐

最新文章

热门文章