JS 之高级函数
作用域安全的构造函数
当使用new调用构造函数时,构造函数内部this对象会指向新创建的对象实例。如果不使用new,直接调用的话,则this对象会映射到window对象上。所以需要判断下。
eg:
function Person(name,age,job){
if(this instanceof Person){
this.name = name;
this.age = age;
this.job = job;
}else{
return new Person(name,age,job);
}
}
惰性载入函数
惰性载入函数执行的分支只会发生一次:即第一次函数调用的时候。在第一次调用的过程中,该函数会被覆盖为另一个按合适方式执行的函数。也就是说,不需要每次经过多层的判断来执行函数,而是在第一次执行的时候,就把变量定义好。后续再执行的话只需要执行这个变量所定义的函数即可。
函数绑定
函数绑定要创建一个函数,可以在特定环境中以指定参数调用另一个函数,同时保留另一个函数的代码执行环境。将函数绑定到指定环境的函数的代码如下:
function bind(fn,context){ //fn:函数 context:执行环境
return function(){
return fn.apply(context,arguments);
}
}
函数柯里化
函数柯里化用于创建已经设置好了的一个或多个参数的函数。函数柯里化的基本方法和函数绑定是一样的,使用一个闭包返回一个函数。两者的区别在于,当函数被调用时,返回的函数可以传入一些参数。柯里化函数的通用代码如下:
function curry(fn){
var args = Array.prototype.slice.call(arguments,1);
return function(){
var innerArgs = Array.prototype.slice.call(arguments);
var finalArgs = args.concat(innerArgs);
return fn.apply(null,finalArgs);
}
}
通过函数柯里化构造出更为复杂的bind()函数。
function bind(fn,context){
var args = Array.prototype.slice.call(arguments,2);
return function(){
var innerArgs = Array.prototype.slice.call(arguments);
var finalArgs = args.concat(innerArgs);
return fn.apply(context,finalArgs);
}
}
高级定时器
JS是运行于单线程环境中的。定时器(setTimeout()和setInterval())是指在特定的时间后将代码插入到队列中,等待进程空闲的时候立刻执行。其指定的时间间隔是指代码被插入到队列的间隔时间,不是何时执行代码的时间。使用setTimeout模拟setInterval,可以避免重复启动定时器。
数组分块
核心思想是使用定时器分隔循环。避免一次性执行循环中的代码操作导致页面脚本运行时间过久。通用函数如下:
function chunk(array,process,context){ //array列表,process要处理的函数,context执行的上下文环境
setTimout(function(){
var item = array.shift();
process.call(context,item);
if(array.length > 0){
setTimeout(arguments.callee,100)
}
},100)
}
数组分块的重要性在于它可以将多个项目的处理在执行队列上分开,在每个项目处理之后,给予其他的浏览器处理机会运行,这样可能避免长时间运行脚本的错误。
函数节流
函数节流的思想是某些代码不可以在没有间断的情况下连续重复执行。第一次调用函数,创建一个定时器,在指定的时间间隔之后运行代码。当第二次调用该函数时,会清除前一次的定时器并设置另一个。代码思路如下:
function throttle(method,context){
clearTimeout(method.tid);
method.tid = setTimeout(function(){
method.call(context);
},100)
}
使用场景较多的是window.resize(),使用函数节流来控制函数处理的频率,以确保浏览器不会在极短的时间内进行过多的计算。只要代码是周期性执行的,都应该使用节流。
总结自:《javascript 高级程序设计》
JS 之高级函数的更多相关文章
- js正则高级函数(replace,matchAll用法),实现正则替换(实测很有效)
有这么一个文档,这是在PC端显示的效果,如果放在移动端,会发现字体大小是非常大的,那么现在想让这个字体在移动端能按照某个比例缩小,后台返回的数据格式是: <html> <head&g ...
- js 高级函数 之示例
js 高级函数作用域安全构造函数 function Person(name, age) { this.name = name; this.age = age; ...
- 浅谈JS中的高级函数
在JavaScript中,函数的功能十分强大.它们是第一类对象,也可以作为另一个对象的方法,还可以作为参数传入另一个函数,不仅如此,还能被一个函数返回!可以说,在JS中,函数无处不在,无所不能,堪比孙 ...
- 谈谈JS中的高级函数
博客原文地址:Claiyre的个人博客如需转载,请在文章开头注明原文地址 在JavaScript中,函数的功能十分强大.它们是第一类对象,也可以作为另一个对象的方法,还可以作为参数传入另一个函数,不仅 ...
- javascript高级函数
高级函数 安全的类型检测 js内置的类型检测并非完全可靠,typeof操作符难以判断某个值是否为函数 instanceof在多个frame的情况下,会出现问题. 例如:var isArray = va ...
- js高阶函数应用—函数防抖和节流
高阶函数指的是至少满足下列两个条件之一的函数: 1. 函数可以作为参数被传递:2.函数可以作为返回值输出: javaScript中的函数显然具备高级函数的特征,这使得函数运用更灵活,作为学习js必定会 ...
- js自执行函数的常见写法
js自执行函数的常见写法 2016-12-20 20:02:26 1.关于自执行函数 1.1 写自执行函数的好处:独立的作用域,不会污染全局环境 (function() { })(); 1.2 理解重 ...
- legend---十二、js中的js语句和函数和ready函数的关系是什么
legend---十二.js中的js语句和函数和ready函数的关系是什么 一.总结 一句话总结: 函数和全局变量不必放到ready函数中 语句(调用函数和全局变量)的必须放到ready函数中 1.在 ...
- 基于JS的高级脚本语言 Sara
Sara-基于JS的高级脚本语言 欢迎使用Sara,Sara是一款基于JavaScript的全新的高级脚本语言! Sara不像我们工作室上一款编程语言作品-Ginit一样,他属于更高级的语言 Sara ...
随机推荐
- iOS 学习 - 6.Objective-C中的各种遍历(迭代)方式
说明:转自文顶顶 一.使用 for 循环 要遍历字典.数组或者是集合,for 循环是最简单也用的比较多的方法 -(void)iteratorWithFor { //////////处理数组////// ...
- android 定制自己的日志工具
最理想的情况是能够控制日志的打印,当程序处于开发阶段就让日志打印出来,当程序上线之后就把日志屏蔽掉. 例如打印一行WARN级别的日志就可以写成这样: LogUtil.w("TAG" ...
- KVO的使用
KVO的使用 KVO是一种设计模式,名为观察者. addObserver:forKeyPath:options:context: 通知其他对象的方法,这个方法在NSObject中就已经申明了,也就是说 ...
- 推送(PUSH)
一.本地推送 1.建立本地推送 UILocalNotification *notification = [[UILocalNotification alloc] init]; //推送的内容 noti ...
- 记录Java的垃圾回收机制和几种引用
一.Java的垃圾回收机制 Java的垃圾回收机制(java garbage collection)是Java虚拟机提供的能力,用于在空闲时间以不定时的方式动态回收无任何引用的对象占据的堆内存空间. ...
- 6天的巴厘岛旅行 I love Bali
6天的巴厘岛旅游今天结束了,从第一天的踏进异国之域的新奇,到最后一天的将且回程的恋恋不舍,要记下的.不愿忘记的东西太多太多. 1.下午5点半抵达巴厘岛登巴萨国际机场,7点半才出机场,让Ricky导游和 ...
- Dreamweaver 制作图片热点之后,点击热点部分会有个提示框,怎么去掉
可以这么写试试看<map name="Map"> <area shape="rect" coords="364,31,517,64& ...
- 谈MongoDB读取连接超时的异常
今天在现场的哥们发来异常,让我解决,错误信息如下: HTTP Status 500 - Read operation to server 192.168.1.110:20001 failed on d ...
- 频谱分析仪 RBW&VBW
扫频式频谱分析仪的结构如下图 RBW(Resolution Bandwidth)的影响 The RBW dictates the resolution bandwidth, which is rela ...
- codeforces 487C C. Prefix Product Sequence(构造+数论)
题目链接: C. Prefix Product Sequence time limit per test 1 second memory limit per test 256 megabytes in ...