JS中箭头函数和普通函数的区别

1JS中的this指向分别是那些

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

 let obj = {
            name: "obj",
            func: function(){
                console.log(this);//obj
            }
        };
        obj.func();

2.如果没有人调用的时候this默认的指向window

 function fn(){
            console.log(this);//window
        }
        fn();

3.构造函数中的this, 指向通过这个构造函数创建出来的实例本身
//构造函数=> ES5中的类(普通函数和构造函数的区别:构造函数第一个字符大写) =>ES6 Class

  function Person(name){//
            this.name = name;
            this.age = 20;
            console.log("Person-->",this);
        }
        Person.prototype.sayHello = function (){
            console.log(this.name, "hello world")
        }
        let person = new Person("哈哈");
        person.sayHello();

4.强制改变this指向 call apply bind
//call方法 语法 call(this的指向,function的参数)
//apply方法 语法 apply(this的指向,[function的参数])
//bind本身不回去执行要被改变this指向的这个方法,而是返回一个已经被改变了this指向的新方法

 let obj = {
            name: "haha",
            birthDay: 2000,
            year: 2021,
            age: function (p1, p2){
                console.log(this);//obj
                console.log("传递进去的参数",p1,p2);
                console.log(this.name + " 计算完成之后的年龄",this.year - this.birthDay);
            }
        }
        obj.age();
        //
        // obj.age.call({
        //     name: "呵呵",
        //     birthDay: 2001,
        //     year: 2051
        // },"--测试参数--","==测试==")
        //
        // obj.age.apply({
        //     name: "嘻嘻",
        //     birthDay: 1900,
        //     year: 2051
        // },["--测试参数01--","==测试参数02=="])
        let ageFunc = obj.age.bind({
            name: "bind",
            birthDay: 19,
            year: 20
        });
        console.log(ageFunc);
        ageFunc()

2箭头函数和普通函数的区别

1不能当构造函数使用 不能使用New关键字 是匿名函数

 // function Person(name){
    //     this.name = name;
    //     this.age = 20;
    //     console.log("Person-->",this);
    // }
    // Person.prototype.sayHello = function (){
    //     console.log(this.name, "hello world")
    // }
    // let person = new Person("哈哈");
    // person.sayHello();

    let Person = ()=>{
        this.name = name;
        this.age = 20;
    }
    // let person = new Person();
    //Uncaught TypeError: Person is not a constructor //Person不是一个构造函数
}

2箭头函数的this指向父级上下文

 function Person(name){//
            this.name = name;
            this.age = 20;
            console.log("Person-->",this);
        }
        Person.prototype.sayHello = function (){
            console.log(this.name, "hello world")
        }
        let person = new Person("哈哈");
        person.sayHello();

3 箭头函数没有原型属性

{
    let person = ()=>{
    };
     //person.prototype.sayHello = 1;
    //Uncaught TypeError: Cannot set property 'sayHello' of undefined
    console.log(person)
    console.log(person.prototype)
}

4箭头函数内没有arguments，可以用展开运算符…解决

//普通函数  arguments=>参数集合=>伪数组=>...
    // function sum(a,b){
    //     let sumNum = 0;
    //     let likeArr = arguments;//伪数组 --> 原型指向object
    //     //伪数组转换成数组
    //     let arr = Array.from(likeArr);
    //     let arr2 = Array.prototype.slice.call(likeArr);
    //     // let arr3 = [].slice.call(likeArr);
    //
    //     arr.forEach((i)=>{
    //         sumNum+=i;
    //     })
    //
    //     console.log(sumNum);
    // }
    let sum = (...args)=>{
        //箭头函数内没有arguments
        // console.log(arguments);
        console.log(args);
        let sumNum = 0;
        args.forEach((i) => {
            sumNum += i;
        })
        console.log(sumNum);
    }
    sum(1,2,3,4,5);

5 箭头函数不能通过call()\apply()\bind()方法直接修改它的this指向 但是,可以正常传参

{
    let sum = (...args)=>{
        console.log(this,args);
    }
    sum.call({},1,2,3)
}

3箭头函数this指向

箭头函数在自己的作用域内没有自己的 this，如果要使用 this ，就会指向定义时所在的作用域的 this 值。

function User() {
  this.name = 'John';

  setTimeout(() => {
    'use strict'
    console.log(`Hello, my name is ${this.name}`); // Hello, my name is John
    console.log(this); // User {name: "John"}
  }, 1000);
}

const user = new User();

4 普通函数的arguments和类数组转换成数组

    Array.prototype.slice = function (){
        console.log(this); //this = arguments
        let newArr = [];
        for (let i=0;i<this.length;i++){
            newArr.push(this[i])
        }

        return newArr
    }
    let arr = [1,2,34];

    let arr2 = arr.slice();

    arr2[0] = 1000;
    console.log(arr,arr2);



    function fn(){

        let arr = Array.from(arguments);


        let arr2 = Array.prototype.slice.call(arguments)
        let arr3 = [].slice.call(arguments)


        console.log(arguments);
        console.log(arr,arr2);


    }
    fn(1,2,3,4,5)