window与node作用域的理解及this的指向

我们知道，在浏览器环境下，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 这句改变了值