04-函数进阶

一、函数的定义

    <script>
        //函数的定义方式

        //1.自定义函数
        function fn() {

        }

        //2.函数表达式(匿名函数)
        var fun = function() {

        }

        //3.利用new Function('参数1','参数2','函数体')
        var f = new Function('a', 'b', 'console.log(a+b)')
        f(1, 2) //3
        console.log(f.__proto__ === Function.prototype);//true
        console.log(Function.constructor);//ƒ Function() { [native code] }
        //所有函数都是Function的实例(对象) 
    </script>

二、函数的调用方式

    <script>
        //1.普通函数
        function fn() {
            console.log('人生的巅峰');
        }
        //fn(); fn.call()

        //2.对象的方法
        var o = {
            sayHi: function() {
                console.log('666');
            }
        }
        o.sayHi()

        //3.构造函数
        function Star() {}
        new Star()

        //4.绑定事件函数
        btn.onclick = function() {

        }

        //5.定时器函数
        setInterval(function() {}, 1000)

        //6.立即执行函数
        (function() {
            console.log('555');
        })()
        //立即执行函数是自动调用

三、函数内部this指向

    <button>1</button>
    <script>
        //1.普通函数
        function fn() {
            console.log('普通函数');
        }
        window.fn()
            //fn(); fn.call()

        //2.对象的方法
        var o = {
            sayHi: function() {
                console.log(this + '666');
            }
        }
        o.sayHi()

        //3.构造函数 this指向ldh这个实例对象 原型对象里面的this 指向的也是实例对象
        function Star() {
            console.log(this);
        }
        Star.prototype.sing = function() {}
        var ldh = new Star()

        //4.绑定事件函数 this指向的是函数的调用者 btn这个按钮对象
        var btn = document.querySelector('button')
        btn.onclick = function() {
            console.log('绑定时间函数的this' + this);
        }

        //5.定时器函数 this指向的是window
        setTimeout(function() {
            console.log(this);
        }, 1000);

        //6.立即执行函数 this指向window
        (function() {
            console.log('立即执行函数' + this);
        })()
        //立即执行函数是自动调用
    </script>

四、改变函数内this指向

    <button>点击发送</button>
    <button>点击发送</button>
    <button>点击发送</button>
    <!-- call方法 -->
    <!-- <script>
        //改变函数内部 this指向 js提供了三种方法 call() apply() bind()
        //1.call()
        var o = {
            name: 'andy'
        }

        function fn(a, b) {
            console.log(this);
            console.log(a + b);
        }
        fn.call(o, 1, 2)

        //1.可以调用函数 2.可以改变函数内的this指向
        //call()的主要作用可以用来继承
        function Father(name, age, sex) {
            this.name = name;
            this.age = age;
            this.sex = sex;
        }

        function Son(name, age, sex) {
            Father.call(this, name, age, sex)
        }
        var son = new Son('刘德华', 18, '男')
        console.log(son);
    </script> -->

    <!-- apply方法 -->
    <!-- <script>
        var o = {
            name: 'andy'
        }

        function fn(arr) {
            console.log(this + arr)
        }
        fn.apply(o, ['pink'])

        //1.也可以调用函数 第二个也可以改变函数内部的this指向
        //2.但是他的参数必须是数组(伪数组)
        //3.applu的主要应用 可以利用apply借助于数学内置对象求最大值
        var arr = [1, 2, 89, 5]
        var max = Math.max.apply(Math, arr)
        var min = Math.min.apply(Math, arr)
        console.log(max);
        console.log(min);
    </script> -->

    <!-- bind方法  绑定 捆绑-->
    <script>
        var o = {
            name: 'andy'
        }

        function fn(a, b) {
            console.log(this);
            console.log(a + b);
        }
        var f = fn.bind(o, 1, 2);
        f()

        //1.不会调用原来的函数 可以改变原来函数内部的this指向
        //2.返回的是原函数改变this之后产生的新函数
        //3.如果有的函数我们不需要立即调用 但是又想改变这个函数内部的this指向 此时用bind
        //4.我们有一个按钮 当我们点击了之后 就禁用这个按钮 3秒钟之后开启这个按钮

        // var btn = document.querySelector('button')
        // btn.onclick = function() {
        //     this.disabled = true; //this指向的是btn
        //     setTimeout(function() {
        //         this.disabled = false; //this指向的是window
        //     }.bind(this), 3000)
        // }

        var btns = document.getElementsByTagName('button')
        for (var i = 0; i < btns.length; i++) {
            btns[i].onclick = function() {
                this.disabled = true;
                setTimeout(function() {
                    this.disabled = false;
                    console.log('666');
                }.bind(this), 1000)
            }
        }
    </script>

    <!-- 总结
        相同点：
            都可以改变函数内部的this指向
        区别:
            1.call和apply都会调用函数 并且改变函数内部this指向
            2.call和apply传递的参数不一样 call传递参数aru1,aru2形式 apply必须数组形式[arg]
            3.bind不会调用函数 可以改变函数内部this指向
        主要应用场景:
            1.call经常继承
            2.apply经常跟数组有关系,比如借助于数学对象实现数组最大值和最小值
            3.bind不调用函数 但是还想改变this指向 比如改变定时器内部的this指向       
  -->