obj对象里的function的this,大家都希望它指向obj,但是一些情况下,指向的是window
- 箭头函数
//es6 箭头函数的写法
var obj = {
say: function () {
setTimeout(() => {
console.log(this)
});
}
}
obj.say(); // obj
//es5 的写法
var obj = {
say: function () {
setTimeout(function() {
console.log(this)
});
}
}
obj.say(); // window
多层箭头函数嵌套
var obj = {
say: function () {
var f1 = () => {
console.log(this); // obj
setTimeout(() => {
console.log(this); // obj
})
}
f1();
}
}
obj.say()
混杂嵌套
var obj = {
say: function () {
var f1 = function () {
console.log(this); // window, f1调用时,没有宿主对象,默认是window
setTimeout(() => {
console.log(this); // window
})
};
f1();
}
}
obj.say()
//结果: 都是 window,因为 箭头函数在定义的时候它所处的环境相当于是window, 所以在箭头函数内部的this函数window
//和如上对比:
var obj = {
say: function () {
console.log(this);//obj
setTimeout(() => {
console.log(this)// 因为上层上下文里面this指向obj,所以这里继承后也是obj(箭头函数没有它自己的this值,箭头函数内的this值继承自外围作用域)
});
}
}
obj.say();
var name = 'window';
var obj = {
name : 'netease',
print1: () => {
console.log(this.name);
},
print2(){
console.log(this.name);
}
}
obj.print1();
obj.print2();
//答案
//window
//netease
- 其他this问题
function f1() {
var tmp = 1;
this.x = 3;
console.log( tmp );
console.log(this.x);
}
var obj = new f1();
console.log( obj.x );
console.log( f1() ) ;
//答案:
var obj = new f1(); // 1, 3
console.log( obj.x ); //3
console.log( f1() ) ; //1, 3, undefined
//第三行的undefined是以为函数返回值为空
window.val = 1;
var obj = {
val: 2,
dbl: function () {
this.val *= 2;
val *= 2;
console.log(val);
console.log(this.val);
}
};
// 说出下面的输出结果
obj.dbl();
var func = obj.dbl;
func();
第一次调用:
val变量在没有指定对象前缀,默认从函数中找,找不到则从window中找全局变量
即 val *=2 就是 window.val *= 2
this.val默认指的是 obj.val ;因为 dbl()第一次被obj直接调用
第二次调用:
func() 没有任何前缀,类似于全局函数,即 window.func调用,所以
第二次调用的时候, this指的是window, val指的是window.val
第二次的结果受第一次的影响
this指向绑定:
1.self=this
2.func.bind(this)
console.dir(window)调试
网友评论