js中的this指向

本文讲解JS中this在浏览器环境下的各种指向

一、全局环境下的this

在全局环境下，this指向的是window对象

<script>
  console.log(this) // window
</script>

在使用use strict严格模式下也一样，要了解严格模式可以在 MDN 查看

<script>
    'use strict'
     console.log(this) // window
</script>

二、函数中的this

2.1全局环境下的函数

全局环境下的函数 this 指向 window

<script>
  function fn() {
    console.log(this) // window
  }
  fn()
  // 注:这里直接调用 fn() 其实和 window.fn()指向无差异
</script>

严格模式下为 undefined

<script>
  'use strict'
  function fn() {
    console.log(this) // undefined
  }
  fn()
</script>

2.2对象中的函数

当把一个函数定义成一个对象的属性调用时:
例如 ：
obj.fn() ：这时 函数fn的this的指向为 obj
obj.

<script>
   let obj = {
     fn: function () {
       console.log(this);
     },
     obj:{
       fn:function(){
         console.log(this);
       }
     }
   }

   obj.fn() // obj
   obj.obj.fn() // obj.obj


</script>

注意坑：

   let fn = obj.fn
   fn() // window 原有是fn的执行环境是在window下
   (obj.fn)() // obj  这样执行和obj.fn执行并无差异

三、类中的this

es5类定义的方式

// 定义一个类
function Person(name,age){
	this.name = name
	this.age = age
	console.log(this) // { name:'张三', age:18 }
}
// 我们通过new 的方式执行这个函数
// 在执行new 时 ，会创建一个空对象，这个空对象就是 函数中的this，然后函数会将这个对象返回，赋值给person
let person = new Person('壳子',18)

es5类的方式

class Person{
	static getName() {
      console.dir(this) // class Person这个类 原因和 2.2一样
    }
	constructor(name, age){
		this.name = name; 
		this.age = age;
		console.log(this) // { name:'张三', age:18 }
	}
	
	getName(){
		console.log(this) // { name:'张三', age:18 }
	}
}

let person = new Person('张三', 18);
person.getName()
Person.getName() // 调用静态方法

四、显示绑定

请查看文章 call、apply、bind.