美文网首页
javascript的this

javascript的this

作者: 进击的前端 | 来源:发表于2016-08-17 00:15 被阅读20次

    关于this

    其实this就是当前绑定的方法的对象,如果没有定义,那么就是global,如果是严格模式下,那么就是undefined

    面试官问到一道this的题目没有做出来,想必也是半懂不懂吧

    var a = {
        "course":"English",
        "teach":function () {
            function print() {
                return "teach " + this.course;
            }
            return print();
        }
    }
    console.log(a.teach())
    

    如果是a.teach里面有this的话,那么就是指代a这个对象,如果是print的话,print本身并没有绑定对象,那么在要么global,要么undefined,取决于是否为严格模式。
    这道题的答案其实很简单,不过当时对this的这个坑,跳得还是太多了,简单地总结一下,this指代的是对象(好吧当年这么简单的坑竟然也没挖好)

    简单调用

    非严格模式下,简单调用是global对象

    function f1(){
      return this;
    }
    f1() === window; // global object
    

    严格模式下,是undefined

    function f2(){
      "use strict"; // see strict mode
      return this;
    }
    f2() === undefined;
    

    也就是说,函数如果不作为方法或者对象的属性来调用的话,那么就是undefined

    Arrow functions[ES6]

    ...

    作为对象的方法

    var o = {
      prop: 37,
      f: function() {
        return this.prop;
      }
    };
    console.log(o.f()); // logs 37
    

    当然作为动态绑定也是可以的

    var o = {prop: 37};
    function independent() {
      return this.prop;
    }
    o.f = independent;
    console.log(o.f()); // logs 37
    

    原型链中的作用

    var o = {f:function(){ return this.a + this.b; }};
    var p = Object.create(o);
    p.a = 1;
    p.b = 4;
    
    console.log(p.f()); // 5
    

    this指代调用的object

    getter和setter

    function sum(){
      return this.a + this.b + this.c;
    }
    
    var o = {
      a: 1,
      b: 2,
      c: 3,
      get average(){
        return (this.a + this.b + this.c) / 3;
      }
    };
    
    Object.defineProperty(o, 'sum', {
        get: sum, enumerable:true, configurable:true});
    
    console.log(o.average, o.sum); // logs 2, 6
    

    其实这几条,都可以理解为函数执行的时候绑定的对象

    作为构造器

    function C(){
      this.a = 37;
    }
    
    var o = new C();
    console.log(o.a); // logs 37
    
    
    function C2(){
      this.a = 37;
      return {a:38};
    }
    
    o = new C2();
    console.log(o.a); // logs 38
    

    其实也是可以理解为new的过程,就是以返回原型构造的一个方法。

    相关文章

      网友评论

          本文标题:javascript的this

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