Javascript this关键字 指向详解

Javascript this关键字 指向详解

面向对象语言中 this 表示当前对象的一个引用。在 JavaScript 中 this 不是固定不变的，它会随着执行环境的改变而改变。

1） 单独使用，this 表示全局对象。

<script type="text/javascript">
		console.log(this) // 指向window全局对象
</script>

2） 在方法中，this 表示该方法所属的对象。

var person = {
  firstName: "John",
  lastName : "Doe",
  id     : 5566,
  fullName : function() {
    return this.firstName + " " + this.lastName; // 指向person对象
  }
};
person.fullName();  // John Doe

3）在函数中，this 表示全局对象。 在严格模式下，this 是未定义的(undefined)。

<script type="text/javascript">
	var q = "hello"
	var func = function(){
	    var q = 'wang'
	    console.log(this.q) // hello
	}
	func()
</script>

<script type="text/javascript">
	var q = "hello"
	var func = function(){
	    var q = 'wang'
	    console.log(this.q)  // Cannot read property 'q' of undefined
	}
	func()
</script>

4. 在事件中，this 表示接收事件的元素

<button onclick="this.style.display='none'">点我后我就消失了</button>

5） 作为构造函数调用 构造函数试图初始化这个新创建的对象，并将这个对象作为其调用上下文，this 指向这个新创建的对象。

var q = 'window'
function Func() {
    this.q = 'hello'
    console.log(this.q)  //hello
}
var obj = new Func

6. 通过函数的call/apply方法间接调用 call/apply方法的第一个参数是调用上下文，在函数体内，通过this获得对它的引用。

var q = 'window'
function func() {
　console.log(this.q)
}
var obj = {
  q: 'obj'
}
func.apply()  //window
func.call() //window
func.apply(obj) //obj
func.call(obj) //obj

7. 箭头独立函数 : 本身没有this，内部的this就是外层代码块作用域中的this
   因箭头函数没有this,固不能用作构造函数，否则会报错

var a = 0
var test = ()=>{
    var a = 1
    console.log(this.a)
}
test() // 0