函数中的this指向问题

函数中的this指向问题

普通函数

• 1.普通函数（this指向window）

function fn() {
            console.log(this);
        }
        // fn();
        fn.call();

对象的方法

• 对象的方法（this指向o这个对象）

  var o = {
            sayHi: function() {
                console.log(this);
            }

        }
        o.sayHi();

构造函数

• 3.构造函数（this指向ldh这个实例对象，构造函数原型的this也指向这个实例对象）

 function Star() {
            console.log(this);
        }
      var ldh = new Star();

绑定事件函数

• 4.绑定事件函数（this指向btn这个按钮对象）

btn.onclick = function() {}

定时器函数

• 5.定时器函数（this指向window）

 setInterval(function() {
            console.log(this);
        }, 1000);

立即执行函数

• 6.立即执行函数（this指向window）

 (function() {
            console.log("立即执行函数");
        })()

改变this指向的方法（call/apply/bind）

call

  // 1.call() 
        // 第一个参数改变this指向，第二个正常形参，还可以调用函数
        var o = {
            name: "yzx",

        }

        function fn(a, b) {
            console.log(this);
            console.log(a + b);

        }
        fn.call(o, 1, 2);

        // call（）还可以实现继承
        function Father(uname, age, sex) {
            this.uname = name;
            this.age = age;
            this.sex = sex;
        }

        function Son(uname, age, sex) {
            Father.call(this, uname, age, sex);
        }
        var son = new Son("xxx", 18, 'male');
        console.log(son);

apply

  // 2.apply()可以调用参数，也可以改变this指向，只是传的参数必须是数组（伪数组）
        var o = {
            name: "yzx",

        }

        function fn(arr) {
            console.log(this);
            console.log(arr); //打印出的是字符串

        }
        fn.apply(o, ['yzx']);
        // apply的应用（数组中没有求最大值的方法，但是数学中有，所以可以利用apply把数学中的方法应用到数组中）
        // apply拿到的是数组，返回值是数组里面的值的类型
        arr1 = [1, 22, 6, 33, 9];
        var max = Math.max.apply(null, arr1);
        var min = Math.min.apply(null, arr1);
        console.log(max, min);

bind

 // 3.bind
        // 不会调用函数，但是可以改变函数的指向,返回的是原函数改变this之后的新函数
        var o = {
            name: "yzx",

        }

        function fn() {
            console.log(this);

        }
        var f = fn.bind(o);
        f();

bind方法的应用

 // 4.bind的应用（点击禁用按钮3秒）
        var btn = document.querySelector('button');
        btn.onclick = function() {
            this.disabled = true; //this指向btn
            setTimeout(function() {
                    this.disabled = false; //this指向window
                }.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; //this指向btns
                setTimeout(function() {
                        this.disabled = false;
                    }.bind(this), 3000) //this在定时器函数外所以指向btns

            }

        }