• 我认知的javascript之函数调用


      今天刚好周六没事,又由于工作的原因导致早上醒来就睡不着,无聊之下,就想到了 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"
            }
            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"
            }
            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;//此处通过new构造方式调用,所以 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能绑定传递的参数,也可以不绑定参数

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

  • 相关阅读:
    一键安装vsftpd服务并开通ftp账户
    mysql 利用新建从库 使用 start slave until 恢复方法
    使用ThinBackup插件备份 jenkins
    docker 日志清理
    mysql5.7 MGR配置
    mysql5.7 开启增强半同步复制
    网站qps计算方法
    mysql不支持emoji表情的问题的解决方法
    网络安全
    Cronjob 简介
  • 原文地址:https://www.cnblogs.com/xiaoxiaoqiye/p/6978231.html
Copyright © 2020-2023  润新知