首页 > 代码库 > 我认知的javascript之函数调用

我认知的javascript之函数调用

2024-10-03 20:46:01   216人阅读

  今天刚好周六没事，又由于工作的原因导致早上醒来就睡不着，无聊之下，就想到了 js 的function调用问题。当然，网上也是对javascript的一些事情说得很透了，但我觉得还是有必要把自己的想法说出来，虽然并没有什么好了，闲话短说，现在开始js的function调用解析。最后再啰嗦一句，如果写的有什么不对或者不全的地方，还请多多指点。

  好了，正文开始：

  虽然浏览器是多线程的，但是浏览器中的js引擎是一个基于事件驱动的单线程运行模式，也就是说，JS引擎会只会顺序的从任务列表中取任务。js中调用一个函数时，将暂停当前函数的执行，彻底控制权和参数给新的函数，除了传递形参（如果实际参数与形参个数不匹配，实际参数溢出，那么在被调用的函数中不会显示，但是可以通过arguments取出；实际少，那么在被调用的函数中相应的参数为undefined），还会附加两个参数，即this和arguments。this在面向对象编程中是非常重要的，它在js的函数调用中，决定了以什么方式调用函数，说到这，我好像忘了说函数的几种调用方式了。

函数调用大概有4种：

  1.方法调用模式；

  2.函数调用模式

  3.构造器调用模式；

  4.apply/call/bind调用模式

  方法调用模式：当一个函数被保存为一个对象的属性时，我们称之为方法，当调用这个方法的时候，this就会指向当前方法所在的对象；

    var myObjectMethod = {
        method:function(isParameters){
            if(isParameters){
                return this.property="porpertyChange";
            }
            else{
                return this.property;
            }
        },
        porperty:"startCall"
    }
    myObjectMethod.method();//myObjectMethod.porperty = "startCall";
    myObjectMethod.method(true); // myObjectMethod.porperty = "porpertyChange";
方法的this指向了方法所在的对象，并且可以通过this去获取/改变该对象中的属性，this指向改变是在调用的的时候，可以通过this获取该对象的方法称为公共方法（public）；
函数调用模式：当一个函数非一个对象的属性时，那么他被当作一个函数来调用，this会指向全局（window）；
        var myObjectFunction = {
            method: function(isParameters) {
                var myFunction = function(){
                    return this.property="call";//thsi -> window
                }
                return myFunction();
            },
            property: "startCall"
        }
        debugger
        window.property = "window.porperty ";
        myObjectFunction.method(); //myObjectFunction.porperty = "startCall"; window.property ="cal";

  当然，可以通过函数的作用域/闭包来获取myObjectFunction.property：

        var myObjectFunction = {
            method: function(isParameters) {
                var that = this;
                var myFunction = function(){
                    //thsi -> window
                    return that.property = "call";// that -> myObjectFunction
                }
                return myFunction();
            },
            property: "startCall"
        }
        debuggerc
        window.property = "window.porperty ";
        myObjectFunction.method(); //myObjectFunction.porperty = "call"; window.property ="window.porperty ";

  构造器调用模式：继承是OO语言中一个重要的特性和概念。许多的OO语言中都支持两种继承方式：接口继承和实现继承。而js是同故宫原型链的方式实现继承的。通过new的方式调用，此时this会指向函数的prototype上

        var myObjectFunction = {
            method: function(isParameters) {
                var myFunctionConstructor = function(){
                    
                }
                myFunctionConstructor.prototype.property = "myFunction.prototype.property";
                return new myFunctionConstructor();
            },
            property: "startCall"
        }
        window.property = "window.porperty ";
        var result = myObjectFunction.method(); //result = myFunction.prototype; myObjectFunction.porperty = "startCall"; window.property ="window.porperty ";
        //result.property =myFunction.prototype.property

  上面那个例子估计有点迷糊，没有很好的体现出构造器调用模式

        window.property = "window.prperty";
        var method = function(val) {
            this.property = val;//this -> method.prototype
        }
        method.prototype.property = "method.prototype.property";
        var myMethod = new method("val");//myMethod.property="val";window.property= "window.prperty";

  希望这个例子，能让大家明白一点； 

 apply/call/bind调用模式调用模式：

  apply/call/bind 的调用都能改变this的指向,使this指向设置的对象。

    var myObjectFunction = {
            method: function(a,b,c) {
                return this.property;
            },
            property: "startCall"
        }
        var Object = {
            property: "ObjectCall"
        }
        var result = myObjectFunction.method.apply(Object,[1,2,3]);
        result = myObjectFunction.method.call(Object,4,5,6);
        var myFunction = myObjectFunction.method.bind(Object,7,8);
        myFunction(9);

  apply/call/bind 的调用的区别：

     1.apply/call调用立即执行，而bind是先绑定，需要手动去调用它；

     2.apply传递的是一个数组，而call/bind是依次传值；

     3.bind能绑定传递的参数，也可以不绑定参数

  好吧，函数的调用到这儿就写完了，希望对大家有所帮助，不再之处，还望海涵，谢谢。

 

我认知的javascript之函数调用


联系
我们