JavaScript this

一、this是谁

1. 作为普通函数调用/自执行，this在全局/自执行（函数名()）时，this指向window，实际上并不是指向了window，而是指向了null，被解释成了window。
2. 使用"use strict"开启严格模式，在es5的严格模式下，自执行，this指向undefined。

function fn(){
    this.xx = 123;
}
fn();
console.log(window.xx); //污染了全局

"use strict";
function fn(){
    console.log(this); //undefined
}
fn();

//不管在任何地方，函数自执行，this指向window

var fn2 = function(){ //fn2 是变量名
    console.log(this); //window
}
fn2();

document.onclick = function(){ //document 对象
    (function(){
        console.log(this); //window
    })()
}

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

3. 作为对象的方法来调用的时候，this指向的是调用那一瞬间的调用者，即调用对象。不管函数声明时，this属于谁。

var bark = 'hahaha';
var dog = {name:'xiaohua',bark:"wangwang"};
var show = function(){
    alert(this.bark);
}
var cat = {bark:'miaomiao'};
dog.t = show;
cat.t = dog.t;
console.log(cat);
cat.t();//miaomiao
(cat.t = dog.t)();//赋值操作的返回值 是等号右边，hahaha
(dog.t)() //等价于 (dog.t())，wangwang
console.log(cat.t = dog.t);

function fn1(){
    function fn2(){
        console.log(this.bark);
    }
    fn2();
}
dog.t = show;
console.log(dog);
dog.t(); //wangwang
dog.fn1= function(){
    (function(){
        console.log(this.bark); //hahaha
    })();
};
dog.fn1()

var name = "The window";
var obj = {
    name:"my name",
    getNameFunc:function(){
        return function(){
            return this.name;
        }
    }
}
console.log(obj.getNameFunc()()); //The window

4. 作为构造函数调用时，js中没有类的概念，创建对象是用构造函数来完成的，或者直接用{}来写对象。

function Dog(name, age){
    this.name = name;
    this.age = age;
    this.bark = function(){
        alert(this.name);
    }
}
var dog = new Dog("虎子", 2);
dog.bark();
/*
new Dog 发生了以下几个步骤
1. 系统创建空对象{}，空对象constructor属性指向Dog函数
2. 把函数的this指向该空对象
3. 执行该函数
4. 返回该函数
*/

function Pig(){
    this.age = 99;
    return "abc";
}
var pig = new Pig(); //Pig对象，因为函数作为构造函数运行时，return的值是忽略的，还是返回对象
console.log(pig);

5. call、apply、bind可以改变this指向。

二、call、apply

1. call和apply都是在函数执行时，扭转this指向
2. call：语法格式，函数.call(对象,参数1,参数2......);
3. apply：语法格式，函数.apply(对象,[参数1,参数2.......]);

function t(num){
    console.log('我的真实年龄是' + this.age);
    console.log('但我一般告诉别人' + (this.age-num));
}

var lily = {name:'lily',age:20};

// lily.t = t; //不符合封装性 添加了额外的属性
// lily.t(2);

t.call(lily,2); //在执行的时候 把自身的this 指向了lily
console.log(lily);

var obj = {};
function a(x,y){
    console.log(x+y);
    console.log(this);
}

a.apply(obj,[3,4]);
a.call(obj,3,4); 

box.onclick = function(){
    console.log(this);//此时指代box的this 
    fn.call(this,100,200); //扭转指向 到 fn当中的this
};
wrap.onclick = fn;
function fn(x,y){
    console.log(this);
    this.style.width = x + 'px';
    this.style.height = y + 'px';
}

function a(x,y){
    console.log(this);
}
a.call();//指向window
a.call(100); //指向Number
a.call('haha'); //String 
a.call(true); //Boolean 
a.call(null); //window
a.call(this); //window
a.call([1,2,3]); //数组

三、bind

1. 写在函数（不是声明）表达式中，不立即执行，扭转this指向。
2. 传参：在表达式中传参，类似于call；在执行时传参，但失去了本身的意义。

document.onclick  = function(){
    onsole.log(this); //window
}.bind(window);

var a = function(x,y){
    console.log(x+y);
    console.log(this);
}.bind(document,10,20);
a();

var a = function(x,y){
    console.log(x+y);
    console.log(this);
}.bind(document)(10,1);