发表于: 2020-07-22 21:30:23

0 2296


今天完成的事:

this是 JavaScript 语言的一个关键字。

它是函数运行时,在函数体内部自动生成的一个对象,只能在函数体内部使用。

函数的不同使用场合,this有不同的值。总的来说,this就是函数运行时所在的环境对象。

比如这个例子,函数调用obj.a()和a(),得到的this就不同,对于obj.a()来说,a运行在obj环境,所以this指向obj;对于a()来说,a运行在全局环境,所以this指向全局环境。

var obj = {

  a: function () {

      console.log(this)

      console.log(this.bar)

  },

  bar: 1

};

var a = obj.a;

var bar = 2;

obj.a() // 1

a() // 2

this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上this的最终指向的是那个调用它的对象。

1.纯粹的函数调用的this

全局性调用函数,this指向window(严格模式指向undefined)。

function a() {

   console.log(this);

}

a();

全局函数调用时,this指向window(严格模式指向undefined)。

2.作为对象方法的调用的this

有被对象调用,this指向他上一级对象(即使被多个对象包裹)

var obj = {

   x: 1,

   b() {

      console.log(this);

      console.log(this.x);

   }

}

obj.b()

另一种写法

function b() {

   console.log(this);

   console.log(this.x);

}

var obj = {};

obj.x = 1;

obj.m = b;

obj.m();

这个时候,this指向的是上一级对象obj,this.x的值为1.

3.嵌套函数内的this

如对象内函数中的函数,它即使是被对象调用,它指向的还是window/undefined

(解决:把this赋给函数内变量,定义时就确定。

var x = 1;

var obj = {

    x: 2,

    f: function(){

        console.log(this.x);   // this 指向obj

                // 输出2

        var a = function(){ console.log(this.x); }

        a();     //a中this被指定为window,所以输出1

    }

};

obj.f();  // obj.f.call(obj)

// 输出2  1

嵌套函数不会从调用它的函数中继承this。如果嵌套函数作为方法调用,其this值指向调用它的对象。如果嵌套函数作为函数调用,其this值为全局对象(严格模式指向undefined)。

很多人误以为调用嵌套函数时,this会指向调用外层函数的上下文。如果想要访问这个外部函数的this值,需要将this的值保存在一个变量里,这个变量和内部函数都在同一个作用域内。如用self、that保存this。

4.构造函数内的this

所谓构造函数,就是通过这个函数,可以生成一个新对象。这时,this就指这个新对象。

var x = 2;

function c() {

   this.x = 1;

   console.log(this);

}

var obj = new c();

console.log(obj.x);  //1

console.log(x);    //2

这个时候this指向obj。主要是因为new关键字改变了this的指向。变量obj创建了一个c实例,但此时并未执行,调用函数的是对象obj,因此this指向对象obj。

   function d(number) {

      this.x = number;

      console.log(this);

   }

   var obj = new d(1);

   var obj2 = new d(2);

这个时候this指向obj和 obj2。

(3)常见问题:

       当函数被多个对象包裹时this的指向,如

var o = {

    a:10,

    b:{

        // a:12,

        fn:function(){

            console.log(this.a); //undefined

        }

    }

}

o.b.fn();




明天计划的事:

完成复盘评审ppt


遇到的问题:

收获:

区分不同情况下this指向


返回列表 返回列表
评论

    分享到