美文网首页
this指向

this指向

作者: 浪里白条小公子 | 来源:发表于2019-07-11 07:16 被阅读0次

    1、全局环境下

    在全局环境下,this 始终指向全局对象(window), 无论是否严格模式;

    console.log(this.document === document); // true // 在浏览器中,全局对象为 window 对象: console.log(this === window); // true this.a = 37; console.log(window.a); // 37

    2、函数上下文调用

    函数直接调用

    普通函数内部的this分两种情况,严格模式和非严格模式。

    非严格模式下,this 默认指向全局对象window

    functionf1(){

      return this;

    }

    f1() === window; // true

    而严格模式下, this为undefined

    functionf2(){ "use strict"; // 这里是严格模式 return this;

    }

    f2() === undefined; // true

    3、对象中的this

    对象内部方法的this指向调用这些方法的对象,

    ①、函数的定义位置不影响其this指向,this指向只和调用函数的对象有关。

    ②、多层嵌套的对象,内部方法的this指向离被调用函数最近的对象(window也是对象,其内部对象调用方法的this指向内部对象, 而非window)。

    //1var o = {

      prop: 37,

      f: function(){

        return this.prop;

      }

    };console.log(o.f());  //37var a = o.f;console.log(a()):  //undefinedvar o = {prop: 37};functionindependent(){

      return this.prop;

    }

    o.f = independent;console.log(o.f()); // logs 37//2o.b = {

      g: independent,

      prop: 42};console.log(o.b.g()); // logs 42

    4、原型链中this

    原型链中的方法的this仍然指向调用它的对象,与以上讨论一致;看个例子,

    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

    5、构造函数中this

    构造函数中的this与被创建的新对象绑定。

    注意:当构造器返回的默认值是一个this引用的对象时,可以手动设置返回其他的对象,如果返回值不是一个对象,返回this。

    functionC(){

      this.a = 37;

    }var o = new C();console.log(o.a); // logs 37functionC2(){

      this.a = 37;

      return {a:38};

    }var b = new C2();console.log(b.a); // logs 38

    以上两个例子内部的this都指向对象o, 看到这里的你不妨在控制台执行下以上代码,看看对象 o 和 b ,这些是属于构造函数的内容了,此处不多做介绍。(C2函数中的this.a = 37 对整个过程完全没有影响的, 可以被忽略的)。

    6、call & apply

    当函数通过Function对象的原型中继承的方法 call() 和 apply() 方法调用时, 其函数内部的this值可绑定到 call() & apply() 方法指定的第一个对象上, 如果第一个参数不是对象,JavaScript内部会尝试将其转换成对象然后指向它。

    7、bind 方法

    bind方法在ES5引入, 在Function的原型链上, Function.prototype.bind。通过bind方法绑定后, 函数将被永远绑定在其第一个参数对象上, 而无论其在什么情况下被调用。

    functionf(){

      return this.a;

    }var g = f.bind({a:"azerty"});console.log(g()); // azertyvar o = {a:37, f:f, g:g};console.log(o.f(), o.g()); // 37, azerty

    8、DOM 事件处理函数中的 this & 内联事件中的 this

    一、DOM事件处理函数

    当函数被当做监听事件处理函数时, 其 this 指向触发该事件的元素 (针对于addEventListener事件)

    二、内联事件

    内联事件中的this指向分两种情况:

    ①、当代码被内联处理函数调用时,它的this指向监听器所在的DOM元素

    ②、当代码被包括在函数内部执行时,其this指向等同于 ****函数直接调用****的情况,即在非严格模式指向全局对象window, 在严格模式指向undefined

    9、setTimeout & setInterval

    对于延时函数内部的回调函数的this指向全局对象window(当然我们可以通过bind方法改变其内部函数的this指向)

    10、箭头函数中的 this

    由于箭头函数不绑定this, 它会捕获其所在(即定义的位置)上下文的this值, 作为自己的this值,

    所以 call() / apply() / bind() 方法对于箭头函数来说只是传入参数,对它的 this 毫无影响。

    考虑到 this 是词法层面上的,严格模式中与 this 相关的规则都将被忽略。(可以忽略是否在严格模式下的影响)

    因为箭头函数可以捕获其所在上下文的this值 所以

    functionPerson(){

        this.age = 0; 

        setInterval(()=> {

            // 回调里面的 `this` 变量就指向了期望的那个对象了        this.age++;

        }, 3000);

    }var p = new Person();

    以上代码可以得到我们所以希望的值,下图可以看到,在setTimeout中的this指向了构造函数新生成的对象,而普通函数指向了全局window对象

    bind() & apply() 读者可以自行测试

    对于是否严格模式示例代码(可以复制进控制台进行验证)

    相关文章

      网友评论

          本文标题:this指向

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