本文对应《JavaScript忍者秘籍》第4章内容。
函数除了显式声明的形参，还有两个隐含的参数：arguments和this。
1.arguments参数
arguments既有length属性，又可以通过下标访问。
但它不是数组。相比之下，剩余参数是真正的Array实例。
function sum(){
var sum=0;
for(var i=0;i<arguments.length;i++){
sum+=arguments[i];
}
return sum;
}
function product(...rest){
var p=1;
rest.forEach(value=>p*=value);
return p;
}
2.this参数
this表示函数调用时的上下文。
函数调用的方式：
- 作为函数。
- 作为对象的方法。
- 作为一个构造函数，实例化对象。
- 通过函数的
apply或者call方法。
作为函数直接调用
this的值在严格模式下为undefined。非严格模式下为window对象。
作为对象的方法调用
this的值是该方法所在的对象。
作为构造函数调用
使用new关键词以构造函数的方式调用函数。
此时会触发三个动作：
- 创建一个新的空对象
- 该对象作为
this参数传递给构造函数，成为构造函数的上下文。 - 新构造的对象作为
new运算符的返回值。
function Bear(){
this.whoami=function(){
return this;
};
}
var baby=new Bear();
assert(baby.whoami()===baby,'i am a baby');
上述断言函数的实现：
function assert(value,desc){
console.log((value?"pass:":"fail:")+desc);
};
上述的构造函数没有return语句。构造函数讲道理并不需要return语句。
使用return语句的后果：
- 如果构造函数返回一个对象，则该对象作为整个表达式的值返回，而传入构造函数的
this将被丢弃。 - 如果构造函数返回的是非对象类型，则忽略返回值，返回新创建的对象。
所以，构造函数应当和普通函数区分，只用于根据初始条件对函数调用创建的对象进行初始化，只作为构造函数调用。
使用apply和call方法调用
apply和call是每个函数都存在的方法，用于显式指定函数的上下文。
使用apply方法调用函数，需要为其传递两个参数：作为函数上下文的对象和作为函数参数的一个数组。
使用call方法调用函数类似，不同点是以参数列表的形式而不是数组。
function sum(...rest){
var sum=0;
rest.forEach(x=>sum+=x);
this.sum=sum;
}
var bears={};
var pigs={};
sum.apply(bears,[0,8,1,7]);
sum.call(pigs,1,9,2,6);
assert(bears.sum===16, "bears yes!")
assert(pigs.sum===18,"pigs yes!");
3.解决函数上下文的问题
使用箭头函数和bind方法解决上下文。
使用箭头函数绕过上下文
箭头函数没有单独的this值。它从定义时的所在函数继承上下文。
function Bear(){
this.whoami=()=>this;
}
var baby=new Bear();
assert(baby.whoami()===baby,'i am a baby');
注意，如果用字面量创建对象，定义箭头函数，那么箭头函数内的this指向全局window对象。需要避免这样的BUG。
var baby={
whoami:()=>this
}
assert(baby.whoami()===baby,'i am a baby');//fail
assert(baby.whoami()===window,'i am window');
使用bind方法
使用apply和call方法，可以控制调用函数的上下文及参数。
使用bind方法创建新函数，不改变原始函数。新函数的函数体与原始函数的函数体相同，新函数被绑定到指定的对象上,this被设置为对象本身。
所有的函数均拥有bind方法。
function sum(...rest){
var sum=0;
rest.forEach(x=>sum+=x);
this.sum=sum;
}
var bears={};
var pigs={};
(sum.bind(bears))(0,8,1,7);
(sum.bind(pigs))(1,9,2,6);
assert(bears.sum===16, "bears yes!")
assert(pigs.sum===18,"pigs yes!");
再看个栗子
class Bear{
constructor(){
this.name='bear'
}
speak(){
console.log(this.name)
}
}
let bro=new Bear()
let talk=bro.speak
talk()
let speak=bro.speak.bind(bro)
speak()
再来个栗子，姬无命杀吕秀才是谁杀了谁？“我”是谁？
let lv={
name:'lv'
}
let ji={
name:'ji',
kill:()=>{
return function(person){
console.log(this.name+' kill '+person.name)
}
}
}
ji.kill()(lv)
ji.kill().bind(ji)(lv)
将代号与人物对象绑定之后，姬无命就可以说，是我杀了吕秀才，是姬无命杀了吕秀才。
