彻底弄懂js中的this关键字

一.什么是this
this是指包含它的函数作为方法被调用时所属的对象。这句话理解起来感觉还是很拗口的，但是如果你把它拆分开来变成这三句话后就好理解一点了。

1.包含它的函数

2.作为方法被调用时

3.所属的对象
举例1

 function getName(){
     console.log(this); //window
 }
getName()

所以可以理解谁最后调用了我，我就是谁的对象，因为window可以省略，所以结果就是window
举例2

var obj={
    a:"哈哈哈",
    b:function(){
        var a="嘿嘿嘿";
        console.log(this.a); //哈哈哈
    }
};
obj.b();

在这里调用者是 obj, 所以this指向的是 obj ，最后调用的对象
举例3

var obj = {
    a:10,
    b:{
        fn:function(){
            console.log(this.a); //undefined
        }
    }
};
obj.b.fn();

此时，我们看到，输出的值是undefined，也就是说，这个时候this指向的是b的作用域，而b中没有定义a,所以输出的是undefined

举例4
var obj = {
    a: 1,
    b: {
        a: 2,
        fn: function() {
            console.log(this) // window
            console.log(this.a) // undefined
        } 
    }
}
var tm = obj.b.fn
tm()

这个var tm = obj.b.fn只是进行了赋值，把 fn赋值给了全局变量 tm ，然而最终的调用时机是在 window作用域调用的函数 tm(), 所以 this的指向是window对象。
举例5
可能还会遇到这种情况

<div class="box">
    <button type="button" id="btn">我是一个按钮</button>
</div>
<script>
    var btn=document.getElementById("btn");
    btn.οnclick=function(){
        console.log(this);//btn标签  
    }
</script>

二.改变this指向的方法
<meta charset="utf-8">

1.call

有若干个参数。
第一个参数是this指向（写什么是什么）；
第二个参数及以后，是写什么是什么。

function fn(a,b,c){
        console.log(this,a+b+c); // this指向window
    }
    fn();
    fn.call(document,1,2,3);//call改变之后this指向document  
    //输出 #document 6   1,2,3是实参 结果相加为6

2.apply

有两个参数。
第一个参数是this指向（写什么是什么）；
第二个参数：数组[ ]，数组中放的就是实参。

function fn(a,b,c){
        console.log(this,a+b+c); 
    }
    fn();
    fn.apply(document,[1,2,3]);

3.bind

返回值为一个修改完this的函数，需要主动调用。
也有若干个参数。
第一个参数是this指向（写什么是什么）；
第二个参数以后，指向实参。

function fn(a,b,c){
    console.log(this,a+b+c); //window
}
fn.bind('小明',1,2,3)(); //手动调用一下

如有错，欢迎指正

最后编辑于：2019.10.30 16:59:57