函数中的 this 不止有 72 变

2023-02-27

name this bind

在课程连接你、我、他——this中我们学习了this，最后留了一个问题，如何修改this的指向，今天一起学习。修改this的指向可通过apply、call、bind这三个函数中的任意一个实现。那这三个函数是谁的方法呢?在MDN中我查到了：这张图说明了这3个函数是Functionprototype的方

在课程连接你、我、他 —— this 中我们学习了 this，最后留了一个问题，如何修改 this 的指向，今天一起学习。

修改 this 的指向可通过 apply、call、bind 这三个函数中的任意一个实现。那这三个函数是谁的方法呢?

在 MDN 中我查到了：

这张图说明了这 3 个函数是 Function prototype 的方法，也就是说「每个函数都有着三个方法」。当定义一个函数，这个函数默认包含这三个方法。

我们感受一下 Vue.js 中关于 apply、call 和 bind 的使用：

apply 的应用：

function once (fn) { 
  var called = false; 
  return function () { 
    if (!called) { 
      called = true; 
      fn.apply(this, arguments); 
    } 
  } 
} 
1.
2.
3.
4.
5.
6.
7.
8.
9.

call 的应用：

var hasOwnProperty = Object.prototype.hasOwnProperty; 
function hasOwn (obj, key) { 
  return hasOwnProperty.call(obj, key) 
} 
1.
2.
3.
4.

bind的应用：

function polyfillBind (fn, ctx) { 
  function boundFn (a) { 
    var l = arguments.length; 
    return l 
      ? l > 1 
        ? fn.apply(ctx, arguments) 
        : fn.call(ctx, a) 
      : fn.call(ctx) 
  } 
 
  boundFn._length = fn.length; 
  return boundFn 
} 
 
function nativeBind (fn, ctx) { 
  return fn.bind(ctx) 
} 
 
var bind = Function.prototype.bind 
  ? nativeBind 
  : polyfillBind; 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.

你可能看不懂上面的用法，下面我们一一抛开谜底。

当一个新事物的出现，总是有目的的，那么 apply、call 和 bind 的出现是为了解决什么问题呢?它们为什么是函数的方法呢?为什么不是其它对象的方法。

通过 apply、call 可以自定义 this 调用某个函数，比如定义一个全局函数(严格模式)：

'use strict'; 
function gFun(name, age) { 
    console.log(this); 
} 
1.
2.
3.
4.

这个函数可以通过下面 5 种方式调用，也就是说通过 apply、call、bind 可以调用一个函数 F，其中「函数 F 执行上下文中的 this 可以在调用时指定」：

1.直接调用：

gFun('suyan', 20); // this 为 undefined 
1.

2.通过 this 调用：

this.gFun('suyan', 20); // this 为 window 
1.

3.通过 apply 调用，把所有的参数组合成一个数组作为 apply 的参数：

gFun.apply(this, ['suyan', 20]); // this 为 window 
1.

4.通过 call 调用，参数通过逗号分割，这是与 apply 调用的区别：

gFun.call(this, 'suyan', 20);  // this 为 window 
1.

5.通过 bind 调用，会返回一个原函数的拷贝，并拥有指定的 this和参数：

let bGFun = gFun.bind(this, 'suyan', 20); 
bGFun();  // this 为 window 
1.
2.

我们一起看一些例子：

例1、setTimeOut 的使用：

const time = { 
    second: 1, 
    afterOneSecond() { 
        setTimeout(function () { 
            this.second += 1; 
            console.log(this.second); 
        }, 1000); 
    } 
}; 
time.afterOneSecond(); 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.

上面这段代码执行后，第 6 行代码的打印结果是 NaN，在连接你、我、他 —— this 这节课程中我们有提到过 this 设计的一个弊端是不能继承。其实可以通过 bind 改造一下这个函数：

const time = { 
    second: 1, 
    afterOneSecond() { 
        setTimeout(this.timeInvoke.bind(this), 1000); 
    }, 
    timeInvoke() { 
        this.second += 1; 
        console.log(this.second); 
    } 
}; 
time.afterOneSecond(); 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.

函数 timeInvoke 通过 bind 绑定 this，并返回一个新的函数，执行结果为 2。bind 好像具有「暂存」的功能，把当前的 this 暂存起来。

例 2、函数调用

const person = { 
    name: 'suyan', 
    age: 20, 
    showName(pre) { 
        return pre + '-' + this.name; 
    }, 
    update(name, age) { 
        this.name = name; 
        this.age = age; 
    } 
}; 
 
function generateName(fun) { 
    let name = fun(); 
    console.log('showName = ', name); 
} 
 
generateName(person.showName); 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.

执行上面代码会报错，因为 showName 中的 this 为 undefined：

可以通过 bind 「暂存 this」：

const person = { 
    name: 'suyan', 
    age: 20, 
    showName(pre) { 
        return pre + '-' + this.name; 
    }, 
    update(name, age) { 
        this.name = name; 
        this.age = age; 
    } 
}; 
 
function generateName(fun) { 
    let name = fun(); 
    console.log('showName = ', name); 
} 
// 指定 this 为 person 对象 
let bindShowName = person.showName.bind(person, '前端小课'); 
generateName(bindShowName); 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.

例 3、构造函数，通过 call 来调用某个函数，替换 this。

function Product(name, price) { 
    this.name = name; 
    this.price = price; 
} 
 
function Food(name, price) { 
    // 调用 Product 函数 
    Product.call(this, name, price); 
    this.catagory = 'food'; 
} 
let food = new Food('包子', 1); 
console.log(food.name); // 包子  
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.

例 4、调用匿名函数

const animals = [ 
    { 
        name: 'King' 
    }, 
    { 
        name: 'Fail' 
    } 
]; 
 
for (let i = 0; i < animals.length; i++) { 
    (function (i) { 
        // 可以直接使用 this 
        this.print = function () { 
            console.log('#' + i + ' ' + this.name); 
        }; 
        this.print(); 
    }).call(animals[i], i); 
} 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.