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

2019-08-15  本文已影响0人  nucky_lee

普通函数:

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
上一篇下一篇

猜你喜欢

热点阅读