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>

    输出

  • 相关阅读:
    关于selenium无法在chrome中自动播放flash的问题
    网鼎杯题目“phone”--十六进制mysql注入
    (转)宽字节编码类型的XSS
    为什么在留言处插入<script>alert(1)</script>不弹框
    同源策略和跨域的理解
    (转)调皮的location.href
    (转)GET来的漏洞
    WEB应用安全设计思想.pdf
    Browser Security-超文本标记语言(HTML)
    大家来聊聊如何PASS 360
  • 原文地址:https://www.cnblogs.com/hzb462606/p/11491812.html
Copyright © 2011-2022 走看看