JavaScript基础心法——call apply bind

原文地址：JavaScript基础心法——call apply bind

欢迎star。

若是有错误的地方欢迎指正。

---

整理call、apply、bind这三个方法的的知识点。

---

以前这篇文章提到过this的各类状况，其中有一种状况就是经过call、apply、bind来将this绑定到指定的对象上。

也就是说，这三个方法能够改变函数体内部this的指向。

这三个方法有什么区别呢？分别适合应用在哪些场景中呢？

先举个简单的栗子 ~

var person = {
  name: "axuebin",
  age: 25
};
function say(job){
  console.log(this.name+":"+this.age+" "+job);
}
say.call(person,"FE"); // axuebin:25 FE
say.apply(person,["FE"]); // axuebin:25 FE
var sayPerson = say.bind(person,"FE");
sayPerson(); // axuebin:25 FE

对于对象person而言，并无say这样一个方法，经过call/apply/bind就能够将外部的say方法用于这个对象中，其实就是将say内部的this指向person这个对象。

call

call是属于全部Function的方法，也就是Function.prototype.call。

The call() method calls a function with a given this value and arguments provided individually.

call() 方法调用一个函数, 其具备一个指定的this值和分别地提供的参数(参数的列表)。

它的语法是这样的：

fun.call(thisArg[,arg1[,arg2,…]]);

其中，thisArg就是this指向，arg是指定的参数。

call的用处简而言之就是可让call()中的对象调用当前对象所拥有的function。

ECMAScript规范

ECMAScript规范中是这样定义call的：

当以thisArg和可选的arg1,arg2等等做为参数在一个func对象上调用call方法，采用以下步骤：

1. 若是IsCallable(func)是false, 则抛出一个TypeError异常。
2. 令argList为一个空列表。
3. 若是调用这个方法的参数多余一个，则从arg1开始以从左到右的顺序将每一个参数插入为argList的最后一个元素。
4. 提供thisArg做为this值并以argList做为参数列表，调用func的[[Call]]内部方法，返回结果。

call方法的length属性是1。

在外面传入的thisArg值会修改并成为this值。thisArg是undefined或null时它会被替换成全局对象，全部其余值会被应用ToObject并将结果做为this值，这是第三版引入的更改。

使用call调用函数而且指定this

var obj = {
  a: 1
}
function foo(b, c){
  this.b = b;
  this.c = c;
  console.log(this.a + this.b + this.c);
}
foo.call(obj,2,3); // 6

call实现继承

在须要实现继承的子类构造函数中，能够经过call调用父类构造函数实现继承。

function Person(name, age){
  this.name = name;
  this.age = age;
  this.say = function(){
    console.log(this.name + ":" + this.age);
  }
}
function Student(name, age, job){
  Person.call(this, name ,age);
  this.job = job;
  this.say = function(){
    console.log(this.name + ":" + this.age + " " + this.job);
  }
}
var me = new Student("axuebin",25,"FE");
console.log(me.say()); // axuebin:25 FE

apply

apply也是属于全部Function的方法，也就是Function.prototype.apply。

The apply() method calls a function with a given this value, and arguments provided as an array (or an array-like object).

apply() 方法调用一个函数, 其具备一个指定的this值，以及做为一个数组（或相似数组的对象）提供的参数。

它的语法是这样的：

fun.apply(thisArg, [argsArray]);

其中，thisArg就是this指向，argsArray是指定的参数数组。

经过语法就能够看出call和apply的在参数上的一个区别：

• call的参数是一个列表，将每一个参数一个个列出来
• apply的参数是一个数组，将每一个参数放到一个数组中

ECMAScript规范

当以thisArg和argArray为参数在一个func对象上调用apply方法，采用以下步骤：

1. 若是IsCallable(func)是false, 则抛出一个TypeError异常 .

2. 若是argArray是null或undefined, 则

   1. 返回提供thisArg做为this值并以空参数列表调用func的[[Call]]内部方法的结果。
3. 若是Type(argArray)不是Object, 则抛出一个TypeError异常 .
4. 令len为以"length"做为参数调用argArray的[[Get]]内部方法的结果。
5. 令n为ToUint32(len).
6. 令argList为一个空列表 .
7. 令index为0.

8. 只要index<n就重复

   1. 令indexName为ToString(index).
   2. 令nextArg为以indexName做为参数调用argArray的[[Get]]内部方法的结果。
   3. 将nextArg做为最后一个元素插入到argList里。
   4. 设定index为index + 1.
9. 提供thisArg做为this值并以argList做为参数列表，调用func的[[Call]]内部方法，返回结果。

apply方法的length属性是 2。

在外面传入的thisArg值会修改并成为this值。thisArg是undefined或null时它会被替换成全局对象，全部其余值会被应用ToObject并将结果做为this值，这是第三版引入的更改。

用法

在用法上apply和call同样，就不说了。

实现一个apply

参考连接：https://github.com/jawil/blog/issues/16

第一步，绑定上下文

Function.prototype.myApply=function(context){
  // 获取调用`myApply`的函数自己，用this获取
  context.fn = this;
  // 执行这个函数
  context.fn();
  // 从上下文中删除函数引用
  delete context.fn;
}

var obj ={
  name: "xb",
  getName: function(){
    console.log(this.name);
  }
}

var me = {
  name: "axuebin"
}

obj.getName(); // xb 
obj.getName.myApply(me); // axuebin

确实成功地将this指向了me对象，而不是自己的obj对象。

第二步，给定参数

上文已经提到apply须要接受一个参数数组，能够是一个类数组对象，还记得获取函数参数能够用arguments吗？

Function.prototype.myApply=function(context){
  // 获取调用`myApply`的函数自己，用this获取
  context.fn = this;
  // 经过arguments获取参数
  var args = arguments[1];
  // 执行这个函数，用ES6的...运算符将arg展开
  context.fn(...args);
  // 从上下文中删除函数引用
  delete context.fn;
}

var obj ={
  name: "xb",
  getName: function(age){
    console.log(this.name + ":" + age);
  }
}

var me = {
  name: "axuebin"
}

obj.getName(); // xb:undefined
obj.getName.myApply(me,[25]); // axuebin:25

context.fn(...arg)是用了ES6的方法来将参数展开，若是看过上面那个连接，就知道这里不经过...运算符也是能够的。

原博主经过拼接字符串，而后用eval执行的方式将参数传进context.fn中：

for (var i = 0; i < args.length; i++) {
  fnStr += i == args.length - 1 ? args[i] : args[i] + ',';
}
fnStr += ')';//获得"context.fn(arg1,arg2,arg3...)"这个字符串在，最后用eval执行
eval(fnStr); //仍是eval强大

第三步，当传入apply的this为null或者为空时

咱们知道，当apply的第一个参数，也就是this的指向为null时，this会指向window。知道了这个，就简单了~

Function.prototype.myApply=function(context){
  // 获取调用`myApply`的函数自己，用this获取，若是context不存在，则为window
  var context = context || window;
  context.fn = this;
  //获取传入的数组参数
  var args = arguments[1];
  if (args == undefined) { //没有传入参数直接执行
    // 执行这个函数
    context.fn()
  } else {
    // 执行这个函数
    context.fn(...args);
  }
  // 从上下文中删除函数引用
  delete context.fn;
}

var obj ={
  name: "xb",
  getName: function(age){
    console.log(this.name + ":" + age);
  }
}

var name = "window.name";

var me = {
  name: "axuebin"
}

obj.getName(); // xb:25
obj.getName.myApply(); // window.name:undefined
obj.getName.myApply(null, [25]); // window.name:25
obj.getName.myApply(me, [25]); // axuebin:25

第四步 保证fn函数的惟一性

ES6中新增了一种基础数据类型Symbol。

const name = Symbol();
const age = Symbol();
console.log(name === age); // false

const obj = {
  [name]: "axuebin",
  [age]: 25
}

console.log(obj); // {Symbol(): "axuebin", Symbol(): 25}
console.log(obj[name]); // axuebin

因此咱们能够经过Symbol来建立一个属性名。

var fn = Symbol();
context[fn] = this;

完整的apply

Function.prototype.myApply=function(context){
  // 获取调用`myApply`的函数自己，用this获取，若是context不存在，则为window
  var context = context || window;
  var fn = Symbol();
  context[fn] = this;
  //获取传入的数组参数
  var args = arguments[1];
  if (args == undefined) { //没有传入参数直接执行
    // 执行这个函数
    context[fn]()
  } else {
    // 执行这个函数
    context[fn](...args);
  }
  // 从上下文中删除函数引用
  delete context.fn;
}

这样就是一个完整的apply了，咱们来测试一下：

var obj ={
  name: "xb",
  getName: function(age){
    console.log(this.name + ":" + age);
  }
}

var name = "window.name";

var me = {
  name: "axuebin"
}

obj.getName(); // xb:25
obj.getName.myApply(); // window.name:undefined
obj.getName.myApply(null, [25]); // window.name:25
obj.getName.myApply(me, [25]); // axuebin:25

ok 没啥毛病 ~

再次感谢1024大佬 ~

bind

The bind() method creates a new function that, when called, has its this keyword set to the provided value, with a given sequence of arguments preceding any provided when the new function is called.

bind()方法建立一个新的函数, 当被调用时，将其this关键字设置为提供的值，在调用新函数时，在任何提供以前提供一个给定的参数序列。

语法：

fun.bind(thisArg[, arg1[, arg2[, ...]]])

其中，thisArg就是this指向，arg是指定的参数。

能够看出，bind会建立一个新函数（称之为绑定函数），原函数的一个拷贝，也就是说不会像call和apply那样当即执行。

当这个绑定函数被调用时，它的this值传递给bind的一个参数，执行的参数是传入bind的其它参数和执行绑定函数时传入的参数。

用法

当咱们执行下面的代码时，咱们但愿能够正确地输出name，而后现实是残酷的

function Person(name){
  this.name = name;
  this.say = function(){
    setTimeout(function(){
      console.log("hello " + this.name);
    },1000)
  }
}
var person = new Person("axuebin");
person.say(); //hello undefined

这里this运行时是指向window的，因此this.name是undefined，为何会这样呢？看看MDN的解释：

由setTimeout()调用的代码运行在与所在函数彻底分离的执行环境上。这会致使，这些代码中包含的 this 关键字在非严格模式会指向 window。

有一个常见的方法可使得正确的输出：

function Person(name){
  this.name = name;
  this.say = function(){
    var self = this;
    setTimeout(function(){
      console.log("hello " + self.name);
    },1000)
  }
}
var person = new Person("axuebin");
person.say(); //hello axuebin

没错，这里咱们就能够用到bind了：

function Person(name){
  this.name = name;
  this.say = function(){
    setTimeout(function(){
      console.log("hello " + this.name);
    }.bind(this),1000)
  }
}
var person = new Person("axuebin");
person.say(); //hello axuebin

MDN的Polyfill

Function.prototype.bind = function (oThis) {
  var aArgs = Array.prototype.slice.call(arguments, 1)；
  var fToBind = this；
  var fNOP = function () {}；
  var fBound = function () {
    fBound.prototype = this instanceof fNOP ? new fNOP() : fBound.prototype；
    return fToBind.apply(this instanceof fNOP ? this : oThis || this, aArgs )
  }   
  if( this.prototype ) {
    fNOP.prototype = this.prototype；
  }
  return fBound；
}

总结

• 三者都是用来改变函数的this指向
• 三者的第一个参数都是this指向的对象
• bind是返回一个绑定函数可稍后执行，call、apply是当即调用
• 三者均可以给定参数传递
• call给定参数须要将参数所有列出，apply给定参数数组

感谢

不用call和apply方法模拟实现ES5的bind方法

深刻浅出妙用 Javascript 中 apply、call、bind

回味JS基础:call apply 与 bind