js中this指向问题

普通函数中

this指向window

<script type="text/javascript">
    function demo() {
        //window
        console.log(this);
     }
     demo();
</script>

事件函数中

this指向触发事件的对象

        <script type="text/javascript">
            function f1() {
                console.log(this)
            }
            document.getElementById("div").onclick = f1;
            document.getElementById("div").onclick = function() {
                console.log(this);
            }
            
        </script>

构造函数中

this 指向实例化之后的那个对象

function Person() {
    this.age = 10;
    console.log(this)
}
var obj = new Person;

对象方法中

当前方法被哪个对象调用，this就指向哪个对象

var obj = {
 "age": 30,
 "say": function() {
     console.log(this)
  }
}
obj.say();//this指向obj


var obj2 = {
 "age": 40,
 "say": obj.say
}
obj2.say();//this指向obj2

html标签中

如果this在html标签中，则this指向标签本身

//点击图片改变图片的src
<img src="images/b1.png" onclick="this.src = 'images/b2.png'" >
<input type="button" name="button" id="button" value="button" onclick="f6(this)" />
<script type="text/javascript">
    function f6(obj) {
        //obj 指向标签本身
        console.log(obj);
    }
</script>

this注意事项

链式调用（连贯调用），看方法调用的前面的那个值

    var obj = {
        "age":40,
        "son":{"age":20,"say":function(){console.log(this);}}
    };
    obj.son.say();

函数嵌套，如果函数是普通调用，this都是window

    function f7(){
        console.log(this);
        function f8(){
            console.log(this);
        }
        f8();
    }
    f7();

对象方法中，还有嵌套的函数或者其他对象的方法，在内层想要使用外层的this，需要重新声明一个变量，保存外层的this

var obj1 = {
        "age":30,
        "say":function(){
            console.log(this);
            //如果要在obj2中，使用obj1的this
            var that = this;
            // var _this = this;
            var obj2 = {
                "walk":function(){
                    console.log(this);
                    //想要输出 obj1.age
                    //如果不能直接使用obj1的话
                    // console.log(obj1.age);
                    console.log(that.age);
                }
            }
            obj2.walk();
        }
    };
    obj1.say();

改变函数中的this指向

函数.apply()方法
函数.call()方法
函数.bind()方法
以上三个都可以改变this的指向

假设有以下函数fn

function fn(m, n){
    console.log(this, m, n);
}
fn(3,6);//打印window,3,6

函数.apply(对象,[参数1,参数2])方法
改变函数内部的this指向，然后调用函数

var obj = {"age":30};
fn.apply(obj, [8, 9]);//打印obj，8，9

函数.call(对象,参数1,参数2)方法和.apply只有传参的区别，.apply传参数数组，.call依次传递参数
改变函数内部的this指向，然后调用函数

fn.call(obj, 8, 9);//打印obj,8,9

函数.bind(对象,参数1,参数2)方法
改变函数内部的this指向，然后返回新函数,不调用需要手动调用

fn.bind(obj, 8, 9);//默认不调用
fn.bind(obj, 8, 9)();
fn.bind(obj)(8,9);