ES6箭头函数和js普通函数的区别整理

简介: ES6箭头函数和js普通函数的区别整理

普通函数的this指向为:谁调用它this就指向谁,this被不同对象调用是会变的


箭头函数的this指向为:声明该箭头函数时,外层第一个普通函数的this指向谁就固定为谁,不会改变

function foo() {
    console.log(this)
}
const obj = {
    a: 2,
    foo: function(){console.log(this)}
}
foo()  //this指向为window
obj.foo() //this指向为对象obj
let foo2 = obj.foo
foo2()  //this指向为window
let foo = ()=> {
    console.log(this)
}
const obj = {
    a: 2,
    foo: function () {
        return ()=>{console.log(this)}
    }
}
foo()  //this指向window
obj.foo()()  //this指向对象obj
let foo2 = obj.foo()
foo2()  //this指向对象obj
箭头函数是匿名函数,不能作为构造函数,不能使用new

箭头函数是匿名函数,不能作为构造函数,不能使用new

function foo() {
    console.log(this)
}
new foo()  //window
let foo2 = ()=>{
    console.log(this)
}
new foo2() //报错 Uncaught TypeError: foo2 is not a constructor

箭头函数不绑定arguments,用rest参数...解决

function foo() {
    console.log(arguments)
}
foo(1,2,3)  //[1,2,3]
let foo2 = ()=>{
    console.log(arguments)
}
foo2(1,2,3)  // 报错 Uncaught ReferenceError: arguments is not defined

我们可以使用展开符来获取参数

let foo2 = (...arguments)=>{
    console.log(arguments)
}
foo2(1,2,3) //[1,2,3]

箭头函数使用bind、call、apply无效

var a = 1
var obj={
    a:2
}
function foo() {
    console.log(this.a)
}
foo()  //1
foo.call(obj) //2,输出obj.a
let foo2 = ()=>{
    console.log(this.a)
}
foo2()  //1
foo2.call(obj) //1,仍然输出window.a

箭头函数没有原型

var a = ()=>{  
    return 1;
}
function b(){  
    return 2;
}
console.log(a.prototype);//undefined
console.log(b.prototype);//object{...}

箭头函数不能当做Generator函数,不能使用yield关键字

箭头函数更简洁,适合写一些简单函数

相关文章
|
12天前
|
JavaScript 前端开发 Java
[JS]同事:这次就算了,下班回去赶紧补补内置函数,再犯肯定被主管骂
本文介绍了JavaScript中常用的函数和方法,包括通用函数、Global对象函数以及数组相关函数。详细列出了每个函数的参数、返回值及使用说明,并提供了示例代码。文章强调了函数的学习应结合源码和实践,适合JavaScript初学者和进阶开发者参考。
25 2
[JS]同事:这次就算了,下班回去赶紧补补内置函数,再犯肯定被主管骂
|
12天前
|
设计模式 JavaScript 前端开发
js中new和object.creat区别
【10月更文挑战第29天】`new` 关键字和 `Object.create()` 方法在创建对象的方式、原型链继承、属性初始化以及适用场景等方面都存在差异。在实际开发中,需要根据具体的需求和设计模式来选择合适的方法来创建对象。
|
11天前
|
前端开发 JavaScript 开发者
除了 Generator 函数,还有哪些 JavaScript 异步编程解决方案?
【10月更文挑战第30天】开发者可以根据具体的项目情况选择合适的方式来处理异步操作,以实现高效、可读和易于维护的代码。
|
19天前
|
存储 JavaScript 前端开发
JS的ES6知识点
【10月更文挑战第19天】这只是 ES6 的一些主要知识点,ES6 还带来了许多其他的特性和改进,这些特性使得 JavaScript 更加现代化和强大,为开发者提供了更多的便利和灵活性。
15 3
|
25天前
|
JavaScript 前端开发
JavaScript 函数语法
JavaScript 函数是使用 `function` 关键词定义的代码块,可在调用时执行特定任务。函数可以无参或带参,参数用于传递值并在函数内部使用。函数调用可在事件触发时进行,如用户点击按钮。JavaScript 对大小写敏感,函数名和关键词必须严格匹配。示例中展示了如何通过不同参数调用函数以生成不同的输出。
|
27天前
|
存储 JavaScript 前端开发
JS函数提升 变量提升
【10月更文挑战第6天】函数提升和变量提升是 JavaScript 语言的重要特性,但它们也可能带来一些困惑和潜在的问题。通过深入理解和掌握它们的原理和表现,开发者可以更好地编写和维护 JavaScript 代码,避免因不了解这些机制而导致的错误和不一致。同时,不断提高对执行上下文等相关概念的认识,将有助于提升对 JavaScript 语言的整体理解和运用能力。
|
30天前
|
存储 JavaScript 前端开发
JavaScript 数据类型详解:基本类型与引用类型的区别及其检测方法
JavaScript 数据类型分为基本数据类型和引用数据类型。基本数据类型(如 string、number 等)具有不可变性,按值访问,存储在栈内存中。引用数据类型(如 Object、Array 等)存储在堆内存中,按引用访问,值是可变的。本文深入探讨了这两种数据类型的特性、存储方式、以及检测数据类型的两种常用方法——typeof 和 instanceof,帮助开发者更好地理解 JavaScript 内存模型和类型检测机制。
69 0
JavaScript 数据类型详解:基本类型与引用类型的区别及其检测方法
|
14天前
|
前端开发 JavaScript
JavaScript新纪元:ES6+特性深度解析与实战应用
【10月更文挑战第29天】本文深入解析ES6+的核心特性,包括箭头函数、模板字符串、解构赋值、Promise、模块化和类等,结合实战应用,展示如何利用这些新特性编写更加高效和优雅的代码。
32 0
|
30天前
|
存储 JavaScript 前端开发
JavaScript数据类型全解:编写通用函数,精准判断各种数据类型
JavaScript数据类型全解:编写通用函数,精准判断各种数据类型
18 0