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)。
网友评论