JavaScript中的this

this 是一个很特别的关键字，被自定义在左右函数的作用域中，我们先来看下函数的调用。
js里有三种函数的调用形式：

fn ( param1, param2)  
obj.method(param1, param2)
fn.call(context, param1, param2)

前面两种是call的语法糖，转换为call

fn.call(undefined, param1, param2)
obj.method.call(obj, param1, param2)

这样我们可以很清楚的知道， this就是上面的context。
当你写下如下代码时:

function fn () {
  console.log(this)
}
fn ()

等价于

function fn () {
  console.log(this)
}
fn.call(undefined)

由于浏览器规定，如果call的第一个参数为null或者undefined，那么call的第一个参数是window，在strict模式下，call的第一个参数默认是undefined。我们再来看一个在对象中调用方法的例子

let human = {
    name: 'sss',
    age: 24,
    introduceSelf (person) {
        console.log(`I am ${person.name}, ${person.age} years old`)
    }
}
human.introduceSelf({name:'Emily', age: 24}) // I am emily, 24 years old
human.introduceSelf(person) //I am sss, 24 years old

此时我们将human自身作为参数传递给了introduceSelf函数,这样使用太过啰嗦，我们可以做下面的改变：

let human = {
    name: 'sss',
    age: 24,
    introduceSelf () {
        console.log(`I am ${this.name}, ${this.age} years old`)
    }
}
human.introduceSelf() //I am sss, 24 years old

此时我们通过this达到了调用自身属性的目的，human对象的name和age是默认值。但是如果我们做如下改变

let introduce = human.introduceSelf
introduce () // I am , undefined years old

由于此时this是window，我们并没有获取我们预期的效果。上面的函数调用方法等同于:

introduce.call ( undefined )

const Emily = { name: 'Emily', age: 24 }
human.introduceSelf.call(emily) // I am Emily, 24 years old

总结

this是call一个函数时，传入的第一个参数。或者是某个对象调用它的方法，那么该方法的this就是该对象( 对象不存在时，非严格模式下默认是 window, 严格模式下是undefined)。

JavaScript中的this

总结

推荐阅读更多精彩内容