5.27 this指向

this：函数运行时，自动生成的一个内部的对象，只能在函数内部作用，this的值会随时改变
谁调用，this指向谁
没有调用者，this指向window
匿名函数或不处于任何对象中的函数指向 window

简单函数

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

this指向window

严格模式下，函数指向undefined

function test()
{ 
   "use strict"; //严格模式 
   console.log(this) //undefined 
}; 
test()

内置函数

setTimeout,setInterval
this指向window

回调函数

回调函数：一个函数被作为参数传递给另外一个函数，this指向window

function f1() {
   console.log(this);
}
function fun(f1,n);
fun(f1,1)//window

数组

function f1() {
  console.log(this);
}
var arr = [f1,122,33];
arr[0]();//arr

数组调用则指向数组
obj.name || obj[‘name’]

对象

var obj = {}
obj.a = 3;
obj.fun = function() {
  return this.a;
}
console.log(obj.fun())//3

var age = 18;
var obj = {
  age: 12,
  getData: function() {
    console.log(this.age); 
    var fn = function() {
       console.log(this.age)
   }
   return fn();
 }
}
var f = obj.getData;
f(); // 12 12  f是普通函数，this指向window
obj.getData();12 18 //getData中的this指向obj，obj调用，但是fn相当于普通函数，this指向window 

对象调用，所以this指向对象

构造函数

function Fun(name,age) {
  this.name = name;
  this.age = age;
}
var fun = new Fun('zs',18);
console.log(fun.name);//zs

当使用new，创建一个实例时，this指向实例，而不是构造函数本身
当不使用new时，Fun只是一个普通的函数，this指向window

自执行函数

var num = 2
var obj = {
  num:1,
  action: function() {
    console.log(this.num);//1
    (function() {
     console.log(this.num);//2 window
    })()
  }
}

自执行函数的this指向window

改变this的指向

apply,call,bind
apply() 方法接收两个参数: 第一个是要设置为 this 的那个对象, 第二个参数是可选的，如果要传入参 数, 则封装为数组作为 apply() 的第二个参数即可。
call() 方法 和 apply() 基本上是一样的, 除了后面的参数不是数组， 而是分散开一个一个地附加在后 面

bind也是分散的传参数，但是bind绑定后，就不能在改变this的指向
bind不执行该函数，并返回一个绑定this后的新函数，而call和apply会执行该函数

var num = 10;
function test() {
   return this.num;
}
var obj = {
   num:5,
   fun:test
}
console.log(obj.fun.call(this));//这里的this是window  10
var x = obj.fun.bind(obj);
console.log(x())//5
console.log(x.apply(this));//5 通过bind绑定后，不能在改变this指向

arguments

测试题： 
var length = 100; 
function f1() { 
console.log( this.length ) //this指向window  100
}
var obj = {
  x: 10, 
  f2: function( f1 ){
    f1(); // 10
     arguments[0](); //this指向 arguments 传入两个参数  2
  } 
}
  obj.f2(f1,1);

冒泡

从下往上，点击子元素，会触发父元素的事件
阻止冒泡： e.stopPropagation();

e.target与e.currentTarget的区别
e.target: 谁触发的指向谁 返回的是元素
e.currentTarget: 谁绑定的事件指向谁 返回的是元素

html的结构：

var div1 = document.querySelector('.div1');
    var div2 = document.querySelector('.div2');
    div1.onclick = function (e) {
        console.log('div1');
        console.log(e.target);
        console.log(e.currentTarget);
    }
    div2.onclick = function (e) {
        console.log('div2');
    }

点击div2，通过冒泡会触发div1的点击事件 e.target的返回值是
div2(触发的元素), 而e.currentTarget的返回值是
div1div2（绑定的元素）

事件委托

    ul.onclick = function (e) {
        // 通过e.target可以获取触发当前事件的元素
        e.target.style.color = 'red';    
    }

注意：通过getElementByTagName返回的不是数组，而是一个包含元素节点的集合，可以通过for循环拿到值，但是不能调用数组的方法