了解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 相关文章推荐
Jquery工作常用实例 使用AJAX使网页进行异步更新
Jul 26 Javascript
图片img的src不变让浏览器重新加载实现方法
Mar 29 Javascript
关于query Javascript CSS Selector engine
Apr 12 Javascript
面向对象继承实例(a如何继承b问题)(自写)
Jul 01 Javascript
JavaScript中利用Array和Object实现Map的方法
Jul 27 Javascript
jquery实现清新实用的网页菜单效果
Aug 28 Javascript
jQuery实现带渐显效果的人物多级关系图代码
Oct 16 Javascript
Jquery实现简单的轮播效果(代码管用)
Mar 14 Javascript
浅析jquery与checkbox的checked属性的问题
Apr 27 Javascript
js本地图片预览实现代码
Oct 09 Javascript
js实现网页定位导航功能
Mar 07 Javascript
微信公众平台获取access_token的方法步骤
Mar 29 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数组实例总结与说明
2011/08/23 PHP
基于PHP CURL获取邮箱地址的详解
2013/06/03 PHP
php将session放入memcached的设置方法
2014/02/14 PHP
php实现在限定区域里自动调整字体大小的类实例
2015/04/02 PHP
PHP 进程池与轮询调度算法实现多任务的示例代码
2019/11/26 PHP
jQuery为iframe的body添加click事件的实现代码
2011/04/07 Javascript
js返回上一页并刷新代码整理
2012/12/21 Javascript
js实现点击注册按钮开始读秒倒计时的小例子
2013/05/11 Javascript
JQUERY 获取IFrame中对象及获取其父窗口中对象示例
2013/08/19 Javascript
jQuery mobile在页面加载时添加加载中效果 document.ready 和window.onload执行顺序比较
2016/07/14 Javascript
真正好用的js验证上传文件大小的简单方法
2016/10/27 Javascript
jQuery实现最简单实用的分秒倒计时
2017/02/05 Javascript
js实现按座位号抽奖
2017/04/05 Javascript
bootstrap select插件封装成Vue2.0组件
2017/04/17 Javascript
JavaScript闭包原理与用法实例分析
2018/08/10 Javascript
详解vue文件中使用echarts.js的两种方式
2018/10/18 Javascript
Python中的赋值、浅拷贝、深拷贝介绍
2015/03/09 Python
利用python将json数据转换为csv格式的方法
2018/03/22 Python
对python list 遍历删除的正确方法详解
2018/06/29 Python
python DataFrame转dict字典过程详解
2019/12/26 Python
Pytorch之Variable的用法
2019/12/31 Python
Python vtk读取并显示dicom文件示例
2020/01/13 Python
wxpython自定义下拉列表框过程图解
2020/02/14 Python
win10下opencv-python特定版本手动安装与pip自动安装教程
2020/03/05 Python
python获取栅格点和面值的实现
2020/03/10 Python
HTML5实现音频和视频嵌入的方法
2018/08/22 HTML / CSS
菲律宾票务网站:StubHub菲律宾
2018/04/21 全球购物
波兰补充商店:Muscle Power
2018/10/29 全球购物
什么是命名空间(NameSpace)
2015/11/24 面试题
城市精细化管理实施方案
2014/03/04 职场文书
领导干部保密承诺书
2014/08/30 职场文书
检查机关领导群众路线教育实践活动个人整改措施
2014/10/28 职场文书
西岭雪山导游词
2015/02/06 职场文书
婚宴祝酒词大全
2015/08/10 职场文书
html5移动端禁止长按图片保存的实现
2021/04/20 HTML / CSS
goland 清除所有的默认设置操作
2021/04/28 Golang