箭头函数
1.没有自己的this,this指向定义时的上下文。
2.没有arguments
3.不能作为构造函数实例化
函数声明与函数表达式
js引擎在任何代码执行之前,会先读取函数声明,并在执行上下文中生成函数定义。函数声明提升:函数声明会在任何代码执行之前先被读取并添加到执行上下文。
而函数表达式必须等到代码执行到它,才会在执行上下文中生成函数定义。
函数内部存在两个特殊的对象:arguments和this和一个特殊的属性:new.target
- 1.arguments
是一个类数组对象,包含调用函数时传入的所有参数。(只有以function关键字定义函数时才会有,箭头函数没有)有一个callee属性,是指向arguments所在函数的指针。 - 2.this
- 在标准函数中,this引用的是把函数当成方法调用的上下文对象。
window.color = 'red';
let o = {
color: 'blue'
};
function sayColor() {
console.log(this.color);
}
sayColor(); // 'red'
o.sayColor = sayColor;
o.sayColor(); // 'blue'
- 在箭头函数中,this引用的是定义箭头函数的上下文。
window.color = 'red';
let o = {
color: 'blue'
};
let sayColor = () => console.log(this.color); //在window上下文中定义的
sayColor(); // 'red'
o.sayColor = sayColor;
o.sayColor(); // 'red'
- 在事件回调或定时回调中调用某个函数,将回调函数写为箭头函数,this值会指向想要的对象,因为箭头函数的this会保留定义函数时的上下文。
function King() {
this.royaltyName = 'Henry';
// this 引用 King 的实例
setTimeout(() => console.log(this.royaltyName), 1000);
}
function Queen() {
this.royaltyName = 'Elizabeth';
// this 引用 window 对象
setTimeout(function() { console.log(this.royaltyName); }, 1000);
}
new King(); // Henry
new Queen(); // undefined
let p = {
a: function () {
let obj = {
i: 10,
b: () => {console.log(this.i, this, p)},
c: function () {
console.log(this.i, this)
}
}
obj.b();//undefined p{a: ƒ}
obj.c();//10 obj{i: 10, b: ƒ, c: ƒ}
}
}
p.a();
var obj = {
i: 10,
b: () => console.log(this.i, this),
c: function() {
console.log( this.i, this)
}
}
obj.b(); // undefined window{...}
obj.c(); // 10 obj{i: 10, b: ƒ, c: ƒ}
- 3.函数对象上的属性caller引用的是调用当前函数的函数,如果是在全局作用域中调用的则为null。
- 4.检测函数是否使用new关键字调用new.target属性,如果是正常调用值为undefined,如果是new关键字调用则将引用被调用的构造函数。
函数的属性和方法
函数是对象,因此有属性和方法。
每个函数都有两个属性:length和prototype。
- length属性保存函数定义的命名参数的个数。
- prototype保存引用类型所有实例方法的地方,prototype属性是不可枚举的。
函数还有两个方法:apply()和call(),这两个方法都会以指定的this值来调用函数。控制函数调用上下文(this值)
- apply()有两个参数:函数内this的值,一个参数数组(Array的实例或arguments对象)
- call()第一个参数是this的值,剩下要传给被调用函数的参数是主格传递的。
使用call()和apply()的好处是可以将任意对象设置为任意函数的作用域。
bind()方法会创建一个新的函数实例,其this值会被绑定到传给bind()的对象。