深入学习JavaScript(2)

简介: 深入学习JavaScript(2)

纯函数


在程序设计中,若一个函数符合以下条件,那么这个函数被称为纯函数(维基百科):


  • 此函数在相同的输入值时,需产生相同的输出。
  • 函数的输出和输入值以外的其他隐藏信息或状态无关,也和由I/O设备产生的外部输出无关。
  • 该函数不能有语义上可观察的函数副作用,诸如“触发事件”,使输出设备输出,或更改输出值以外物件的内容等。

总结:


①确定的输入,一定会产生确定的输出;


②函数在执行过程中,不能产生副作用;


例子(slice和splice):

  • slice截取数组时不会对原数组进行任何操作,而是生成一个新的数组;
  • splice截取数组, 会返回一个新的数组, 也会对原数组进行修改;
  • slice就是一个纯函数,不会修改数组本身,而splice函数不是一个纯函数;

副作用: 表示在执行一个函数时,除了返回函数值之外,还对调用函数产生了附加的影响, 比如修改了全局变量,修改参数或者改变外部的存储;


柯里化(curring)


只传递给函数一部分参数来调用它,让它返回一个函数去处理剩余的参数,这个过程就称之为柯里化;

微信图片_20221010172726.png微信图片_20221010172731.png

对象和函数的原型


对象的原型


JavaScript当中每个对象都有一个特殊的内置属性 [[prototype]],这个特殊的对象可以指向另外一个对象。获取方式有两张:


  1. 通过对象的 proto 属性可以获取到(但是这个是早期浏览器自己添加的,存在一定的兼容性问题);
  2. 通过 Object.getPrototypeOf 方法可以获取到;、


疑问:这个原型有什么用呢?

当我们通过[get]方式获取一个属性对应的value时–>它会优先在自己的对象中查找,如果找到直接返回–>如果没有找到,那么会在原型对象中找。


函数的原型(prototype)


注意: 所有的函数都有一个prototype的属性(不是__proto__)。因为它是一个函数,所有拥有了prototype属性,obj就没有这个属性。


作用:在通过new操作创建对象时,将这个显示原型赋值给创建出来对象的隐式原型。可以避免重复创建函数,造成空间浪费。

微信图片_20221010172929.png

微信图片_20221010172944.png

重写原型对象


每创建一个函数, 就会同时创建它的prototype对象, 这个对象也会自动获取constructor属性;


如果我们重写整个原型对象,相当于给prototype重新赋值了一个对象, 那么这个新对象的constructor属性, 会指向Object构造函数, 而不是原本的构造函数。


面向对象的特性 – 继承(ES5)


面向对象有三大特性:封装、继承、多态  封装:


  • 我们前面将属性和方法封装到一个类中,可以称之为封装的过程;
  • 继承:继承是面向对象中非常重要的,不仅仅可以减少重复代码的数量,也是多态前提(纯面向对象中)。继承可以帮助我们将重复的代码和逻辑抽取到父类中,子类只需要直接继承过来即可
  • 多态:不同的对象在执行时表现出不同的形态;


通过原型链实现方法的继承(ES5)

微信图片_20221010173141.png

借用构造函数实现属性的继承(ES5)


在子类型构造函数的内部调用父类型构造函数:


  • 因为函数可以在任意的时刻被调用;
  • 因此通过apply()和call()方法也可以在新创建的对象上执行构造函数

微信图片_20221010173250.png


寄生式继承函数(ES5)


核心:创建一个对象,使子类显示原型指向这个对象,并且对象的隐式原型指向父类的显示原型


微信图片_20221010173320.png

构造函数的类方法


类方法:指直接添加在构造函数的对象本身的方法

实例方法:是指添加在构造函数的对象原型上的方法

相关文章
|
1月前
|
Web App开发 JavaScript 前端开发
如何学习JavaScript?
如何学习JavaScript?
47 5
|
1月前
|
JavaScript 前端开发 索引
JavaScript学习第二章--字符串
本文介绍了JavaScript中的字符串处理,包括普通字符串和模板字符串的使用方法及常见字符串操作方法如`charAt`、`concat`、`endsWith`等,适合前端学习者参考。作者是一位热爱前端技术的大一学生,专注于分享实用的编程技巧。
30 2
|
1月前
|
存储 JavaScript 前端开发
JavaScript学习第一章
本文档介绍了JavaScript的基础知识,包括其在网页中的作用、如何通过JavaScript动态设置HTML元素的CSS属性,以及JavaScript中的变量类型(`var`、`let`、`const`)和数据类型(基本数据类型与引用数据类型)。通过实例代码详细解释了JavaScript的核心概念,适合初学者入门学习。
54 1
|
2月前
|
JavaScript
webpack学习五:webpack的配置文件webpack.config.js分离,分离成开发环境配置文件和生产环境配置文件
这篇文章介绍了如何将webpack的配置文件分离成开发环境和生产环境的配置文件,以提高打包效率。
58 1
webpack学习五:webpack的配置文件webpack.config.js分离,分离成开发环境配置文件和生产环境配置文件
|
2月前
|
JavaScript
js学习--商品列表商品详情
js学习--商品列表商品详情
31 2
|
2月前
|
JavaScript
js学习--九宫格抽奖
js学习--九宫格抽奖
23 2
|
2月前
|
JavaScript
js学习--开屏弹窗
js学习--开屏弹窗
46 1
|
2月前
|
JavaScript
js学习--抽奖
js学习--抽奖
24 1
|
2月前
|
JavaScript
js学习--隔行换色
js学习--隔行换色
33 1
|
2月前
|
JavaScript 前端开发 容器
js之dom学习
js之dom学习
48 0