this指向问题

JS中，this究竟指向什么

永远指向对象

只会在两种作用域中才有this

1. 全局

var title = "xxxy";

if(true){
    var title = "500";
    alert(this.title)   // 全局this
}

var obj = {
    title: '开始',
    age: this.title,    // 全局this
    say: function(){
        alert(this.title)    // 函数this
    }
}

alert(obj.age);

obj.say();

1. 函数域(function定义的函数，非箭头函数)

var title = "123";

function abc(){
    alert(this.title);  // 123  函数this，此this是动态的
}

abc()  // this代表window
 

注意：js中没有对象this，如果对象中，非函数类型属性使用this时，指向的都是外层this

var title = "xxx"
var obj = {
    title: '开始',
    age: this.title    // 全局this 所以是xxx
}

function test(){
    var obj = {
        title: '开始',
        age: this.title    // 如果是普通函数调用，此时的this还是指向最外层window
                           // 如果是构造函数调用，此时的this是指向test对象
    }
}

test()
new test()

JS中，this在哪些位置出现

• 全局

在浏览器中，全局的this指向windows对象

在NodeJS中，全局的this指向module.exports对象

• 函数

1、普通函数
function fn(){
    console.log(this);
}

2、对象的方法
var obj = {
    name: "wwbb",
    say: function(){
        console.log(this.name)
    }
}

3、回调函数
var oBtn = document.getElementById("send");
oBtn.addEventListener('click', function(){
    console.log(this);    // 这个this指代oBtn这个按钮
})

4、箭头函数
const getName = () => {
    this.name = "xxx"
}

总结：123是运行时指定(动态this)，4是编码时指定(静态this)

只要是非箭头函数，this都是动态的

var obj = {
    name: "wwbb",
    say: function(){
        console.log(this.name)
    }
}
obj.say()  //this是 obj

var go = obj.say;
go()   //this是window

普通函数与箭头函数的区别

• 写法

  普通函数：1、函数声明 2、函数表达式 都必须使用function关键字
  
  箭头函数：是一种匿名函数，只有函数表达式 没有function关键字

• this指向

  普通函数：this是动态
  
  箭头函数：this是静态 对象属性是箭头函数，里面this指向对象所在的this