JavaScript之this详解

分类:js

this 是什么

thisJavaScript 中的一个关键字。它用在对象的方法中。 this 总是指向调用该方法的对象。

this 的指向

1.在全局环境里

1
2
3
4
5
var test = function() {
this.message = 1;
};
test();
alert(window.message); //1

可以看出,在直接调用函数时,函数内部的 this 指向的是全局对象。在这个例子中,全局对象是 window ,也就是这个例子是在浏览器中的情况。将例子稍微变形一下,可以更直观地看出 this 是指向全局对象。

1
2
3
4
5
6
7
var message = "hi";

var test = function() {
alert(this.message);
};

test(); // hi

上面的例子展示了当直接调用函数时,函数内部 this 的指向总是指向全局对象。

2.在对象里

1
2
3
4
5
6
7
8
var obj = {
name: "object",
sayName: function() {
alert(this.name);
}
};

obj.sayName(); // object

可以看出,当对象 obj 调用 sayName 这个方法时,this 指向的是 obj 。故 alert(this.name)结果会是 object。即,当 this 出现在对象的方法中时,执行该方法时 this 指向的是这个对象本身。

3.在构造函数里

1
2
3
4
5
6
7
var name = "global";
function Person() {
this.name = "someone";
}

var sam = new Person();
alert(sam.name); // someone

以上代码很清楚的展示了构造函数中 this 的指向问题。当声明一个构造函数的实例时,构造函数内部的 this 都会指向新的实例。所以,在执行 var sam = new Person() 这条语句时, this 指向 sam,所以此时 sam.name = "someone"

4.在事件对象里

DOM 事件中使用 this`,this 指向了触发事件的DOM` 元素本身。

1
2
3
4
li.onclick = function() {
console.log(this);
};
// 输出li元素

如何改变 this 指向

在实际开发中,我们经常需要改变 this 的指向

1.使用局部变量

1
2
3
4
5
6
7
8
9
10
11
var name = "zhar";
var obj = {
name: "zhar",
say: function() {
var _this = this; //使用一个变量指向 this
setTimeout(function() {
console.log(_this.name);
}, 0);
}
};
obj.say();

2.使用 call 或 apply

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var name = "zhar";
function say() {
console.log(this.name);
}
say(); //zhar;
var obj = {
name: "tom",
say: function() {
console.log(this.name);
}
};
say.call(obj); //tom 将 say 函数中的 this 替换为传入的对象
obj.say(); //tom
obj.say.call(null); //zhar 将 obj.say 函数的 this 替换为了 null,也就意味着指向了全局环境

箭头函数中的 this

箭头函数是 ES6 中新增的语法,JS 每一个 function 有自己独立的运行上下文,而箭头函数不属于普通的 function,所以没有独立的上下文。所以在箭头函数里写的 this 其实是包含该箭头函数最近的一个 function 上下文中的 this(如果没有最近的 function,就是全局)。

简单的说就是:箭头函数没有自己的 this,他的 this 值继承自外部。