时间:2021-05-25
前言
Javascript赋予了函数非常多的特性,其中最重要的特性之一就是将函数作为第一型的对象。那就意味着在javascript中函数可以有属性,可以有方法, 可以享有所有对象所拥有的特性。并且最重要的,她还可以直接被调用
我们简单的试验一下就可以发现
// 简单实验 函数作为对象的存在let fn = function () {}fn.prop = 'fnProp'console.log(fn.prop) // fnProp为函数添加属性的这个特性我觉的大家在平时的开发中基本没什么尝试或者是使用过,但是在一些JS库或者是事件回掉管理中都能发挥出很大的用处。下面一起来看几个例子。
函数缓存
在某有一些的情况下我们可以要存储一组相关但是相互又独立的函数。这个需求看起来很easy,实现起来也不复杂。最显而易见的做法是使用一个数组来保存所有的函数,
这样不是不可以,但是显然这种做法不是最好的。下面通过为函数属性我们呢来实现这个我们的目的
上面的这一段代码逻辑清晰,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 != 1for (let index = 2; index < value; index++) {if (value % index == 0) {prime = falsebreak;} }// 保存计算出来的值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')) // HTMLCollectionconsole.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); // 2console.log(elems);/**0: input#add1: input#removeadd: ƒ add(elem)gather: ƒ gather(id)length: 2*/在我还对JS懵懵懂懂的时候看到这样的操作被秀了一脸,简直是刺激了我幼小的心灵。
我们在add函数中实现了把元素添加到了集合中,而且Array又正好提供push方法, 不用白不用。这种操作也是直白的展示了函数上下文的超强特性。
总结
Javascript强大的灵活性, 也带来更多的可能性。 路漫漫其修远兮,吾将上下而求索。
代码地址
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
总的来说,函数在JavaScript中可以:◆被赋值给一个变量◆被赋值为对象的属性◆作为参数被传入别的函数◆作为函数的结果被返回◆用字面量来创建函数对象1.1创
函数是进行模块化程序设计的基础,编写复杂的Ajax应用程序,必须对函数有更深入的了解。 javascript中的函数不同于其他的语言,每个函数都是作为一个对象
概述函数是进行模块化程序设计的基础,编写复杂的Ajax应用程序,必须对函数有更深入的了解。JavaScript中的函数不同于其他的语言,每个函数都是作为一个对象
在JavaScript中,任何合法的函数都可以作为对象的构造函数,这既包括系统内置函数,也包括用户自己定义的函数。一旦函数被作为构造函数执行,它内部的this属
作用域是可访问变量的集合。JavaScript作用域在JavaScript中,对象和函数同样也是变量。在JavaScript中,作用域为可访问变量,对象,函数的