JS学习笔记11_高级技巧
1.类型检测
typeof有时返回值不合理,比如RegExp对象返回object,测试代码:
var regex = /^what$/i;
regex = new RegExp('^what$');
alert(typeof regex);
instanceof在页面有多个frame时用不了,来自不同frame的对象instanceof返回false
可以用Object.prototype.toString.call(value) === ‘[object Array/Function...]’来做类型检查,也可以用来区分原生对象和自定义对象,例如:
[object JSON]//原生JSON对象
[object Object]//自定义JSON对象
注意:IE中以COM对象形式实现的函数对象toString不会返回[object Function]
2.作用域安全的构造函数
用new操作符调用构造函数会给新创建的对象添加属性,而直接调用构造函数会给全局对象window添加属性
为了避免污染全局作用域,可以用如下构造函数:
/* 可能会污染全局作用域
function Student(name){
this.name = name;
}
*/
//作用域安全的构造函数
function Student(name){
if(this instanceof Student){
this.name = name;
}
else{
return new Student(name);
}
}
上面的构造函数能够避免直接调用构造函数给全局对象意外添加属性,但用这种方式实现继承可能会出现问题,类型检查可能导致继承失败
3.惰性载入(避免重复分支检测)
在第一次执行分支检测时,覆盖原有函数,例如:
function detect(){
if(...){
detect = function(){
//
}
}
else if(...){
detect = function(){
//
}
}
else...
}可以用匿名函数立即执行并返回匿名函数来实现惰性载入,例如:
var detect = (function(){
if(...){
return function(){
//
}
}
else if(...){
return function(){
//
}
}
else...
})();
第一种方式第一次调用时损失性能,以后调用不会损失性能;第二种方式在第一次调用时也不会损失性能,因为把时耗放到了第一次载入代码时
4.函数绑定(指定执行环境)
可以用下面的函数给函数指定执行环境并创造新函数:
function bind(fun, context){
return function(){
return fun.apply(context, arguments);
}
}
可以方便地根据已有函数生成新函数,[IE9+]有原生的bind方法,例如var newFun = fun.bind(obj);
注意:函数绑定存在内存消耗多,执行慢的缺点
5.函数柯里化(也叫函数套用,允许指定一些参数)
创建柯里化函数的通用方式:
function curry(fun){
var args = Array.prototype.slice.call(arguments, 1);//去掉第一个参数fun,得到给定的参数值
return function(){
var innerArgs = Array.prototype.slice.call(arguments);//把内部arguments对象转换为数组(为了用concat方法)
var finalArgs = args.concat(innerArgs);//拼接参数列表
return fun.apply(null, finalArgs);//把拼接的参数列表传给fun
}
}
或者增强bind方法实现柯里化:
function bind(fun, context){
var args = Array.prototype.slice.call(arguments, 2);//去掉前2个参数
return function(){
var innerArgs = Array.prototype.slice.call(arguments);//同curry
var finalArgs = args.concat(innerArgs);//同curry
return fun.apply(context, finalArgs);//指定执行环境和参数
}
}
注意:柯里化和bind都存在额外开销,不要滥用
6.防篡改对象
不可扩展对象(不能添加新属性)
var obj = {a : 1, b : 2};
alert(Object.isExtensible(obj));//true
Object.preventExtensions(obj);//把obj设置为不可扩展
alert(Object.isExtensible(obj));//false
obj.c = 3;
alert(obj.c);//undefined注意:设置不可扩展操作无法撤销(改不回来),设置之后无法添加新属性,但可以修改/删除原有属性
密封对象(只能修改现有属性,无法删除或添加)
var obj = {a : 1, b : 2};
Object.seal(obj);//设置密封对象
alert(Object.isSealed(obj));//true
obj.c = 3;
alert(obj.c);//undefined
delete obj.a;//严格模式下报错
alert(obj.a);//1冻结对象(只读,访问器属性可写)
var obj = {a : 1, b : 2};
Object.freeze(obj);//设置密封对象
alert(Object.isFrozen(obj));//true
obj.a = 3;
alert(obj.a);//1
上面的实现都是ES5新增的部分,浏览器支持性未知,本机测试[IE8-]不支持,Chrome和FF支持
7.函数节流
把耗时的大任务分割成小块,用setTimeout控制执行
优点:提高了页面响应速度
缺点:逻辑连贯性没了,实现难度增大,而且不易实现事务控制,因为完整事务被拆开了
8.观察者模式
用自定义事件可以实现观察者模式:
function EventTarget(){
this.handlers = {};
} EventTarget.prototype = {
constructor: EventTarget, addHandler: function(type, handler){
if (typeof this.handlers[type] == "undefined"){
this.handlers[type] = [];
} this.handlers[type].push(handler);
}, fire: function(event){
if (!event.target){
event.target = this;
}
if (this.handlers[event.type] instanceof Array){
var handlers = this.handlers[event.type];
for (var i=0, len=handlers.length; i < len; i++){
handlers[i](event);
}
}
}, removeHandler: function(type, handler){
if (this.handlers[type] instanceof Array){
var handlers = this.handlers[type];
for (var i=0, len=handlers.length; i < len; i++){
if (handlers[i] === handler){
break;
}
} handlers.splice(i, 1);
}
}
};
用法如下:
function handleMessage(event){
alert("Message received: " + event.message);
}
//创建新对象
var target = new EventTarget();
//添加事件处理器
target.addHandler("message", handleMessage);
//触发事件
target.fire({ type: "message", message: "Hello world!"});
//删除事件处理器
target.removeHandler("message", handleMessage);
//再次触发事件,应该没有事件处理器
target.fire({ type: "message", message: "Hello world!"});
JS学习笔记11_高级技巧的更多相关文章
- js学习笔记:webpack基础入门(一)
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
- Vue.js学习笔记(2)vue-router
vue中vue-router的使用:
- JS 学习笔记--9---变量-作用域-内存相关
JS 中变量和其它语言中变量最大的区别就是,JS 是松散型语言,决定了它只是在某一个特定时间保存某一特定的值的一个名字而已.由于在定义变量的时候不需要显示规定必须保存某种类型的值,故变量的值以及保存的 ...
- WebGL three.js学习笔记 使用粒子系统模拟时空隧道(虫洞)
WebGL three.js学习笔记 使用粒子系统模拟时空隧道 本例的运行结果如图: 时空隧道demo演示 Demo地址:https://nsytsqdtn.github.io/demo/sprite ...
- WebGL three.js学习笔记 法向量网格材质MeshNormalMaterial的介绍和创建360度全景天空盒的方法
WebGL学习----Three.js学习笔记(5) 点击查看demo演示 Demo地址:https://nsytsqdtn.github.io/demo/360/360 简单网格材质 MeshNor ...
- WebGL three.js学习笔记 创建three.js代码的基本框架
WebGL学习----Three.js学习笔记(1) webgl介绍 WebGL是一种3D绘图协议,它把JavaScript和OpenGL ES 2.0结合在一起,通过增加OpenGL ES 2.0的 ...
- vue.js 学习笔记3——TypeScript
目录 vue.js 学习笔记3--TypeScript 工具 基础类型 数组 元组 枚举 字面量 接口 类类型 类类型要素 函数 函数参数 this对象和类型 重载 迭代器 Symbol.iterat ...
- 2019-4-29 js学习笔记
js学习笔记一:js数据类型 1:基本数据类型 number类型(整数,小数) String类型 boolean类型 NaN类型其实是一个nu ...
- 一点感悟:《Node.js学习笔记》star数突破1000+
写作背景 笔者前年开始撰写的<Node.js学习笔记> github star 数突破了1000,算是个里程碑吧. 从第一次提交(2016.11.03)到现在,1年半过去了.突然有些感慨, ...
随机推荐
- glReadPixels函数
GPU渲染完数据在显存,回传内存的唯一方式glReadPixels函数... glReadPixels:读取一些像素.当前可以简单理解为“把已经绘制好的像素(它可能已经被保存到显卡的显存中)读取到内存 ...
- Maven学习总结(二)——Maven项目构建过程练习
上一篇只是简单介绍了一下maven入门的一些相关知识,这一篇主要是体验一下Maven高度自动化构建项目的过程 一.创建Maven项目 1.1.建立Hello项目 1.首先建立Hello项目,同时建立M ...
- JavaWeb项目连接Oracle数据库
参考网址:http://jingyan.baidu.com/article/0320e2c1d4dd0b1b87507b38.html 既然你要链接oracle数据库 ,那么首先就是先打开我们的ora ...
- java-web乱码问题解决
<一>乱码问题(设置tomcat uriencoding=’utf-8’); 统一设置编码过滤器 <1>get请求: request.setCharacterEncoding( ...
- java 链接jdbc
import java.sql.Connection; import java.sql.DriverManager; import java.sql.ResultSet; import java.sq ...
- hdu 2202 最大三角形 (凸包)
最大三角形 Time Limit: 5000/2000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submi ...
- LINK : fatal error LNK1104: 无法打开文件“gtestd.lib”
解决办法: 复制编译出来的gtestd.lib文件到D:\Program Files (x86)\Microsoft Visual Studio 14.0\VC\lib目录下 我这里用的是vs2015 ...
- RTX2010服务器端的主要通信端口有哪些?
RTX服务端程序在安装之后,如果安装服务端电脑的操作系统有防火墙(如Windows XP.Windows2003等)或者安装了防火墙(如瑞星.Norton等),那么需要在防火墙上打开RTX所需要使用的 ...
- vs代码段快捷键设置
1 工具->代码段管理器
- Hibernate个人学习笔记(1)
连接池c3p0所需jar包:Hiberbate开发包-lib-optional-c3p0下全部Jar包 Hiberbate连接池参数配置:Hiberbate开发包-project-etc-hibern ...