Loading

ES6中的箭头函数的语法、指向、不定参数

箭头函数的语法

  function fn1() {
            console.log(1);
        }

        let fn2 = () => {
            console.log(2);
        }
        fn1()//1
        fn2()//2

        //箭头函数: 形参=>返回值
        //单个形参的最简写法,箭头函数作为匿名的回调函数是可以省略let fn ,既(形参)=>{语句}
        let fn = nub => nub * 2
        console.log(fn(10));//20

		//多个形参,语句单一。(形参1,形参2)=>返回值
		let fn = (num1, num2, num3) => num1 * num2 * num3
        console.log(fn(2, 3, 4))//24

        //多个形参,多条语句,不加return返回undefined
        let fn = (num1, num2, num3) => { let a = num1 + num2; let b =              num1 + num3 ;console.log(a + b)}
        console.log(fn(2, 3, 4))//报错undefined,与普通函数的没有return的值相同都是undefined

 		//多个形参,多条语句,必须用return返回函数值
 		let fn = (num1, num2, num3) => { let a = num1 + num2; let b =             num1 + num3 ;return(a + b)}
        console.log(fn(2, 3, 4))//11

箭头函数的不定参

不定参对应普通函数的arguments

         function fn1() {
            console.log(arguments);
        }
        fn1(1, 2, 3, 4)//伪数组arguments[1,2,3,4]



        let fn2 = () => {
            console.log(arguments);
        }
        fn2(1, 2, 3, 4)//arguments is not defined,也就是箭头函数没有不定参


		//解决剩余参数的方法
	let fn3 = (a, b, ...c) => {
            console.log(a, b, c)
        }
        fn3(1, 2, 3, 4)//1,2,[3,4],剩余参数以数组保存
		
        let fn3 = (a, b, ...c) => {
            console.log(c[0])
        }
         fn3(1, 2, 3, 4)//3,注意剩余参数以Array[3,4]进行保存

箭头函数的this的指向

		//本质,箭头函数的this在定义时所在的对象,其实质是因为箭头函数没有自己的this,用的是外层的this		
	function fn1() {
            console.log(this);
        }
        fn1()//window
        
        
        let fn2 = () => {
            console.log(this);
        }
        fn2()//window,箭头函数本身没有this指向,在调用时指向其声明时所在作用域,这里声明在全局作用域下所以指向window

		//在点击事件中
		document.onclick = function () {
            let fn = () => { console.log(this) }
            fn()//this指向#document,指向调用时的作用域
        }

	//深入理解
	let fn
        let fn2 = function () {
            console.log(this);
            fn = () => { console.log(this) }
        }
        fn2()//先调用fn2为了给fn赋值为函数,全局函数this打印结果是指向window
        fn()//箭头函数调用时应指向声明所在的作用域,fn声明在fn2中,所以指向与fn2相同
		

	//深入理解--变形
       	let fn
        let fn2 = function () {
            console.log(this);
            fn = () => { console.log(this) }
        }
        fn2 = fn2.bind(document.body)//先调用fn2为了给fn赋值为函数
        fn2()//body
        fn()//body



posted @ 2021-05-13 21:02  大黄树  阅读(323)  评论(0)    收藏  举报