this的指向和修改this指向

this指向

this：谁调用就指向谁 XX.函数名(); 认准 点 和 小括号

一、函数的调用方式决定了 this 的指向不同：
1.普通函数调用

function f1() {
       console.log(this);   指向 window
     }
     f1();  

2.对象方法调用
因为obj调用fn,所以 this指向obj,所以结果为10

var obj = {
	a :10,
	b :0
	f1: function () {
			a :8;
	         console.log(this.a); // 10
	       }
}
obj.f1();

3.构造函数调用

 function Person(age, name) {
         this.age = age;
         this.name = name
         console.log(this)  // 此处 this 分别指向 Person 的实例对象 p1 p2
         
		打印出两个对象 (实例对象)
		Person {age: 20, name: "张三"}
		Person {age: 23, name: "李四"}
     }
    var p1 = new Person(18, '张三')
    var p2 = new Person(18, '李四')

4…通过事件绑定的方法， 此时 this 指向 绑定事件的对象

	<button id="btn">hh</button>
	
    var oBtn = document.getElementById("btn");
    oBtn.onclick = function() {
        console.log(this);     // btn
    }

5…定时器函数
定时器里的this，总是指向window

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

修改this方法指向

call、apply、bind三者为改变this指向的方法。

共同点：第一个参数都为改变this的指针。若第一参数为null/undefined，this默认指向window

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

apply（：）

第一个参数：改变this指向
第二个参数：数组（里面为实参）
使用时候会自动执行函数

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

bind():
第一个参数：改变this指向
第二个参数之后：实参
返回值为一个新的函数
使用的时候需要手动调用下返回 的新函数（不会自动执行）

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

call、apply与bind区别：前两个可以自动执行，bind不会自动执行，需要手动调用
call、bind与apply区别：前两个都有无数个参数，apply只有两个参数，而且第二个参数为数组

js事件绑定和普通事件有什么区别

事件绑定bai相当于在一个元素上进行监听，监du听事件是否触发
普通事件就是直接触发事件。

普通添加事件的方法不支持添加多个事件，最下面的事件会覆盖上面的
事件绑定（addEventListener）方式添加事件可以添加多个。

区别就在于：是否可重复使用。

用普通方法添加两个事件

  <button id="btn">button</button>
  
    <script type="text/javascript">
        var myBtn=document.getElementById("btn");
        
        myBtn.onclick=function  () {
            alert('普通事件1');//被覆盖
        }
        myBtn.onclick=function  () {
            alert('普通事件2');//弹出
        }

用事件绑定添加两个事件。

 
        addEvent(myBtn,'click',function  () {
            alert('事件绑定1');//弹出
        },false)
        addEvent(myBtn,'click',function  () {
            alert('事件绑定1');//弹出
        },false)
        function addEvent(ele,name,fn){
           if(ele.attachEvent){
             ele.attachEvent("on"+name,fn);   ie9以下
           }else{
             ele.addEventListener(name,fn);    ie9以上
           }
        }