了解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 相关文章推荐
jQeury淡入淡出需要注意的问题
Sep 08 Javascript
jQuery Ajax 仿AjaxPro.Utility.RegisterTypeForAjax辅助方法
Sep 27 Javascript
javascript firefox 自动加载iframe 自动调整高宽示例
Aug 27 Javascript
node.js入门教程
Jun 01 Javascript
JS模拟键盘打字效果的方法
Aug 05 Javascript
个人网站留言页面(前端jQuery编写、后台php读写MySQL)
May 03 Javascript
node+experss实现爬取电影天堂爬虫
Nov 20 Javascript
Bootstrap基本样式学习笔记之图片(6)
Dec 07 Javascript
jQuery+HTML5实现弹出创意搜索框层
Dec 29 Javascript
Extjs gridpanel 中的checkbox(复选框)根据某行的条件不能选中的解决方法
Feb 17 Javascript
ES5新增数组的实现方法
May 12 Javascript
vscode自定义vue模板的实现
Jan 27 Vue.js
利用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导航下拉菜单的实现如此简单
2013/09/22 PHP
yii2中使用Active Record模式的方法
2016/01/09 PHP
PHP中quotemeta()函数的用法讲解
2019/04/04 PHP
laravel 修改记住我功能的cookie保存时间的方法
2019/10/14 PHP
PHP const定义常量及global定义全局常量实例解析
2020/05/28 PHP
JS类中定义原型方法的两种实现的区别
2007/03/08 Javascript
小型js框架veryide.librar源代码
2009/03/05 Javascript
window.onload 加载完毕的问题及解决方案(上)
2009/07/09 Javascript
ext checkboxgroup 回填数据解决
2009/08/21 Javascript
javascript 面向对象编程 聊聊对象的事
2009/09/17 Javascript
Jquery为a标签的href赋值实现代码
2013/05/03 Javascript
jquery ajax实现下拉框三级无刷新联动,且保存保持选中值状态
2013/10/29 Javascript
jquery 删除cookie失效的解决方法
2013/11/12 Javascript
Nodejs学习笔记之入门篇
2015/04/16 NodeJs
javascript制作的滑动图片菜单
2015/05/15 Javascript
jQuery实现的简单百分比进度条效果示例
2016/08/01 Javascript
浅谈在js传递参数中含加号(+)的处理方式
2016/10/11 Javascript
Bootstrap3 多选和单选框(checkbox)
2016/12/29 Javascript
vue.js实现价格格式化的方法
2017/05/23 Javascript
react native实现往服务器上传网络图片的实例
2017/08/07 Javascript
原生js封装添加class,删除class的实例
2017/11/06 Javascript
Material(包括Material Icon)在Angular2中的使用详解
2018/02/11 Javascript
前端面试知识点目录一览
2019/04/15 Javascript
koa2 从入门到精通(小结)
2019/07/23 Javascript
[52:52]DOTA2上海特级锦标赛C组资格赛#1 OG VS LGD第三局
2016/02/27 DOTA
Django Python 获取请求头信息Content-Range的方法
2019/08/06 Python
OpenCV 使用imread()函数读取图片的六种正确姿势
2020/07/09 Python
基于selenium及python实现下拉选项定位select
2020/07/22 Python
基于Python爬取搜狐证券股票过程解析
2020/11/18 Python
入党申请书自我鉴定
2013/10/12 职场文书
土木工程个人自荐信范文
2013/11/30 职场文书
安全标准化实施方案
2014/02/20 职场文书
教书育人演讲稿
2014/09/11 职场文书
2014年体育教学工作总结
2014/12/09 职场文书
文艺演出主持词
2015/07/01 职场文书
SQL Server使用CROSS APPLY与OUTER APPLY实现连接查询
2022/05/25 SQL Server