ES6:对象方法--"this"

这是我参与「掘金日新计划 · 6 月更文挑战」的第14天，点击查看活动详情

前导

this是一个特殊的对象，它在标准函数和箭头函数的指向非常不同，今天就来探讨下这个对象。

使用

1. 方法中的this

• 实际上，我们创建一个方法就是用这个方法去获取对象中的属性信息，这时我们就可以用到this.属性名进行获取，这时this的指向就是这个方法所属的对象，代码详细说明如下

let user = {
name: 'Jack',
age: 18,
getName(){
    alert(`用户的名字: ${this.name}`)
}
}

• 上面的代码，this的指向就是user,这时this.name就可获取到Jack。而这里的this也可用user代替为user.name，实现效果与this获取属性时的效果一致。

2. 'this'不受限制

• 它可以用于任何函数，达到一个类似于模板的作用，下面用代码进行说明

let user = {name:'Jack'}
let admin = {name : 'Admin'}

function getName(){
    alert(`名字: ${this.name}`)
}

user.f = getName  //Jack
admin.f = getName //Admin

• 从上面的代码，可以看到this被使用了两次，但是两次的指向完全不同。原因是，在标准函数中，this引用的是把函数当成方法调用的上下文对象，只有在在调用时值才能被确定下来，因此这里两个函数调用的结果是返回其对应的属性

3. 箭头函数函数中的'this'

• 在箭头函数中，this引用的是定义箭头函数的上下文，因此这里的this是对应外部的。

• 从上面的代码可以看到，这时候即使有自定义的对象去使用this对象返回的依旧是window对象的属性，因此可知箭头和函数的this默认指向window对象。

let o =  {
    color : 'purple',
    Color(){
        let sayColor = () => console.log(this.color);
        sayColor()
    }
}
o.Color() //purple

• 改进方法如上，这样的制定方法可不受外部属性修改的干扰，从而实现我们的目的。

总结 ：this对象在箭头函数中的使用要多加小心，注意区分它在标准函数和箭头函数中的指向不同，产生的效果也不同。