好好学习-js篇-this指向

this 指向

this的指向在函数创建的时候是确定不了的,只有在调用这个函数的时候才能确定.简单来说,this指向调用这个函数的对象

简单小栗子:

var name = '小明'
function sayHI () {
    console.log(`hello,${this.name}`)
}
var obj1 = {
    name:"小红",
    sayHI:sayHI
}
var obj2 = {
    name:"小刚",
    sayHI:sayHI
}
sayHI()  // hello,小明
obj1.sayHI() // hello,小红
obj2.sayHI() // hello,小刚

很明显 this 分别指向了 window,obj1 和 obj2.从这里可以简单的总结出,this指向的是最终调用这个函数的对象
再来一个例子:

var a = 1
function foo () {
    console.log(this.a)
}
var obj = {
    a:2,
    foo:foo
}
obj.foo()
window.obj.foo()

根据上面的例子总结,obj.foo()中this 的指向是 obj 这个对象,window.obj.foo()中this的指向是 window.然而第二个打印的结果并不是 1 而是 2,说明 this 指向的不是 window 而是 obj.从这里可以总结出:

• 如果一个函数中有this,它没有被函数的上一级对象所调用,那么this指向的是 window.
• 如果一个函数中有this,它被函数的上一级对象所调用,那么this指向的是这个上一级对象.
• 如果一个函数中有this,并且这个函数中有多个对象,尽管这个函数被最外层对象调用,this指向的也是这个函数的上一级对象

不同场景下使用 this

函数中有 return

• 如果一个函数中 return 的是一个对象,那么 this 指向的是 return 的这个对象
• 如果一个函数中 return 的不是一个对象,那么 this 指向的是这个函数的实例

function foo (){
    this.a = 1
    return {}
}
var obj = new foo()
obj.a // undefined  this指向的是return出来的{}

function foo () {
    this.a = 1
    return []
}
var obj = new foo ()
obj.a  // undefined this指向的是 return 出来的[]

function foo () {
    this.a = 1
    return 1
}
var obj = new foo()
obj.a  //1  this指向的是这个函数的实例

箭头函数中的 this

箭头函数中的 this 是在定义函数的时候绑定,也就是 this 继承父执行上下文

var a = 1
var obj = {
    a:2,
    foo:()=>{console.log(this.a)}
}
obj.foo() // 1

改变 this 的指向

• call()
• apply()
• bind()

参考文章

https://juejin.im/post/5b52a8...