JavaScript基础内容中的函数详解
函数
函数:即方法
函数就是一段预先设置的功能代码块,可以反复调用,根据输入参数的不同,返回不同的值。
为什么使用函数:
1.方便调用
2.代码重用,利于维护
3.便于修改,便于重构
4.简化逻辑,利于编程
1、声明函数
声明函数 Function Declaration 的三种方法
1)function 命令
function print(s) {
document.write(s+"<br/>");
}
2)函数表达式
var printStr =function(str){
document.write(str+"<br/>");
}
这种写法将一个匿名函数赋值给变量。这时,这个匿名函数又称函数表达式(Function Expression),因为赋值语句的等号右侧只能放表达式。
3)Function 构造函数 : 入门级别用的不多….
var add = new Function('x','y','return (x + y)');
// 等同于
function add(x, y) {
return (x + y);
}
var foo = new Function(
'return "hello world"'
);
// 等同于
function foo() {
return "hello world";
}
注意:不能在条件语句中声明函数
函数名的提升
JavaScript 引擎将函数名视同变量名,所以采用 function 命令声明函数时,整个函数会像变量声明一样,被提升到代码头部。所以,下面的代码不会报错。
f();
function f() {}
表面上,上面代码好像在声明之前就调用了函数 f。但是实际上,由于“变量提升”,函数 f 被提升到了代码头部,也就是在调用之前已经声明了。但是,如果采用赋值语句定义函数,JavaScript 就会报错。
f();
var f = function (){};// TypeError: undefined is not a function
2、函数的调用
函数的调用:圆括号运算符
函数名([实参]);
存在返回值可以变量接收
print()
printStr("goodgoodstudy");
var result =add(1,2);
3、参数
参数: 形参与实参 函数运行的时候,有时需要提供外部数据,不同的外部数据会得到不同的结果,这种外部数据就叫参数。"种瓜得瓜种豆得豆",使用时实参可以省略。
function square(x) { //x 为形参
return x * x;
}
square(2) // 4 2 为实参
square(3) // 9
function f(a, b) {
return a;
}
//实参可以省略
f(4, 2, 3) // 1
f(10) // 1
f() // undefined
同名参数:取最后的一个
function f(a, a) {
console.log(a);
}
f(1, 2) // 2
默认值:使用 || 或运算
function f(a){
a = a || 1;
return a;
}
f('') // 1
f(0) // 1
//更精确写法
function f(a){
(a !== undefined && a !== null) ? a = a : a = 1;
return a;
}
值传递(passes by value):值的副本
var box= 2;
function f(a) {
a = 3;
}
f(box);
console.log(box) // 2 没有改变
//思考 对象值的改变
var obj = {p: 1};
function f(o) {
o.p = 2;
}
f(obj);
console.log(obj.p) // 2
//思考
var obj = [1, 2, 3];
function f(o){
o = [2, 3, 4];
}
f(obj);
console.log(obj) // [1, 2, 3]
arguments 对象: 获取所有的参数,可以看成数组。由于 JavaScript 允许函数有不定数目的参数,所以我们需要一种机制,可以在函数体内部读取所有参数。这就是 arguments 对象的由来。
var f = function(a) {
for(var i in arguments){
console.log(arguments[i]);
}
}
f(1,2,3);
了解: callee
var add =function(){
//获取调用者
console.log(arguments.callee === add); //是否为自己调用
}
add();
4、 return 语句
是函数的返回值。return 语句不是必需的,如果没有的话,该函数就不返回任何值,或者说返回 undefined。
5、递归( recursion)
函数自己调用自身
函数头:尽头 函数体:重复执行
function print(num){
if(num==10){ //递归头
return ;
}
//递归体
console.log(num);
print(num+1);
}
print(1);
6、函数的地位
函数的地位是第一等公民
函数与其他数据类型完全是平等的,所以又称函数为第一等公民
function add(x, y) {
return x + y;
}
// 将函数赋值给一个变量
var operator = add;
// 将函数作为参数和返回值
function a(op){
return op;
}
a(operator)(1, 1)// 2
7、函数的属性和方法
name:函数名
length:参数个数
toString(): 返回源码
8、函数作用域
函数作用域:全局(global variable)和局部(local variable)
var a =1; //全局变量
function display(){
var b=2; //局部变量
c =3; //没有 var 为全局变量 ,调用完成后 c 就存在了
console.log(a+"-->"+b);
}
display();
//b 不能访问
console.log(a+"-->"+c);
就近原则:
var v = 1;
function f(){
var v = 2;
console.log(v);
}
f(); // 2
console.log(v); // 1
变量提升
function foo(x) {
if (x > 100) {
var tmp = x - 100;
}
}
//等同于
function foo(x) {
var tmp;
if (x > 100) {
tmp = x - 100;
};
}
函数本身的作用域:函数本身也是一个值,也有自己的作用域。它的作用域绑定其声明时所在的作用域。
var a = 1;
var x = function (){
console.log(a);
};
function f(){
var a = 2;
x();
}
f() // 1
9、方法的调用
方法的调用: apply call :调用一个对象的一个方法,以另一个对象替换当前对象。二者的区别在于参数是否为数组
function Animal(age){
this.name = "Animal";
this.showName = function(){
alert(this.name);
}
}
function Cat(){
this.name = "Cat";
}
var animal = new Animal();
var cat = new Cat();
//通过 call 或 apply 方法,将原本属于 Animal 对象的 showName()方法交给对象 cat 来使用了。
//输入结果为"Cat"
animal.showName.call(cat,"10");
// 等同于apply方法中参数为数组
animal.showName.apply(cat,[10]);
10、 eval
执行字符串,将字符串当作语句执行。
eval('var a = 1;');
alert(a); // 1
了解 jsonp 的使用:
var jsonp = 'foo({id:42})';
var f = new Function( "foo", jsonp );
// 相当于定义了如下函数
/*
function f(foo) {
foo({id:42});
}*/
//业务处理
var print=function(json){
console.log( json.id ); // 42
}
f(print);
//相当于
function f(print){
json = {id:42};
// print(json);
console.log(json.id);
}
上面代码中,jsonp 是一个字符串,Function 构造函数将这个字符串,变成了函数体。调用该函数的时候,jsonp 就会执行。这种写法的实质是将代码放到函数作用域执行,避免对全局作用域造成影响。(上海尚学堂,原文首发至:公众号 嗨码歌)
原文地址:https://www.cnblogs.com/shsxt/p/11387549.html
- java基础学习之 消息对话款
- 暑假集训之专题----拓扑排序题解
- 李沐:从头开始介绍机器学习,眼花缭乱的机器学习应用
- hdu------2488Tornado(几何)
- nyoj------203三国志
- nyoj 115------城市平乱( dijkstra // bellman )
- hdu----(1847)Good Luck in CET-4 Everybody!(简单巴什博奕)
- hdu----(3118)Arbiter(构造二分图)
- hdu----(1528)Card Game Cheater(最大匹配/贪心)
- hdu-----(1507)Uncle Tom's Inherited Land*(二分匹配)
- hdu----149850 years, 50 colors(最小覆盖点)
- hdu------1281 棋盘游戏(最小覆盖点)
- hdu-----(1179)Ollivanders: Makers of Fine Wands since 382 BC.(二分匹配)
- hdu-----(1151)Air Raid(最小覆盖路径)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 用Python实现坦克大战游戏 | 干货贴
- hexo搭建个人网站博客完全教程
- 快速入门 Python 数据库操作
- Shell脚本管道符与重定向
- 偿还技术债(3)-ARouter源码详解
- 偿还技术债(4)-ARouter自己实现一个?
- 偿还技术债(5)-LeakCanary源码详解
- 数据库PostrageSQL-服务器配置(查询规划)
- 别在折腾开发环境了,一劳永逸的 Python 环境搭建方法
- 快速入门Python文件操作
- 使用PyTorch构建的“感知器”网络
- Python 经典面试题 一
- Python 经典面试题 二
- Linux磁盘管理之LVM快速入门配置
- 你熟悉Python的代码规范吗?如何一键实现代码排版