导读:函数这个东西,从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今天很开心,嘿嘿嘿嘿!)

【JavaScript 4—基础知识点】:函数的更多相关文章

  1. JavaScript语言基础知识点图示(转)

    一位牛人归纳的JavaScript 语言基础知识点图示. 1.JavaScript 数据类型 2.JavaScript 变量 3.Javascript 运算符 4.JavaScript 数组 5.Ja ...

  2. JavaScript语言基础知识点图示

    原文:JavaScript语言基础知识点图示 一位牛人归纳的JavaScript 语言基础知识点图示. 1.JavaScript 数据类型 2.JavaScript 变量 3.Javascript 运 ...

  3. JavaScript 语言基础知识点总结

    网上找到的一份JavaScript 语言基础知识点总结,还不错,挺全面的. (来自:http://t.cn/zjbXMmi @刘巍峰 分享 )  

  4. 一套最全的JavaScript 语言基础知识点总结(思维导图10张)

    1.DOM基础操作 2.数组基础 3.函数基础 4.运算符 5.流程控制语句 6.正则表达式 7.字符串函数 8.数据类型 9.变量 10.window对象

  5. JavaScript 语言基础知识点总结(思维导图)

    JavaScript 数组 JavaScript 函数基础 Javascript 运算符 JavaScript 流程控制 JavaScript 正则表达式 JavaScript 字符串函数 JavaS ...

  6. 【JavaScript 1—基础知识点】:宏观概述

    导读:JavaScript是一门新的(也可以说是旧的或者半新语言),里面有很多的知识点都能和已有的知识产生共鸣.但是,虽然简单,相同点也有很多,也有不同点.我脑袋也不好使,所以对于我来说,还是有必要再 ...

  7. javascript的基础知识点

    一:鼠标提示框 需求描述:鼠标移入都input上,div显示,移出,div消失 分析:控制display=block/none 鼠标移入,鼠标移出事件  <input type="bu ...

  8. JavaScript相关基础知识点

    JavaScript简介: JavaScript是脚本语言,是一种轻量级的编程语言,是可插入 HTML 页面的编程代码,插入 HTML 页面后,可由所有的现代浏览器执行. JavaScript使用: ...

  9. 【JavaScript 8—基础知识点】:DOM

    一.总体概述 1.1,什么是DOM DOM(Document Object Model):D(文档):整个web加载的网页文档:O(对象):类似于window对象之类的东西,可以调用属性和方法,在这里 ...

随机推荐

  1. 【转】微信小程序原理

    微信小程序原理 kamidox 关注 2016.11.05 09:42* 字数 2356 阅读 14621评论 5喜欢 75赞赏 1 微信小程序使用了前端技术栈 JavaScript/WXML/WXS ...

  2. vue2.0:(四)、首页入门,组件拆分1

    为什么需要组件拆分呢?这样才能更符合模块化这样一个理念. 首先是index.html,代码如下: <!DOCTYPE html> <html> <head> < ...

  3. webpack(2)

    在普通页面中使用render函数渲染组件 render:function(createElements){//createElements是一个方法,调用它,能够把指定的组件模板,渲染成为HTML结构 ...

  4. 初探ant design pro

    1.增加路由子页面&配置菜单 因为ant design pro采取的是umi路由配置,所以只要在对应的文件夹下新建相关的文件夹以及文件,它会自动解析.按照如下的步骤做即可 PS.如果想要给菜单 ...

  5. MediaRecord一些使用记录

    今天学习了MediaRecord的使用,第一次使用做个记录. MediaRecord作用是声音录制,使用步骤如下: 1.新建出音频文件代码如下: 先创建出用于存储音频文件 File dir = new ...

  6. Windows系统下Android开发环境搭建

    “工具善其事,必先利其器”.要想学好Android,搭建好Android开发环境是一个良好的开端. Windows系统下Android开发环境主要有4个大的步骤.分别是: 1.JDK的安装 2.ecl ...

  7. vue+element ui项目总结点(二)table合计栏目,按照起始年份--截止年份 插入数据并向后追加数据以最后一条年份+1

    1.oninput 事件在用户输入时触发; <template> <div class="test_box"> <p>hell,你好</p ...

  8. HDU 6052 To my boyfriend(容斥+单调栈)

    题意:对于一个n*m的方格,每个格子中都包含一种颜色,求出任意一个矩形包含不同颜色的期望. 思路: 啊啊啊啊啊,补了两天,总算A了这道题了,简直石乐志,前面的容斥还比较好写,后面的那个>13那个 ...

  9. 多源最短路径floyd

    #include<iostream> #define INF 105 using namespace std; int main() { ][],mark,x,y,g; while(cin ...

  10. ubuntu frp 自编译。本文不能按顺序来 请自己理解

    go run:go run 编译并直接运行程序,它会产生一个临时文件(但不会生成 .exe 文件),直接在命令行输出程序执行结果,方便用户调试. go build:go build 用于测试编译包,主 ...