• 函数的四种调用模式


    函数调用

    <!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()//方法调用



  • 相关阅读:
    J Identical Trees(求俩个树转化所需的最小代价,hash判同构,费用流求转移代价)
    I Tournament(俩人一组,构造最少排队总时间)
    D
    purfer序列(有关度数与生成树个数情况)
    博客园自定义样式
    莫比乌斯知识点整理
    随笔日记
    牛客小白月赛16
    Codeforces Round #555 (Div. 3)
    Codeforces Round #553 (Div. 2)
  • 原文地址:https://www.cnblogs.com/guangzhou11/p/9116311.html
Copyright © 2020-2023  润新知