了解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 闭包深入理解(closure)
May 27 Javascript
JavaScript对象链式操作代码(jquery)
Jul 04 Javascript
extJS中常用的4种Ajax异步提交方式
Mar 07 Javascript
JS来动态的修改url实现对url的增删查改
Sep 05 Javascript
jQuery读取XML文件内容的方法
Mar 09 Javascript
js实现左侧网页tab滑动门效果代码
Sep 06 Javascript
jQuery获取Table某列的值(推荐)
Mar 03 Javascript
jQuery插件HighCharts实现气泡图效果示例【附demo源码】
Mar 13 Javascript
vue利用v-for嵌套输出多层对象,分别输出到个表的方法
Sep 07 Javascript
vue项目引入Iconfont图标库的教程图解
Oct 24 Javascript
vue登录注册实例详解
Sep 14 Javascript
js面向对象编程OOP及函数式编程FP区别
Jul 07 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具体实现代码
2010/10/12 PHP
简单的PHP缓存设计实现代码
2011/09/30 PHP
简单的php中文转拼音的实现代码
2014/02/11 PHP
ThinkPHP实现一键清除缓存方法
2014/06/26 PHP
ThinkPHP模板Switch标签用法示例
2014/06/30 PHP
PHP+HTML+JavaScript+Css实现简单爬虫开发
2016/03/28 PHP
php str_getcsv把字符串解析为数组的实现方法
2017/04/05 PHP
PHP等比例压缩图片的实例代码
2018/07/26 PHP
jquery实现页面图片等比例放大缩小功能
2014/02/12 Javascript
深入理解JS中的变量及作用域、undefined与null
2014/03/04 Javascript
js给selected添加options的方法
2015/05/06 Javascript
TypeScript 学习笔记之基本类型
2015/06/19 Javascript
Bootstrap3学习笔记(二)之排版
2016/05/20 Javascript
实现JavaScript高性能的数据存储
2016/12/11 Javascript
基于BootStrap栅格栏系统完成网站底部版权信息区
2016/12/23 Javascript
js封装成插件_Canvas统计图插件编写实例
2017/09/12 Javascript
vue watch监听对象及对应值的变化详解
2018/02/24 Javascript
jQuery实现的别踩白块小游戏完整示例
2019/01/07 jQuery
Python collections模块实例讲解
2014/04/07 Python
Django静态资源URL STATIC_ROOT的配置方法
2014/11/08 Python
Python中使用Inotify监控文件实例
2015/02/14 Python
python 删除指定时间间隔之前的文件实例
2018/04/24 Python
python模块smtplib实现纯文本邮件发送功能
2018/05/22 Python
Python3 Post登录并且保存cookie登录其他页面的方法
2018/12/28 Python
Python 函数绘图及函数图像微分与积分
2019/11/20 Python
python 三种方法实现对Excel表格的读写
2020/11/19 Python
软件测试题目
2013/02/27 面试题
好的演讲稿开场白
2013/12/30 职场文书
《画杨桃》教学反思
2014/04/13 职场文书
工地安全标语
2014/06/07 职场文书
义和团口号
2014/06/17 职场文书
小学教学工作总结2015
2015/05/13 职场文书
廉政党课工作报告案例
2019/06/21 职场文书
Python干货实战之八音符酱小游戏全过程详解
2021/10/24 Python
「女孩的钓鱼慢活」全新版权绘公布
2022/03/21 日漫
浅谈Python中对象是如何被调用的
2022/04/06 Python