箭头函数与普通函数

一，js中的this指向

1.方法是谁调用的,那么在方法中this就指向谁(.前面是谁, this就是谁)

2.如果没有调用 this始终指向window

3.构造函数中的this, 指向实例本身

4.强制改变this   call apply bind
    //call和apply和bind都是改变this指向的方法
    //语法
    //call(新的this指向, pram1, pram2 ...) 
    //apply(新的this指向, [pram1, pram2 ...])
    //bind方法 返回一个改变this指向之后的新的方法,需要手动调用

{//1.方法是谁调用的,那么在方法中this就指向谁(.前面是谁, this就是谁)
    let obj = {
        name: "obj",
        fn: function () {
            console.log(this);//obj
        }
    };
    obj.fn();
}
{//2.如果没有调用 this始终指向window
    function fn() {
        console.log(this);//window
    }
    fn();
}
{//3.构造函数中的this, 指向实例本身
    function Fn(name){
        this.name = name;
        this.age = 18;
        console.log("Fn中的this==>",this); //new Fn()
    }
    Fn.prototype.sayName = function(){
        console.log(this.name); //new Fn()
        console.log("sayName中的this==>",this)
    }
    let fn = new Fn("哈哈");
    fn.sayName()
    console.log(fn);
}
{//4.强制改变this   call apply bind
    //call和apply和bind都是改变this指向的方法
    //语法
    //call(新的this指向, pram1, pram2 ...) 
    //apply(新的this指向, [pram1, pram2 ...])
    //bind方法 返回一个改变this指向之后的新的方法,需要手动调用
    let obj = {
        name: "obj",
        birth: 1990,
        year: 2021,
        age: function(arg1, arg2){
            // console.log(this);//obj2
            console.log(arg1, arg2);//obj2
            // console.log("my age =", this.year - this.birth)
        }
    }
    // obj.age("参数1","参数2");
    let obj2 = {
        name: "obj2",
        birth: 2000,
        year: 2020,
    };
    // obj.age.call()  //不传参值为undefined
    // obj.age.call(obj2,"参数1","参数2")
    // obj.age.apply(obj2,["参数1","参数2"])// Create List From Array Like called on non-object
    //bind
    let changeThisAge = obj.age.bind(obj2);
    changeThisAge("参数1","参数2")
}

二，箭头函数中的this指向

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

2.箭头函数的this,始终指向父级上下文

3.箭头函数不能通过call apply bind改变this指向,但是可以通过这些方法传递参数

4.箭头函数没有原型属性

5.箭头函数没有arguments属性,可以用...展开运算符来接受所有的参数集合

//1.箭头函数是匿名函数 箭头函数不能作为构造函数使用 不能使用new
{
    /*function Fn(name){
        this.name = name;
        this.age = 18;
        console.log("Fn中的this==>",this); //new Fn()
    }
    let fn = new Fn("哈哈");*/
    /*let Fn = ()=>{
        this.name = name;
        this.age = 18;
    }
    let fn = new Fn(); //Fn is not a constructor*/
}
//2.箭头函数的this,始终指向父级上下文
{
    let obj = {
        a: 100,
        fn: function(){
            console.log(this);//obj
        },
        fn2: ()=>{
            console.log("fn2====>",this);//window
        }
    };
    obj.fn();
    obj.fn2();
}
//3.箭头函数不能通过call apply bind改变this指向,但是可以通过这些方法传递参数
{
    let obj = {
        name: "obj",
        birth: 1990,
        year: 2021,
        age: (arg1, arg2)=>{
            console.log(this);//window
            console.log(arg1, arg2);//obj2
            console.log("my age =", this.year - this.birth)
        }
    }
    let obj2 = {
        name: "obj2",
        birth: 2000,
        year: 2020,
    };
    obj.age.call(obj2,"参数1","参数2")
}
//4.箭头函数没有原型属性
{
    // function fn(){}
    let fn = ()=>{};
    console.dir(fn);
}
//5.箭头函数没有arguments属性,可以用...展开运算符来接受所有的参数集合
{
   /* function fn(){
        console.log(arguments);
        // fn.caller 谁在调用当前的方法 会返回这个方法本身
        // arguments.callee ===> 当前这个方法本身;
        // arguments 参数集合 是一个类数组 不能调用数组的方法
    }
    fn(1,2,3)*/
    let fn = (...args)=>{ //使用展开运算符接受参数集合
        // console.log(arguments);// arguments is not defined
        console.log(args); //是一个数组
    }
    fn(1,2,3)
}