改变函数内this指向,js提供了三种方法

<body>

    <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);

        // call 第一个可以调用函数 第二个可以改变函数内的this 指向

        // call 的主要作用可以实现继承

        function Father(uname, age, sex) {

            this.uname = uname;

            this.age = age;

            this.sex = sex;

        }

        function Son(uname, age, sex) {

            Father.call(this, uname, age, sex);

        }

        var son = new Son('二狗子', 18, '男');

        console.log(son);

    </script>

</body>

<body>

    <script>

        // 改变函数内this指向  js提供了三种方法  call()  apply()  bind()

        // 2. apply()  应用 运用的意思

        var o = {

            name: 'andy'

        };

        function fn(arr) {

            console.log(this);

            console.log(arr); // 'pink'

        };

        fn.apply(o, ['pink']);

        // 1. 也是调用函数 第二个可以改变函数内部的this指向

        // 2. 但是他的参数必须是数组(伪数组)

        // 3. apply 的主要应用 比如说我们可以利用 apply 借助于数学内置对象求数组最大值

        // Math.max();

        var arr = [1, 66, 3, 99, 4];

        var arr1 = ['red', 'pink'];

        // var max = Math.max.apply(null, arr);

        var max = Math.max.apply(Math, arr);

        var min = Math.min.apply(Math, arr);

        console.log(max, min);

    </script>

</body>

<body>

    <button>点击</button>

    <button>点击</button>

    <button>点击</button>

    <script>

        // 改变函数内this指向  js提供了三种方法  call()  apply()  bind()

        // 3. bind()  绑定 捆绑的意思

        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 btn1 = document.querySelector('button');

        // btn1.onclick = function() {

        //     this.disabled = true; // 这个this 指向的是 btn 这个按钮

        //     // var that = this;

        //     setTimeout(function() {

        //         // that.disabled = false; // 定时器函数里面的this 指向的是window

        //         this.disabled = false; // 此时定时器函数里面的this 指向的是btn

        //     }.bind(this), 3000); // 这个this 指向的是btn 这个对象

        // }

        var btns = document.querySelectorAll('button');

        for (var i = 0; i < btns.length; i++) {

            btns[i].onclick = function() {

                this.disabled = true;

                setTimeout(function() {

                    this.disabled = false;

                }.bind(this), 2000);

            }

        }

    </script>

</body>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值