call、apply与bind

call、apply与bind都是用来改变函数的执行上下文。
① call()的语法 —— func.call(thisArg, arg1, arg2, ...)

/*
 * Demo of call()
/*
// 创建构造函数 MsgPrinter() 其内部包含一个 字符串对象info 和一个 函数对象printInfo
function MsgPrinter(msg) {
  this.info = msg || 'Info in foo';
  this.printInfo = function(msg1,msg2) {
    msg1 === undefined && msg2 === undefined ? console.log(this.info) : console.log(msg1+'_' +msg2)
  }
}
// 实例化构造函数MsgPrinter，创建对象printer并调用printInfo 方法
var printer= new MsgPrinter();
printer.printInfo ();  // Info in foo

// 实例化构造函数MsgPrinter，创建对象printer并传入参数后再调用printInfo 方法
var printer2= new MsgPrinter('Msg injected into MsgPrinter');
printer2.printInfo ();  // Msg injected into MsgPrinter

// 字面量方式创建对象obj
var obj = {info: 'Info of obj'};

// 用call方法，改变showInfo中this.info的this使其指向obj
printer.printInfo.call(obj);  // Info of obj

// 用call方法，改变showInfo中this.info的this指向obj,并传入showInfo的参数msg1
printer.printInfo.call(obj,'Msg1 injected');  // Msg1 injected_undefined

// 用call方法，改变showInfo中this.info的this指向obj,并传入showInfo的参数msg1和msg2
printer.printInfo.call(obj,'Msg1 injected','Msg2 injected');  // Msg1 injected_Msg2 injected

② apply()的语法 —— func.apply(thisArg, [arg1, arg2, ...])

/*
 * Demo of apply()
/*
// 创建构造函数 MsgPrinter() 其内部包含一个 字符串对象info 和一个 函数对象printInfo
function MsgPrinter(msg) {
  this.info = msg || 'Info in foo';
  this.printInfo = function(msg1,msg2) {
    msg1 === undefined && msg2 === undefined ? console.log(this.info) : console.log(msg1+'_' +msg2)
  }
}

// 实例化构造函数MsgPrinter，创建对象printer并调用printInfo 方法
var printer= new MsgPrinter();

// 字面量方式创建对象obj
var obj = {info: 'Info of obj'};

// 用apply方法，改变showInfo中this.info的this使其指向obj
printer.printInfo.apply(obj);  // Info of obj

// 用apply方法，改变showInfo中this.info的this指向obj,并传入showInfo的参数msg1
printer.printInfo.apply(obj,['Msg1 injected']);  // Msg1 injected_undefined

// 用apply方法，改变showInfo中this.info的this指向obj,并传入showInfo的参数msg1和msg2
printer.printInfo.apply(obj,['Msg1 injected','Msg2 injected']);  // Msg1 injected_Msg2 injected

① bind()的语法 —— func.bind(thisArg, arg1, arg2, ...)

/*
 * Demo of bind()
/*
// 创建构造函数 MsgPrinter() 其内部包含一个 字符串对象info 和一个 函数对象printInfo
function MsgPrinter(msg) {
  this.info = msg || 'Info in foo';
  this.printInfo = function(msg1,msg2) {
    msg1 === undefined && msg2 === undefined ? console.log(this.info) : console.log(msg1+'_' +msg2)
  }
}

// 实例化构造函数MsgPrinter，创建对象printer并调用printInfo 方法
var printer= new MsgPrinter();

// 字面量方式创建对象obj
var obj = {info: 'Info of obj'};

// 用bind方法镜像一个新函数，新函数中showInfo中this.info的this固定指向obj
var fixedMsgPrinter = printer.printInfo.bind(obj);
// 执行fixedMsgPrinter方法会打印obj对象中的info属性
fixedMsgPrinter(); // Info of obj
// 通过bind方法镜像的函数同样具有与printInfo接受两个参数msg1和msg2的特性
fixedMsgPrinter('Msg1 injected'); // Msg1 injected_undefined
fixedMsgPrinter('Msg1 injected','Msg2 injected'); // Msg1 injected_Msg2 injected

// 用bind方法镜像一个新函数并传入printInfo方法的第一个入参msg1
// 新函数中showInfo中this.info的this固定指向obj并且msg1固定为'Msg1 injected forever'
var fixedMsgPrinter2 = printer.printInfo.bind(obj ,'Msg1 injected forever');
fixedMsgPrinter2(); // Msg1 injected forever_undefined
// 后续只需传入msg2即可
fixedMsgPrinter2('Msg2 injected'); // Msg1 injected forever_Msg2 injected