【JavaScript 4—基础知识点】:函数

导读:函数这个东西,从VB开始就一直在用,不过那时候一般写不出来自己的函数或者类,觉得最高大上的,就是调用API函数了。现在,学习到了JavaScript,总结总结函数,显得很有必要。这篇文章,就从最简单的声明、调用、属性、对象等方面说明。

一、整体说明



二、举例说明

1,静态方法声明+直接调用

<span style="font-size:18px;"><span style="font-family:KaiTi_GB2312;font-size:24px;">function Test1() {
    alert("测试1");
}//静态方法

Test1();//直接调用</span></span>

2,静态方法声明+在连接中调用

<span style="font-size:18px;"><span style="font-family:KaiTi_GB2312;font-size:24px;">function Test1() {
    alert("测试1");
}//静态方法
<!--在连接中调用,写在HTML页中-->
<!--<a href="javascript:Test1()">测试1</a>--></span></span>
注意:在连接中调用的文字(这里指测试1),必须存在(可以不是文字)。所谓的连接中使用,就是要有一个东西连接。就比如我们添加超链接一样,不能在空白处添加超链接。

3,事件=“函数”

 <!--在事件中调用-->
  <!--<input id="Button1" type="button" value="button" onclick="Test1()"/>-->

说明:将2中的在连接中调用,换成在事件中调用

4,动态声明函数

<span style="font-size:18px;"><span style="font-family:KaiTi_GB2312;font-size:24px;">//动态方法声明(使用function构造函数)
var Test2 = new Function("strTest","return strTest");
alert(Test2("测试2"));</span></span>
注意:不推荐使用,这种语法会导致两次代码解析(第一次解析常规ECMAScript代码,第二次解析传入构造函数中的字符串),从而影响性能。但我们可以通过这种语法来理解“函数是对象,函数名是指针”的概念

5,直接量声明

<span style="font-size:18px;"><span style="font-family:KaiTi_GB2312;font-size:24px;">var Test3=function(strTest3) {
    alert(strTest3);
}//直接量方法

Test3("测试3");</span></span>

6,递归调用

<span style="font-size:18px;"><span style="font-family:KaiTi_GB2312;font-size:24px;">function Test4(num) {
    if (num <= 1) {
        return 1;
    }
    else {
        return num * Test4(num - 1);
    }
}//递归调用
alert(Test4(4));</span></span>

7.1,函数冒充

<span style="font-size:18px;"><span style="font-family:KaiTi_GB2312;font-size:24px;">//函数冒充
function Test5(num1, num2) {
    return num1 + num2;
}

function Testwu(num1, num2) {//call()和apply()可以冒充另外一个函数
   // return Test5.apply(this, [num1, num2]);//apply()冒充,this表示window作用域,[]表示传递的参数
    return Test5.call(this, num1, num2);//call()冒充
}
alert(Testwu(1, 2));</span></span>

注意:apply()和call()从整体上看都是一样的,不同的就是对于参数的传递,第一个为作用域,后面的,如果用apply()就是数组,而如果用call(),就直接传递。如果在使用call()的时候使用了数组传参,那么函数的冒充就失败了,比如在本例中,本该打印出结果3,就会出现错误答案:1,2,undefined。

7.2,函数冒充

<span style="font-size:18px;"><span style="font-family:KaiTi_GB2312;font-size:24px;">var color = "red";//全局

var box = {
    color: "blue"//局部
};

function sayColor() {
    alert(this.color);
}

//sayColor();全局

//sayColor.call(window);//冒充window红色的
//sayColor.call(this);//this指window
sayColor.call(box);//冒充box,其作用域就在box下,蓝色的</span></span>
注意:使用call()或者apply()来扩充作用域的最大好处,就是对象不需要与方法发生任何耦合关系。也就是说,box对象和sayColor()方法之间不会有多于的关联操作。比如:box.sayColor=sayColor.


8,匿名函数执行

<span style="font-size:18px;"><span style="font-family:KaiTi_GB2312;font-size:24px;">//匿名函数,赋值给变量
var Test6=function (){
    alert("Lee");
}
Test6();

//通过自我执行来执行匿名函数
(function(){    //(匿名函数)(),第一个圆括号放匿名函数,第二个圆括号执行
    alert("Lee");
})();</span></span>

9,闭包

<span style="font-size:18px;"><span style="font-family:KaiTi_GB2312;font-size:24px;">//函数里放一个匿名函数
function box() {
    return function () {//闭包
        return "Lee";
    }
}
alert(box()());
</span></span>

10,闭包:局部变量驻留

<span style="font-size:18px;"><span style="font-family:KaiTi_GB2312;font-size:24px;">//使用匿名函数实现局部变量驻留内存中从而累加
function box() {
    var age = 100;
    return function () {//闭包
        age++;
        return age;
    };
}
var b = box();//让age=100只初始化一次
alert(b());//101
alert(b());//102</span></span>

三、个人感受

觉得函数很简单是吧?今天我做例子的时候(函数的调用方式),出了点问题,然后让一个师姐帮我看看。看了1个多钟,最终也没有看出来。说这些知识真的都很基础,但就是当时没有总结,用的时候就挑自己会的用,结果就是。。。。。。

我只是想重复我学习JavaScript的一个总体的感受,就是,基础真的有够厉害的。指不准哪天,就被一个小问题给拦住了前进的道路。(Angel今天很开心,嘿嘿嘿嘿!)


原文地址:https://www.cnblogs.com/hhx626/p/6010425.html