JS JavaScript中的this
this
是JavaScript
语言中的一个关键字
它是函数运行时,在函数体内部自动生成的一个对象,只能在函数体内部使用。
function test() {
this.x = 1;
}
那么,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()
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。