js中的this到底是什么？

this
解析器在调用函数时每次都会向浏览器传递进一个隐含的参数，这个隐含参数，就是this
this指向的是一个对象，这个对象我们称为函数执行的上下文对象，
根据函数的调用方式不同，this会指向不同的对象！！！
函数被调用后调用，this指向调用方法的那个对象
this是 JavaScript 语言的一个关键字。
它是函数运行时，在函数体内部自动生成的一个对象，只能在函数体内部使用
上面代码中，函数test运行时，内部会自动有一个this对象可以使用。那么，this的值是什么呢？函数的不同使用场合，this有不同的值。总的来说，this就是函数运行时所在的环境对象。下面分四种情况，详细讨论this的用法。

[/code][code]```

复制代码

情况一：纯粹的函数调用

复制代码

[/code][code]这是函数的最通常用法，属于全局性调用，因此this就代表全局对象。请看下面这段代码，它的运行结果是1。

复制代码

var x = 1;

复制代码

function test() {

复制代码

console.log(this.x);

复制代码

}

复制代码

test(); // 1

复制代码

```

复制代码

[/code][code]```

复制代码

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

复制代码

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

复制代码

[/code][code]

复制代码

function test() {

复制代码

console.log(this.x);

复制代码

}

复制代码

[/code][code]var obj = {};

复制代码

obj.x = 1;

复制代码

obj.m = test;

复制代码

[/code][code]obj.m(); // 1

复制代码

```

复制代码

[/code][code]```

复制代码

情况三作为构造函数调用

复制代码

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

复制代码

[/code][code]

复制代码

function test() {

复制代码

　this.x = 1;

复制代码

}

复制代码

[/code][code]var obj = new test();

复制代码

obj.x // 1

复制代码

```

复制代码

[/code][code]```

复制代码

情况三作为构造函数调用

复制代码

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

复制代码

[/code][code]

复制代码

function test() {

复制代码

　this.x = 1;

复制代码

}

复制代码

[/code][code]var obj = new test();

复制代码

obj.x // 1

复制代码

[/code][code]运行结果为1。为了表明这时this不是全局对象，我们对代码做一些改变：

复制代码

[/code][code]

复制代码

var x = 2;

复制代码

function test() {

复制代码

this.x = 1;

复制代码

}

复制代码

[/code][code]var obj = new test();

复制代码

x // 2

复制代码

[/code][code]```

复制代码

[/code][code]## apply 调用

复制代码

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

复制代码

[/code][code]```

复制代码

var x = 0;

复制代码

function test() {

复制代码

　console.log(this.x);

复制代码

}

复制代码

[/code][code]var obj = {};

复制代码

obj.x = 1;

复制代码

obj.m = test;

复制代码

obj.m.apply() // 0

复制代码

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

复制代码

```

复制代码

[/code][code]

复制代码

更多精彩文章

js进阶之函数与对象

js中var let const 区别详解
js之获取鼠标在浏览器的位置及e.clientX,e.pageX,,e.offsetX,e.screenX区别
原生js实现打飞机和静态留言表

js+Canvas实现热力图

js+Canvas实现时钟图，简单易懂

js+vue实现轮播图，大致功能实现

Vue2.0搭建Vue脚手架及ECharts入门，VUE组件中传值实例

玩转github（一）

更多前端资料请关注公众号:前端从入门到SP

扫描二维码关注公众号