了解Javascript中函数作为对象的魅力


Posted in Javascript onJune 19, 2019

前言

Javascript赋予了函数非常多的特性,其中最重要的特性之一就是将函数作为第一型的对象。那就意味着在javascript中函数可以有属性,可以有方法, 可以享有所有对象所拥有的特性。并且最重要的,她还可以直接被调用

我们简单的试验一下就可以发现

// 简单实验 函数作为对象的存在
let fn = function () {}
fn.prop = 'fnProp'
console.log(fn.prop) // fnProp

为函数添加属性的这个特性我觉的大家在平时的开发中基本没什么尝试或者是使用过,但是在一些JS库或者是事件回掉管理中都能发挥出很大的用处。下面一起来看几个例子。

函数缓存

在某有一些的情况下我们可以要存储一组相关但是相互又独立的函数。这个需求看起来很easy,实现起来也不复杂。最显而易见的做法是使用一个数组来保存所有的函数,
这样不是不可以,但是显然这种做法不是最好的。下面通过为函数属性我们呢来实现这个我们的目的

// 1:函数缓存示例
let store = {
nextId: 1, // id
cache: {}, // 缓存
add (fn) {
// 如果函数中没有id属性那么就缓存
if (!fn.id) {
console.log(`begin add func ${fn.name}`)
fn.id = store.nextId ++
// 设置完缓存之后返回true
return !!(store.cache[fn.id] = fn)
} else {
console.log(`${fn.name} is already in cache`)
}
}
}
function storeCache() {}
store.add(storeCache) // begin add func storeCache
store.add(storeCache) // storeCache is already in cache

上面的这一段代码逻辑清晰,store对象用来管理我们的缓存,cache属性用来存储函数,nextId属性用来保存当前的缓存Id,add()方法用来设置存储,先来判断当前函数是否已经在缓存中然后再去设置缓存,这样就能限制函数的重复添加,最后返回true。

!!构造是一种可以将任意Javascript表达式转化为其等效布尔值的简单方式。

缓存记忆函数

这种函数可以记住之前已经计算过的结果,避免了不必要的计算,这显然是能够提升代码性能的。

在举例之前我们先来看看这种方式的优缺点

优点

  • 缓存了之前的结果,最终用户享有性能优势
  • 实际上是发生在幕后,操作无感

缺点

  • 内存的牺牲这是肯定的
  • 打破了存粹性(一个函数或者方法应该只做好一件事)
  • 如果方法中有算法,那么很难测量这个算法的性能

了解了优缺点我们来看一个简单的计算素数的例子(不是很严谨)

// 2: 缓存记忆函数
function isPrime (value) {
if (!isPrime.anwers) isPrime.anwers = {}
// 先从缓存里面取
if (isPrime.anwers[value] != null ) {
return isPrime.anwers[value]
}
// 开始进行判断和计算
let prime = value != 1
for (let index = 2; index < value; index++) {
if (value % index == 0) {
prime = false
break;
} 
}
// 保存计算出来的值
return isPrime.anwers[value] = prime
}
console.log(isPrime(5))
console.log(`从函数记忆中直接读取${isPrime.anwers[5]}`)

这里呢 好处是特别明显的我们再次的取用isPrime.anwers[5]的时候不需要经过任何的计算,但是大型的计算要主要内存的使用

缓存记忆DOM元素

通过元素的标签查询DOM的操作的的代价是昂贵的,各位前端大佬肯定都很清楚。我们下面使用缓存记忆的方式来进行这个操作

// 3:缓存记忆DOM元素
function getElements (name) {
if (!getElements.cache) getElements.cache = {}
return getElements.cache[name] = getElements.cache[name] || document.getElementsByTagName(name);
}
console.log(getElements('div')) // HTMLCollection
console.log(getElements.cache['div']) // HTMLCollection

这个函数和上面的缓存使用的同一个手法,而且这简单的4句代码能为我们的性能带来大幅度的提升。这也算是一种超能力吧。函数的很多特性都和其上下文有关,接下来我们研究一个和上下文又换的例子。

伪造数组方法(上下文相关)

在一些情况下我们想创建一个包含一组数据的对象,但是这个数据包含很多的状态,比如和集合项有关的元数据那么我们用数组来存就不太合适了。那么这里我们就用对象的方式来假扮数组。通过改变上下文来完成一些“不法的行为”

// 4:伪造数组方法
// <input type="button" id="add" >
// <input type="button" id="remove" >
let elems = {
length: 0, //为了保存个数
add (elem) {
Array.prototype.push.call(this, elem)
},
gather (id) {
this.add(document.getElementById(id))
}
}
elems.gather('add')
elems.gather('remove')
console.log(elems[0]); // <input type="button" id="add" >
console.log(elems[1]); // <input type="button" id="remove" >
console.log(elems.length); // 2
console.log(elems);
/**
0: input#add
1: input#remove
add: ƒ add(elem)
gather: ƒ gather(id)
length: 2
*/

在我还对JS懵懵懂懂的时候看到这样的操作被秀了一脸,简直是刺激了我幼小的心灵。

我们在add函数中实现了把元素添加到了集合中,而且Array又正好提供push方法, 不用白不用。这种操作也是直白的展示了函数上下文的超强特性。

总结

Javascript强大的灵活性, 也带来更多的可能性。 路漫漫其修远兮,吾将上下而求索。

代码地址

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript实现信息的显示和隐藏如注册页面
Dec 03 Javascript
JS在IE下缺少标识符的错误
Jul 23 Javascript
jquery中JSON的解析方式
Mar 16 Javascript
javascript字符串与数组转换汇总
May 26 Javascript
JavaScript DOM 学习总结(五)
Nov 24 Javascript
ES6模块化的import和export用法方法总结
Aug 08 Javascript
Vue + better-scroll 实现移动端字母索引导航功能
May 07 Javascript
vue elementUI tree树形控件获取父节点ID的实例
Sep 12 Javascript
在vue项目中使用codemirror插件实现代码编辑器功能
Aug 27 Javascript
node后端服务保活的实现
Nov 10 Javascript
JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作示例
Nov 18 jQuery
基于redis的小程序登录实现方法流程分析
May 25 Javascript
利用vue-i18n实现多语言切换效果的方法
Jun 19 #Javascript
使用JQuery自动完成插件Auto Complete详解
Jun 18 #jQuery
使用异步controller与jQuery实现卷帘式分页
Jun 18 #jQuery
使用jQuery mobile NuGet让你的网站在移动设备上同样精彩
Jun 18 #jQuery
如何使用CSS3和JQuery easing 插件制作绚丽菜单
Jun 18 #jQuery
如何用webpack4.0撸单页/多页脚手架 (jquery, react, vue, typescript)
Jun 18 #jQuery
通过JQuery,JQueryUI和Jsplumb实现拖拽模块
Jun 18 #jQuery
You might like
ThinkPHP框架中使用Memcached缓存数据的方法
2018/03/31 PHP
PHPMailer ThinkPHP实现自动发送邮件功能
2018/06/10 PHP
jQuery替换字符串(实例代码)
2013/11/13 Javascript
javascript实现实时输出当前的时间
2015/04/27 Javascript
通过XMLHttpRequest和jQuery实现ajax的几种方式
2015/08/28 Javascript
js实现图片无缝滚动特效
2020/03/19 Javascript
简单实现jQuery进度条轮播实例代码
2016/06/20 Javascript
jQuery的 $.ajax防止重复提交的两种方法(推荐)
2016/10/14 Javascript
创建一般js对象的几种方式
2017/01/19 Javascript
AngularJS中table表格基本操作示例
2017/10/10 Javascript
原生JS实现ajax与ajax的跨域请求实例
2017/12/01 Javascript
javaScript实现游戏倒计时功能
2018/11/17 Javascript
使用 Vue-TCB 快速在 Vue 应用中接入云开发的方法
2020/02/10 Javascript
vue-cli3项目配置eslint代码规范的完整步骤
2020/09/10 Javascript
三剑客:offset、client和scroll还傻傻分不清?
2020/12/04 Javascript
windows下Python实现将pdf文件转化为png格式图片的方法
2017/07/21 Python
利用python操作SQLite数据库及文件操作详解
2017/09/22 Python
Python实现的将文件每一列写入列表功能示例【测试可用】
2018/03/19 Python
在Python中输入一个以空格为间隔的数组方法
2018/11/13 Python
Python3.5 Pandas模块之DataFrame用法实例分析
2019/04/23 Python
python输出电脑上所有的串口名的方法
2019/07/02 Python
Python将字典转换为XML的方法
2020/08/01 Python
用 Django 开发一个 Python Web API的方法步骤
2020/12/03 Python
初探CSS3中的calc()功能
2015/07/14 HTML / CSS
资生堂美国官网:Shiseido美国
2016/09/02 全球购物
数据库笔试题
2013/05/09 面试题
客户代表实习人员自我鉴定
2013/09/27 职场文书
银行门卫岗位职责
2013/12/29 职场文书
医院义诊活动总结
2014/07/04 职场文书
班子群众路线教育实践个人对照检查材料思想汇报
2014/09/30 职场文书
优秀党务工作者先进事迹材料
2014/12/25 职场文书
2015年污水处理厂工作总结
2015/05/26 职场文书
南京大屠杀观后感
2015/06/02 职场文书
基于MySql验证的vsftpd虚拟用户
2021/11/07 MySQL
SpringBoot 整合mongoDB并自定义连接池的示例代码
2022/02/28 MongoDB
Javascript中async与await的捕捉错误详解
2022/03/03 Javascript