JS中不同函数内部this的指向和改变this指向的方法

本文章记录的是JS中不同函数内部的this的指向问题以及几种改变this指向的方法，希望可以帮助到大家。

不同函数内部this的指向

1. 普通函数

function fn() {
            console.log('普通函数的this' + this);
        }
        window.fn();

普通函数this的指向为window

2. 立即执行函数

 (function() {
            console.log('立即执行函数的this' + this);
        })();

立即执行函数 this也是指向window

3. 定时器函数

 window.setTimeout(function() {
            console.log('定时器的this:' + this);

        }, 1000);

定时器函数 this 指向的还是window

4. 对象的方法

var star = {
            show: function() {
                console.log('对象方法的this:' + this);
            }
        }
        star.show();

对象的方法this的指向是star

5. 构造函数

function Star() {};
Star.prototype.say = function() {
}
var yy = new Star();

构造函数this指向实例对象，原型对象里面的this指向的也是实例对象

6. 绑定事件函数

var btn = document.querySelector('button');
btn.onclick = function() {
    console.log('绑定事件函数的this：' + this);
}

绑定事件函数this指向的是函数的调用者，即btn这个按钮

改变this指向的方法

• call方法

var star = {
            name: 'Ted'
        }
        function fn(a, b) {
            console.log(this);
            console.log(a + b);
        };
        fn.call(star, 1, 2);
       
        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('yy', 20, '男');
        console.log(son);

1.call 第一可以调用函数，第二可以改变函数内的this 指向
2.call 的主要作用可以实现继承

• apply方法

 var star = {
            name: 'Ted'
        };
        function fn(arr) {
            console.log(this);
            console.log(arr); 
        };
        fn.apply(star, ['yy']);
        var arr = [1, 66, 3, 99, 4];
        var arr1 = ['yy', 'kk'];
        var max = Math.max.apply(Math,arr);
        var min = Math.min.apply(Math,arr);
        console.log(max,min);
        console.log(null,arr1);

1. 第一可以调用函数，第二可以改变函数内部的this指向
   2. 但是他的参数必须是数组(伪数组)
   3. apply 的主要应用 比如说我们可以利用 apply 借助于数学内置对象求数组最大值

• bind方法

var star = {
            name: 'Ted'
        }
        function fn(a, b) {
            console.log(this);
            console.log(a + b);
        };
       var f = fn.bind(star, 1, 2);
       f();
         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 这个对象
         }

1. 不会调用原来的函数，可以改变原来函数内部的this 指向
   2.返回的是原函数改变this之后产生的新函数
   3. 如果有的函数我们不需要立即调用,但是又想改变这个函数内部的this指向此时用bind