JavaScript - 函数相关知识点

函数内部的隐藏参数 –> arguments ( 重点 )

arguments:接收实参

• 该参数是一个类似于数组的结构（可以像数组一样遍历 + 还可以使用下标来访问数据），但是并不是数组。
• 函数调用的时候，会把实参的值赋值给形参，而且会使用arguments来接收实参
• 如果实参的个数超过形参的个数，那么可以通过arguments来获取超出的数据
• 如果实参的格式小于形参的个数，那么不足的全部设置为undefined

this指向的是一个对象，具体指向的是哪个对象由函数调用方式来决定。总之,this是面向对象里面最让人蛋疼的一个东西

• 使用this会让我们的代码灵活
• 函数以普通方式调用：this指向window(注释：在非严格模式下指向window) 严格模式是 : use static
• 以对象的方法来调用：this指向调用方法的对象
• 以构造函数的方式来调用 ：this指向的是构造函数内部新创建的对象
• 上下文的方式调用（call|apply）: 第一个参数

length属性

1.arguments.length 实参长度（个数）
2.函数名.length 形参的长度（个数）

• 示例代码1 :

<script>
    //1 扩展内置对象
    Array.prototype.des = "描述信息";
    var arr1 = new Array();
    console.log(arr1.des);

    //2 怎么判断一个对象的类型
    //typeof
    // 字符串|数字基本数据类型  string /number /boolean
    //函数  function
    //数组 | 日期类型     --->object
    //判断数组：Array.isArray()

    //3 toString判断

    function sum()
    {
        var result = 0;
        for (var i = 0; i < arguments.length; i++) {
           result += arguments[i];
        }
        console.log(arguments.des,"______________");
        console.log(Array.isArray(arguments));   //false
        console.log(result);

        //数组  [object Array]?
        console.log(Object.prototype.toString.call(arguments));   
        //不是数组  [object Arguments]
    }

    sum(1,2,3,4,5);   // 3
</script>

• 示例代码2 :

<script>
    function demo(a,b,c){
        // 打印用户传入的参数的个数
        console.log(arguments.length);
        //abc ===> 123
        //4和5可以拿到
        console.log(arguments[demo.length],"+++");
        console.log(c);
        //a =1 b = 2 c = undefined
    }
    demo(1,2,3,4,5);
    console.log(demo.length);
    demo(1,2);
</script>

• 示例代码3 :

<script>

    //"use strict";
    var obj = {name:"电话情缘1"};
    var obj2 = {name:"电话情缘2"};
    function showName(){
        console.log(this);
    };

//    obj.showName = showName;
//    obj2.showName = showName;
//    obj.showName();
    showName();
</script>

callee和caller

callee : 函数自身

• 主要用途：递归
• 递归的特点：
• 自己调用自己
• 要有退出条件 不然就会陷入死循环

  caller : 调用函数的函数 注意点：在全局作用域中调用，指向的是null

• 示例代码1 :

<script>
    function demo1(){
        console.log(demo1.caller);   //demo2这个函数
    }

    function demo2(){
        demo1();
    }

    demo2();
    demo1();
</script>

• 示例代码2 :

<script>
    function func(){
        console.log(arguments.callee);  //函数自身
    }

    func();
</script>

• 示例代码 :

<script>
  //1 - 2: 1+2
  //1 - 3: 1+2+3
  //1 - 4: 1+2+3+4
  //1 - 5: 1+2+3+4+5
  //1 - 6: 1+2+3+4+5+6
  //1 - n: 1+2+3+4.....n  ==>1~(n-1) + n

  console.log((function (n) {
      if (n == 1) {
          return 1;
      }
      //如果函数的匿名函数，那么要在函数内部调用自身，可以使用arguments.callee
      return arguments.callee(n - 1) + n;
  })(100));

  //console.log(demo(3000));  //1+2+3

</script>

Function的小应用

数组去重

• 示例代码 :

<script>
     // 使用反括号`` 其实这里是走个铺垫 为之后的node.js
    var func = new Function(`
     var arr = [];
        for (var i = 0; i < arguments.length; i++) {
            //去arr数组中查找指定的元素是否存在，如果不存在那么就添加
            if (arr.indexOf(arguments[i]) == -1)
            {
                arr.push(arguments[i])
            }
        }
        return arr;

    `)
    console.log(func(1, 2, 3, 4, 5, , 4, 7, 8, 2, 8, 9));
</script>

求最大值

• 示例代码 :

<script>
    function getMax(){
        var maxNum = arguments[0];
        //遍历arguments
        for (var i = 0; i < arguments.length; i++) {
            if (maxNum < arguments[i])
            {
                maxNum = arguments[i];
            }
        }

        return maxNum;
    }

    console.log(getMax(1, 20, 30, 21,220,44,55,123));
</script>

eval 函数

作用：把字符串转换为js的代码

• new Function("字符串"); // 把字符串转换为js的代码

  区别：

• Function：当函数调用的时候才会执行
• eval：立刻执行

使用建议：不推荐使用（js是词法作用域，eval和with可以动态的调整破坏js的词法作用域），性能不好。

• 场景：页面中接收用户的js代码 + json处理

Json和XML

• json是一种国际标准协议,只要我们将数据转换成这个格式,就能实现传输
• XML比json更国际化标准,在所有语言中通用
• 从整个互联网开发来看 XML占据80%,而json只有20%. 如果是前端开发的话,json占据55%,而XML占据45%
• HTML就是一种XML,XML不是一种语言,是一种规定,协议.

Json协议和XML协议区别

• 相同点
  1.都是一种通信协议
  2.都可以用来描述数据

• 不同点
  1.json:一种轻量级的数据结构，用来表示、存储、传输数据.
  2.XML专用带宽大,json占用带宽小
  3.json没有XML这么通用
  4.json可以和js对象互相转换,和js是天生的一对,因此广泛用于前端开发
  5.XML已经被业界广泛的使用,而json才刚刚开始,但是在Ajax这个特定的领域.未来的发展一定是XML让位给json,到时候Ajax就会编程Ajaj

• 示例代码 :

<script>
    //把JSON数据转换为对象
    var obj = JSON.parse("{\"name\":\"默默的备胎\"}");

    console.log(obj);
    //把对象转换为json数据
    var str = JSON.stringify(obj);
    console.log(str);
</script>
<script>
    var jsonStr = "{\"name\":\"默默的备胎\"}";
    //json--->对象
    eval("var o =" +jsonStr);
    console.log(o);
    var obj = eval("(" + jsonStr +")");
    console.log(obj);
</script>

Function.prototype的原型链

• Function是Object构造函数的实例对象
• Object可以看作是Function的实例对象
• 示例代码 :

<script>
    function Person(){}
    function Boy(){}
    //设置继承
    var p1 = new Person();
    Boy.prototype = p1;

    var boy = new Boy();
    //console.log(Function.prototype);  //function () {}
    console.log(Boy.__proto__ == Function.prototype);
    console.log(Boy.__proto__.constructor);   //function Function() { [native code] }
    console.log(Boy.__proto__.__proto__ == Object.prototype);     //
    console.log(Function.constructor == Function);
    console.log(Function.__proto__ == Function.prototype);
</script>
<script>
    console.log(Object.constructor);
    console.log(Object.__proto__);
    console.log(Object.__proto__ == Function.__proto__);
</script>

• 解释
  1.Boy构造函数本身是一个对象，因此有构造函数，它的构造函数是Function,它的原型对象是Boy.proto == Function.prototype 空函数
  2.Function的原型对象是一个空的函数
  3.这个空的函数也是一个对象，因此也有构造函数，它的构造函数是Function
  4.推论：Function的原型对象是空函数，因此空函数的原型对象应该是自己（错误）是空的对象
  5.空函数的原型对象 == Object.prototype
  6.Function也是一个对象，因此也有构造函数，它的构造函数是谁？是自己Function
  7.Function作为一个对象来说，也有自己的原型对象Function.proto
  8.Function对象的原型对象和其构造函数的原型对象是空函数
  9.Object.prototype的构造函数是Object
  10.Object本身也是一个对象，因此也有自己的构造函数—>Function

• 图解 –> 可以慢慢理解 这种东西急不得

with的使用

• 作用：把对象的作用域引申到{}中,达到缩减代码的目的
• 应用场合：在写代码的时候，要写很长的前缀.对象.属性.属性.属性
• 具体的使用注意：
  1.在{}中不能使用无前缀的方式来增加属性
  2.this应该是谁？ window
  3.严格模式下，with被禁止使用了
• 使用建议：不建议使用 ,因为内部的this指向会有问题

私有变量和私有函数

• 在构造函数内部声明的变量称之为私有变量
• 示例代码 :

<script>
    function Person(){
        this.name = "momo";
        this.showName = function(){};

        var a = "测试的值";
        function getA(){
            return a;
        };
        //像test这样的实例方法，它可以访问构造函数内部的变量和函数，这种方法被称为特权方法
        this.test = function(){
            console.log(getA());
        };

    }

    var p1 = new Person();
    p1.test();
</script>

---

虽然讲了这么多了,但是还没有完,宝宝心里也苦啊! 外国人的东西么的办法,要想超越人家,再不学习,都要被甩出外太空了 !!!

未完待续 …

---