无为清净楼资源网 Design By www.qnjia.com

1、函数定义

 函数包含一组语句,它们是javascript的基础模块单元,用于代码复用、信息隐藏和组合调用。函数用于指定对象的行为

2、函数的四种调用模式及this的初始化

第一种:方法调用模式
    以下事例证明通过方法调用模式调用时,this绑定到拥有该方法的对象。如:

复制代码 代码如下:
var person = {
    name: "defaultName",
    setName : function(name){
        this.name = name;
    }
};
person.setName("zhangsan");
alert(person.name);

第二种:函数调用模式
    以下事例证明通过函数调用模式调用时,this绑定到全局对象上。如:

复制代码 代码如下:
var test = add(value1, value2);
var name = "defaultName";
var person = {
    name: "zhangsan", // person中定义的name
    getName : function(){
        // 通过此方法可以将test函数的this改变为person的this对象
        var that = this;  // 解决方案
        // getName中定义的name
        var name = "lisi";
        var test = function(){
            // 通过that来访问person中的对象
            // this指向Global对象
            // this.name = defaultName
            // that.name = zhangsan
            alert([this.name, that.name]);
        };
        test(); // 函数调用模式
    }
}
person.getName();

第三种:构造器调用模式

复制代码 代码如下:
// 定义一个Person的构造器,在调用时一定要用new调用
var Person = function(name){
    this.name = name;
}
// 添加一个方法到Person
Person.prototype.getName = function(){
    return this.name;
};
// 构造一个Person对象
var person = new Person("zhangsan");
alert(person.getName()); // 调用getName获取person对象中name属性的值

第四种:Apply调用模式

复制代码 代码如下:
<script type="text/javascript">
    // 定一个累加方法。如sum(1,2,3,4...)
    // 该方法位于window执行环境中。
    var displayName = function(){
        alert("sum的执行环境: " + typeof(this));
        alert("Name: " + this.name); // 取出当前执行环境中name属性
    }
    // 定一个Person对象
    var Person = {
        name: "zhangsan"
    };
    displayName.apply(Person);
</script>

3、Apply和call的区别

复制代码 代码如下:
// 定一个对象,包含一个add方法,返回a、b的和
var Person = {
    'add' : function(a, b){
        return a + b;
    }
};
// 显示a、b的和
function showInfo(a, b){
    alert(this.add(a, b));
}
// 通过apply方法改变showInfo方法的this指向
//showInfo(1, 3); // 对象不支持次对象
showInfo.apply(Person, [1, 3]);
showInfo.call(Person, 1, 3);
// 从上面可以看出,apply和call的区别是apply接受一个数组作为被调函数的参数,
// 而call是通过将被调函数的所有参数以逗号分隔的形式展开

4、函数参数(arguments)
    arguments并不是一个数组,只是与数组相似。arguments除了拥有length属性,数组的所有属性和方法都不具备。用arguments来实现一个累加的函数。

复制代码 代码如下:
function sum(){
    var total = 0;
    for(var i=0; i<arguments.length; i++){ // arguments.length返回sum函数调用时传递参数的个数
        total += arguments[i];
    }
    return total;
}
alert("sum: " + sum(1, 3, 2, 4));

5、函数返回值(return)
    当一个函数被调用,通常会从函数的{开始执行到}结束。如果想提前结束该函数的执行可以使用return语句,此时,return语句后面的所有语句将永远不会执行。如:

复制代码 代码如下:
function test(){
    alert("first");
    return;
    alert("second"); // 该语句永远被不会执行
}
test();
// 一个函数总是会返回值,如果没有使用return返回值,默认返回undefined。如:
function test(){
    alert("first");
}
alert(test()); // 输出:undefined
// 如果函数前使用new方式调用,且返回值不是一个对象,则返回this(新对象)。如:
function test(){
    alert("first");
}
var t = new test();
alert(typeof t); // 输出:‘object'
alert(t instanceof test); // 输出:true

6、异常(exception)

    异常是干扰程序正常流程的非正常事故(可能人为有意的)。当检查出这样的事故,应当抛出异常。如:
复制代码 代码如下:
function add(a, b){ // 定义一个加法函数
    // 如果传递的参数不是数字类型,则抛出一个异常信息
    if(typeof a != 'number' || typeof b != 'number'){
        throw {
            'name'  : "typeError", // 属性是自定义的,名字可以任意取
            'message': "add方法必须使用数字作为参数"
        };
    }
    return a + b;
}
(function(){
    // 捕获add方法可能产生的异常
    try{
        add(10, "");
    } catch(e){
        // 一个try语句只有一个catch语句,如果要处理多个异常,则通过异常的name属性来区别
        // 判断异常的类型
        if(e.name === "typeError"){
            alert(e.message);
        }
    }
})();

7、给类型添加方法
    javascript中允许给基本类型添加方法。如:boolean、string、Number
    实例:在Function中添加一个method函数,该函数为Function添加其他自定义的函数(避免使用prototype),然后利用method函数想Function中添加一个add函数,最后测试add函数在Function中确实存在。该方法将func函数添加到Function中,以name命名。然后,返回Function的对象

复制代码 代码如下:
Function.prototype.method = function(name, func){
    // 避免覆盖已有的方法
    if(!this.prototype[name]){
        this.prototype[name] = func;
    }
    return this;
};
// 通过Function.method方法添加一个加法函数到Function,该函数的名称为“add”
Function.method("add", function(a, b){
    if(typeof a != 'number' || typeof b != 'number'){
        throw {
            'name'  : "typeError",
            'message' : "add方法必须传入数字"
        };
    }
    return a + b;
});
// 调用Function的add方法是否存在
(function(){
    try{
        alert(Function.add(1, 3)); // 输出:4
    } catch(e){
        if(e.name === 'typeError'){
            alert(e.message);
        }
    }
})();
// 去除字符串两端的空白
String.method("trim", function(){
    return this.replace(/^\s+|\s+$/g, '');
});
alert('|' + "   hello world     ".trim() + '|'); // 输出: '|hello world|'
// 添加数字的取整函数
Number.method("integer", function(){
    // 可以通过此种方式调用函数,如:Math.random() == Math['random']() == Math["random"]()
    return Math[this < 0 "codetitle">复制代码 代码如下:
// 求i的阶乘
function factorial(i){
    if(i < 2){
        return 1;
    }
    return i*factorial(i-1); // 递归调用
}
alert(factorial(5)); // 求5的阶乘
// 以上方式存在一个问题?如下:
var factorial = function(i){
    if(i < 2){
        return 1;
    }
    return i*factorial(i-1); // factorial还能被调用吗?不能
}
var test = factorial;
factorial = null; 
alert(test(2));
// 解决方案:
var factorial = function(i){
    if(i < 2){
        return 1;
    }
    return i*arguments.callee(i-1); // arguments.callee返回正被执行的 Function 对象,也就是所指定的 Function 对象的正文
}
var test = factorial;
factorial = null;
alert(test(5));

9、作用域

复制代码 代码如下:
// 在程序中,作用域控制着变量的可见性和生命周期。
var name = "default"; // 全局作用域
function getName(){
    var name = "getName"; // getName作用域下
    for(var i=0; i<2; i++){
        var inName = "inName";
    }
    alert(i + "," + inName); // 2,inName 注意:在js中没有块级作用域,及if、for、while中声明的变量是放在块所在的作用域下
    return name;
}
alert(getName()); // getName 注意:js存在函数作用域,所以在函数内部定义的变量在外部是不可见的
alert(name); // default

注意:在现代的很多语言中,推荐将变量尽可能的延迟声明。如:java而在js中,却不推荐这样做,因为js不支持块级作用域。推荐在函数的开始就将所有用到的变量进行声明。

10、闭包
    函数能够访问它被创建时环境的上下文称为闭包。作用域的好处是,内部函数可以访问外部函数的所有变量(除this和arguments)。

复制代码 代码如下:
var myObject = {
    value   : 0,
    increment : function(inc){
        this.value = typeof inc === 'number' "#" name="test">点击我...</a><br> // 点击时显示3
<a href="#" name="test">点击我...</a><br> // 点击时显示3
<a href="#" name="test">点击我...</a><br> // 点击时显示3
var add_the_handlers = function(nodes){
    var i;
    for(i = 0; i < nodes.length; i += 1) {
        nodes[i].onclick = function(e){ // 函数构造时的:i
            alert(i);
        };
    }
};
var objs = document.getElementsByName("test");
add_the_handlers(objs);
// 造成上面的原因是:a标签的事件函数绑定了变量i,则不是函数在构造时的i值。
// 解决方案如下:
var add_the_handlers = function(nodes){
    var i;
    for(i = 0; i < nodes.length; i += 1) {
        nodes[i].onclick = function(i){
            return function(e){
                alert(i); // 输出的i是构造函数传递进来的i,不是事件处理绑定的i。
            };
        }(i);
    }
};
var objs = document.getElementsByName("test");
add_the_handlers(objs);

11、回调(callbacks)

复制代码 代码如下:
// data表示参数,而call_function则表示回调函数
function sendRequest(data, call_function){
    // setTimeout来模仿客户端请求服务端中传输数据的时间。
    // 当3秒钟后就调用回调函数(有客户端实现回调函数)
    setTimeout(function(){
        call_function(data); // 调用回调函数
    }, 3000);
}
// 测试sendRequest函数
sendRequest("参数", function(context){
    alert("context=" + context);
});

12、模块
    模块是一个提供接口而隐藏状态和实现的函数或对象。
    一般形式:一个定义了私有变量和函数的函数;利用闭包创建可以访问私有变量和函数的特权函数;最后返回这个特权函数,或者把他们保存到一个可以被访问到的地方。

复制代码 代码如下:
Function.prototype.method = function(name,func){
    this.prototype[name] = func;
    return this;
};
String.method("deentityify",function(){
    var entity = {
        quot : '"',
        lt   : '<',
        gt   : '>'
    };
    return function(){
        return this.replace(/&([^&;]+);/g, function(a, b){ // 怎样知道a、b的值,了解正则表达式
            var r = entity[b];
            return typeof r === "string" "&lt;&quot;&gt;".deentityify()); // 测试:<">

注:模块模式通常结合单例模式使用,JavaScript的单例模式就是用对象字面量方式创建的对象,对象的属性值可以是数值或函数,并且属性值在该对象的生命周期中不会发生变化。

13、级联(链式操作)
    对于一些不返回值的方法,我们返回this,而不是undefined,那么我们就可以启动以级联(链式)去操作该对象。如下:

复制代码 代码如下:
var $ = function(id){
    var obj = document.getElementById(id);
    obj.setColor = function(color){
        this.style.color = color;
        return this;
    };
    obj.setBgColor = function(color){
        this.style.backgroundColor = color;
        return this; // 返回this对象,启动级联
    };
    obj.setFontSize = function(size){
        this.style.fontSize = size;
        return this;
    };
    return obj;
};
$("test").setColor("red")
         .setFontSize("30px")
         .setBgColor("blue");
// 改进后的代码:
(function(id){
    var _$ = function(id){
        this.element = document.getElementById(id);
    };
    _$.prototype = {
        setColor : function(color){
            this.element.style.color = color;
            return this;
        },
        setBgColor : function(color){
            this.element.style.backgroundColor = color;
            return this;
        },
        setFontSize : function(size){
            this.element.style.fontSize = size;
            return this;
        }
    };
    
    // 添加到window原型链中
    window.$ = function(id){
        return new _$(id);
    };
})();
$("test").setColor("red")
         .setFontSize("30px")
         .setBgColor("blue");

14、套用
    所谓套用就是将函数与传递给它的参数相结合,产生一个新的函数。如:下面代码中定义一个add()函数,该函数能够返回一个新的函数,并把参数值传递给这个新函数,从而实现连加操作。

复制代码 代码如下:
// 第一种方式:
var add = function(a){
    return function(b){
        return a + b;
    }
};
alert(add(1)(2)); // 3
// 第二种方式:用arguments实现
var add = function(){
    var arg = arguments;
    return function(){
        var sum = 0;
        for(var i=0; i<arg.length; i++){
            sum += arg[i];
        }
        for(i=0; i<arguments.length; i++){
            sum += arguments[i];
        }
        return sum;
    }
};
alert(add(1,2,3)(4,5,6)); // 21
// 第三种方式:通过一个套用方法(curry)实现
var add = function(){
    var sum = 0;
    for(var i=0; i<arguments.length; i++){
        sum += arguments[i];
    }
    return sum;
};
// 添加方法到Function的原型链上
Function.prototype.method = function(name, func){
    this.prototype[name] = func;
    return this;
};
// 套用方法
Function.method('curry', function(){
    // 通过数组Array的slice方法,使得arguments也具有concat方法
    var slice = Array.prototype.slice,
        args = slice.apply(arguments), that = this;
    return function(){
        return that.apply(null, args.concat(slice.apply(arguments)));
    };
});
alert(add.curry(1,2)(3,4)); // 10

15、记忆
    函数可以用对象去记住先前操作的结果,从而能避免无谓的运算。这种优化被称为记忆。

复制代码 代码如下:
var fibonacci = function(){
    var mome = [0,1]; // 存放计算后的数据
    var fib = function(n){
        var result = mome[n];
        // 如果不存在被计算过的数据,则直接计算。然后在将计算结果缓存
        if(typeof result !== 'number'){
            result = fib(n-1) + fib(n-2);
            mome[n] = result;
        }
        return result;
    };
    return fib;
}();
for(var i=0; i<=10; i++){
    document.writeln("// " + i + ": " + fibonacci(i) + "<br/>");
}
//==========================
// 创建一个具有记忆的函数
//==========================
var memoizer = function(memo, fundamental){
    var shell = function(n){
        var result = memo[n];
        if(typeof result !== "number"){
            result = fundamental(shell, n);
            memo[n] = result;
        }
        return result;
    };
    return shell;
};
// 通过记忆函数memoizer完成斐波那契数列
var fibonacci = memoizer([0,1], function(shell, n){
    return shell(n-1) + shell(n-2);
});
// 通过记忆函数memoizer完成阶乘
var factorial = memoizer([1,1], function(shell, n){
    return n * shell(n-1);
});
for(var i=0; i<=15; i++){
    document.writeln("// " + i + ": " + factorial(i) + "<br/>");
}

小伙伴们看明白了没,非常实用吧,如有遗漏的地方,还请大神们指点下,共同进步

标签:
JavaScript,函数详解

无为清净楼资源网 Design By www.qnjia.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
无为清净楼资源网 Design By www.qnjia.com

稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!

昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?