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 ...
随机推荐
- python初始化父类错误
源码如下: #!/usr/bin/env python class Bird(): def __init__(self): self.hungry = True def eat(self): if s ...
- 让div中的table居中
div 标签上写 style="text-align:center" div中的table中写 style="margin:auto;" <table ...
- 关于Tomcat启动时报The APR based Apache Tomcat Native library which allows optimal performanc e in production environments was not found on the java.library.path
错误信息如下 八月 01, 2016 10:11:15 上午 org.apache.catalina.core.AprLifecycleListener initINFO: The APR based ...
- 使用hibernate时出现 org.hibernate.HibernateException: Unable to get the default Bean Validation factory
hibernate 在使用junit测试报错: org.hibernate.HibernateException: Unable to get the default Bean Validation ...
- 水溶彩铅的特点&技法运用
工欲善其事必先利其器!亲爱的同学们都准备好画笔了吗?今天,助助为同学们介绍一下水溶性彩色铅笔的特点,技法运用的基本教程,请仔细看哟! [水溶性彩色铅笔的特点] 能够同时画出像铅笔一样的线条和水彩一样的 ...
- SpringMVC4 + Spring + MyBatis3 基于注解的最简配置
本文使用最新版本(4.1.5)的springmvc+spring+mybatis,采用最间的配置方式来进行搭建. 1. web.xml 我们知道springmvc是基于Servlet: Dispatc ...
- hdu 2199 Can you solve this equation?(二分搜索)
Can you solve this equation? Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K ( ...
- 用VB实现点名程序
用vb实现点名程序主要是随机变量的产生和数据的读取和存储以及计时器程序的设计,读取的文件命名为data.txt,书写格式为第一行为总人数下面的每行为一个人名,在应用时最好把data文件和程序文件放在一 ...
- 卡拉兹(Callatz)猜想
题目描述 卡拉兹(Callatz)猜想: 对任何一个自然数n,如果它是偶数,那么把它砍掉一半:如果它是奇数,那么把(3n+1)砍掉一半.这样一直反复砍下去,最后一定在某一步 得到n=1.卡拉兹在195 ...
- 学完STM32开发板,就选4412开发板让你有目标的学习嵌入式开发
600余页用户使用手册 linux实验手册(资料不断更新)100期配套零基础高清视频教程 轻松入门 (资料不断更新)2000人售后认证群 在线支持 售后无忧 源码全开源 原厂技术资料经典学习书籍推荐 ...