美文网首页
js理解普通函数和箭头函数

js理解普通函数和箭头函数

作者: nucky_lee | 来源:发表于2019-08-15 14:41 被阅读0次

    普通函数:

    let a = function () {
    
        return 1 + 1;
    
    }
    
    let b = function (x) {
    
        return x;
    
    }
    

    箭头函数:

    let a = () => 1 + 1
    
    console.log('a=', a())  //2
    
    
    let b = x => x
    
    console.log('b=', b(1))  //1
    
    
    let c = () => {
    
        let a = 1, b = 2;
    
        return a + b;
    
    }
    
    console.log('c=', c())  //3
    

    区别:

    构造函数和原型

    箭头函数不能作为构造函数 不能new。会报错

    let A = () => console.log();
    
    let a = new A();
    
    a()
    
    Jietu20190815-123548@2x.jpg

    箭头函数没有原型属性;

    prototype是普通函数用于获取原型对象的。

    函数参数arguments

    箭头函数不绑定arguments

    let A = (a) => console.log(arguments);
    
    A(1, 2, 3, 4);
    
    Jietu20190815-123207@2x.jpg

    普通函数arguments,可以使用

    let A = function(a) {
    
        console.log(arguments)
    
    } ;
    
    A(1, 2, 3, 4);
    
    Jietu20190815-123320@2x.jpg

    2种函数的this代表不一样:

    箭头函数,this代表上层对象, bind()、call()、apply()均无法改变指向。若无自定义上层,则代表window;

    普通函数内的this执行调用其函数的对象.

    let obj = {
    
        a: 10,
    
        b: function (n) {
    
            let f = (n) => {
    
                return n + this.a;
    
            }
    
            return f(n)
    
        },
    
        c: function (n) {
    
            let f = (n) => {
    
                return n + this.a;
    
            }
    
            let m = { a: 20 };
    
            return f.call(m, n);
    
        },
    
        d: function (n) {
    
            let f = function (n) {
    
                return n + this.a;
    
            }
    
            let m = { a: 20 };
    
            return f.call(m, n);
    
        },
    
        e: function (n) {
    
            let f = function (n) {
    
                return n + this.a;
    
            }
    
            return f(n);
    
        }
    
    }
    
    console.log(obj.b(1)); //11  b中的f是箭头函数,所以内部的this代表上层obj,值为11
    
    console.log(obj.c(1)); //11  c中的f是箭头函数,调用f的call()时不会影响内部的this,依然代表obj,值为11
    
    console.log(obj.d(1)); //21  d中的f是普通函数,this代表window,但是因为调用了f的call(m)变成了m,值为21
    
    console.log(obj.e(1)); //TypeError: undefined is not an object (evaluating 'this.a')  e中的f是普通函数,this代表window,但是因为window并没有定义a,值为所以结果报错
    

    call函数:

    call函数是每个函数都有的方法,用于改变普通函数内部的this指向的。

    let obj1 = {
    
        a: 1
    
    }
    
    let obj2 = {
    
        a: 2
    
    }
    
    var a = 100;
    
    let sayName = function() {
    
        return this.a
    
    }
    
    console.log(sayName()); //100 内部this代表window
    
    console.log(sayName.call(this)); //100 内部this代表window
    
    console.log(sayName.call(obj1)); // 1 内部this代表obj1
    
    console.log(sayName.call(obj2)); // 2 内部this代表obj2
    

    相关文章

      网友评论

          本文标题:js理解普通函数和箭头函数

          本文链接:https://www.haomeiwen.com/subject/pbjzjctx.html