不得不学的js技巧之关键字this

作者: 工程师milter | 来源:发表于2016-09-22 18:19 被阅读553次

    JavaScript的初学者,很容易迷惑于函数中的this关键字,本文简明扼要地说明了this的含义,包你读后不再迷惑。

    一句话解决疑问:函数中的this代表一个对象,具体是哪个对象取决于函数的调用方式。

    好的,现在问题变成了这样:函数有几种调用方式?每种调用方式中this代表哪个对象?

    调用方式一:直接调用

    设有如下函数:

    function setName(name) {
      this.name = name;
      
    }
    

    我们现在直接调用它:

    setName('milter');
    

    这时,函数setName中的this代表的是一个全局对象,这个对象是代码的宿主环境提供的,比如在浏览器中是window对象,在node.js中是global对象,如果宿主环境中没有提供这个全局对象,那么直接调用函数setName将会报错!

    调用方式二:new 调用

    还以上面的setName函数为例,new 调用是指这样:
    new setName('milter');
    本人之前的文章讲过,对函数进行new 调用时,解释器会创建一个新的对象,this就指向这个新的对象,函数最后也会返回这个新的对象。

    调用方式三:引用调用

    假设有这样一个对象:
    var person = { }
    我们将函数setName赋值给person的一个属性,如下:
    person.setName = setName ;
    此时,通过person.setName调用函数就是引用调用,如下:

    person.setName('milter');
    

    引用调用函数时,this指向引用所属的对象,在上面的例子中,就是setName属性所属的对象person。

    调用方式四:call和apply调用

    先说call调用,接着上面的例子,如下:

    setName.call(person,'milter');
    

    call调用中,call的第一个参数就是this代表的对象,后面的参数代表传给函数的参数,上面的例子中,this指向person对象,setName函数的参数是字符串'milter'。
    apply调用与call调用类似,第一个参数代表this对象,不同的是它用数组包含传给函数的参数。

    调用方式五:bind调用

    所谓bind调用,请看示例:

     binded('milter');
    

    在上面的binded调用中,this指向绑定的person对象。

    好了,基本就这五种函数调用方式,如果有遗漏的,欢迎补充。

    推荐阅读:
    写给Android/Java开发者的JavaScript精解(1)
    写给Android/Java开发者的JavaScript精解(2)
    写给Android/Java开发者的JavaScript精解(3)
    教你步步为营掌握JavaScript闭包

    相关文章

      网友评论

      • T1ng4:this指该函数的运行环境
        工程师milter:@听安静的时光 你所指的运行环境是不是执行上下文(context)?如果是的 话,那么你的说法是错误的,this只是执行上下文中的一个属性,执行上下文还包括VariableObject和Scope,建议你读读我的《教你步步为营掌握JavaScript闭包》一文。我发现,很多自认为水平很高的人,都没有真正搞清楚,在程序语言层面上,JavaScript中的this到底是什么。
      • Lollo:总结一下,this一般都指向所在函数的最终调用者。
        工程师milter:@Lollo 精辟!
      • zhoujingheng:刚打开简书 :smile:

      本文标题:不得不学的js技巧之关键字this

      本文链接:https://www.haomeiwen.com/subject/thizettx.html