牛客JS25_二次封装函数

最新推荐文章于 2023-11-14 23:30:02 发布

ParadoxLin

最新推荐文章于 2023-11-14 23:30:02 发布

阅读量187

点赞数

分类专栏： JS习题集文章标签： javascript

本文链接：https://blog.csdn.net/linxwx/article/details/124468734

版权

JS习题集专栏收录该内容

10 篇文章 1 订阅

订阅专栏

本文详细解析call、apply和bind在JavaScript中的使用，比较它们如何改变方法的this指向，以及call和apply的立即执行特性，bind的返回新函数特性。通过实例演示了这些函数在实际编程中的应用场景。

摘要由CSDN通过智能技术生成

在这里插入图片描述

解题

call和apply必须显式地调用str3，立即执行
bind不是立即执行，未传入str3时，并未执行，只是返回一个函数，等待参数传入
this用于上下文不确定的情况

写法1. call() && apply()

// call
function partial(fn, str1, str2) {
    function result(str3) {
        return fn.call(this, str1, str2, str3);
    }
     return result;
}

// apply（这里只是为了对照）
function partial(fn, str1, str2) {
    function result(str3) {
        return fn.apply(this, [str1, str2, str3]);
    }

    return result;
}

写法2. bind()
bind会生成一个新函数（对象）, 它的str1, str2参数都定死了, str3未传入, 一旦传入就会执行

function partial(fn, str1, str2) {
    return function result(str3) {
        return fn.bind(this, str1, str2)(str3);
    }
}

写法3. 其他写法 - 匿名函数 && ES6箭头函数

// 匿名函数，默认this绑定global，与bind的第一个参数为this时效果一样。
function partial(fn, str1, str2) {
    return function(str3) {
        return fn(str1, str2, str3);
    }
}

// ES6 - this指向undefined.
const partial = (fn, str1, str2) => str3 => fn(str1, str2, str3);

一、知识点（bind和call、apply区别）

call、apply和bind都是用于改变方法中this指向的

  var a = "window_a";
  var obj = {
    a: "obj_a",
    fn(y){
      console.log(this.a + " ; " + y);
    }
  }
  obj.fn(1);  //obj_a ; 1
  var fn = obj.fn;
  fn(1);  //window_a ; 1

call和apply在改变方法的this指向时，会同时执行方法；

fn.call(obj, 1);  //obj_a ; 1
fn.apply(obj, [1]);  //obj_a ; 1

bind语法与call一模一样，但bind不会执行方法，而是返回改变this指向后的新方法。

  // var result = fn.bind(obj);
  // result(1); //obj_a ; 1
  
  fn.bind(obj, 1);  //返回fn方法：f (y){console.log(this.x + " ; " + y);}
  fn.bind(obj,1)() //obj_a ; 1