我们知道,在浏览器环境下,window对象是全局对象,this的主人指向函数或表达式执行时使用他们的对象,可以是对象,可以是全局作用域,可以是局部作用域,具体要看到底是谁在调用他们,而变量的寻找像洋葱一样,一层一层向外寻找,我们先看一段代码熟悉一下:
//这是在浏览器环境下,chrome下
var n =2 ;
var obj={
n:4,
fn1:(function(){
console.log("fn1->this ="+this); //这里立即执行时,this是window
console.log("fn1->this.n = "+this.n); //这里是2
this.n *=2;
n = n*2; //这里的n是取下面没赋值的n,所以结果是nan,当变量在使用时还没赋值,但是下面有var语句包含这个变量,这时变量是undefiend
console.log("fn1->n = "+n); //nan
var n = 3; //这里n才赋值
return function() {
this.n*=2; //这里是在下面fn1()调用时时执行,所以这里的this是window
console.log("匿名函数里的this.n="+this.n); //8
n *=3; //这里取外层作用域的3
console.log("匿名函数里的n="+n); //9
}
}
)()
}
var fn1 = obj.fn1;
console.log(obj.n); //4
console.log(n); //8
fn1();
console.log(n) //8
console.log(obj.n); //4
注意:上面代码中 obj 在定义的时候,也就是fn1在定义的时候 function 就已经开始执行了,因为它是立即执行函数
接下来看一下在node环境下的一段代码示例:
//node 环境下
var n =2 ;
var obj={
n:4,
fn1:(function(){
console.log("fn1->this ="+this); //这里的this是global对象
console.log("fn1->this.n = "+this.n); //global没有n,所以n是underfined
this.n *=2; //这里是nan,因为n是undefined,所以乘以2是nan
n = n*2; //同理下面才给n赋值这里的n*2是nan
console.log("n=n*2,n is "+n);
var n = 3;
return function() {
this.n*=2;
console.log("匿名函数里的this.n="+this.n); //global没有n,所以这里是nan
n *=3;
console.log("匿名函数里的n="+n); //9 引用上面 var n=3 这里的3
}
}
)()
}
var fn1 = obj.fn1;
console.log(obj.n); //4
console.log(n); //2
fn1();
console.log(n) //2
console.log(obj.n); //4
var n = 2
console.log(this) // 空对象{}
console.log(this.n) // undefined
console.log(global.n) // undefined
function guo () {
var m = 3
var n = 1
// console.log(this) // 打印出global对象,很长的一段
console.log(this.n) // undefined
console.log(global.n) // undefined
console.log(m) // 3
console.log(n) // 1, 如果函数内不定义 n 的话,将打印出来2
}
guo()
var n = 2
function guo () {
var m = 3
this.n = 1
console.log(n) // 2
console.log(this.n) // 1
console.log(global.n) // 1
console.log(m) // 3
console.log(n) // 2
}
guo()
我们可以看到,函数体内的 this 和外面的 this 已经没什么关系了,在函数体内改变 this.n 的值已经改变不了外面的 n 值, 如果在浏览器的环境的话,情况又不一样了:
var n = 2
function guo () {
var m = 3
this.n = 1
console.log(n) // 1
console.log(this.n) // 1
console.log(m) // 3
console.log(window.n) // 1
}
guo()
可以看到window对象的 n 值已经被函数体内 this.n = 1 这句改变了值