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

    输出

  • 相关阅读:
    MATLAB学习1 之画图函数
    innobackupex 出现Unrecognized character x01; marked by
    innobackupex 出现Unrecognized character x01; marked by
    innobackupex 出现Unrecognized character x01; marked by
    innobackupex 出现Unrecognized character x01; marked by
    企业云桌面-03-安装第1个企业 CA-013-CA01
    python 串行执行和并行执行
    cx_Oracle 查询 传参
    运维工程师要失业了?抛开噱头与调侃,闲聊我心中的运维!
    迭代器
  • 原文地址:https://www.cnblogs.com/hzb462606/p/11491812.html
Copyright © 2020-2023  润新知