好好学习-js篇-this指向

in 网站建设
关注公众号【好便宜】( ID:haopianyi222 ),领红包啦~
阿里云,国内最大的云服务商,注册就送数千元优惠券:https://t.cn/AiQe5A0g
腾讯云,良心云,价格优惠: https://t.cn/AieHwwKl
搬瓦工,CN2 GIA 优质线路,搭梯子、海外建站推荐: https://t.cn/AieHwfX9

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

函数中有 return

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 的指向

参考文章

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

关注公众号【好便宜】( ID:haopianyi222 ),领红包啦~
阿里云,国内最大的云服务商,注册就送数千元优惠券:https://t.cn/AiQe5A0g
腾讯云,良心云,价格优惠: https://t.cn/AieHwwKl
搬瓦工,CN2 GIA 优质线路,搭梯子、海外建站推荐: https://t.cn/AieHwfX9
扫一扫关注公众号添加购物返利助手,领红包
Comments are closed.

推荐使用阿里云服务器

超多优惠券

服务器最低一折,一年不到100!

朕已阅去看看