函数进阶+面向对象

函数进阶

一、概述

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组合起来的一个功能。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容