JavaScript函数中的this四种绑定形式

this的默认绑定、隐式绑定、显示绑定、new绑定

<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>

 

 

 

输出

 

转载于:https://www.cnblogs.com/hzb462606/p/11491812.html