1.函数介绍

函数允许我们封装一系列代码来完成特定任务。当想要完成某一任务时，只需要调用相应的代码即可。方法（method）一般为定义在对象中的函数。

JavaScript 使用关键字 function 定义函数。

函数可以通过声明定义，也可以是一个表达式。

函数的作用：

功能的封装，直接调用，代码复用率提高

构建对象的模板（构造函数）

函数实际上是对象，每个函数都是Function类型的实例，并且都与其他引用类型一样具有属性和方法，由于函数是对象，因此函数名实际上也是一个指向函数对象的指针，不会与某个函数绑定。

2.函数声明

自定义函数函数由function关键字声明，后面紧跟函数名，函数名后面为形参列表，列表后大括号括起来的内容为函数体。也可以将一个匿名函数（没有函数名的函数）赋值给一个函数变量，这种方式称为函数表达式。解析器在向执行环境中加载数据时，会率先读取函数声明，并使其在执行任何代码之前可用；当执行器执行到函数表达式的代码的时候才会真正的解释执行。

表示方法：

function 函数名(形参列表){//函数体
}

函数表达式：

var 函数名 = function(形参列表){}

这种形式看起来像常规的变量赋值，先创建一个匿名函数，然后赋值给变量函数名。我们知道在JS中如果要想使用一个变量，必须先给这个变量赋值，所以函数表达式也不例外，在调用之前，必须先给它赋值。否则会报错。

函数声明与var变量声明类似，会进行提升

function add(a,b){var result = a + b;return result;//返回值//返回执行的结果给被调用的
}
var total = add(1,2)foo();//函数声明提升到代码的最前边，可以直接调用函数
function foo(){console.log("hell world");//return;//console.log("1");//return之后的语句不执行//如果没有返回的内容，则在写代码的时候不关注返回值//没有return:代码执行到大括号
}
//变量声明提升  变量声明提升到代码的前边，函数声明之后正常代码之前
console.log(a);   //undefined  这里不报错，因为后边有var a的声明。变量的声明进行提升到前边
var a = 'hello';
console.log(a);   //'hello'

3.函数内部属性

只有在函数内部才能访问的属性。this也可以在函数外部进行使用。

arguments

ECMAScript函数的参数与大多数其他语言中的函数的参数有所不同，ECMAScript函数不介意传递参数的个数以及参数类型，这是因为函数的参数在函数内部是使用一个类数组对象来表示的。这个类数组对象就是arguments。

arguments是一个类数组对象，包含着传入函数中的所有参数。arguments主要用途是保存函数参数，但是这个对象还有一个名为callee的属性，该属性是一个指针，指向拥有这个arguments对象的函数。

//length声明时希望的参数的个数
function add(a,b){var result = a + b;return result;
}
console.log(add.length);//表示函数希望接受的命名参数的个数，即形参的个数。
Object.getOwnPropertyDescriptor(add,'length');
add(22,42,12,44);
/*参数：接收实参的快捷方式函数外部：实参保存的就是原始数据函数内部：arguments保存真正的实参
*/
/*arguments类数组对象arguments={“0”:1,“1”:33,“2”:”zs”};arguments[0],arguments[“1”]
*/
function add(a,b){console.log(arguments[0],arguments[1],arguments[2],arguments[3]);console.log(a+b);
}
add(10);
//10 undefined undefined undefined
//NaN
add(10,20);
//10 20 undefined undefined
//30
add(10,20,30);
//10 20 30 undefined
//30
add(10,20,30,40);
//10 20 30 40
//30

callee 属性是 arguments 对象的一个成员，仅当相关函数正在执行时才可用。

callee 属性的初始值就是正被执行的 Function 对象

// 实现匿名的递归函数
var sum = function (n) {if (n == 1) {return 1;} else {return n + arguments.callee(n - 1);}
}
console.log(sum(6));//输出结果：21

this

面向对象语言中 this 表示当前对象的一个引用。

但在 JavaScript 中 this 不是固定不变的，它会随着执行环境的改变而改变。

在方法中，this 表示该方法所属的对象。
如果单独使用，this 表示全局对象。
在函数中，this 表示全局对象。
在事件中，this 表示接收事件的元素。
在显式函数绑定时，我们可以自己决定this的指向
```
var person = {firstName: "LeBron",lastName : "James",id       : 8888,fullName : function() {return this.firstName + " " + this.lastName;}
};
```
方法中的 this

在对象方法中， this 指向调用它所在方法的对象。

在上面一个实例中，this 表示 person 对象。

fullName 方法所属的对象就是 person。
```
fullName : function() {  return this.firstName + " " + this.lastName; }
```
单独使用 this

单独使用 this，则它指向全局对象。

在浏览器中，window 就是该全局对象为 [object Window]:

在node中，指向的是一个{}
```
var x = this;
```
函数中使用 this（默认）

在函数中，函数的所属者默认绑定到 this 上。

在浏览器中，window 就是该全局对象为 [object Window]:

在node中，指向的就是global对象
```
function myFunction() {  return this; }
```
事件中的 this

在 HTML 事件句柄中，this 指向了接收事件的 HTML 元素：
```
<button onclick="this.style.display='none'"> 点我后我就消失了 </button>
```
显式函数绑定

在 JavaScript 中函数也是对象，对象则有方法，apply 和 call 就是函数对象的方法。这两个方法异常强大，他们允许切换函数执行的上下文环境（context），即 this 绑定的对象。

在下面实例中，当我们使用 person2 作为参数来调用 person1.fullName 方法时, this 将指向 person2, 即便它是 person1 的方法：
```
var person1 = {fullName: function () {return this.firstName + " " + this.lastName;}
}
var person2 = {firstName: "Zach",lastName: "Muyi",
}
var name = person1.fullName.call(person2);  // 返回 "Zach Muyi"
console.log(name);
```

JS ES5 函数菜鸟教程（不看后悔系列）相关推荐

Komodo Edit 11在windows 10上平台下的安装教程——不看后悔系列
本文目的我看了下网上现有的博文,介绍Komodo 的不多,少量的几个还没交代清楚,导致安装后Komodo IDE 或者 Edit无法运行,遂写此文. 本文环境交代时间:2019年9月14日操作系 ...
菜鸟教程python正则表达式_Python正则表达式常用函数菜鸟教程
这篇文章主要为大家详细介绍了Python正则表达式常用函数菜鸟教程,具有一定的参考价值,可以用来参考一下. 对python这个高级语言感兴趣的小伙伴,下面一起跟随512笔记的小编两巴掌来看看吧! Py ...
生存曲线 p值 python_超详细讲解生信SCI中的生存曲线作图，不看后悔系列
原标题:超详细讲解生信SCI中的生存曲线作图,不看后悔系列在线及个性化精美Kaplan-Meier生存曲线的绘制大家好,我是阿琛.俗话说,是骡子是马拉出来溜溜.在肿瘤研究中,一个基因的研究价值高不 ...
抖音上传视频显示转成mp4怎么设置_详细的mp4转换成mp3格式的方法，不看后悔系列！...
详细的mp4转换成mp3格式的方法,不看后悔系列! 安利安利安利安利话说,视频格式转换你们会,音频格式转换你们也会,你们就没有不会的吗? 对了,视频转音频你们会吗?知道怎么将MP4转成MP3吗?不会 ...
split php中_PHP str_split() 函数 | 菜鸟教程
str_split() 函数无法分隔中文字符的问题,可以使用以下函数替代: function mb_str_split($str,$split_length=1,$charset="UTF- ...
c++中内敛函数_C++ 内联函数 | 菜鸟教程
内联函数: Tip: 只有当函数只有 10 行甚至更少时才将其定义为内联函数. 定义: 当函数被声明为内联函数之后, 编译器会将其内联展开, 而不是按通常的函数调用机制进行调用. 优点: 当函数体比较 ...
java 友元_C++ 友元函数 | 菜鸟教程
对教程中的例子,稍加修改,添加了友元类的使用. #include using namespace std; class Box { double width; public: friend void ...
php fprintf,PHP fprintf() 函数 | 菜鸟教程
PHP fprintf() 函数实例把一些文本写入到名为 "test.txt" 的文本文件: $number = 9; $str = "Beijing"; ...
php fgetcsv 没有环绕符,PHP fgetcsv() 函数 | 菜鸟教程
PHP fgetcsv() 函数完整的 PHP Filesystem 参考手册定义和用法 fgetcsv() 函数从打开的文件中解析一行,校验 CSV 字段. fgetcsv() 函数会在到达指定 ...
php7 setcookie无效_PHP setcookie() 函数 | 菜鸟教程
PHP setcookie() 函数完整的 PHP HTTP 参考手册定义和用法 setcookie() 函数向客户端发送一个 HTTP cookie. cookie 是由服务器发送到浏览器的变量 ...

JS ES5 函数菜鸟教程（不看后悔系列）

1.函数介绍

2.函数声明

this

JS ES5 函数菜鸟教程（不看后悔系列）相关推荐

最新文章

热门文章