发表于 | 阅读次数:
字数统计: 349 | 阅读时长 ≈ 1 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

<!DOCTYPE html>
<html>
<head>
  <title>Using the arguments parameter</title>
  <meta charset="utf-8">
  <script src="../assert.js"></script>
  <link rel="stylesheet" type="text/css" href="../assert.css">
</head>
<body>
  <script>
    function whatever(a, b, c){
      assert(a === 1, 'The value of a is 1');
      assert(b === 2, 'The value of b is 2');
      assert(c === 3, 'The value of c is 3');

      assert(arguments.length === 5,
        'We’ve passed in 5 parameters');

      assert(arguments[0] === a,
        'The first argument is assigned to a');
      assert(arguments[1] === b,
        'The second argument is assigned to b');
      assert(arguments[2] === c,
        'The third argument is assigned to c');

      assert(arguments[3] === 4,
        'We can access the fourth argument');
      assert(arguments[4] === 5,
        'We can access the fifth argument');
    }
    
    whatever(1,2,3,4,5);
  </script>
</body>
</html>

js函数 隐式的函数参数arguments this

这两者会静默地传递給函数

arguments 参数表示函数调用过程中传递的所有参数

this 表示被调用函数的上下文对象

arguments对象 不是数组 ！！！

是一个类数组的结构

可以作为函数参数的别名 但是在严格模式下无法使用

四种方式调用函数

  • 作为函数直接调用
  • 关联在一个对象上 实现面向对象编程oop 方法调用
  • 作为一个构造函数
  • 通过函数的apply 或者是 call方法

发表于 | 阅读次数:
字数统计: 318 | 阅读时长 ≈ 1

javascript 是函数式编程语言 也就是fp

  • 函数是第一类对象

通过字面量创建
赋值給变量或者属性
作为函数参数传递
作为函数的结果进行返回
赋值給属性和方法

  • 回调函数是被代码随后”回来调用“的函数，特别是在事件处理场景之下

  • 函数具有属性，而且可以存储任何信息，

  • 存储另一个函数用于之后的引用和调用

  • 用函数属性来创建一个缓存（记忆），用于减少不必要的计算

  • 函数声明和函数表达式是最主要的函数类型 另外还有箭头函数和函数生成器 还有很不常见的函数构造函数

  • 形参是函数定义时列出的变量 实参是函数调用时传递給函数的值

  • 形参和实参列表长度可以不同

未赋值的形参求值得到undefined
传入的额外实参不会被赋值給任何一个命令形参

  • 剩余参数 不与任何形参名相匹配的额外实参可以通过剩余参数来引用
  • 默认参数 没有传入参数的时候 提供的缺省值

发表于 | 阅读次数:
字数统计: 129 | 阅读时长 ≈ 1 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>

<head>
  <title>Using the rest parameters</title>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="../assert.css">
  <script src="../assert.js"></script>
</head>
<body>
  <script type="text/javascript">
    "use strict"
    function multiMax(first, ...remainingNumbers){
      var sorted = remainingNumbers.sort(function(a, b){
         return b - a;
      });
      return first * sorted[0];
    }
    assert(multiMax(3, 1, 2, 3) == 9,
          "3*3=9 (First arg, by largest.)");
  </script>
</body>
</html>

剩余参数 省略号 …

发表于 | 阅读次数:
字数统计: 133 | 阅读时长 ≈ 1 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html>
<head>
  <title>Storing a collection of unique functions</title>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="../assert.css">
  <script src="../assert.js"></script>
</head>
<body>
  <script>
    var store = {
      nextId: 1,
      cache: {},
      add: function(fn) {
        if (!fn.id) {
          fn.id = this.nextId++;
          this.cache[fn.id] = fn;
          return true;
        }
      }
    };

    function ninja(){}

    assert(store.add(ninja),
           "Function was safely added.");
    assert(!store.add(ninja),
           "But it was only added once.");
  </script>
</body>

</html>

发表于 | 阅读次数:
字数统计: 180 | 阅读时长 ≈ 1 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
<html>
  <head>
    <title>Registering event handlers</title>
    <style>
      #first { color: green;}
      #second { color: red;}
    </style>
  </head>
  <body>
    <ul id="first"></ul>

    <script>
      function addMessage(element, message){
        var messageElement = document.createElement("li");
        messageElement.textContent = message;
        element.appendChild(messageElement);
      }

      var first = document.getElementById("first");
      addMessage(first, "Page loading");
    </script>

    <ul id="second"></ul>

    <script>
      document.body.addEventListener("mousemove", function() {	//#A
        var second = document.getElementById("second");
        addMessage(second, "Event: mousemove");
      });

      document.body.addEventListener("click", function(){		   //#B
        var second = document.getElementById("second");
        addMessage(second, "Event: click");
      });
    </script>
  </body>
</html>

以上三个是页面构建的过程中 展示的部分测试代码