call apply bind 改变this指向的三种方式的异同

改变this指向三种方法1,call方法//1,call()let o = {name: 'red',}function fn(a, b) {console.log(this);console.log(a + b);}fn.call(o, 1, 2) //调用函数,改变this指向, 最前面的参数是改变的this指向,后面的是传递参数

莫尔道嘎老范

254人浏览 · 2020-08-14 22:40:33

莫尔道嘎老范 · 2020-08-14 22:40:33 发布

改变this指向三种方法

1,call方法

 //1,call()
        let o = {
            name: 'red',
        }

        function fn(a, b) {
            console.log(this);
            console.log(a + b);
        }
        fn.call(o, 1, 2) //调用函数,改变this指向, 最前面的参数是改变的this指向,后面的是传递参数
        //call的主要作用可以实现继承
        function Father(uname, sex, age) {
            this.uname = uname;
            this.sex = sex;
            this.age = age;
        }

        function Son(uname, sex, age) {
            Father.call(this, uname, sex, age) //this修改为指向Son
        }
        let son = new Son('张三', '男', 12)
        console.log(son);

2,apply方法

//2,apply
        let o = {
            name: 'red',
        }

        function fn(arr) {
            console.log(this);
            console.log(arr);
        }
        fn.apply(o, ['1234']);
        //1,第二个参数必须是数组
        //2,但是打印出来的是字符串
        //3,apply的主要应用  利用apply借助数学内置对象求最大值
        // Math.max();
        let arr = [1, 42, 5212, 43, 5634, 332, 329];
        let max = Math.max.apply(Math, arr);
        console.log(max);

        function num(arr, flag) {
            return flag ? Math.max.apply(Math, arr) : Math.min.apply(Math, arr);
        }
        console.log(num([1, 4, 6, 3, 2], true));

3.bind方法(不调用)

<body>
    <button>点击</button>
    <button>点击</button>
    <button>点击</button>
    <script>
        let btns = document.querySelectorAll('button');
        for (let i = 0; i < btns.length; i++) {
            btns[i].onclick = function () {
                this.disabled = true;
                setTimeout(function () {
                    this.disabled = false;
                }.bind(this), 2000) //仅仅改变了this的指向而不调用函数
            }
        }
    </script>
</body>