函数进阶
一、概述
ES2015为函数赋予的新特性:
立即执行函数
闭包
函数默认值
箭头函数
async函数
二、立即执行函数
立即执行函数顾名思义,就是声明之后立刻执行的函数:
(function(){console.log("hello world");})()
函数体被一个小括号包裹起来,然后后面紧跟着一个小括号,
这样当函数被声明之后,就立刻被调用。
立即执行函数通常用来封装代码,例如下面的例子:
(function(){let a=10;let b=20;
console.log(a+b)})()
这段代码可以输出a + b的结果,但是立即执行函数外部是不能访问a和b的,因此成功达到了封装的目的。
在比较古老的js代码中,大家都是这种方法来封装代码的,但是ES2015自带模块化语法,因此这种封装的写法就不太常见了,
大家只做了解即可。
三、闭包
闭包是定义在函数内部的函数,我们用立即执行函数编写一个闭包的例子
(function(){
function add(a,b){
return a+b
}
let result=add(10,20)
console.log(result)
})()
立即函数内部的add函数就是闭包,闭包的特点是具有全局性,闭包内部的this关键字会指向全局对象window。
我们来看一个示例来演示这个特性
四、函数默认值
在ES2015版本之前,我们可以通过下面的方法设置函数参数的默认值
代码如下所示:
function fun1(x,y){
x=x||100;
y=y||200;
returnx+y;
}
ES2015中新增了更直观的设置函数默认值的方法
//es2015+设置默认值
function fun2(x=100,y=200){
return x+y;
}
五、箭头函数
在此前的课程中,我们学习了两种方法定义函数,
函数声明
函数表达式
在ES2015中增加了箭头函数的语法,可以使用=>来定义函数:
//函数声明
function add(a,b){returna+b}
//函数表达式
const add=function(a,b){returna+b}
//箭头函数
const add=(a,b)=>{returna+b;}
=>左侧的括号存放参数
=>右侧的花括号存放函数体。
以上展示了一个完整的箭头函数的语法,这其实还不能体现箭头函数的优势。
箭头函数第一个优势是,简写的箭头函数可以让代码更简洁
如果函数只有一个形参,那么可以省略参数外面的括号。
如果函数体只有一个表达式作为返回值,可以省略花括号和return关键字
实例代码如下所示
const fun=x=>x*x;
let result=fun(6);
console.log(result)//36;
面相对象
一、面相对象概述
首先面向对象是一种编程思想,是一种通过多个对象互相协作完成处理流程的编程思路【是对现实世界中一类事物的抽象,
在编程中可以理解为是一种建立现实世界事物的模型】
推及到广义上,面向对象已经越了程序设计和软件开发,我认为面向对象又是一种思维方式,不局限于编程语言,
甚至不局限编程本身,它把复杂的需求、业务逻辑抽丝剥茧、逐个分析。
主要分为:类的声明定义、对象的创建使用、面向对象拥有的特征【三大特征:封装、继承、多态】
封装:体现了对象对于敏感数据的保护特征
继承:体现了代码的复用和功能的扩展
多态:体现了不同操作环境中代码的多样性【程序的健壮性】
二、基于原型的面向对象
在ES2015版本之前,JavaScript是没有类的概念的,我们可以使用构造函数来模拟一个类,这在我们之前的课程中已经讲解过了,这里我们简单复习一下。
创建一个猫的构造函数
function Cat(name,age){
this.name=name;
this.age=age;
}
var cat=new Cat("miaomiao",2);
console.log(cat.name);
在上面的代码中,我们定义了一个构造函数Cat,通过var关键字创建了一个变量cat,cat有两个属性,name和age。我们可以直接输出cat.name;
我们可以通过原型属性为构造函数添加方法,例如我们给这个Cat添加一个shout方法,让这只猫可以叫
代码如下所示:
function Cat(name,age){
this.name=name;
this.age=age;
}
Cat.prototype.shout=function(){
console.log("喵喵喵!")
}
var cat=newCat("miaomiao",2);
cat.shout();
这样猫就有了shout方法,可以调用shout方法让猫叫。
通过上面的代码,我们可以模拟一个类的概念,但是这样的写法与真正面相对象语言的写法相比,确实更难以理解。所以ES2015中增加了类的概念。
三、ES2015中的面向对象
基于原型的继承方式,虽然实现了代码复用,但是行文松散且不够流畅,可阅读性差,不利于实现扩展和对源代码进行有效的组织管理。不得不承认,基于类的继承方式在语言实现上更健壮,且在构建可服用代码和组织架构程序方面具有明显的优势。所以,ES2015+中提供了基于类class的语法。但class本质上是ES2015+提供的一颗语法糖,正如我们前面提到的,JavaScript是一门基于原型的面向对象语言。
我们可以用class来定义一个类,然后可以在这个类中定义构造函数,方法和属性。
代码如下所示:
class Cat{
constructor(name,age){
this.name=name;
this.age=age;
}
shout(){
console.log("喵喵喵");
}
}
let cat=newCat("miaomiao",2);
cat.shout();
上面的这段代码与第二个案例的代码功能是完全一样的,但是通过class关键之定义一个猫的类,让这个类更像是一个整体,而非一个个零散的prototype组合起来的一个功能。