call实现原理

  1. 让函数的this指向obj
  2. 可以在obj内创建一个函数，func赋值给它, obj.func = func;
  3. 用obj调用该函数 obj.func(…);
  4. 删除obj.func ```javascript let obj = { name: ‘Alibaba’ };

function func(x, y) { this.total = x + y; return this; }

// func的this指向obj obj.func = func; console.log(obj.func(100, 200)); delete obj.func;

  1. <a name="Moq5s"></a>
  2. ### call / bind具体实现
  3. <a name="oDF17"></a>
  4. #### bind & call/apply
  6. 1.  都是为了改变函数中的**this指向**
  7.    1. call/apply:**立即**把函数执行
  8.    1. bind: **不是立即**把函数执行
  9.       1. 只是预先把**this**和后期需要传递的**参数  存储起来**
  10.       1. 「**预处理思想** -> 柯理化函数」
  12. ```javascript
  13. // 相当于立即执行函数
  14. ~ function () {
  15.   // 非常随机了
  16.   const createRandom = () => {
  17.     let ran = Math.random() * new Date();
  18.     // 随机名字
  19.     return ran.toString(16).replace('.', '');
  20.   };
  22.   /* 内置CALL实现原理 */
  23.   function change(context, ...params) {
  24.     // this->要执行的函数func   context->要改变的函数中的this指向obj  
  25.     // params->未来要传递给函数func的实参信息{数组} [100,200]
  27.     // 校验context类型
  28.     // undefined == null     undefined !== null
  29.     // 这里同时校验 undefined 和 null
  30.     context == null ? context = window : null;    // context 为null / undefined this就指向window
  31.     if (!/^(object|function)$/.test(typeof context)) {
  32.       context = Object(context);    // 所有类型，转Object类型
  33.     }
  35.     // 临时设置的属性，不能和原始对象冲突，所以我们属性采用唯一值处理
  36.     let self = this,
  37.       key = Symbol('KEY'),
  38.       result;
  39.     context[key] = self;                            // 添加方法，this指向context
  40.     result = context[key](...params);    // 执行方法
  41.     delete context[key];                            // 删除方法
  42.     return result;
  43.   };
  45.     /* 内置BIND的实现原理 */
  46.     function bind(context, ...params) {
  47.     // this->func  context->obj  params->[100,200]
  48.     let self = this;
  49.     // 柯里化
  50.     return function proxy(...args) {
  51.       // args->事件触发传递的信息，例如：[ev]
  52.       params = params.concat(args);
  53.       return self.call(context, ...params);
  54.     };
  55.   };
  57.   Function.prototype.bind = bind;
  58.   Function.prototype.change = change;
  59. }();
  62. // bind & call/apply
  63. //   都是为了改变函数中的this指向
  64. //   + call/apply:立即把函数执行
  65. //   + bind:不是立即把函数执行，
  66. //          只是预先把THIS和后期需要传递的参数存储起来「预处理思想 -> 柯理化函数」
  67. function func() {
  68.   console.log(this, arguments);
  69. }
  70. var obj = {
  71.   name: 'Alibaba'
  72. };
  73. document.body.onclick = func.bind(obj, 100, 200);
  76. // bind的原理，其实就是利用闭包的机制，把要执行的函数外面包裹一层函数
  77. document.body.onclick = function proxy(ev) {
  78.   // 最后的目的：把func执行，this改为obj，参数100/200/ev传递给他即可
  79.   func.call(obj, 100, 200, ev);    //曲线救国
  80. }; 
  84. let obj = {name:'zhufeng'};
  85. function func(x,y){
  86.     this.total=x+y;
  87.     return this;
  88. }
  89. let res = func.change(obj,100,200);
  90. //res => {name:'Alibaba',total:300}