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);

打印结果:

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

相关文章
|
1天前
|
Web App开发 JavaScript 前端开发
浏览器与Node.js事件循环:异同点及工作原理
浏览器与Node.js事件循环:异同点及工作原理
|
1天前
|
JavaScript 前端开发
探索JavaScript中的New操作符:原理与使用
探索JavaScript中的New操作符:原理与使用
|
1天前
|
JavaScript 前端开发
JavaScript的`apply`方法:函数的“应用”与“调用”
JavaScript的`apply`方法:函数的“应用”与“调用”
|
1天前
|
JavaScript 前端开发
JavaScript的`bind`方法:函数的“复制”与“定制”
JavaScript的`bind`方法:函数的“复制”与“定制”
|
1天前
|
JavaScript 前端开发
JavaScript的`call`方法:实现函数间的调用!
JavaScript的`call`方法:实现函数间的调用!
|
2天前
|
JavaScript 前端开发
关于 Angular.js 应用里的 $scope.$apply()
关于 Angular.js 应用里的 $scope.$apply()
30 8
|
2天前
|
JavaScript 前端开发
深入了解前端框架Vue.js的响应式原理
本文将深入探讨Vue.js前端框架的核心特性之一——响应式原理。通过分析Vue.js中的数据绑定、依赖追踪和虚拟DOM等机制,读者将对Vue.js的响应式系统有更深入的理解,从而能够更好地利用Vue.js构建灵活、高效的前端应用。
|
2天前
|
自然语言处理 JavaScript 前端开发
在JavaScript中,this关键字的行为可能会因函数的调用方式而异
【5月更文挑战第9天】JavaScript中的`this`关键字行为取决于函数调用方式。在非严格模式下,直接调用函数时`this`指全局对象,严格模式下为`undefined`。作为对象方法调用时,`this`指向该对象。用`new`调用构造函数时,`this`指向新实例。通过`call`、`apply`、`bind`可手动设置`this`值。在回调和事件处理中,`this`可能不直观,箭头函数和绑定方法可帮助管理`this`的行为。
11 1
|
2天前
|
JavaScript 前端开发
深入探索JavaScript:如何改变this的指向
深入探索JavaScript:如何改变this的指向
|
2天前
|
前端开发 JavaScript
【Web 前端】 js中call、apply、bind有什么区别?
【4月更文挑战第22天】【Web 前端】 js中call、apply、bind有什么区别?
【Web 前端】 js中call、apply、bind有什么区别?