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>

    输出

  • 相关阅读:
    Python·Jupyter Notebook
    CNN(卷积神经网络)、RNN(循环神经网络)、DNN(深度神经网络)概念区分理解
    tensorflow学习
    语料库
    资源 | 数十种TensorFlow实现案例汇集:代码+笔记
    Tensorlayer
    利用 TFLearn 快速搭建经典深度学习模型
    十分钟搞定pandas
    利用python进行数据分析之pandas入门
    Pandas
  • 原文地址:https://www.cnblogs.com/hzb462606/p/11491812.html
Copyright © 2011-2022 走看看