this是Javascript语言的一个关键字。它代表函数运行时,自动生成的一个内部对象,只能在函数内部使用,随着函数使用场合的不同,this的值会发生变化,但是总有一个原则,那就是**this指的是,调用函数的那个对象
Javascript中的this总结
目录
1. this是啥?
this是啥?这里直接引用阮一峰老师的概括:
this是Javascript语言的一个关键字。它代表函数运行时,自动生成的一个内部对象,只能在函数内部使用,随着函数使用场合的不同,this的值会发生变化,但是总有一个原则,那就是this指的是,调用函数的那个对象。
2. this的常见情况总结
1)在全局环境中(不在函数体里面)的this指向全局对象(window)
var a = "我是全局环境中"; function foo() { return this.a; } console.log(foo()); // "我是全局环境中"
2)在有名字的函数中,当函数被普通调用时:若在非严格模式,this指向全局对象(window);在严格模式下,this等于它进入执行上下文时的值,如果this没有被执行上下文定义,则为undefined
// 非严格模式 function foo() { return this; // this => window对象 } console.log(foo()); // 返回window对象 // 严格模式 function foo1() { "use strict"; return this; // this => undefined } console.log(foo1()); // undefined
3)在一般的匿名函数中的this也指向全局对象(window),因为匿名函数的执行环境具有全局性(当这个匿名函数被作为对象的方法调用时,看到第4点)
var a = "我是全局环境中"; function foo() { return function() { return this.a; // this => window } } console.log(foo()()); // "我是全局环境中"
4)(无论这个函数是匿名函数还是已经定义了的非匿名函数,)当函数被作为某个对象的方法调用时,这个函数里面的this指向这个对象。(还有一种特殊情况!请看第5点)
// 例子1(对象的方法是一个匿名函数) var a = "我是全局环境中"; var obj = { a: "我是obj对象中的属性", getA: function() { return this.a; // this => obj } } console.log(obj.getA()); // "我是obj对象中的属性" // 例子2(对象的方法是一个已经定义了的函数) var a = "我是全局环境中"; function foo1() { return this.a; // this => obj } var obj = { a: "我是obj对象中的属性", getA: foo1 } console.log(obj.getA()); // "我是obj对象中的属性"
5)(无论这个函数是匿名函数还是已经定义了的非匿名函数,)当函数被作为某个对象的方法调用,与此同时,若这个对象把这个方法的引用赋给了一个变量,再通过这个变量来调用那个函数的话,那么函数里的this不再指向那个对象,而是指向了全局对象(window)
var str = 'AllenMind'; function foo() { return this.str; } var obj = { str: 'Jolin', prop: { str: 'Amy', getStr: function() { return this.str; }, getFoo: foo } } // 当函数被作为某个对象的方法调用时,this等于那个对象,所以这个函数里面的this指向对象prop // 所以this.str相当于prop.str,所以结果显示Amy console.log(obj.prop.getStr()); // "Amy" console.log(obj.prop.getFoo()); // "Amy" // 当函数被作为某个对象obj的方法调用, // 与此同时,obj把这个方法的引用赋值给一个变量, // 此时的this不再等于那个对象,而是指向了全局对象(window) var test = obj.prop.getStr; console.log(test()); // "Allenmind" var test2 = obj.prop.getFoo; console.log(test2()); // "Allenmind" function bar() { var test3 = obj.prop.getStr; var test4 = obj.prop.getFoo; console.log(test3()); // "Allenmind" console.log(test4()); // "Allenmind" } bar();
6)函数被作为DOM事件处理函数时,函数里面的this指向绑定事件处理函数的元素(this === event.currentTarget
)
var element = document.getElementById("el"); el.onclick = function(event) { console.log(this === event.currentTarget); // true,this => element }
7)函数被作为构造函数时(关键字new后面的函数),this指向正在被创建的新对象
function myConstructor() { this.a = "我是构造函数里的属性"; // this => 正在被创建的对象,即(this => obj) } var obj = new myConstructor(); console.log(obj.a); // 显示"我是构造函数里的属性"
8)用call(对象,参数1,参数2,...,参数n)
/ apply(对象,[参数1,参数2,...,参数n])
来调用的函数,this指向call() / apply()所指定的对象
function foo() { return this.a; // this => call()指定的对象(即this => obj) } var obj = { a: "我是对象obj里的属性" }; // call()指定了this指向对象obj console.log(foo.call(obj)); // 显示"我是对象obj里的属性"
(PS:以上是用到this关键字的常见场景。另外还有一些场景还没介绍到,如:箭头函数里的this、bind()方法中的this,这两个概念我还不是很懂…所以以后再回来填这个坑吧。)
3. 参考资料
- MDN文档
- 阮一峰老师的this总结
- 《Javascript高级程序设计 第3版》P182