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指向最终调用它的对象,这里的函数a最终是被window对象所点出来的,例2就是很好的说明。user属性是函数a的局部变量,window上面无法访问到属性user,所以返回的是undefined
情景二:
var o = { user: ‘good‘, fn: function () { console.log(this.user) // 返回‘good‘ console.log(this) // 返回 {user:‘good‘,....} } } o.fn()
详解:函数fn是被对象o调用,所以这里的this指向对象o;
情景三:
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指向的也是它上一级的对象
情景四:
var o = { a: ‘good‘, b: { fn: function () { console.log(this.a) // 返回undefined } } } o.b.fn()
详解:为什么返回undefined就有很好的解释啦
情景五:
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调用了这个函数,那么这样所有的返回值就可以解释啦
构建函数中的this function Fn () { this.name = ‘good‘ } var o = new Fn() console.log(a.name) // 返回‘good‘
详解:相信看到上述实例返回的值都没什么好惊讶的,但是为什么会返回这个值呢?是因为关键字new改变了this的指向,将this指向了对象o,并且将这个函数赋值给变量o,所以当读取这个user属性的时候,就能有返回值啦
当this遇到了return
情景六:
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依然指向的是实例化的对象