JS中this问题

一. this指向

function fun() {
    this.name = 'Hello'
    console.log(this.name)
}
fun() // 空
// 如果一个函数中有this，但是在调用的时候没有被所属对象调用，他会统一指向windows(备注：函数的this不会在定义函数是决定指向哪，只会在调用的时候决定它的指向)

let obj = {
    name: 'Hello',
    say: function() {
        console.log(this.name)
    }
} 
obj.say() // hello
// 如果一个函数中有this，在调用时被他的上一级对象所调用，那么他就一定会指向自己的上一级对象

let obj = {
    name: 'Hello',
    obj1: {
        name: 'Text',
        say: function() {
            console.log(this.name)
        }
    },
}
obj.obj1.say() // Text
// 如果一个函数中有this，但是他所属对象里有多层嵌套对象，就算他是被最外层的对象调用，他的this也会指向自己的上一层对象

 

二. 该变this指向

// call方式
let obj = {
    name: 'Hello',
    say: function(age, num) {
        console.log(`${this.name}今年${age},有${num}个孩子`)
    }
}
let obj1 = {
    name: 'Text'
}
obj.say.call(obj1, '23', '2') // call方法是对函数的直接调用，他传递参数的方式是和调用的obj1方法一一对应的

// apply方式
let obj = {
    name: 'Hello',
    say: function(age, num) {
        console.log(`${this.name}今年${age},有${num}个孩子`)
    }
}
let obj1 = {
    name: 'Text'
}
obj.say.apply(obj1, ['23', '2']) // apply方法是对函数的直接调用，他传递的参数是以数组的形式传递

// bind方式
let obj = {
    name: 'Hello',
    say: function(age, num) {
        console.log(`${this.name}今年${age},有${num}个孩子`)
    }
}
let obj1 = {
    name: 'Text'
}
let bindFunction = obj.say.bind(obj1, '23', '2') 
bindFunction() // call和apply是对函数的直接调用，bind不是对函数的直接调用，而是在调用后返回一个函数，所以我们需要再让他完成调用，它是支持传递参数的(并且传递参数方式支持数组和直接传递)