call办法

call()办法应用一个指定的 this 值（this指向执行环境上下文）和独自给出的一个或多个参数来调用一个函数。

语法

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

  • fun：调用的函数。
  • thisArg：必选的。函数运行时指定的this值（this指向执行环境上下文）。
  • arg1, arg2, ...：可选的。指定的参数列表。

留神： 指定的this值并不一定是该函数执行时真正的this值，如果这个函数处于非严格模式下，则指定为null和undefined的this值会主动指向全局对象(浏览器中就是window对象)，值为根本类型值(数字，字符串，布尔值)的this会指向该原始值的主动包装对象。

用处

应用call办法调用函数并且指定this，借用本人没有的函数

function speakName() {    console.log('My name is ' + this.name);}var person1 = {    name: 'chong',}speakName(); // speakName为全局函数，this指向全局对象window，因为全局作用域中不存在变量name，所以输入：My name isspeakName.call(person1); // 输入：My name is chong

应用call办法调用父构造函数，实现继承

function Product(name, price) {    this.name = name;    this.price = price;    if (price < 0) {        throw RangeError(            'Cannot create product ' + this.name + ' with a negative price'        );    }}function Food(name, price) {    Product.call(this, name, price);    this.category = 'food';}// 下面Food构造函数等同于以下代码function Food(name, price) {    this.name = name;    this.price = price;    if (price < 0) {        throw RangeError(            'Cannot create product ' + this.name + ' with a negative price'        );    }    this.category = 'food';}

apply办法

apply() 办法用一个指定的 this 值，以及以一个数组（或类数组对象）的模式提供的参数调用一个函数。

语法

func.apply(thisArg, [argsArray])

  • fun：调用的函数。
  • thisArg：必选的。函数运行时指定的this值。
  • argsArray 可选的。一个数组或者类数组对象，其中的数组元素将作为独自的参数传给 func 函数。

apply办法用处和call办法雷同，不再赘述

bind办法

bind() 办法用来创立一个新的函数。bind() 的第一个参数为这个新函数的 this ，其余参数将作为新函数的参数。

语法

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

  • fun：调用的函数。
  • thisArg：必选的。调用新函数时作为新函数的 this 值。如果应用new运算符结构绑定函数，则疏忽该值。当应用 bind 在 setTimeout 中创立一个函数（作为回调提供）时，作为 thisArg 传递的任何原始值都将转换为 object。如果 bind 函数的参数列表为空，或者thisArg是null或undefined，执行作用域的 this 将被视为新函数的 thisArg。
  • arg1, arg2, ...： 可选的。给新函数预设的初始参数列表。
    返回值：返回一个原函数的拷贝，并领有指定的 this 值和初始参数。

用处

  1. 创立绑定函数
  2. 偏函数：使一个函数领有预设的初始参数

例如：

var x = 9;var module = {    x: 81,    getX: function() {        return this.x;    },    addX: function(n) {        return this.x + n;    }};module.getX(); // 81module.addX(9); // 90var _getX = module.getX;var _addX = module.addX;_getX(); // 返回 9, 因为函数是在全局作用域中调用的_addX(9); // 返回 18// 创立一个新函数boundGetX，并把this绑定为module对象；var boundGetX = _getX.bind(module);boundGetX(); // 81// 1. 创立绑定函数 boundAddX，把this绑定为module对象，并预设参数为 10；var boundAddX = _addX.bind(module, 10);// 调用新函数时不必再传参数（传了也没用）boundAddX(); // 91// 2. 创立一个新函数boundAddX，把this绑定为module对象，不预设参数；var boundAddX = _addX.bind(module);// 调用新函数时须要传参数boundAddX(9); // 90
  1. 配合 setTimeout

在默认状况下，应用 window.setTimeout() 时，this 关键字会指向 window （或 global）对象。当类的办法中须要 this 指向类的实例时，你可能须要显式地把 this 绑定到回调函数，就不会失落该实例的援用。

function LateBloomer() {    // 花瓣数    this.petalCount = Math.ceil(Math.random() * 12) + 1;}// 在调用bloom 1 秒钟后，调用declareLateBloomer.prototype.bloom = function() {    window.setTimeout(this.declare, 1000);};LateBloomer.prototype.declare = function() {  console.log('I am a beautiful flower with ' +    this.petalCount + ' petals!');};var flower = new LateBloomer();flower.bloom();  // 一秒钟后, 调用 'declare' 办法

总结

call和apply比拟

  • 相同点：它们都能够用一个指定的this值调用一个函数，并且能够给函数传递一个或者多个参数。简略来说，它们的用处就是一个对象调/借用本身没有的函数。如果这个函数是构造函数，就能够实现继承。
  • 不同点: 只在于传递参数的模式不同。call办法传递参数是通过参数列表，apply办法传递参数是通过数组/类数组。

call、apply和bind比拟

  • 相同点：它们都能够扭转一个函数执行时的this，并且能够给函数传递一个或者多个参数。
  • 不同点: bind办法返回一个新的函数，须要调用才会执行。而call和apply是立刻执行。

参考

  • Function.prototype.call()
  • Function.prototype.apply()
  • Function.prototype.bind()