this
是javascript语言的一个关键字。它可以是全局对象、当前对象或者任意对象,这完全取决于函数的调用方式。下面我们将按照调用方式的不同,分别讨论 this 的含义。
function test() {
this.x = 1;
alert(this.x);
}
test(); // 1
对于这个函数, this关键字指向谁呢?我们知道定义在全局的函数, 函数的所有者就是当前页面, 也就是window对象.因此我们可用通过函数名直接调用, 也可用通过window.方法名来调用, 这个时候, 方法中的this关键字指向它的所有者:window对象.
查看window对象的test属性:
function test() {
this.x = 1;
alert(this.x);
}
console.log(window.test);
/*
结果:
function test() {
this.x = 1;
alert(this.x);
}
*/
在事件处理函数中this的指向,经常让我们疑惑,下面来看看
如下:点击输入框,显示输入框的内容
// html
<input id="name" type="text" value="test" />
//js
function test() {
alert(this.value);
}
document.getElementById('name').onclick = test;
以上代码可以正确获取到输入框的值,但有个问题,这里的test函数是定义在全局作用域下的,this应该是指向window才对,为什么可以成功获取dom的值呢?
问题出在onclick事件绑定的时候,在对onclick绑定处理器的时候, 其实是对id为name的输入框Dom对象的onclick属性赋值.
function test () {
alert(this.value);
}
document.getElementById('name').onclick = test ;
alert(document.getElementById('name').onclick);
/**
* 输出
* function test () {
* alert(this.value);
* }
*/
由以上可知,当事件触发的时候, 就会去调用Dom对象的onclick方法,此时this指向输入框。
如果事件写在html里呢?
function test() {
alert(this.value);
}
<input id="name" type="text" value="test" onclick="test()"/>
此时是获取不到输入框的值的,因为此时不是给onclick赋值,而是引用
// 输出dom的onclick
alert(document.getElementById('name').onclick);
所以这里的this指向全局对象window.
函数还可以作为某个对象的方法调用,这时this就指这个上级对象。
function test(){
alert(this.x);
}
var object = {};
object.x = 1;
object.m = test;
object.m(); // 1
通过构造函数可以生成一个新对象,this就指向这个新对象。
function test(){
this.x = 1;
}
var object = new test();
alert(object.x); // 1
apply()是函数对象的一个方法,它的作用是改变函数的调用对象,切换函数执行的上下文环境(context),即 this 绑定的对象
var object = {
name : 'hello world',
age : 26
};
function test() {
alert(this.name);
}
test.call(object);
// hello world