JS this指向解析-优快云博客

this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁

this的小案例

在函数内部定义的变量, 不加var声明, 会变成全局变量, 添加到window对象

function userTest() {
    user = 'mike';
    console.log(1,this.user);
    console.log(2,this);
}
userTest()
//1 mike
//2 window
复制代码

在函数内部定义的变量, 加var声明, 会变成局部变量, 仅在局部有效

function userTest() {
    var user = 'mike';
    console.log(1,this.user);
    console.log(2,this);
}
userTest()
//1 undefined
//2 window
复制代码

直接调用userTest() 相当于 window.userTest(), 那么this的指向就是window

此时注意一个坑，如果内部变量声明用name，结果会不一样，因为window有个属性叫name。。。所以这时this.name 是空字符串

function userTest() {
    var name = 'mike';
    console.log(1,this.name); //1 ""
    console.log(2,this); //2 window
}
userTest()
复制代码

在对象中用this

var obj = {
  user:'mike',
  fn:function(){
    console.log(1,this.user) // 1 mike
    console.log(2,this) // 2 obj
  }
}
obj.fn()
复制代码

还有第二种，看箭头函数

var obj = {
  user:'mike',
  fn:() => {
    console.log(1,this.user) // 1 undefined
    console.log(2,this); // 2 window
  }
}
obj.fn()
复制代码

此时引出普通函数和箭头函数的区别，箭头函数不绑定this（普通函数绑定this），会捕获其所在的上下文的this值，作为自己的this值。可以使用闭包绑定this。

var obj = {
  user:'mike',
  fn: function() {
    return () => {
      console.log(1,this.user) // 1 mike
      console.log(2,this) // 2 obj
    }
  }
}
obj.fn()()
复制代码

作为构造函数调用(相当于普通函数调用了)

//不使用new指向window
var name = 'hello'
function Person (name) {
    console.log(this) // window
    console.log(this.name) // hello
    this.name = name;
    console.log(this.name) // mike
}
Person('mike')
复制代码

//使用new，this指代new出的对象
var name = 'hello'
function User(){
  this.name = 'mike'
  console.log(this)  // User
  self = this
}
console.log(self) // window
console.log(self.name) // hello
var user = new User()
console.log(user.name) // mike
复制代码