一、this

this的5种绑定规则

  • 1、默认绑定（严格/非严格模式）
  • 2、隐式绑定
  • 3、显式绑定
  • 4、new绑定
  • 5、箭头函数绑定 (根据外层作用域判断)

1.2 => 谁调用就绑定谁的this
3 => call apply bind
https://mp.weixin.qq.com/s/hYm0JgBI25grNG_2sCRlTA

this优先级：默认 < 隐式 < 显示 < new

二、apply call

https://github.com/mqyqingfeng/Blog/issues/11

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

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

  1. var func = function(arg1, arg2) {
  2.      ...
  3. };
  5. func.call(this, arg1, arg2); // 使用 call，参数列表
  6. func.apply(this, [arg1, arg2]) // 使用 apply，参数数组

call模拟实现
第一步: 基本框架

  1. /**
  2.  * 1.将函数设为对象的属性
  3.  * 2.执行该函数
  4.  * 3.删除该函数
  5.  */
  7. Function.prototype.call2 = function (context){
  8.     // 首先要获取调用call的函数，用this可以获取
  9.     context.fn = this
  10.     context.fn()
  11.     delete context.fn
  12. }
  14. // test
  15. var foo = {
  16.     name: 'june'
  17. }
  19. function bar() {
  20.     console.log(this)
  21.     console.log(this.name)
  22. }
  24. bar.call2(foo)

第二步：传递参数

  1. Function.prototype.call2 = function (context){
  2.     // 首先要获取调用call的函数，用this可以获取
  3.     context.fn = this
  4.     // 处理 arguments
  5.     var args = []
  6.     for (var i = 1; i < arguments.length; i++) {
  7.         args.push('arguments[' + i + ']');
  8.     }
  9.     console.log(args);
  10.     // 执行函数
  11.     eval('context.fn(' + args +')')
  12.     delete context.fn
  13. }
  15. var foo = {
  16.     value: 'june'
  17. }
  19. function bar(a1, a2) {
  20.     console.log(this)
  21.     console.log(a1)
  22.     console.log(a2)
  23.     console.log(this.value)
  24. }
  26. bar.call2(foo, 'a1', 'a2')

第三步：兼容null 和 函数 return

  2. Function.prototype.call2 = function (context) {
  3.     // 当为 null 的时候，视为指向 window
  4.     var context = context || window;
  5.     context.fn = this;
  7.     var args = [];
  8.     for(var i = 1, len = arguments.length; i < len; i++) {
  9.         args.push('arguments[' + i + ']');
  10.     }
  12.     var result = eval('context.fn(' + args +')');
  14.     delete context.fn
  15.     // 函数是可以有返回值的
  16.     return result;
  17. }

apply 的实现跟 call 类似，只是在处理参数的时候，针对数组做处理

  1. Function.prototype.apply = function (context, arr) {
  2.     var context = Object(context) || window;
  3.     context.fn = this;
  5.     var result;
  6.     if (!arr) {
  7.         result = context.fn();
  8.     }
  9.     else {
  10.         var args = [];
  11.         for (var i = 0, len = arr.length; i < len; i++) {
  12.             args.push('arr[' + i + ']');
  13.         }
  14.         result = eval('context.fn(' + args + ')')
  15.     }
  17.     delete context.fn
  18.     return result;
  19. }

三、bind
https://github.com/mqyqingfeng/Blog/issues/12

bind() 方法会创建一个新函数。当这个新函数被调用时，bind() 的第一个参数将作为它运行时的 this，之后的一序列参数将会在传递的实参前传入作为它的参数。(来自于 MDN )

由此我们可以首先得出 bind 函数的两个特点：

  1. 返回一个函数
  2. 可以传入参数

bind使用举例

  1. var foo = {
  2.     value: 1
  3. };
  4. function bar() {
  5.     console.log(this.value);
  6. }
  7. // 返回了一个函数
  8. var bindFoo = bar.bind(foo); 
  9. bindFoo(); // 1

第一步：返回绑定this的函数

  1. Function.prototype.bind2 = function (context) {
  2.     var _this = this
  3.     // 返回函数
  4.     return function () {
  5.         // 绑定this，并兼容可能有的返回值
  6.         return _this.apply(context)
  7.     }
  8. }

第二步：传递参数

  1. Function.prototype.bind2 = function (context) {
  2.     var self = this;
  3.     // 获取bind2函数从第二个参数到最后一个参数
  4.     var args = Array.prototype.slice.call(arguments, 1);
  5.     return function () {
  6.         // 这个时候的arguments是指bind返回的函数传入的参数
  7.         var bindArgs = Array.prototype.slice.call(arguments);
  8.         return self.apply(context, args.concat(bindArgs));
  9.     }
  10. }

第三步：构造函数实现

  1. Function.prototype.bind2 = function (context) {
  2.     var self = this;
  3.     var args = Array.prototype.slice.call(arguments, 1);
  5.     var fBound = function () {
  6.         var bindArgs = Array.prototype.slice.call(arguments);
  7.         // 当作为构造函数时，this 指向实例，此时结果为 true，将绑定函数的 this 指向该实例，可以让实例获得来自绑定函数的值
  8.         // 以上面的是 demo 为例，如果改成 `this instanceof fBound ? null : context`，实例只是一个空对象，将 null 改成 this ，实例会具有 habit 属性
  9.         // 当作为普通函数时，this 指向 window，此时结果为 false，将绑定函数的 this 指向 context
  10.         return self.apply(this instanceof fBound ? this : context, args.concat(bindArgs));
  11.     }
  12.     // 修改返回函数的 prototype 为绑定函数的 prototype，实例就可以继承绑定函数的原型中的值
  13.     fBound.prototype = this.prototype;
  14.     return fBound;
  15. }

但是在这个写法中，我们直接将 fBound.prototype = this.prototype，我们直接修改 fBound.prototype 的时候，也会直接修改绑定函数的 prototype。

  1. Function.prototype.bind2 = function (context) {
  2.     var self = this;
  3.     var args = Array.prototype.slice.call(arguments, 1);
  4.     var fNOP = function () {};
  5.     var fBound = function () {
  6.         var bindArgs = Array.prototype.slice.call(arguments);
  7.         return self.apply(this instanceof fNOP ? this : context, args.concat(bindArgs));
  8.     }
  9.     fNOP.prototype = this.prototype;
  10.     fBound.prototype = new fNOP();
  11.     return fBound;
  12. }