JavaScript模式读书笔记 第4章 函数

时间:2023-03-10 07:05:16
JavaScript模式读书笔记 第4章  函数
2014年11月10日

1。JavaScript函数具有两个特点: 函数是第一类对象    函数能够提供作用域

        函数即对象,表现为:
        -1,函数能够在执行时动态创建,也能够在程序执行过程中创建。
        -2,函数能够分配给变量,能够将它们的引用拷贝到其它变量,能够被扩展,此外,函数还能够被删除。
        -3。能够做为參数传递给其它函数,,还能够由其它函数返回。
        -4,函数能够有自己的属性和方法。
2。声明VS表达式:名称和变量声明提升
    
//这是一个函数表达式
//它做为一个參数传递给函数 CallMe
callMe(function(){
//这是命名函数表达式
//也被称作匿名函数
});
//这是命名函数表达式
callMe(function me(){
//这里是命名函数表达式
//而且其名称为me
});
//还有一个函数表达式
var myobject = {
say:function(){
//这里是函数表达式
}
};
3,函数的提升
        对于全部的变量,无论在函数体的何处声明。都会在后台被提升到函数顶部。
4,回调模式
<script>
function writeCode(callBack){
console.log("callBanck before.....");
callBack();
console.log("callBanck after.....");
}
 
function callBack(){
console.log("callBanck ..........");
}
writeCode(callBack);
  </script>
//输出结果
        callBanck before..... test1.html:14
     callBanck .......... test1.html:21
callBanck after.....
 例如以下。展示了一个复杂的查询DOM节点,然后再在回调函数中依次进行业务处理。
耗时为2n
<script>
//查找节点
var findNodes = function(){
var i = 100000,//复杂循环
   nodes[],//存储本次执行结果
found;//零时存储找到的节点
while(i){
//业务逻辑处理
//....
found = 1;
i -= 1;
nodes.push(found);
}
return nodes;
};
//对节点处理 
var hide = function(nodes){
var i = 0, max = nodes.length;
for(; i < max; i += 1){
//复杂业务逻辑处理
console.log(nodes[i]);
}
};
 
//执行函数
hide(findNodes());
  </script>
 
 
  <script>
var findNodes = function(callBack){
var i = 10000, 
nodes = [],
dound;
//检查回调函数是否为可调用
if(typeof callBack != "function"){
callBack = false;
}
 
while(i){
i -= 1;
 
//逻辑处理 。 。 。 。。。。 。
 
//执行回调函数
if(callBack){
callBack(found);
}
nodes.push[found];
}
return nodes;
};
 
var hide = function(node){
//对node节点进行相应的业务处理
};
 
findNodes(hide);
  </script>

5。闭包
    闭包特性,简而言之就是作用域。
6,自己定义函数
    -1。假设一个函数又一次定义,则会覆盖原有函数。
     var scareMe = function(){
console.log("FIRST!");
scareMe = function(){
console.log("SECOND!");
};
};
     scareMe();
 scareMe();
输出结果:
日志: FIRST! 
日志: SECOND!

该模式的确定是。当他重定义自身时。已经加入到原始函数的不论什么属性都会丢失。此外,假设该函数使用了不同的名称,比方分配给不同的变量或者以对象的方法来使用,那么重定义的部分将永远不会发生,而且将会仅仅i系那个原始函数体。
<script>
var scareMe = function(){
console.log("FIRST!");
scareMe = function(){
console.log("SECOND!");
};
};
//加入新的属性
scareMe.property = "property";
//赋值给还有一个不同名称的变量
var prank = scareMe;
 
//在一个方法里使用
var spooky = {
boo: scareMe
};
 
prank();// first
prank();//first
console.log(prank.property);//property
 
spooky.boo();//first
spooky.boo();//first
console.log(spooky.boo.property);//property
 
//使用自己定义函数
scareMe();//second
scareMe();//second
console.log(scareMe.property);//undefined
 
 
</script>
输出结果:
FIRST! test5.html:14
property test5.html:332
FIRST! test5.html:14
property test5.html:372
SECOND! test5.html:17
undefined
7。即时函数
    即时函数,定义函数后马上运行该函数的语法。样例例如以下:
    
(function(){
alert("One");
}());
该模式由下面部分组成:
    -1。能够使用函数表达式定义一个函数。
    -2。在末尾加入一组括号。这将导致该函数马上运行。
   -3。将整个函数包装在括号里。
该模式一般用于初始化时候。运行一些页面载入的任务。在初始化完毕后就不须要这些变量。能够全然替代以全局变量形式创建的代码。

例如以下代码就不会创建过多的全局变量。

<script>
     (function(){
var days = ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat'],
today = new Date(),
msg = "Today is " + days[today.getDay()] + "," + today.getDate();
alert(msg);
}());
 
  </script>

即时函数的參数
 (function(who, how){
console.log("i'm " + who + ",I'm " + how);
}("pengke", "shabi"));
即时函数的返回值,例如以下代码。result指向函数的返回值4。
var result = (function(){
return 2 +2 ;
})();
8。函数属性——备忘模式
    能够对函数的參数进行缓存处理 
9,配置对象
    适用于一个方法,我们不确定它有多少个參数的情况。
    -1,不须要记住众多的參数以及其顺序。
    -2,能够安全忽略可选參数
    -3,更加易于阅读和维护
    -4,更加易于加入和删除參数
<script>
function addPerson(conf){ console.log(conf.first);
console.log(conf.second);
console.log(conf);
}
var conf = {first: "abc",
second: "a",
third: "c"}; addPerson(conf); </script>
10。函数应用
        能够用法Function.prototype.apply().
  <script>
//定义函数
var sayHi = function(who){
console.log("Hello " + (who ? "," + who : "") + "!");
};
sayHi();
sayHi('world');
sayHi.apply(null, ["world"]);
  </script>
运行结果
Hello ! test10.html:15
Hello ,world! test10.html:15
Hello ,world! 
  apply第一个參数制定该函数内部的this。
  当传递函数相应的时候。第一个參数不能为空,必须为函数名称。
11,Curry化
<script>
//curry化的add函数
function add(x, y){
var oldx = x, oldy = y;
if(typeof oldy == "undefined"){
return function(newy){
console.log(oldx + newy);
};
}
 
console.log(x + y);
}
 
console.log(typeof add(5));//function
add(3)(4);//7
 
var add2000 = add(2000);
add2000(10);//2010
  </script>