【JS交互基础】几个特殊的对象 Global、Window、Arguments、this

一、Global对象

• 所有在全局作用域内定义的属性和方法，都是Global对象的属性。

• Global对象不能直接使用，也不能用new运算符创建。

• Global对象在JavaScript引擎被初始化时创建，并初始化其方法和属性。

• 浏览器把Global对象作为window对象的一部分实现了，因此，所有的全局属性和函数都是window对象的属性和方法。

• 详见文档：http://www.w3school.com.cn/jsref/jsref_obj_global.asp

• Global对象的属性

  • Object 构造函数Object
  • Function 构造函数Function
  • Date 构造函数Date
  • Array 构造函数Array
  • RegExp 构造函数RegExp
  • Error 构造函数Error
  • String 构造函数String
  • Boolean 构造函数Boolean
  • Number 构造函数Number
  • undefined 特殊值undefined
  • NaN 特殊值NaN

• Global对象的方法：

  • encodeURI()

    1. 对整个URI进行编码。
    2. 只对空格进行编码，不会对冒号、正斜杠、问号、井号等进行编码。
    3. 编码后的结果：除了空格被替换成了%20之外，其它的都没有发生变化。
    4. 对应的解码方法：decodeURI()

  • encodeURIComponent()

    1. 对部分URI(指除去协议、主机地址、端口后的部分)进行编码。
    2. 对任何非标准字符进行编码。
    3. 对应的解码方法：decodeURIComponent()

  • eval()

    1. 当解析器发现代码中调用eval()方法时，它会将传入的参数当作实际的JavaScript语句来解析

  • URI编码方法说明

    1. 有效的URI中不能包含某些字符(例如：空格等)。

    2. 用特殊的UTF-8编码替换所有无效的字符，从而让浏览器能够接受和理解。

二、window对象

• 在全局作用域中声明的变量、函数都是window对象的属性和方法

• 参考文档：http://www.w3school.com.cn/jsref/dom_obj_window.asp

三、argments对象

• arguments 对象实际上是所在函数的一个内置类数组对象

• 每个函数都有一个arguments属性，表示函数的实参集合，这里的实参是重点，就是执行函数时实际传入的参数的集合。arguments不是数组而是一个对象，但它和数组很相似，所以通常称为类数组对象，以后看到类数组其实就表示arguments。arguments对象不能显式的创建，它只有在函数开始时才可用。

• arguments还有属性callee，length和迭代器Symbol。

• arguments同样具有length属性，arguments.length 为函数实参个数，可以用arguments[length]显示调用参数

• arguments对象可以检测参数个数，模拟函数重载

• 参考文档：http://www.w3school.com.cn/js/pro_js_functions_arguments_object.asp

• 代码理解：

  • 第一点：arguments对象：可以在函数内访问所有的参数，实参

    function f1(){
        console.log(arguments[0]);
        console.log(arguments[1]);
        console.log(arguments[2]);
    }
    
    f1(12,23,45);   //12 34 45
    

  • 第二点：在正常的模式下，arguments对象可以在运行的时候进行修改

    function f2(a,b){
        arguments[0] = 10;
        arguments[1] = 20;
        return a + b;
    }
    
    console.log(f2(4,6));   //30
    

  • 第三点：在严格的模式下，arguments对象在运行的时候不可以修改，修改arguments对象不会影响到实际的函数参数

    function f3(a,b){
        'use strict';
        arguments[0] = 10;
        arguments[1] = 20;
        return a + b;
    }
    
    console.log(f3(3,6));   //9
    

  • 第四点：通过arguments对象的length属性，可以判断实参的个数

    function f4(){
        console.log(arguments.length);
    }
    
    f4(2,3,4,5);    //4
    f4(1);      //1
    f4();       //0
    

  • 第五点：arguments是一个对象，不是数组，转换为数组可以采用 slice 和 逐一填入新数组

    var arr = Array.prototype.slice.call(arguments);
    console.log(typeof arr);
    
    var arr2 =  [];
    for(var i = 0; i<arguments.length;i++){
    	arr2.push(arguments[i]);
    }
    console.log(typeof arr2);
    

  • 第六点：arguments的callee属性可以返回对应的原函数，达到调用自身函数的效果，但是在严格模式中是不适用的

    var f5 = function(){
        console.log(arguments.callee===f5);    //true
        console.log(arguments.callee===f6);    //false
    }
    
    var f6;
    f5();  //返回原函数，调用自身
    

• arguments的应用

  • 第一点：arguments.callee为引用函数自身。我们可以借用arguments.length可以来查看实参和形参的个数是否一致

    function add(a, b) { 
        var realLen = arguments.length; 
        console.log("realLen:", arguments.length); 
        var len = add.length; 
        console.log("len:", add.length); 
    
        if (realLen == len) { 
        console.log('实参和形参个数一致'); 
    } else { 
    	console.log('实参和形参个数不一致'); 
    } 
    
    }; 
    
    add(11,22,33,44,66);
    

  • 第二点：我们可以借用 arguments.callee 来让匿名函数实现递归

    var sum = function(n) { 
        if(n == 1) { 
            return 1; 
        } else { 
            return n + arguments.callee(n-1); 
        } 
    } 
    console.log("sum =", sum(5)); 
    

  • 第三点：编写一个函数求传入的若干个数字（不能用数组显示传入）的和

    function add() { 
        var len = arguments.length; 
        var sum = 0; 
        for (var i = 0; i < len; ++i) { 
        	sum += arguments[i]; 
        } 
        return sum; 
    }; 
    add(11,22,33,44,66);
    

四、this对象

• this对象是在运行时基于函数的执行环境绑定的，在全局函数中，this等于window；当函数被作为某个对象的方法、 调用时，this等于那个对象。

• 特别注意：匿名函数的执行环境具有全局性，因此匿名函数中的this对象通常指向window对象!!!

• JS中this的五种用法

  • 在一般函数方法中使用 this 指代全局对象

    function test(){
        this.x = 1;
        alert(this.x);
    }
    test(); // 1
    

  • 在事件函数中使用 this 指代执行事件函数的元素

    ele.onclick = function(){
    	alert(this) //元素ele
    }
    

  • 作为对象方法调用，this 指代上级对象

    function test(){
      alert(this.x);
    }
    var o = {};
    o.x = 1;
    o.m = test;
    o.m(); // 1
    

  • 作为构造函数调用，this 指代new 出的对象

    function Test(){
    	this.x = 1;
    }
    var o = new Test();
    alert(o.x); // 1
    //运行结果为1。为了表明这时this不是全局对象，我对代码做一些改变：
    var x = 2;
    function Test(){
    	this.x = 1;
    }
    var o = new test();
    alert(x); //2
    

  • apply调用 ，apply方法作用是改变函数的调用对象，此方法的第一个参数为改变后调用这个函数的对象，this指代第一个参数

    var x = 0;
    function test(){
    	alert(this.x);
    }
    var o={};
    o.x = 1;
    o.m = test;
    o.m.apply(); //0
    //apply()的参数为空时，默认调用全局对象。因此，这时的运行结果为0，证明this指的是全局对象。如果把最后一行代码修改为
    o.m.apply(o); //1
    

---

注：在函数调用的时候，浏览器每次都会传递进两个隐式参数

1. 函数的上下文对象this
2. 封装实参的对象arguments