函数（二）arguments与this

本文对应《JavaScript忍者秘籍》第4章内容。
函数除了显式声明的形参，还有两个隐含的参数：arguments和this。

1.arguments参数

arguments既有length属性，又可以通过下标访问。
但它不是数组。相比之下，剩余参数是真正的Array实例。

function sum(){
  var sum=0;
  for(var i=0;ip*=value);
  return p;
}

2.this参数

this表示函数调用时的上下文。
函数调用的方式：

• 作为函数。
• 作为对象的方法。
• 作为一个构造函数，实例化对象。
• 通过函数的apply或者call方法。

作为函数直接调用

this的值在严格模式下为undefined。非严格模式下为window对象。

作为对象的方法调用

this的值是该方法所在的对象。

作为构造函数调用

使用new关键词以构造函数的方式调用函数。
此时会触发三个动作：

1. 创建一个新的空对象
2. 该对象作为this参数传递给构造函数，成为构造函数的上下文。
3. 新构造的对象作为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)

将代号与人物对象绑定之后，姬无命就可以说，是我杀了吕秀才，是姬无命杀了吕秀才。