JavaScript做为一门面向对象的语言,this的指向一直是最基础,也让你们最头疼的问题,下面就了解一下这个this。this指向最终调用它的那个对象,至于这句话怎么理解,下面就直接来看实例吧!
情景一:函数
例1 function a () { var user = 'good' console.log(this.user) // 返回undefined console.log(this) // 返回window } a()
例2
function a () {
var user = 'good'
console.log(this.user) //返回undefined
console.log(this) // 返回window
}
window.a()this
详解:this指向最终调用它的对象,这里的函数a最终是被window对象所点出来的,例2就是很好的说明。user属性是函数a的局部变量,window上面没法访问到属性user,因此返回的是undefinedspa
情景二:
var o = { user: 'good', fn: function () { console.log(this.user) // 返回'good' console.log(this) // 返回 {user:'good',....} } } o.fn()
详解:函数fn是被对象o调用,因此这里的this指向对象o;code
情景三:
var o = { user:'good', fn: function () { console.log(this.user) // 返回'good' console.log(this) // 返回{user:'good',....} } } window.a.fn()
详解:此处的this并非指向window,依然是指向a,和情景二的效果同样对象
总结:
(1)若是函数中有一个this,可是并无被上一级的对象所调用,那么this指向就是window
(2)若是函数中有一个this,而且被上一级对象所调用,那么this就指向上一级的对象
(3)若是函数中有this,函数中包含多个对象,尽管函数被最外层的对象所调用,this指向的也是它上一级的对象blog
情景四:ip
var o = { a: 'good', b: { fn: function () { console.log(this.a) // 返回undefined } } } o.b.fn()
详解:为何返回undefined就有很好的解释啦
情景五:io
var o = { a: 'good', b: { a: 'day', fn: function () { console.log(this) // 返回window console.log(this.a) // 返回undefined } } } var m = o.b.fn m()
详解:this永远指向的是最后调用它的对象,也就是说最后是谁调用的它。函数fn是被对象b所引用,可是又将函数赋值给m,this指向永远都是在调用的时候产生的,并非在建立的时候就产生的。最后是window调用了这个函数,那么这样全部的返回值就能够解释啦console
构建函数中的this function Fn () { this.name = 'good' } var o = new Fn() console.log(a.name) // 返回'good'
详解:相信看到上述实例返回的值都没什么好惊讶的,可是为何会返回这个值呢?是由于关键字new改变了this的指向,将this指向了对象o,而且将这个函数赋值给变量o,因此当读取这个user属性的时候,就能有返回值啦
当this遇到了returnfunction
情景六:
function Fn () { this.name = 'good' return {} // undefined return function () {} // undefined return 1 // ‘good’ return null // 'good' return undefined // 'good' } var o = new Fn () console.log(o.name)
详解:函数里面有this和return,当返回的是对象的时候,this指向返回的对象,若是是非对象的话,this就指向实例化的对象,可是null是个例外,虽然也是对象,可是this依然指向的是实例化的对象