• 函数的四种调用模式


    函数调用

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>
        
    </body>
    <script>
      //函数调用    
      // 函数内部的this指向window
        var age=18;
        var p={
            age:15,
            say:function(){
                console.log(this.age);
            }
        }
        var f1=p.say;   //f1是函数
        f1();   //函数调用-->this:window       -->this.age=18
       
     </script>
    </html>
    

      this 的含义:函数内部的this指向window

    上下文调用bind:

    this 的含义:执行了bind方法之后,产生了一个新函数,这个新函数里面的逻辑和原来还是一样的,唯一的不同是this指向

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>调用</title>
    </head>
    <body>
    
        <script>
           function speed() {
               console.log(this.seconds);
           }
           var  speedBind=speed.bind({seconds:100});
           speedBind();
        </script>
    
    
    </body>
    </html>
    

      

    this.seconds 为100,this指向{ seconds:100 }



    上下文调用
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>
        
    </body>
    <script>
        //上下文调用方式,有3种,call、apply、bind
        function f1(){
            console.log(this);
        }
        //call方法的第一个参数决定了函数内部的this的值
        f1.call([1,3,5])
        f1.call({age:20,height:1000})
        f1.call(1)      
        f1.call("abc")
        f1.call(true);
        f1.call(null)
        f1.call(undefined);
    
        //上述代码可以用apply完全替换
    
        //总结:
        //call方法的第一个参数:
        //1、如果是一个对象类型,那么函数内部的this指向该对象
        //2、如果是undefined、null,那么函数内部的this指向window
        //3、如果是数字-->this:对应的Number构造函数的实例
        //      -->   1   --> new Number(1)
        //  如果是字符串-->this:String构造函数的实例
        //      --> "abc"   --> new String("abc")
        //  如果是布尔值-->this:Boolean构造函数的实例
        //      --> false   --> new Boolean(false)
    </script>
    </html>
    
    
    总结:
        //call方法的第一个参数:
        //1、如果是一个对象类型,那么函数内部的this指向该对象
        //2、如果是undefined、null,那么函数内部的this指向window
        //3、如果是数字-->this:对应的Number构造函数的实例
        //      -->   1   --> new Number(1)
        //  如果是字符串-->this:String构造函数的实例
        //      --> "abc"   --> new String("abc")
        //  如果是布尔值-->this:Boolean构造函数的实例
        //      --> false   --> new Boolean(false)





    new调用(构造函数)

    var age=18;
        var p={
            age:15
            say:function(){
                //this:say构造函数的实例,实例中并没有age属性,值为:undefined
                console.log(this.age);
            }
        }
        new p.say()//构造函数调用
        //相当于:
        var s1=p.say;
        new s1();
     

    方法调用

    var age=18;
        var p={
            age:15
            say:function(){
                console.log(this.age);//this:p
                //this.age->p.age:15
            }
        }
        p.say()//方法调用



  • 相关阅读:
    数组中[::-1]或[::-n]的区别,如三维数组[:,::-1,:]
    类中__iter__与__next__的说明
    LoadRunner 事务响应时间的组成
    LoadRunner 中调用c函数生成随机字符串
    LoadRunner系列之—-02 基于webservice协议的接口测试(脚本实例)
    java 生成压测数据
    java实现从报文中获取投保单号
    接口测试怎么做
    LoadRunner中存储表格参数------关联数组
    视频录制软件&远程支持软件
  • 原文地址:https://www.cnblogs.com/guangzhou11/p/9116311.html
Copyright © 2020-2023  润新知