浅谈JavaScript函数中this的指向

JavaScript开发中，函数是应用程序中的基础功能块，它们非常强大，然而函数中this的指向问题是一件让人很头疼的事情，以下从4个事例Demo中分别解释this的指向。

1.setTimeout 中的this

let timeout = setTimeout(function(){
    console.log(this); //  window对象
})

let timeout = setTimeout(() => {
    console.log(this); //  window对象
})

2.普通函数中的this

function Demo() {
    console.log(this) // window对象
}

Demo()

// 下面为严格模式
'use strict';
function Demo1() {
    console.log(this) // undefined
}
Demo1()

var star = {
    name: '蔡徐坤',
    greeting: function() {
        console.log('大家好，我是', this.name)    
    },
    master : {
        name: '蔡蔡',
        greeting: function() {
            console.log('hello everyone,我是', this.name)
        }
    }
}

var star2 = {
    name: 'summer'
}

star.greeting(); // star对象
star.master.greeting(); // master对象

var specialGreeting = star.greeting;
specialGreeting(); // window对象

star.greeting.call(star2); // 大家好，我是summer
star.master.greeting.call(star2); // hello everyone, 我是summer

var specialGreeting = star.greeting.bind(star2);
specialGreeting(); // 大家好，我是summer

3.箭头函数中的this

var star = {
    name: '蔡徐坤',
    favorties: ['篮球','唱跳','rap'],
    greeting: function() {
        this.favorties.forEach(item => {
            console.log(this) // star对象
            console.log(item) // 篮球 唱跳 rap
        })
    }
}

star.greeting();

var star = {
    name: '蔡徐坤',
    favorties: ['篮球','唱跳','rap'],
    greeting: function() {
        this.favorties.forEach(function(item) {
            console.log(this) // star对象
            console.log(item) // 篮球 唱跳 rap
        },this)
    }
}
// 上面通过传入this的方式等同于箭头函数

// 下面为普通函数不传入this，则指向全局对象window
var star = {
    name: '蔡徐坤',
    favorties: ['篮球','唱跳','rap'],
    greeting: function() {
        this.favorties.forEach(function(item) {
            console.log(this) // window
            console.log(item) // 篮球 唱跳 rap
        })
    }
}


star.greeting();

4.new里面的this

function Star(name) {
    this.name = name;
    this.greeting = function() {
        console.log('我是',this.name)
    }
}

var superStar = new Star('王子文');
console.log(superStar); // Star函数对象
superStar.greeting();// 我是王子文