作用域和上下文、this关键字（二）

1 作用域和上下文、this关键字

创建scope.js文件，代码如下

// 声明全局变量
var globalVariable = 'Thins is global variable';
// 声明全局作用域
function globalFunction(){
    // 声明内部局部变量
    var localVariable = 'This is local variable';

    // 打印
    console.log('visit global/local variable');
    console.log(globalVariable);
    console.log(localVariable);
    // 修改全局变量
    globalVariable = 'This is changed variable';

    console.log(globalVariable);

    // 声明局部作用域
    function localFunction(){
        var innerLocalVariable = 'This is inner local variable';

        console.log('Visit global/local/innerLocal variable');
        console.log(globalVariable);
        console.log(localVariable);
        console.log(innerLocalVariable);
    }
    localFunction();
}
globalFunction();

以上代码执行结果如下：

$ node scope.js
visit global/local variable
Thins is global variable
This is local variable
This is changed variable
Visit global/local/innerLocal variable
This is changed variable
This is local variable
This is inner local variable

this在对象内调用，声明对象变量

创建context.js文件，代码如下

// 声明对象变量
var pet = {
    words: '...',
    speak: function() {
         //使用this关键字
        console.log(this.words);
        //这里的this指向的是pet对象
        console.log(this === pet);
        console.log(this);
    }
}

pet.speak();

以上代码执行结果如下：

$ node context.js
...
true
{ words: '...', speak: [Function] }

this在函数内调用，声明函数变量

创建context.js文件，代码如下

// 声明函数变量
function pet(words){
    this.words = words;
    // 使用this关键字
    console.log(this.words);
    //this指向执行环境中的全局对象（浏览器->window  nodejs->global）
    console.log(this === global);
    console.log(this);
}
pet('...');

以上代码执行结果如下：

$ node context.js
...
true
{ DTRACE_NET_SERVER_CONNECTION: [Function],
  DTRACE_NET_STREAM_END: [Function],
  DTRACE_HTTP_SERVER_REQUEST: [Function],
  DTRACE_HTTP_SERVER_RESPONSE: [Function],
  DTRACE_HTTP_CLIENT_REQUEST: [Function],
  DTRACE_HTTP_CLIENT_RESPONSE: [Function],
  COUNTER_NET_SERVER_CONNECTION: [Function],
  COUNTER_NET_SERVER_CONNECTION_CLOSE: [Function],
  COUNTER_HTTP_SERVER_REQUEST: [Function],
  COUNTER_HTTP_SERVER_RESPONSE: [Function],
  COUNTER_HTTP_CLIENT_REQUEST: [Function],
  COUNTER_HTTP_CLIENT_RESPONSE: [Function],
  global: [Circular],
  process:
   process {
     title: '管理员: C:\\Windows\\system32\\cmd.exe - node  context.js',
     version: 'v4.5.0',
     moduleLoadList:
      [ 'Binding contextify',
        'Binding natives',
        ......

this在函数内的构造函数中调用，声明函数变量

创建context.js文件，代码如下

// 声明函数变量，传入一个参数
function Pet(words){
    this.words = words;
    // 声明一个方法 构造函数
    this.speak = function(){
        console.log(this.words);
        console.log(this);
    }
}
// 创建一个实例对象
var cat = new Pet('Miao');
// 调用speak()方法
cat.speak();

以上代码执行结果如下：

$ node context.js
Miao
Pet { words: 'Miao', speak: [Function] }

根据以上三个示例代码，我们来理解一下上下文，在JavaScript中this关键字通常是指向当前函数的拥有者，我们通常把拥有者叫做执行上下文。this是JavaScript语言的一个关键字，是函数运行时自动生成的一个内部对象，只能在函数 内部使用 。对于函数的上下文执行对象，需要依据当时的运行环境而定。因为上下文执行对象可以在程序运行的时候去改变，在全局运行的上下文中，this指向的是全局变量，在函数内部被调用，this取决于被调用的方式