JS JavaScript中的this

Posted 2021-02-02 小李HH

this是javascript语言中的一个关键字

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

function test() {
　this.x = 1;
}

上面代码中，函数test运行时，内部会自动有一个this对象可以使用。

那么，this的值是什么呢？

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

 

情况一：纯粹的函数调用

这是函数的最常通用法，属于全局性调用，因此this就代表全局对象。

var x = 1;
function test() {
   console.log(this.x);
}
test();  // 1

 

情况二：作为对象的方法调用

函数还可以作为某个对象的方法调用，这时this就指这个上级对象

function test() {
  console.log(this.x);
}

var obj = {};
obj.x = 1;
obj.m = test;

obj.m(); // 1

 

情况三：作为构造函数调用

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

function test() {
　this.x = 1;
}

var obj = new test();
obj.x // 1

为了表明这时this不是全局对象，下面代码：

var x = 2;
function test() {
  this.x = 1;
}

var obj = new test();
x  // 2

运行结果为2，表明全局变量x的值没有变化

 

情况四：apply调用

apply()是函数的一个方法，作用是改变函数的调用对象。它的第一个参数就表示改变后的调用这个函数的对象。因此，这时this指的就是这个参数。

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

var obj = {};
obj.x = 1;
obj.m = test;
obj.m.apply() // 0

apply()的参数为空时，默认调用全局变量。因此，这时运行结果为0，证明this指的是全局对象。

如果把最后一行代码修改成

obj.m.apply(obj); //1

运行结果就变成1，证明这时this代表的对象是obj

 

改变this的指向有以下几种方法

使用ES6的箭头函数

在函数内部_this=this

使用apply、call、bind

new实例化一个对象

 

其实this的指向，始终坚持一个原理：this永远指向最后调用它的那个对象。

几个例子：

例1：

    var name = "windowsName";
    function a() {
        var name = "Cherry";

        console.log(this.name);          // windowsName

        console.log("inner:" + this);    // inner: Window
    }
    a();
    console.log("outer:" + this)         // outer: Window

这里我们没有使用严格模式，如果使用严格模式的话，全局对象就是 undefined，那么就会报错 Uncaught TypeError: Cannot read property ‘name‘ of undefined。

 

例2：

    var name = "windowsName";
    var a = {
        name: "Cherry",
        fn : function () {
            console.log(this.name);      // Cherry
        }
    }
    a.fn();

 

例3：

var name = "windowsName";
var a = {
    name: "Cherry",
    fn : function () {
        console.log(this.name);      // Cherry
     }
  }
window.a.fn();

 

例4:

    var name = "windowsName";
    var a = {
        // name: "Cherry",
        fn : function () {
            console.log(this.name);      // undefined
        }
    }
    window.a.fn();

 

例5：

    var name = "windowsName";
    var a = {
        name : null,
        // name: "Cherry",
        fn : function () {
            console.log(this.name);      // windowsName
        }
    }

    var f = a.fn;
    f();

为什么不是 Cherry，这是因为虽然将 a 对象的 fn 方法赋值给变量 f 了，“this 永远指向最后调用它的那个对象”，由于刚刚的 f 并没有调用，所以 fn() 最后仍然是被 window 调用的。所以 this 指向的也就是 window。

 

例6：

    var name = "windowsName";

    function fn() {
        var name = ‘Cherry‘;
        innerFunction();
        function innerFunction() {
            console.log(this.name);      // windowsName
        }
    }

    fn()