JavaScript中的this，call，apply区分理解

this: this是JavaScript的一大难点，开发过程中，总是很头疼；this这个东西很复杂，简单地说this是JavaScript的一个关键字。它代表函数运行时，自动生成的一个内部对象，只能在函数内部使用。随着函数使用场合的不同，this值会发生变化。
this一般会有四种调用方式：

1. 默认绑定：实际就是把函数独立去调用，这种情况下，作用域是全局的，也就是这个this代表的就是window对象。

function fn() {
    console.log(this.name);
}
var name = "Tom";
fn(); 
//输出：Tom

2. 隐式绑定：最常见的Obj.func()的形式，这种情况下，this指向obj，也就是指向函数function的上下文对象

var name = "out";
var obj = {
    name: "int",
    getName: function() {
        console.log(this.name);
    }
}

obj.getName(); 
//输出：int

4. 显式绑定：通过api来显示的改变函数的上下文，最常见的就是call,apply和bind函数，显示绑定优先级高于隐式绑定，显示绑定可以改变隐式绑定的上下文对象

var name = "Amy";
var fn = function() {
    console.log(this.name);
}
fn(); //输出：Amy
fn.call({
    name: "Tom"
}); //输出：Tom
---------------------------
function foo(something){
    console.log( this.a, something );
    return this.a + something;
}
var obj = {
    a:2
}
var bar = foo.bind( obj );
var b = bar(3); // 2 3;
console.log(b); // 5

6. 通过new关键字，new过程，实际上就是创建了一个对象，并且把创建好的对象返回给变量的过程。new的优先级是最高的

function foo(a){
    this.a = a;
}
var bar = new foo(2);
console.log(bar.a); // 2
// 其中 new foo(2) 进行的是类似如下的操作
{
    var obj = new Object();
    obj.__proto__ = foo.prototype;
    var result = foo.call(obj,"2");
    return result === 'object' ? result : obj
}

四种绑定例子：（可运行输出；拷贝自：https://www.cnblogs.com/hzb462606/p/11491812.html）

<script>
        //全局变量obj_value
        var obj_value=1;

        //1、window调用
        console.log(`***************************1***************************`)
        function fn(){
            console.log("obj_value",this.obj_value);
        }
        fn();  //输出obj_value=1

        //2、obj对象显式调用
        console.log(`***************************2***************************`)
        var obj={
            obj_value:2,
            fire:function(){
                console.log("obj_value",this.obj_value);
            }
        }
        obj.fire(); //obj对象没有丢失绑定，输出obj_value=2

        //3、obj对象隐式调用
        console.log(`***************************3***************************`)
        function fn_fire(){
            console.log("obj_value",this.obj_value);
        }
        var obj={
            obj_value:2,
            fire:fn_fire //隐式调用外部的function
        }
        obj.fire(); //虽然隐式调用，但是obj对象没有丢失绑定，输出obj_value=2
        
        //4、间接隐式/显示调用obj对象的方法、
        console.log(`***************************4***************************`)
        function fn_fire(){
            console.log("obj_value",this.obj_value);
        }
        var obj={
            obj_value:2,
            fire:fn_fire //隐式调用外部的function
        }
        obj.fire(); //虽然隐式调用，但是obj对象没有丢失绑定，输出obj_value=2
        var other_fire=obj.fire;
        other_fire();//间接调用obj的方法，导致obj对象丢失，重新获取window对象，obj_value=1

        //5、obj对象丢失，使用call、apply、bind重新绑定obj对象,
        //call/apply跟bind的区别是，
        //   call/apply会直接执行函数，bind不执行函数，只返回一个可供执行的函数 
        console.log(`***************************5***************************`)
        function fn_fire(){
            console.log("obj_value",this.obj_value);
        }
        var obj={
            obj_value:2,
            fire:fn_fire //隐式调用外部的function
        }
        var other_fire=obj.fire;
        other_fire();//间接调用obj的方法，导致obj对象丢失，重新获取window对象，obj_value=1
        other_fire.call(obj);//虽然间接绑定，但是使用call绑定了obj对象，obj_value=2
        other_fire.apply(obj);//apply跟call作用一样，obj_value=2
        var bind_fire=other_fire.bind(obj);//使用bind绑定obj对象，返回一个function
        bind_fire();//obj_value=2

        //6、new绑定，this都是指定当前对象
        console.log(`***************************6***************************`)
        var obj={
            fire:function(param1){
                this.obj_value=param1;
            }
        }
        var new_obj=new obj.fire(3); //新建obj.fire()对象，this将是其fire()本身
        console.log("obj_value",new_obj.obj_value)//输出obj_value=3
        console.log("obj_value",this.obj_value)//输出obj_value=1
 </script>