那些不常见的JS写法记录

this 指向问题


var getId = document.getElementById;
getId( 'div1' );  // 报错,因为this指向window

// 修正代码
document.getElementById = (function( func ){
 return function(){
 return func.apply( document, arguments );
 }
})( document.getElementById );
var getId = document.getElementById;
var div = getId( 'div1' );
alert (div.id); // 输出: div1 

闭包&for 循环

for语句括号里可以有三种表达式, 初始化表达式, 控制表达式和循环后表达式; 其中初始化表达式是初始化for循环的时候执行的, 也就是这里的 var i = 0, type;
控制表达式type = [ 'String', 'Array', 'Number' ][ i++ ] 访问到type 内第 i 项 并且自增,如果 i>3 则返回 undefined 循环会终止;

var Type = {};
for ( var i = 0, type; type = [ 'String', 'Array', 'Number' ][ i++ ]; ){
 (function( type ){
 Type[ 'is' + type ] = function( obj ){
 return Object.prototype.toString.call( obj ) === '[object '+ type +']';
 }
 })( type )
};
Type.isArray( [] ); // 输出:true
Type.isString( "str" ); // 输出:true 

高阶函数实现AOP

AOP(面向切面编程)的主要作用是把一些跟核心业务逻辑模块无关的功能抽离出来,这些跟业务逻辑无关的功能通常包括日志统计、安全控制、异常处理等。把这些功能抽离出来之后,再通过“动态织入”的方式掺入业务逻辑模块中。这样做的好处首先是可以保持业务逻辑模块的纯净和高内聚性,其次是可以很方便地复用日志统计等功能模块。
在 Java 语言中,可以通过反射和动态代理机制来实现 AOP 技术。而在 JavaScript 这种动态语言中,AOP 的实现更加简单,这是 JavaScript 与生俱来的能力。通常,在 JavaScript 中实现 AOP,都是指把一个函数“动态织入”到另外一个函数之中,具
体的实现技术有很多,本节我们通过扩展 Function.prototype 来做到这一点。代码如下

Function.prototype.before = function( beforefn ){
 var __self = this; // 保存原函数的引用
 return function(){ // 返回包含了原函数和新函数的"代理"函数
 beforefn.apply( this, arguments ); // 执行新函数,修正 this
 return __self.apply( this, arguments ); // 执行原函数
 }
};
Function.prototype.after = function( afterfn ){
 var __self = this;
 return function(){
 var ret = __self.apply( this, arguments );
 afterfn.apply( this, arguments );
 return ret;
 }
};
var func = function(){
 console.log( 2 );
};
func = func.before(function(){
 console.log( 1 );
}).after(function(){
 console.log( 3 );
});
func();

我们把负责打印数字 1 和打印数字 3 的两个函数通过 AOP 的方式动态植入 func 函数。通过
执行上面的代码,我们看到控制台顺利地返回了执行结果 1、2、3

你可能感兴趣的:(那些不常见的JS写法记录)