JS基础之call、apply、bind

最新推荐文章于 2024-03-31 15:50:35 发布

前端瓶子君

最新推荐文章于 2024-03-31 15:50:35 发布

阅读量159

点赞数

分类专栏： JS 文章标签： call apply bind

本文链接：https://blog.csdn.net/lunahaijiao/article/details/85066972

版权

JS 专栏收录该内容

24 篇文章 1 订阅

订阅专栏

Function.prototype.call()

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

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

thisArg：在fun函数运行时指定的this值*。*
arg1, arg2, …：指定的参数列表。

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

用法

使用call调用父构造函数

function Person(name, time) {
  this.name = name
  if (time < 6) {
    throw RangeError(
      this.name + ' is sleep'
    );
  }
}

function Man(name, time) {
  Person.call(this, name, time);
  this.category = 'man';
}

//等同于
function Woman(name, time) {
  this.name = name;
  this.time = time;
  if (time < 6) {
    throw RangeError(
      this.name + ' is sleep'
    );
  }
  this.category = 'woman';
}

var yang = new Man('yang', 5);
var an = new Woman('an', 8);

使用call调取匿名函数
```
var person = [
  {name: 'yang', age: '24'},
  {name: 'an', age: '12'}
];

for (var i = 0; i < person.length; i++) {
  (function (i) { 
    this.print = function () { 
      console.log('#' + i  + ' ' + this.name + ': ' + this.age); 
    } 
    this.print();
  }).call(person[i], i);
}
```
在上面例中的for循环体内，我们创建了一个匿名函数，然后通过调用该函数的call方法，将每个数组元素作为指定的this值执行了那个匿名函数。这个匿名函数的主要目的是给每个数组元素对象添加一个print方法，这个print方法可以打印出各元素在数组中的正确索引号。当然，这里不是必须得让数组元素作为this值传入那个匿名函数（普通参数就可以），目的是为了演示call的用法。

使用call方法调用函数并指定上下文中的this

function Person() {
  var hello = [this.name, ' say ', this.word].join(' ');
  console.log(hello);
}

var man = {
  name: 'yang', word: 'hello'
};

Person.call(man); // yang  say  hello

使用call调用函数并且没有确定第一个参数

// 非严格模式下
var an = 'an'
function say(){
   console.log('name is %s ',this.an)
}
say.call()   //name is an

// 严格模式下--注意：在严格模式下this的值将会是undefined. 
'use strict'
var an = 'an'
function say(){
   console.log('name is %s ',this.an)
}
say.call()  // Uncaught TypeError: Cannot read property 'an' of undefined

Function.prototype.apply()

apply() 方法调用一个具有给定this值的函数，以及作为一个数组（或类似数组对象）提供的参数。

call() 和 apply()的区别在于，call()方法接受的是若干个参数的列表，而apply()方法接受的是一个包含多个参数的数组

func.apply(thisArg, [argsArray])

thisArg：在fun函数运行时指定的this值*。*
arg1, arg2, …：可选的。一个数组或者类数组对象，其中的数组元素将作为单独的参数传给 func 函数。

需要注意：Chrome 14 以及 Internet Explorer 9 仍然不接受类数组对象。如果传入类数组对象，它们会抛出异常。

用法

用apply将数组添加到另一数组

var array = ['a', 'b']
var elements = [0, 1, 2]
array.push.apply(array, elements)
console.info(array) // ["a", "b", 0, 1, 2]

使用apply和内置函数

/* 找出数组中最大/小的数字 */
var numbers = [5, 6, 2, 3, 7]

/* 应用(apply) Math.min/Math.max 内置函数完成 */
var max = Math.max.apply(null, numbers) /* 基本等同于 Math.max(numbers[0], ...) 或 Math.max(5, 6, ..) */
var min = Math.min.apply(null, numbers)
// max: 7
// min: 2

/* 代码对比： 用简单循环完成 */
max = -Infinity, min = +Infinity
for (var i = 0; i < numbers.length; i++) {
  if (numbers[i] > max)
    max = numbers[i]
  if (numbers[i] < min) 
    min = numbers[i]
}

但是：如果用上面的方式调用apply，会有超出JavaScript引擎的参数长度限制的风险。更糟糕的是其他引擎会直接限制传入到方法的参数个数，导致参数丢失。

所以，当数据量较大时

function minOfArray(arr) {
  var min = Infinity
  var QUANTUM = 32768 // JavaScript 核心中已经做了硬编码  参数个数限制在65536

  for (var i = 0, len = arr.length; i < len; i += QUANTUM) {
    var submin = Math.min.apply(null, arr.slice(i, Math.min(i + QUANTUM, len)))
    min = Math.min(submin, min)
  }
  return min
}
var min = minOfArray([5, 6, 2, 3, 7])

使用apply来链接构造器

Function.prototype.construct = function (aArgs) {
  var oNew = Object.create(this.prototype);
  this.apply(oNew, aArgs);
  return oNew;
};

Function.prototype.bind()

bind() 方法会创建一个新绑定函数，当这个新绑定函数被调用时，this键值为其提供的值，其参数列表前几项值为创建时指定的参数序列，绑定函数与被调函数具有相同的函数题（ES5中）。

var module = {
    x: 42,
    getX: function() {
        return this.x
    }
}
var unbindGetX = new module.getX
console.log(unbindGetX())// 在这种情况下，“this” 指向全局作用域
// output: undefined

var bindGetX = unbindGetX.bind(module)// 创建一个新函数，将“this”绑定到 module 对象
console.log(bindGetX())
// output: 42

注意：绑定函数也可以使用new运算符构造：这样做就好像已经构造了目标函数一样。提供的this值将被忽略，而前置参数将提供给模拟函数。

this.value = 11
var module = {
    value: 42
}
function ubx() {
    console.log("ubv-")
    console.log(this.value)
    console.log("-ubv")
}
var bindv = ubv.bind(module)
console.log(bindv()) 
// ubv-
// 42
// -ubv
console.log(new bindv()) 
// ubv-
// undefined
// -ubv

上面例子中，运行结果this.value 输出为 undefined，这不是全局value，也不是ubx对象中的value，这说明 bind 的 this 对象失效了，new 的实现中生成一个新的对象，这个时候的 this指向的是 obj。

用法：

创建绑定函数

bind() 最简单的用法是创建一个函数，使这个函数不论怎么调用都有同样的 this 值。JavaScript新手经常犯的一个错误是将一个方法从对象中拿出来，然后再调用，希望方法中的 this 是原来的对象（比如在回调中传入这个方法）。如果不做特殊处理的话，一般会丢失原来的对象。从原来的函数和原来的对象创建一个绑定函数，则能很漂亮地解决这个问题
```
this.x = 9; 
var module = {
  x: 81,
  getX: function() { return this.x; }
};

module.getX(); // 返回 81

var retrieveX = module.getX;
retrieveX(); // 返回 9, 在这种情况下，"this"指向全局作用域

// 创建一个新函数，将"this"绑定到module对象
var boundGetX = retrieveX.bind(module);
boundGetX(); // 返回 81
```

偏函数

function list() {
  return Array.prototype.slice.call(arguments);
}

var list1 = list(1, 2, 3); // [1, 2, 3]

// Create a function with a preset leading argument
var leadingThirtysevenList = list.bind(undefined, 37);

var list2 = leadingThirtysevenList(); // [37]
var list3 = leadingThirtysevenList(1, 2, 3); // [37, 1, 2, 3]

配合setTimeout

function LateBloomer() {
  this.petalCount = Math.ceil(Math.random() * 12) + 1;
}

// Declare bloom after a delay of 1 second
LateBloomer.prototype.bloom = function() {
  window.setTimeout(this.declare.bind(this), 1000);
};

LateBloomer.prototype.declare = function() {
  console.log('I am a beautiful flower with ' +
    this.petalCount + ' petals!');
};

var flower = new LateBloomer();
flower.bloom();  // 一秒钟后, 调用'declare'方法

作为构造函数使用的绑定函数

function Point(x, y) {
  this.x = x;
  this.y = y;
}

Point.prototype.toString = function() { 
  return this.x + ',' + this.y; 
};

var p = new Point(1, 2);
p.toString(); // '1,2'

var emptyObj = {};
var YAxisPoint = Point.bind(emptyObj, 0/*x*/);
// 以下这行代码在 polyfill 不支持,
// 在原生的bind方法运行没问题:
//(译注：polyfill的bind方法如果加上把bind的第一个参数，即新绑定的this执行Object()来包装为对象，Object(null)则是{}，那么也可以支持)
var YAxisPoint = Point.bind(null, 0/*x*/);

var axisPoint = new YAxisPoint(5);
axisPoint.toString(); // '0,5'

axisPoint instanceof Point; // true
axisPoint instanceof YAxisPoint; // true
new Point(17, 42) instanceof YAxisPoint; // true

Polyfill

bind() 最简单的用法是创建一个函数，使这个函数不论怎么调用都有同样的 this 值。JavaScript新手经常犯的一个错误是将一个方法从对象中拿出来，然后再调用，希望方法中的 this 是原来的对象（比如在回调中传入这个方法）。如果不做特殊处理的话，一般会丢失原来的对象。从原来的函数和原来的对象创建一个绑定函数，则能很漂亮地解决这个问题

if (!Function.prototype.bind) {
  Function.prototype.bind = function(oThis) {
    if (typeof this !== 'function') {
      // closest thing possible to the ECMAScript 5
      // internal IsCallable function
      throw new TypeError('Function.prototype.bind - what is trying to be bound is not callable');
    }

    var aArgs   = Array.prototype.slice.call(arguments, 1),
        fToBind = this,
        fNOP    = function() {},
        fBound  = function() {
          // this instanceof fNOP === true时,说明返回的fBound被当做new的构造函数调用
          return fToBind.apply(this instanceof fNOP
                 ? this
                 : oThis,
                 // 获取调用时(fBound)的传参.bind 返回的函数入参往往是这么传递的
                 aArgs.concat(Array.prototype.slice.call(arguments)));
        };

    // 维护原型关系
    if (this.prototype) {
      // Function.prototype doesn't have a prototype property
      fNOP.prototype = this.prototype; 
    }
    // 下行的代码使fBound.prototype是fNOP的实例,因此
    // 返回的fBound若作为new的构造函数,new生成的新对象作为this传入fBound,新对象的__proto__就是fNOP的实例
    fBound.prototype = new fNOP();

    return fBound;
  };
}

然而实际使用时会碰到这样的问题：

function Person(name) {
    this.name = name
    this.hello = function(){
        setTimeout(function(){
            console.log('Hello, ', this.name)
        }, 1000)
    }
}

var an = new Person('An')
an.hello() // 1s后output： Hello，

这个时候输出的this.name是null，原因是this指向是在运行函数时确定的，而不是定义函数时候确定的，再因为setTimeout在全局环境下执行，所以this指向setTimeout的上下文：window。

解决方法一：缓存this

function Person(name) {
    this.name = name
    this.hello = function(){
        var self = this // 缓存this
        setTimeout(function(){
            console.log('Hello, ', self.name)
        }, 1000)
    }
}

var an = new Person('An')
an.hello()// 1s后output： Hello，An

解决方法二： bind

function Person(name) {
    this.name = name
    this.hello = function(){
        setTimeout(function(){
            console.log('Hello, ', this.name)
        }.bind(this), 1000)
    }
}

var an = new Person('An')
an.hello()// 1s后output： Hello，An

call、apply、bind区别与实现

call、apply都是为了解决 this 的指向。作用是相同的，只是传参的方式不同。

除了第一个参数外，call 可以接收一个参数列表，apply 只能接收一个参数数组。

let a = {
    value: 1
}
function getValue(name, age) {
    console.log(name)
    console.log(age)
    console.log(this.value)
}
getValue.call(a, 'yck', '24')
getValue.apply(a, ['yck', '24'])

模拟实现call、apply

可以从一下几点考虑实现

不传入第一个参数，那么默认为 window

改变了 this 指向，让新的对象可以执行该函数，那么思路是否可以变成新的对象添加一个函数，然后再执行完成后删除

Function.prototype.myCall = function(context) {
    var context = context || windows
    // 给 context 添加一个属性
    // getValue.call(a, 'yck', '24') => a.fn = gatValue
    context.fn = this
    // 将 context 后面的参数取出来
    var args = [...arguments].slice(1)
    // getValue.call(a, 'yck', '24') => a.fn('yck', '24')
    var result = context.fn(...args)
    // 删除 fn
    delete context.fn
    return result
}

以上就是 call 的思路， apply的实现也类似

Function.prototype.myApply = function(context) {
    var context = context || window
    context.fn = this
    
    var result
    // 需要判断是否存储第二个参数
    // 如果存在，就将第二个参数展开
    if (arguments[1]) {
        result = context.fn(...arguments[1])
    } else {
        result = context.fn()
    }
    
    delete context.fn
    return result
}

bind 和其他两个方法作用是一致的，只是该方法会返回一个函数，并且我们可以通过bind来实现柯里化。

调用绑定函数通常会导致执行包装函数，绑定函数有以下内部属性：

[[BoundTargetFunction]]：包装的函数（function）
[[BoundThis]]：调用包装函数的this值
[[BoundArguments]]：值列表，其元素用于对包装函数调用的第一个参数
[[Call]]：执行与此对象关联的代码。通过函数调用表达式调用，内部方法的参数是this值和参数列表

当调用绑定函数时，它调用[[BoundTargetFunction]]上的内部方法[[Call]]，后跟参数Call(boundThis, args)。其中，boundThis是[[BoundThis]]，args是[[BoundArguments]]，后跟函数调用传递的参数。

Function.prototype.myBind = function(context) {
    if (typeof this !== 'function') {
        throw new TypeError('error')
    }
    var _this = this
    var args = [...arguments].slice(1)
    // 返回一个函数
    return function Fun() {
        // 因为返回一个函数， 我们可以 new Fun(), 所以需要判断
        if (this instanceof Fun) {
            return new _this(...args, ...arguments)
        }
        return _this.call(context, ...args, ...arguments)
    }
}

柯里化

在计算机科学中，柯里化（Currying）是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数，并且返回接受余下的参数且返回结果的新函数的技术。这个技术由 Christopher Strachey 以逻辑学家 Haskell Curry 命名的，尽管它是 Moses Schnfinkel 和 Gottlob Frege 发明的。

var add = function(x) {
  return function(y) {
    return x + y;
  };
};

var increment = add(1);
var addTen = add(10);

increment(2);
// 3

addTen(2);
// 12

add(1)(2);
// 3