zoukankan      html  css  js  c++  java
  • 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>

    输出

  • 相关阅读:
    .a包生成64位
    iOS教程
    iOS 难题解决日志------2层控制器 上面的控制器显示透明
    企业级的App发布流程
    如何从oc中去获取一个私有的变量.....
    iOS app的破解原理,就是去除已付费的账户信息的原理是什么?
    Could not launch "app_name"
    GCD时间轴
    Win8自动更新怎么关闭 取消Win8自动更新
    python3 elf文件解析
  • 原文地址:https://www.cnblogs.com/hzb462606/p/11491812.html
Copyright © 2011-2022 走看看