前端中的this,指的是什么?

发表于:2021-9-03 09:49

字体: | 上一篇 | 下一篇 | 我要投稿

 作者:张欢    来源:51Testing软件测试网原创

#
前端
  1.this是什么
  this 是 JavaScript 中的一个关键字。依赖于函数调用的上下文条件,与函数被调用的方式有关。它指向谁,完全是由函数被调用的调用点来决定的。
  所以,this,是在运行时绑定的,与编写时的绑定无关。随着函数使用场合的不同,this 的值也会发生变化。但是有一个总的原则:那就是this 总会指向调用函数的那个对象。
  ES6中箭头函数的不绑定this。在判断this的指向时,将其看作普通的方法即可。普通的方法中的this指的是包含它的函数的this。这样一来this的指向就清楚了。

  2.call/apply
  this的指向可以通过调用对象的改变而改变,也可以通过call/apply来改变。
  调用方法为Function.call(obj,...args)/Function.apply(obj,args)。它是说用obj这个上下文去调用Function。他们的区别在于args的类型。

  3.原生实现call和apply
  最简单的call是如何调用的 func.call(obj)(obj可能为null)。
  分析该代码:某个函数要调用这个方法call,证明原生实现的方法mycall应该是函数原型上的一个方法。
  因此原生call的实现方法如下:
Function.prototype.myCall = function(context){
    if(typeof context === 'object'){
        context = context?context:window ;//在没有传入context的情况下,默认为window
    }else{
        context = Object.create(null);//传入的context类型不对,应该创建对象
    }
    let func = this;//谁调用mycall这个函数,谁就是this
               //就是执行func这个函数,用context这个对象去调用
    let fn = Symbol();//防止context对象以前有过fn这个属性
    context[fn] = func;//将func作为context这个对象的属性存储起来,去调用的时候this也就会指向context
    let args = [];
    for(let i=1;i<arguments.length;i++){   
        args.push(arguments[i]);
    }//如何接受调用时候的传参,还没有实现call,不能使用slice函数
    let result = context[fn](...args);//用context对象调用这个函数
    delete context[fn];//删除绑定在context上的属性
    return result;
}

  myApply的实现和myCall的实现类似,只是传输参数的方式不同而已。
Function.prototype.myApply = function(context){
    if(typeof context === 'object'){
        context = context?context:window ;//在没有传入context的情况下,默认应该是window
    }else{
        context = Object.create(null);//传入context类型不对时,创建对象
    }
    let func = this;//谁调用mycall这个函数,谁就是this
                   //执行func这个函数,只不过是用context这个对象去调用
    let fn = Symbol();//防止context对象以前有过fn这个属性
    context[fn] = func;//将func作为context这个对象的属性存储起来,去调用的时候this也就会指向context
    let args = arguments[1];//函数的输入参数是一个数组,包含了应该输入的参数
    let result = context[fn](...args);//用context对象调用这个函数
    delete context[fn];//删除绑定在context上的属性
    return result;
}

  4.bind是什么
  调用方法为func.bind(obj,[...args]),它会返回一个函数,这个函数是将obj绑定到func的this上之后返回的函数。
  bind的调用方式为: func.bind(obj),因此同样还是要在函数的原型上面写。
  原生实现bind的方法为:
Function.prototype.myBind = function(context){
    let outArgs = Array.prototype.slice.mycall(arguments,1);//获取绑定时传入的参数
    let func = this;//记录应该执行的函数
    return function(){//bind函数返回一个参数
        let inArgs = Array.prototype.slice.mycall(arguments);
        let args = outArgs.concat(inArgs);//为了支持函数柯里化
        return func.myApply(context,args)
    }
}

  5.结束语
  this 总是指代了函数当前的运行环境,依赖于函数在调用时的上下文,只有在函数运行时才会进行绑定。想要判断this的指向,只需要记住:this 总会指向,调用函数的那个对象。

      版权声明:本文出自51Testing会员投稿,51Testing软件测试网及相关内容提供者拥有内容的全部版权,未经明确的书面许可,任何人或单位不得对本网站内容复制、转载或进行镜像,否则将追究法律责任。
《2023软件测试行业现状调查报告》独家发布~

关注51Testing

联系我们

快捷面板 站点地图 联系我们 广告服务 关于我们 站长统计 发展历程

法律顾问:上海兰迪律师事务所 项棋律师
版权所有 上海博为峰软件技术股份有限公司 Copyright©51testing.com 2003-2024
投诉及意见反馈:webmaster@51testing.com; 业务联系:service@51testing.com 021-64471599-8017

沪ICP备05003035号

沪公网安备 31010102002173号