HTML(16-js-函数)

函数

js是一种基于对象的脚本语言，代码复用的范围是函数，函数可以独立存在。
函数的最大作用是提供代码复用，将需要重复使用的代码块定义为函数，提供更好的代码复用

1. 前端编写JS的流程
   
2. 布局：html＋css 在写js之前必须保证有一个稳固的布局，这个布局本身
   不能有任何兼容问题
3. 
   
4. 属性：确定要修改哪些属性 确定通过js修改哪些属性，例如display
5. 
   
6. 事件：确定用户做哪些操作（产品设计）确定要在什么样的事件里修改，比如
   点击、移入移出
7. 
   
8. 编写js：在事件中，用js来修改页面元素的样式
9. 
   

例子

 <div id="div1">原始数据</div>
    <button onclick="ff()" id="btn1">隐藏</button>
    <script>
        function ff() {
            document.getElementById("div1").className = "bb1";
            document.getElementById("btn1").innerText = "显示";
            document.getElementById("btn1").onclick = dd;
        }
        function dd() {
            document.getElementById("div1").className = "bb2";
            document.getElementById("btn1").innerText = "隐藏";
            document.getElementById("btn1").onclick = ff;
        }
    </script>
    <style>
        .bb1 {
            display: none;
        }

        .bb2 {
            display: block;
        }
    </style>

定义函数的3种方式

1.命名函数

 function hello(name){
    alert('欢迎您，'+name+"，你好!");
    }

2.定义匿名函数

定义匿名函数无需指定函数名，而是将参数列表紧跟在function关键字后
匿名函数有很好的可读性。注意js函数很特殊，即使可重复调用的代码块，也是一个Function实例

   <script>
        var f = function (name) {
            document.writeln('匿名函数!<br/>');
            document.writeln('哈哈，' + name);
        };
        f('mhf');

        //语法错误
        /*
        function(){
            alert('ddddd');
        }
        */
    </script>

3.使用Function类匿名函数

  <script>
        var f = new Function('name', "document.writeln('Function定义的函数<br/>');"
            + "document.writeln('你好'+name);");
        f("mhf");
  </script>

三种方法的对比

• 函数声明有预解析，而且函数声明的优先级高于变量
• 使用Function构造函数定义函数的方式是一个函数表达式，这种方式会导致解析两次代码，
  影响性能。第一次解析常规的JavaScript代码，第二次解析传入构造函数的字符串

Js中的函数

函数就像java方法一样，这个函数可以被调用

定义一个函数时，系统也会创建一个对象，这个对象就是Function类的实例

定义一个函数时，这个函数通常都会附加给某个对象，作为对象的方法。没有明
确指出将函数附加到哪个对象上时，该函数将附加到window对象上，作为window对象的方法。

<script>
        function ff1(){
            document.write('ff1()');
        }
        console.log(window);
        window.ff1();
    </script>
    <p>
        定义函数时也得到了一个与函数同名的类，该函数就是该类的唯一的构造器。
        所以实际上函数有直接调用和使用new关键字调用两种方式
    </p>
    <script>
        function Student(){
            alert("Student");
        }
        //Student();直接調用
        new Student(); //將function定義當做構造器使用
    </script>

局部变量和局部函数

• 在函数内部定义的变量称为局部变量，在函数外部定义的变量称为全局变量

• 局部函数是指在函数中定义的函数

例：

 <script>
        function ff3(){
            alert("ff3"+bb); 
            var bb=123;
        }
        ff3();
    </script>
    <script>
        var bb="abcd";
        function ff1(){
            var bb=999;
            alert("ff1"+bb);
        }
        ff1();
    </script>
    <script>
        function ff2(){
            alert("ff2"+bb);
        }
        ff2();
    </script>
    <script>
        function nn1(){
            nn2();
            function nn2(){
                alert("nn2");
            }
            alert("nn1");
        }
        nn1();
        nn2();  //nn2只能在nn1的內部進行調用
    </script>
    <script>
         function nn3(){
            function nn4(){
                alert("nn4");
            }
            return nn4; //允许返回当前function中定义的內部function
        }
        nn3()(); //调用nn4();
    </script>
    <script>
        function outer(){
            function inner(){//局部函数
                document.writeln("内部函数1111<br/>");
            }
            document.writeln("测试局部函数.....开始");
            inner();
            document.writeln("测试局部函数.....结束");
        }
        //在全局函数outer中定义了一个局部函数inner，在outer中调用没有问题，但是在outer之外则无法访问
        outer();
    </script>

调用函数的四种方式

作为一个函数去调用【函数名()】（函数作为全局对象调用，
会使this的值成为全局对象，使用window对象作为一个变量，容易造成程序崩溃！) ，例如alert(’’)

函数作为方法调用：（函数作为对象的方法调用，会使this的值成为对象的本身！），例如window.alert(’’)

使用构造函数调用函数：(构造函数中的this指向当前对象) new Date()

作为函数方法间接调用函数nn3()();

函数直接调用

 <script>
        function ff1() {
            this.name = "abc";
            console.log(this);
        }
        // console.log(this)
        // ff1();
    </script>

对象方法调用

  <script>
        var objList = {
            name: 'methods',
            getSum: function () {
                console.log(this) //objList对象
            }
        }
        objList.getSum()
        console.log(this);
    </script>

构造器调用

 <script>
        function Person() {
            console.log(this); //指向构造函数Person
        }
        var personOne = new Person();
    </script>

间接调用

利用call和apply来实现，this就是call和apply对应的第一个参数， 如果不传值或者第一个值为null、undefined时this指向window

 <script>
        function foo() {
            console.log(sss)
            console.log(this);
        }
        foo.apply('我是apply改变的this值');//我是apply改变的this值
        foo.call('我是call改变的this值');//我是call改变的this值

        function f1() {
            alert("f1.....")
        }
        f1("abcd");
    </script>
    <br />
    <script>
        window.color = 'red';
        document.color = 'yellow';
        var s1 = { color: 'blue' };
        function changeColor() {
            console.log(this.color);
        }
        //通过第一个参数用于指定所调用函数中的this是谁
        //changeColor()
        changeColor.call();         //red (默认传递参数)  
        //window.changeColor();
        changeColor.call(window);   //red
        //document.changeColor();
        changeColor.call(document); //yellow
        //this.changeColor();
        changeColor.call(this);     //red
        //s1.changeColor();
        changeColor.call(s1);       //blue,劫持了函数中的this,使this为s1对象
    </script>

以apply方法调用

call调用函数时必须在括号中详细列出每个参数
apply动态调用函数时，可以在括号中以arguments代表所有的参数

• call和apply用法
  间接调用函数，改变作用域的this值
  劫持其他对象的方法

<script>
        function f9(){
            console.log(this.getYear());
        }
        f9.call(new Date);
    </script>