JS中call()、apply()、bind()改变this指向的原理

简介: JS中call()、apply()、bind()改变this指向的原理

大家如果想了解改变this指向的方法,大家可以阅读本人的这篇改变this指向的六种方法

大家有没有想过这三种方法是如何改变this指向的?我们可以自己写吗?

答案是:可以自己写的

让我为大家介绍一下吧!

1.call()方法的原理

Function.prototype.calls = function (context, ...a) {
    // 如果没有传或传的值为空对象 context指向window
    if (typeof context == null || context == undefined) {
      context = window;
    }
    // 创造唯一的key值  作为我们构造的context内部方法名
    let fn = Symbol();
    // this指向context[fn]方法
    context[fn] = this;
    return context[fn](...a);
  }
  let obj = {
    func(a,b){
      console.log(this);
      console.log(this.age);
      console.log(a);
      console.log(b);
    }
  }
  let obj1 = {
    age:"张三"
  }
  obj.func.calls(obj1,1,2);

打印结果:

2.apply()方法的原理

// apply与call原理一致  只是第二个参数是传入的数组
  Function.prototype.myApply = function (context, args) {
    if (!context || context === null) {
      context = window;
    }
    // 创造唯一的key值  作为我们构造的context内部方法名
    let fn = Symbol();
    context[fn] = this;
    // 执行函数并返回结果
    return context[fn](...args);
  };
  let obj = {
    func(a, b) {
      console.log(this);
      console.log(this.age);
      console.log(a);
      console.log(b);
    }
  }
  let obj1 = {
    age: "张三"
  }
  obj.func.myApply(obj1, [1,2]);

打印结果:

3.bind()方法的原理

Function.prototype.myBind = function (context) {
    // 如果没有传或传的值为空对象 context指向window
    if (typeof context === "undefined" || context === null) {
      context = window
    }
    let fn = Symbol(context)
    context[fn] = this //给context添加一个方法 指向this
    // 处理参数 去除第一个参数this 其它传入fn函数
    let arg = [...arguments].slice(1) //[...xxx]把类数组变成数组 slice返回一个新数组
    context[fn](arg) //执行fn
    delete context[fn] //删除方法
  }
  let obj = {
    func(a) {
      console.log(this);
      console.log(this.age);
    }
  }
  let obj1 = {
    age: "张三"
  }
  obj.func.myBind(obj1);

打印结果:

感谢大家的阅读,如有不对的地方,可以向我提出,感谢大家!

相关文章
|
2月前
|
自然语言处理 JavaScript 前端开发
深入理解JavaScript中的闭包:原理与实战
【10月更文挑战第12天】深入理解JavaScript中的闭包:原理与实战
|
25天前
|
缓存 前端开发 JavaScript
JavaScript前端路由的实现原理及其在单页应用中的重要性,涵盖前端路由概念、基本原理、常见实现方式
本文深入解析了JavaScript前端路由的实现原理及其在单页应用中的重要性,涵盖前端路由概念、基本原理、常见实现方式(Hash路由和History路由)、优点及挑战,并通过实际案例分析,帮助开发者更好地理解和应用这一关键技术,提升用户体验。
63 1
|
28天前
|
监控 JavaScript 算法
深度剖析 Vue.js 响应式原理:从数据劫持到视图更新的全流程详解
本文深入解析Vue.js的响应式机制,从数据劫持到视图更新的全过程,详细讲解了其实现原理和运作流程。
|
28天前
|
JavaScript 前端开发
js中的bind,call,apply方法的区别以及用法
JavaScript中,`bind`、`call`和`apply`均可改变函数的`this`指向并传递参数。其中,`bind`返回一个新函数,不立即执行;`call`和`apply`则立即执行,且`apply`的参数以数组形式传递。三者在改变`this`指向及传参上功能相似,但在执行时机和参数传递方式上有所区别。
26 1
|
25天前
|
JavaScript 前端开发 API
Vue.js响应式原理深度解析:从Vue 2到Vue 3的演进
Vue.js响应式原理深度解析:从Vue 2到Vue 3的演进
54 0
|
2月前
|
JavaScript 前端开发
JS高级—call(),apply(),bind()
【10月更文挑战第17天】call()`、`apply()`和`bind()`是 JavaScript 中非常重要的工具,它们为我们提供了灵活控制函数执行和`this`指向的能力。通过合理运用这些方法,可以实现更复杂的编程逻辑和功能,提升代码的质量和可维护性。你在实际开发中可以根据具体需求,选择合适的方法来满足业务需求,并不断探索它们的更多应用场景。
14 1
|
2月前
|
前端开发 JavaScript
深入理解JavaScript中的事件循环(Event Loop):从原理到实践
【10月更文挑战第12天】 深入理解JavaScript中的事件循环(Event Loop):从原理到实践
44 1
|
2月前
|
自然语言处理 JavaScript 前端开发
深入理解JavaScript中的闭包:原理、应用与代码演示
【10月更文挑战第12天】深入理解JavaScript中的闭包:原理、应用与代码演示
|
2月前
|
自然语言处理 JavaScript 前端开发
深入理解JavaScript闭包:原理与应用
【10月更文挑战第11天】深入理解JavaScript闭包:原理与应用
24 0
|
JavaScript 前端开发
JavaScript深入之bind的模拟实现
JavaScript深入系列第十一篇,通过bind函数的模拟实现,带大家真正了解bind的特性
133 0
JavaScript深入之bind的模拟实现