最新公告
  • 欢迎您光临起源地模板网,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入钻石VIP
  • JavaScript 函数定义与函数调用

    正文概述 掘金(前端萧萧)   2021-04-01   491

    函数定义

    JavaScript 使用关键字 function 定义函数。函数可以通过声明定义,也可以是一个表达式。

    函数声明:

    格式:

    function functionName(parameters) {
      执行的代码
    }
    

    示例:

    <p id="demo"></p>
    <script>
    function myFunction(a,b){
    	return a*b;
    }
    document.getElementById("demo").innerHTML=myFunction(4,3);
    </script>
    
    • 分号是用来分隔可执行 JavaScript 语句。由于函数声明不是一个可执行语句,所以不以分号结束。
    函数表达式:

    JavaScript 函数可以通过一个表达式定义。 函数表达式可以存储在变量中:

    示例:

    <p id="demo"></p>
    <script>
    var x = function (a, b) {
        return a * b
    };
    document.getElementById("demo").innerHTML = x;
    </script>
    

    在函数表达式存储在变量后,变量也可作为一个函数使用:

    <p id="demo"></p>
    <script>
    var x = function (a, b) {
        return a * b
    };
    document.getElementById("demo").innerHTML = x(4, 3);
    </script>
    
    • 上述函数以分号结尾,因为它是一个执行语句。
    Function() 构造函数:

    函数通过关键字 function 定义。函数同样可以通过内置的 JavaScript 函数构造器(Function())定义。

    示例:

    <p id="demo"></p>
    <script>
    var myFunction = new Function("a", "b", "return a * b");
    document.getElementById("demo").innerHTML = myFunction(4, 3);
    </script>
    

    实际上,不必使用构造函数。上面实例可以写成:

    <p id="demo"></p>
    <script>
    var myFunction = function (a, b) {
        return a * b
    };
    document.getElementById("demo").innerHTML = myFunction(4, 3);
    </script>
    
    • 在 JavaScript 中,很多时候,需要避免使用 new 关键字。
    函数提升:

    提升(Hoisting)是 JavaScript 默认将当前作用域提升到前面去的的行为。提升应用在变量的声明与函数的声明。因此,函数可以在声明之前调用:

    myFunction(5);
    
    function myFunction(y) {
        return y * y;
    }
    
    • 使用表达式定义函数时无法提升。
    函数是对象:

    在 JavaScript 中使用 typeof 操作符判断函数类型将返回 "function" 。但是JavaScript 函数描述为一个对象更加准确。JavaScript 函数有属性和方法。

    arguments.length 属性返回函数调用过程接收到的参数个数:

    <p id="demo"></p>
    <script>
    function myFunction(a, b) {
        return arguments.length;
    }
    document.getElementById("demo").innerHTML = myFunction(4, 3);
    </script>
    

    toString() 方法将函数作为一个字符串返回:

    <p id="demo"></p>
    <script>
    function myFunction(a, b) {
        return a * b;
    }
    document.getElementById("demo").innerHTML = myFunction.toString();
    </script>
    
    • 函数定义作为对象的属性,称之为对象方法;
    • 函数如果用于创建新的对象,称之为对象的构造函数;

    函数调用

    JavaScript 函数有 4 种调用方式。

    this 关键字:

    一般而言,在Javascript中,this指向函数执行时的当前对象。

    • 注意 this 是保留关键字,不能修改 this 的值。
    作为一个函数调用:
    <p id="demo"></p>
    <script>
    function myFunction(a, b) {
    	return a * b;
    }
    document.getElementById("demo").innerHTML = myFunction(10, 2); 
    </script>
    

    以上函数不属于任何对象。但是在 JavaScript 中它始终是默认的全局对象。在 HTML 中默认的全局对象是 HTML 页面本身,所以函数是属于 HTML 页面。

    在浏览器中的页面对象是浏览器窗口(window 对象)。以上函数会自动变为 window 对象的函数。

    <p id="demo"></p>
    <script>
    function myFunction(a, b) {
    	return a * b;
    }
    document.getElementById("demo").innerHTML = window.myFunction(10, 2); 
    </script>
    
    • 这是调用 JavaScript 函数常用的方法,但不是良好的编程习惯,全局变量,方法或函数容易造成命名冲突的bug。
    函数作为方法调用:

    在 JavaScript 中可以将函数定义为对象的方法。

    <p id="demo"></p>
    <script>
    var myObject = {
        firstName:"zhangsan",
        lastName: "lisi",
        fullName: function() {
    		return this.firstName + " " + this.lastName;
        }
    }
    document.getElementById("demo").innerHTML = myObject.fullName(); 
    </script>
    

    fullName 方法是一个函数。函数属于对象。 myObject 是函数的所有者。 this对象,拥有 JavaScript 代码。实例中 this 的值为 myObject 对象。

    修改 fullName 方法并返回 this 值:

    <p id="demo"></p>
    <script>
    var myObject = {
        firstName:"John",
        lastName: "Doe",
        fullName: function() {
    		return this;
        }
    }
    document.getElementById("demo").innerHTML = myObject.fullName();
    </script>
    
    • 函数作为对象方法调用,会使得 this 的值成为对象本身。
    使用构造函数调用函数:

    如果函数调用前使用了 new 关键字, 则是调用了构造函数。

    <p id="demo"></p>
    <script>
    function myFunction(arg1, arg2) {
        this.firstName = arg1;
        this.lastName  = arg2;
    }
    var x = new myFunction("John","Doe")
    document.getElementById("demo").innerHTML = x.firstName; 
    </script>
    

    构造函数的调用会创建一个新的对象。新对象会继承构造函数的属性和方法。

    • 构造函数中 this 关键字没有任何的值。this 的值在函数调用实例化对象(new object)时创建。
    作为函数方法调用函数:

    在 JavaScript 中, 函数是对象。JavaScript 函数有它的属性和方法。 call() 和 apply() 是预定义的函数方法。 两个方法可用于调用函数,两个方法的第一个参数必须是对象本身。

    <p id="demo"></p>
    <script>
    var myObject;
    function myFunction(a, b) {
        return a * b;
    }
    myObject = myFunction.call(myObject, 10, 2);    // 返回 20
    document.getElementById("demo").innerHTML = myObject; 
    </script>
    
    <p id="demo"></p>
    <script>
    var myObject, myArray;
    function myFunction(a, b) {
        return a * b;
    }
    myArray = [10, 2]
    myObject = myFunction.apply(myObject, myArray);      // 返回 20
    document.getElementById("demo").innerHTML = myObject; 
    </script>
    

    两个方法都使用了对象本身作为第一个参数。 两者的区别在于第二个参数: apply传入的是一个参数数组,也就是将多个参数组合成为一个数组传入,而call则作为call的参数传入(从第二个参数开始)。

    • 通过 call() 或 apply() 方法可以设置 this 的值, 且作为已存在对象的新方法调用。

    起源地下载网 » JavaScript 函数定义与函数调用

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    模板不会安装或需要功能定制以及二次开发?
    请QQ联系我们

    发表评论

    还没有评论,快来抢沙发吧!

    如需帝国cms功能定制以及二次开发请联系我们

    联系作者

    请选择支付方式

    ×
    迅虎支付宝
    迅虎微信
    支付宝当面付
    余额支付
    ×
    微信扫码支付 0 元