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