this关键字(指向)？

Posted 2021-07-29 水香木鱼

this是javascript语言的一个关键字，它是函数运行时，在函数体内部自动生成一个对象，只能在函数体内部使用。函数的不同使用场合，this有不同的值。总的来说this就是函数运行时所在的环境对象。

情况一：纯粹的函数调用

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

var x = 1;

function test(){

    console.log(this.x);

}

test();   

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

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

function test(){

    console.log(this.x);

}


var obj = {};

obj.x = 1;

obj.m = test;

obj.m();

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

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

function test(){

    this.x = 1;

}


var obj = new test();

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

情况四：apply的调用：

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

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

var x = 0;

function test(){

    console.log(this.x);

}


var obj = {};

obj.x = 1;

obj.m = test;

obj.m.apply();    // 0   this指的是全局对象

obj.m.apply(obj);   // 1    this指的是obj

情况五：隐式绑定

函数的调用是在某个对象上触发的，即调用位置上存在上下文对象，典型隐士

调用：xxx.fn()

function info(){

    console.log(this.age);

}

var person = {

    age: 20,

    info

}

var age = 28;

person.info(); //20;执行的是隐式绑定

情况六：箭头函数

箭头函数没有自己的this，继承外层上下文绑定的this；

let obj = {

    age: 20,

    info: function() {

        return () => {

            console.log(this.age); //this继承的是外层上下文绑定的this

        }

    }

}

let person = {age: 28};

let info = obj.info();

info(); //20

let info2 = obj.info.call(person);

info2(); //28