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关键字

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

相关文章
|
2天前
|
存储 JavaScript 前端开发
JS函数提升 变量提升
【10月更文挑战第6天】函数提升和变量提升是 JavaScript 语言的重要特性,但它们也可能带来一些困惑和潜在的问题。通过深入理解和掌握它们的原理和表现,开发者可以更好地编写和维护 JavaScript 代码,避免因不了解这些机制而导致的错误和不一致。同时,不断提高对执行上下文等相关概念的认识,将有助于提升对 JavaScript 语言的整体理解和运用能力。
|
5天前
|
JavaScript 前端开发 索引
JavaScript ES6及后续版本:新增的常用特性与亮点解析
JavaScript ES6及后续版本:新增的常用特性与亮点解析
10 4
|
4天前
|
存储 JavaScript 前端开发
JavaScript 数据类型详解:基本类型与引用类型的区别及其检测方法
JavaScript 数据类型分为基本数据类型和引用数据类型。基本数据类型(如 string、number 等)具有不可变性,按值访问,存储在栈内存中。引用数据类型(如 Object、Array 等)存储在堆内存中,按引用访问,值是可变的。本文深入探讨了这两种数据类型的特性、存储方式、以及检测数据类型的两种常用方法——typeof 和 instanceof,帮助开发者更好地理解 JavaScript 内存模型和类型检测机制。
10 0
JavaScript 数据类型详解:基本类型与引用类型的区别及其检测方法
|
11天前
|
JavaScript 前端开发
js教程——函数
js教程——函数
18 4
|
9天前
|
自然语言处理 JavaScript 前端开发
JavaScript高级——ES6基础入门
JavaScript高级——ES6基础入门
12 1
|
10天前
|
存储 JavaScript 前端开发
js中函数、方法、对象的区别
js中函数、方法、对象的区别
11 2
|
12天前
|
前端开发 JavaScript 小程序
JavaScript的ES6中Promise的使用以及个人理解
JavaScript的ES6中Promise的使用以及个人理解
13 1
|
5天前
|
存储 JavaScript 前端开发
JavaScript数据类型全解:编写通用函数,精准判断各种数据类型
JavaScript数据类型全解:编写通用函数,精准判断各种数据类型
9 0
|
3月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
83 2
|
3月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
102 4