欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

详解改变this指向的三种方法call apply bind及重写(模拟)

程序员文章站 2022-05-07 21:47:21
...

call方法

  • 语法:函数.call([context],[params1],…)
  • 函数基于原型链找到Function.prototype.call这个方法,并且把它执行,在call方法执行的时候完成了一些功能
  • 首先让当前函数执行
  • 把函数中的THIS指向改为第一个传递给CALL的实参
  • 把传递给CALL其余的实参,当做参数信息传递给当前函数
  • 如果执行CALL一个实参都没有传递,非严格模式下是让函数中的THIS指向WINDOW,严格模式下指向的是UNDEFINED
window.name = 'WINDOW';

let obj = {name: 'OBJ'};

function fn(n,m) {
	console.log(this.name);
}
fn(10,20); //=>this:window  严格下是undefined
fn.call(obj); //=>this:obj  n/m=undefined
fn.call(obj,10,20); //=>this:obj  n=10 m=20
fn.call(10,20); //=>this:10  n=20  m=undefined

fn.call(); //=>this:window  严格下是undefined
fn.call(null); //=>this:window  严格下是null(第一个参数传递的是null/undefined/不传,非严格模式下this指向window,严格模式下传递的是谁this就是谁,不传this是undefined)

还可以基于call让类数组使用数组方法
function sum(){
   //=>把ARGUMENTS转换为数组:借用数组原型上的SLICE方法,只要让SLICE中的THIS指向ARGUMENTS,就相当于把ARGUMENTS转换为新数组
   //let arg=Array.prototype.slice.call(arguments,0);
   let arg=[].slice.call(arguments,0);
   //=>数组求和
   return eval(arg.join('+'));
}
let total=sum(10,20,30,40); //100
或这样循环元素类数组
[].forEach.call(listArr,(item,index)+>{
    console.log(item,index);
})

apply

  • apply方法和call方法作用一样,修改函数中的this,并且让这个修改this之后的函数执行;
  • 但是传参方式不同;call方法是一个一个的传递实参给sum的,apply是把实参都放到一个数组中,数组项是传递给sum的实参
骚操作 求数组最大值 Math.max 只能传一组数但不能传递数组
let ary = [12,23,13,24,10,25],
   n = Math.max.apply(null,ary);
   n //25
   其中apply第一个参数是谁并不重要,只是想基于它传值的方式传给Math.max

bind

  • 作用:预先改变函数中的this,不让函数执行,返回一个修改this后的新函数。
   window.name='WIN';
   function fn() {
       console.log(this.name);
    }
    var obj = {
        name: "OBJ",
        fn: () => {
            console.log(this.name);
        }
    };
    fn.bind(obj); //不会执行
    fn.bind(obj)(); //=>会执行bind OBJ
    let shark = fn.bind(obj);
    shark(); //=>也会执行 OBJ
    obj.fn.bind(obj)(); // 这个结果是WIN
    //  因为箭头函数没有this!!!不懂请看前一篇文章

重写(模拟)这些方法

·模拟一个call方法·
~function () {
    /*生成随机函数名:时间戳的方式*/
    function queryRandomName () {
        let time = new Date().getTime();
        return '$zhufeng' + time;
    }
    // 模拟CALL方法改变函数中的THIS
    function changeThis(context = window,...arg){
        let _this = this,
            result = null,
            ran = queryRandomName();
        context[ran] = _this;
        result = context[ran](...arg);
        delete context[ran];
        return result;
  };
    Function.prototype.changeThis = changeThis;
}();



·模拟一个apply方法·
~function(){
    /*生成随机函数名:时间戳的方式*/
    function queryRandomName () {
        let time = new Date().getTime();
        return '$zhufeng' + time;
    }
    function changeThis (context = window, arg = []) {
        let _this = this,
            result = null,
            ran = queryRandomName();
        context[ran] = _this;
        result = context[ran](...arg);
        delete context[ran];
        return result;
  };
    Function.prototype.changeThis = changeThis;
}();

·模拟一个bind方法·
~function(){
   function changeThis(fn,...ary) {
      var that = this;
      return function (...arr) {
       that.apply(fn,ary.concat(arr));
       }
    }
    Function.prototype.changeThis = changeThis;
}();

最后来道题吧
// 阿里的面试题
function fn1(){console.log(1);}
function fn2(){console.log(2);}
fn1.call(fn2);
fn1.call.call(fn2);
Function.prototype.call(fn1);
Function.prototype.call.call(fn1);

call图解
详解改变this指向的三种方法call apply bind及重写(模拟)

  • 小白扫盲自我修炼,新人定有不足的还请大佬不吝赐教。
  • 觉得文章还不错的话就点个赞吧~~
  • 友善发言的人运气不会太差哦
  • 师承周啸天是也