箭头函数及其this的指向

目录

一、箭头函数

1、  基础语法

 2、箭头函数简写

 二、箭头函数的 this

1、全局函数下的 this

2、对象方法里面的 this

3、构造函数的this

4、 call()、apply()、bind()调用时的 this

---

一、箭头函数

ES6中引入了箭头函数。箭头函数允许我们编写更短的函数。

//之前普通函数
hello = function() {
  return "Hello World!";
}

//使用箭头函数之后

hello = () => {
  return "Hello World!";
}

1、  基础语法

 语法：() =>{} // ():函数 =>:必须的语法，指向代码块 {}:代码块

   原js写法
        function sum(a,b){
            return a+b;
        }
        console.log(sum(1,2));  //3

   现es6写法
        const sum=(a,b)=>{
            return a+b;
        }
        let res=sum(1,2);
        console.log(res);  //3

 2、箭头函数简写

代码块只有一句话，省略 { } 和 return

            const sum = (a,b)=> a+b;

            let res =  sum(1,2);

            console.log(res);   //3

只有一个参数时，小括号 ( ) 可省略 

        const sum=a=>a+3;

        let res=sum(1);

        console.log(res);   //4

       

        const sum=a=>{

            return a+3;

        }

        let res=sum(1);

        console.log(res);   //4

 

 二、箭头函数的 this

1、全局函数下的 this

普通函数 this 跟调用者有关

function global(){

             console.log(this);//Window {window: Window, self: Window, document: document, name: "", location: Location, …}

         }

         global();

 箭头函数的 this ， this是静态 ，根据上下文的 this

const global=()=>{

            console.log(this);//Window {window: Window, self: Window, document: document, name: "", location: Location, …}

        }

        global();

 

2、对象方法里面的 this

如果函数作为对象的方法调用，this指向的是这个上级对象，即调用方法的对象。

     const Person={

            realname:'张三',age:19,

            say:function(){

                console.log(this);//{realname: "张三", age: 19, say: ƒ}

            }

        }

        Person.say();//Person实例

 对象箭头函数的 this

箭头函数不绑定this关键字，箭头函数中的this，指向的是函数定义位置的上下文this。

箭头函数中的this指向是它所定义（声明）的位置，可以简单理解成，定义箭头函数中的作用域的this指向谁，它就指向谁。

  const Person={

            realname:'张三',age:19,

            say:()=>{

                console.log(this);//Window {window: Window, self: Window, document: document, name: "", location: Location, …}

            }

        }

        Person.say();//window

3、构造函数的this

 构造函数的 this 就是当前示例，指向新创建的对象本身

箭头函数的 this 一旦定义了就不允许改变 

        function Person(realname,age){
            this.realname=realname;
            this.age=age;
            this.say=()=>{
                console.log(this);
            }
            this.say1=function(){
                console.log(this);
            }
        }
        const P1=new Person('张三',19);
        const P2=new Person('李四',20);
        P1.say();  //Person {realname: "张三", age: 19, say: ƒ, say1: ƒ}
        P2.say();  //Person {realname: "李四", age: 20, say: ƒ, say1: ƒ}
        P1.say.call(P2);//Person {realname: "张三", age: 19, say: ƒ, say1: ƒ}
        P1.say1.call(P2);//Person {realname: "李四", age: 20, say: ƒ, say1: ƒ}

4、 call()、apply()、bind()调用时的 this

        var name='小王',age=17;
        var Obj={
            name:'小猪',
            ObjAge:this.age,
            myfun:function(fn,t){
                console.log(this.name+'年龄'+this.age,'来自'+fn+'去往'+t);
            }
        }
        var db={
            name:'白马',
            age:20,
        }
        
        Obj.myfun.call(db,'成都','上海');  //白马年龄20 来自成都去往上海
        Obj.myfun.apply(db,['成都','上海']);  //白马年龄20 来自成都去往上海
        Obj.myfun.bind(db,'成都','上海')();  //白马年龄20 来自成都去往上海
        Obj.myfun.bind(db,['成都','上海'])();  //白马年龄20 来自成都,上海去往undefined

 三者都可以改变 this 的指向对象

call 的参数是直接放进去的，第二第三第 n 个参数全都用逗号分隔，直接放到后面 obj.myFun.call(db,'成都', ... ,'string' )。

apply 的所有参数都必须放在一个数组里面传进去 obj.myFun.apply(db,['成都', ..., 'string' ])。

bind 除了返回是函数以外，它 的参数和 call 一样。

当然，三者的参数不限定是 string 类型，允许是各种类型，包括函数 、 object 等等