ES6(四)(箭头函数)

发布于:2024-07-20 ⋅ 阅读:(142) ⋅ 点赞:(0)

箭头函数

  • 箭头函数是ES6中一种函数的简洁写法

正常写法

var 函数名 = (形参) =>{}
箭头函数只能简写函数表达式,不能简写声明式函数

    //函数表达式普通写法
    var fn = function(a,b){
        console.log(a+b);
    }
    fn(10,20);
    //箭头函数写法
    var fn_1 = (a,b) => {
        console.log(a+b);
    }
    fn_1(10,20)
  • 在对象中箭头函数的写法
    属性名:(形参) => {}
    var obj = {
        getName : (name) => {
            console.log(name);
        }
    }
    obj.getName('zs')

简洁写法

  • 函数只有一个参数时,可以省略小括号、
    var fn = x => {
        console.log(x);
    }
    fn(10)
  • 函数体只有一条语句的时候,可以省略大括号并return该语句
    var fn = (x) => console.log(x);
    fn(10)
	//结合上一条函数可以简写成
	var fn = x => console.log(x);

特点

  • 没有内置对象argumens
	var fn = function (){
		console.log(arguments);
	}
	var fun = ()=>{
		console.log(arguments);
	}
fn(1,2,3);	
fun(1,2,3);	//会直接报错

在这里插入图片描述

  • 没有prototype对象
var fn = () => {};
console.log(fn.prototype); // undefined
  • 没有this指向
  • 可以使用call() apply()调用,但不会改变this
    var obj_1 = {
        name: 'zs',
        getName: () => {
            console.log(this);
        }
    }
    obj_1.getName()

按前面学习的知识,对象中的函数中的this应该指向对象本身,但是这里的结果为window
在箭头函数中,没有this指向,如果在函数中使用this,则指向父作用域中this指向的地方
因此,在箭头函数中也不能改变this指向(包括apply()、call()方法),但是,如果想要改变箭头函数中this指向的地方,可以改变父作用域的this指向

  • 不能声明构造函数
var fn = () => {};
var fun = new fn(); // TypeError: fn is not a constructor

网站公告

今日签到

点亮在社区的每一天
去签到