【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今天很开心,嘿嘿嘿嘿!)
【JavaScript 4—基础知识点】:函数的更多相关文章
- JavaScript语言基础知识点图示(转)
一位牛人归纳的JavaScript 语言基础知识点图示. 1.JavaScript 数据类型 2.JavaScript 变量 3.Javascript 运算符 4.JavaScript 数组 5.Ja ...
- JavaScript语言基础知识点图示
原文:JavaScript语言基础知识点图示 一位牛人归纳的JavaScript 语言基础知识点图示. 1.JavaScript 数据类型 2.JavaScript 变量 3.Javascript 运 ...
- JavaScript 语言基础知识点总结
网上找到的一份JavaScript 语言基础知识点总结,还不错,挺全面的. (来自:http://t.cn/zjbXMmi @刘巍峰 分享 )
- 一套最全的JavaScript 语言基础知识点总结(思维导图10张)
1.DOM基础操作 2.数组基础 3.函数基础 4.运算符 5.流程控制语句 6.正则表达式 7.字符串函数 8.数据类型 9.变量 10.window对象
- JavaScript 语言基础知识点总结(思维导图)
JavaScript 数组 JavaScript 函数基础 Javascript 运算符 JavaScript 流程控制 JavaScript 正则表达式 JavaScript 字符串函数 JavaS ...
- 【JavaScript 1—基础知识点】:宏观概述
导读:JavaScript是一门新的(也可以说是旧的或者半新语言),里面有很多的知识点都能和已有的知识产生共鸣.但是,虽然简单,相同点也有很多,也有不同点.我脑袋也不好使,所以对于我来说,还是有必要再 ...
- javascript的基础知识点
一:鼠标提示框 需求描述:鼠标移入都input上,div显示,移出,div消失 分析:控制display=block/none 鼠标移入,鼠标移出事件 <input type="bu ...
- JavaScript相关基础知识点
JavaScript简介: JavaScript是脚本语言,是一种轻量级的编程语言,是可插入 HTML 页面的编程代码,插入 HTML 页面后,可由所有的现代浏览器执行. JavaScript使用: ...
- 【JavaScript 8—基础知识点】:DOM
一.总体概述 1.1,什么是DOM DOM(Document Object Model):D(文档):整个web加载的网页文档:O(对象):类似于window对象之类的东西,可以调用属性和方法,在这里 ...
随机推荐
- BootStrap的基本使用
bootstrap 现成的css样式,直接调用类作用是快速写出页面又称UI框架Bootstrap中文网LESS是预处理器CSS预处理器定义了一种新的语言,基本的思想是用一种专门的编程语言,开发者只需要 ...
- 2840 WIKIOI——评测
2840 WIKIOI——评测 时间限制: 1 s 空间限制: 2000 KB 题目等级 : 白银 Silver 题目描述 Description Wikioi上有一题有N个测试点,时限为 ...
- Eclipse优化工具Optimizer for Eclipse
第一次看到是Optimizer for Eclipse是在InfoQ 然后使用了一下,发现不错啊,我的好几年的破本都能比较快的启动Eclipse了 好了,废话不说了,来介绍一下Optimizer fo ...
- _CrtDumpMemoryLeaks()的作用 检测内存泄漏
_CrtDumpMemoryLeaks()的作用 2007-03-22 10:11 CrtDumpMemoryLeaks()就是显示当前的内存泄漏. 注意是“当前”, 也就是说当它执行 ...
- 修改nagios登录界面密码
htpasswd -c /usr/local/nagios/etc/htpasswd.user nagiosadmin 输入密码: 重启httpd服务.
- 洛谷 P2353 背单词
题目背景 小明对英语一窍不通,令老师十分头疼.于是期末考试前夕,小明被逼着开始背单词…… 题目描述 老师给了小明一篇长度为N的英语文章,然后让小明背M个单词.为了确保小明不会在背单词时睡着,老师会向他 ...
- vue2.0的变化
1. 在每个组件模板,不在支持片段代码 组件中模板: 之前: <template> <h3>我是组件</h3><strong>我是加粗标签</st ...
- thinkphp 结合phpexcel实现excel导入
控制器文件: class ExcelAction extends Action { public function __construct() { import('ORG.Util.ExcelToAr ...
- 稳定性 耗时 gc 过长问题排查 和工具
自己的另外一篇: http://www.cnblogs.com/fei33423/p/7805186.html 偶有耗时抖动? gc 也有长耗时? fullgc 也是? 有同学反馈 swap 可能导致 ...
- vue父组件获取子组件页面的数组 以城市三级联动为例
父组件调用子组件 <Cselect ref="registerAddress"></Cselect> import Cselect from '../../ ...