了解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 相关文章推荐
js 匿名调用实现代码
Jun 19 Javascript
extjs中grid中嵌入动态combobox的应用
Jan 01 Javascript
jquery实现在页面加载完毕后获取图片高度或宽度
Jun 16 Javascript
js 数组去重的四种实用方法
Sep 09 Javascript
JSON相关知识汇总
Jul 03 Javascript
js判断文本框输入的内容是否为数字
Dec 23 Javascript
jQuery动态增减行的实例代码解析(推荐)
Dec 05 Javascript
解析Javascript单例模式概念与实例
Dec 05 Javascript
jQuery实现基本动画效果的方法详解
Sep 06 jQuery
浅谈redux, koa, express 中间件实现对比解析
May 23 Javascript
在vue中把含有html标签转为html渲染页面的实例
Oct 28 Javascript
解决Vue项目中tff报错的问题
Oct 21 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
php生成随机数或者字符串的代码
2008/09/05 PHP
PHPThumb PHP 图片缩略图库
2012/03/11 PHP
php 删除cookie方法详解
2014/12/01 PHP
PHP MYSQL简易交互式站点开发
2016/12/27 PHP
PHP封装的多文件上传类实例与用法详解
2017/02/07 PHP
浅谈PHP中pack、unpack的详细用法
2018/03/12 PHP
在JavaScript中通过URL传递汉字的方法
2007/04/09 Javascript
不一样的文字闪烁 轮番闪烁
2009/11/11 Javascript
JavaScript 语法集锦 脚本之家基础推荐
2009/11/15 Javascript
javascript整除实现代码
2010/11/23 Javascript
根据经纬度计算地球上两点之间的距离js实现代码
2013/03/05 Javascript
文本框文本自动补全效果示例分享
2014/01/19 Javascript
jQuery中bind与live的用法及区别小结
2014/01/27 Javascript
在Python中使用glob模块查找文件路径的方法
2015/06/17 Javascript
使用Raygun对Node.js应用进行错误处理的方法
2015/06/23 Javascript
JavaScript实现自动对页面上敏感词进行屏蔽的方法
2015/07/27 Javascript
JS密码生成与强度检测完整实例(附demo源码下载)
2016/04/06 Javascript
Bootstrap进度条组件知识详解
2016/05/01 Javascript
JS实现点击Radio动态更新table数据
2017/07/18 Javascript
vue.js使用3DES加密的方法示例
2018/05/18 Javascript
Nuxt升级2.0.0时出现的问题(小结)
2018/10/08 Javascript
判断文字超过2行添加展开按钮,未超过则不显示,溢出部分显示省略号
2019/04/28 Javascript
原生JavaScript实现弹幕组件的示例代码
2020/10/12 Javascript
Python xlwt设置excel单元格字体及格式
2020/04/18 Python
用Python实现KNN分类算法
2017/12/22 Python
python 文件转成16进制数组的实例
2018/07/09 Python
Python 读写文件的操作代码
2018/09/20 Python
Python 进程之间共享数据(全局变量)的方法
2019/07/16 Python
全网首秀之Pycharm十大实用技巧(推荐)
2020/04/27 Python
python 写一个文件分发小程序
2020/12/05 Python
python线程优先级队列知识点总结
2021/02/28 Python
挪威户外活动服装和装备购物网站:Bergfreunde挪威
2016/10/20 全球购物
出国留学自荐信
2013/10/25 职场文书
超市采购员岗位职责
2014/02/01 职场文书
幼儿教师工作感言
2014/02/14 职场文书
教师批评与自我批评发言稿
2014/10/15 职场文书