Javascript学习之函数(function)

http://www.cnblogs.com/royalroads/p/4418587.html

在JS中,Function(函数)类型实际上是对象;每个函数都是Function类型的实例,而且都与其他引用类型一样具有属性和方法。由于函数是对象,因此函数名实际上也是一个指向函数对象的指针。

一 函数的声明方式

复制代码
//1.函数声明方式function add(num1,num2){return num1+num2;}//2.函数表达式定义函数var add= function(num1,num2){          // 通过变量box即可引用函数;return num1+num2;};             // 注意函数末尾有一个分号,就像声明其他变量时一样;var another = add;                 // 使用不带圆括号的函数名是访问函数指针;而非调用函数;console.log(another(10,10));  
//3.使用Function构造函数var add = new Function('num1','num2','return num1+num2');
// 第三种方式不推荐,这种语法会导致解析两次代码(第一次解析常规JS代码,第二次解析传入构造函数中的字符串),从而影响性能;
// 可以通过这种语法来理解"函数是对象,函数名是指针"的概念;
复制代码

 

通常来说,在全局作用域内声明一个对象,只不过是对一个属性赋值而已,比如上例中的add函数,事实上只是为全局对象添加了一个属性,属性名为add,而属性的值是一个对象,即function(x, y){return x+y;},理解这一点很重要,这条语句在语法上跟:

var str = "This is a string";

 

并没有什么区别。都是给全局对象动态的增加一个新的属性,如此而已。

二 作为值的函数

复制代码
// JS中的函数名本身就是变量,所以函数也可以作为值来使用;
// 也就是说,不仅可以像传参数一样把一个函数传递给另一个函数,而且可以将一个函数作为另一个函数的结果返回;function box(sumFunction,num){    // 无论第一个参数传递进来的是什么函数,return sumFunction(num);     // 它都会返回执行第一参数后的结果;}function sum(num){return num+10;}// 传递函数到另一个函数里;// 要访问函数的指针不执行函数的话,须去掉函数名后的圆括号;var result = box(sum,10);      // =>20;
复制代码

 

三、函数的内部属性

复制代码
// 函数内部有两个特殊的对象:arguments和this;// 1.arguments:包含着传入函数中的所有参数,arguments并不是一个数组,只是与数组相似。除了拥有length属性,数组的所有属性和方法都不具备。
// arguments这个对象还有一个名叫callee的属性,该属性是一个指针,指向拥有这个arguments对象的函数;function box(num){if(num<=1){return 1;}else{return num*arguments.callee(num-1);  // 使用arguments.callee来执行box本身;}}// 2.this:引用的是函数据以操作的对象,或者说函数调用语句所处的作用域;
// 当在全局作用域调用函数时,this对象引用的就是window;window.color = "red";alert(this.color);        // 打印全局的color;=>red;var box = {color:'blue',sayColor:function(){alert(this.color);    // 打印局部的color;=>blue;}};
复制代码

四 函数属性和方法

复制代码
// JS中的函数是对象,因此函数也有属性和方法;包含length和prototype;// length属性:表示函数希望接收到命名参数的个数;function box(name,age){alert(name+age);}alert(box.length);        // 2s// prototype属性:它是保存所有实例方法的真正所在,也就是原型;
// prototype包含两个方法:apply()和call(),每个函数都包含这两个非继承而来的方法;
// 这两个方法的用途都在特定的作用域中调用函数,实际上等于设置函数体内this对象的值;var color = 'red';var box = {color = 'blue';}function sayColor({alert(this.color);});sayColor();           // 作用域在window;sayColor.call(this);      // 作用域在window;sayColor.call(window);     // 作用域在window;sayColor.call(box);       // 作用域在box,对象冒充;=>red;
// 使用call(box)方法的时候,sayColor()方法的运行环境已经变成了box对象里了;
// 使用call()或apply()来扩充作用域的最大好处,就是对象不需要与方法发生任何耦合关系;
// 耦合:相互关联的意思,扩展和维护会发生连锁反应;
// 也就是说,box对象和sayColor()方法之间不会有多余的关联操作,比如:box.sayColor = sayColor;function Animal(){  this.name = "Animal";  this.showName = function(){  alert(this.name);  }  }  function Cat(){  this.name = "Cat";  }  var animal = new Animal();  var cat = new Cat();  //通过call或apply方法,将原本属于Animal对象的showName()方法交给对象cat来使用。  //输入结果为"Cat"  animal.showName.call(cat,",");  //animal.showName.apply(cat,[]);
复制代码

函数返回值(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
复制代码

异常(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);}}
})();
复制代码

给类型添加方法
    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 ? 'ceil' : 'floor'](this);
});
alert((-10 / 3).integer()); // 输出:-3
复制代码

递归调用(arguments.callee)
    递归调用就是自己调用自己。调用分为:直接调用和间接调用下面展示使用递归调用来计算指定值的斐波那契数列。

复制代码
// 求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));
复制代码

函数的作用域

作用域的概念在几乎所有的主流语言中都有体现,在JavaScript中,则有其特殊性:JavaScript中的变量作用域为函数体内有效,而无块作用域,我们在Java语言中,可以这样定义for循环块中的下标变量:

复制代码
public void method(){ for(int i = 0; i < obj1.length; i++){ //do something here; } //此时的i为未定义 for(int i = 0; i < obj2.length; i++){ //do something else; } }
复制代码

而在JavaScript中:

复制代码
function func(){ for(var i = 0; i < array.length; i++){ //do something here. } //此时i仍然有值,及I == array.length print(i);//i == array.length; }
复制代码

 

再看一个例子

复制代码
// 在程序中,作用域控制着变量的可见性和生命周期。
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不支持块级作用域。推荐在函数的开始就将所有用到的变量进行声明。

JavaScript的函数是在局部作用域内运行的,在局部作用域内运行的函数体可以访问其外层的(可能是全局作用域)的变量和函数。JavaScript的作用域为词法作用域,所谓词法作用域是说,其作用域为在定义时(词法分析时)就确定下来的,而并非在执行时确定,如下例:

复制代码
var str = "global"; 
function scopeTest(){ 
print(str); 
var str = "local"; 
print(str); 
} scopeTest();
复制代码

 

运行结果是什么呢?初学者很可能得出这样的答案:
global
local
而正确的结果应该是:
undefined
local
因为在函数scopeTest的定义中,预先访问了未声明的变量str,然后才对str变量进行初始化,所以第一个print(str)会返回undifined错误。那为什么函数这个时候不去访问外部的str变量呢?这是因为,在词法分析结束后,构造作用域链的时候,会将函数内定义的var变量放入该链,因此str在整个函数scopeTest内都是可见的(从函数体的第一行到最后一行),由于str变量本身是未定义的,程序顺序执行,到第一行就会返回未定义,第二行为str赋值,所以第三行的print(str)将返回”local”。

函数上下文

在Java或者C/C++等语言中,方法(函数)只能依附于对象而存在,不是独立的。而在JavaScript中,函数也是一种对象,并非其他任何对象的一部分,理解这一点尤为重要,特别是对理解函数式的JavaScript非常有用,在函数式编程语言中,函数被认为是一等的。
函数的上下文是可以变化的,因此,函数内的this也是可以变化的,函数可以作为一个对象的方法,也可以同时作为另一个对象的方法,总之,函数本身是独立的。可以通过Function对象上的call或者apply函数来修改函数的上下文:

call和apply

call和apply通常用来修改函数的上下文,函数中的this指针将被替换为call或者apply的第一个参数,我们不妨来看看JavaScript入门之对象与JSON中的例子:

 

复制代码
//定义一个人,名字为jack
var jack = {
name : "jack",
age : 26
}
//定义另一个人,名字为abruzzi
var abruzzi = {
name : "abruzzi",
age : 26
}
//定义一个全局的函数对象
function printName(){
return this.name;
}
//设置printName的上下文为jack, 此时的this为jack
print(printName.call(jack));
//设置printName的上下文为abruzzi,此时的this为abruzzi
print(printName.call(abruzzi));
print(printName.apply(jack));
print(printName.apply(abruzzi));
复制代码

 

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是通过将被调函数的所有参数以逗号分隔的形式展开
复制代码

 

匿名函数和嵌套函数

在JavaScript可以声明一个没有名称的函数,称为匿名函数(Anonymouse Function)。同时JavaScript还允许在函数内部声明函数,称为嵌套函数(Nested Function),嵌套函数的作用域为整个父函数。
在前面函数声明的部分就看到了匿名函数和嵌套函数的一种用法,由于匿名函数没有名称,不会引入新的变量污染上下文环境,而且会带来新的变量作用域,因此匿名函数常被用来防止全局环境污染。
JavaScript运行时中有一个特殊的全局环境(global object),这个对象上面存放全局的函数和变量,实际开发中经常会使用若干第三方的库或多个js文件,若不小心在全局对象引入重复的变量或函数声明,则会造成代码执行混乱。例如先后引入两个js文件,分别定义了自己的函数log作为内部使用,则第二引入的函数会覆盖第一个的定义且不会抛出任何错误,在后续的执行中调用log函数可能会造成错误。这时候使用一个匿名函数将整个js内的逻辑包装起来,就可以避免这种错误,这种方法已经被绝大多数开源js库使用。

复制代码
(function() { // 匿名函数 function log(msg) { console.log(msg); } // 其他代码 }()); // 立即执行
复制代码

以上代码就是一个简单的示例,log函数的作用域被限制在这个匿名函数之内,而匿名函数则因为被外面一对小括号()包括起来,形成一个函数表达式,表达式的值是一个函数,紧接着一对小括号表示立即执行这个函数,让原有的代码正常执行一次。不过,这种方式声明的函数、通过var声明的变量等等都是内部的,不能被任何匿名函数以外的代码访问到。如果你需要对外暴露一些函数作为接口的话有如下几种方法:

复制代码
var mylib = (function(global) { function log(msg) { console.log(msg); } log1 = log;  // 法一:利用没有var的变量声明的默认行为,在log1成为全局变量(不推荐) global.log2 = log;  // 法二:直接在全局对象上添加log2属性,赋值为log函数(推荐) return {  // 法三:通过匿名函数返回值得到一系列接口函数集合对象,赋值给全局变量mylib(推荐) log: log}; }(window));
复制代码

高阶函数(High-order Function)

如果函数作为参数或返回值使用时,就称为高阶函数,JavaScript中的函数都可以作为高阶函数来使用,这也是第一类函数的特征。下面我们就分别分析一下这两种使用方法。

复制代码
function negative(n) { return -n; // 取n的相反值 } function square(n) { return n*n; // n的平方 } function process(nums, callback) { var result = []; for(var i = 0, length = nums.length; i < length; i++) { result[i] = callback(nums[i]); // 对数组nums中的所有元素传递给callback进行处理,将返回值作为结果保存 } return result; } var nums = [-3, -2, -1, 0, 1, 2, 3, 4]; var n_neg = process(nums, negative); // n_neg = [3, 2, 1, 0, -1, -2, -3, -4]; var n_square = process(nums, square); // n_square = [9, 4, 1, 0, 1, 4, 9, 16];
复制代码

以上代码展示了把函数作为参数传入另一个函数process调用的示例,在process函数的实现中,把callback作为一个黑盒子看待,负责把参数传给它,然后获取返回值,在调用之前并不清楚callback的具体实现。只有当执行到20行和22行时,callback才被分别代表negative或square,分别对每个元素进行取相反值或平方值的操作。

 

复制代码
function generator() { var i = 0; return function() { return i++; }; } var gen1 = generator(); // 得到一个自然数生成器 var gen2 = generator(); // 得到另一个自然数生成器 var r1 = gen1(); // r1 = 0 var r2 = gen1(); // r2 = 1 var r3 = gen2(); // r3 = 0 var r4 = gen2(); // r4 = 1
复制代码

上面的代码展示了把函数作为返回值的示例,generator是一个自然数生成器函数,返回值是一个自然数生成函数。每次调用generator时都会把一个匿名函数作为结果返回,这个匿名函数在被实际调用时依次返回每个自然数。在generator里的变量i在每次调用这个匿名函数时都会自增1,这其实就是一个闭包。下面我们来介绍一下闭包.

 

类构造函数
JavaScript的函数同时作为类的构造函数,因此只要声明一个函数就可以使用new关键字创建类的实例。

在一些面向对象的语言,如Java、C++、PHP中,构造函数是很常见的。在Javascript中构造函数首先是一个普通的函数,它可以使用new 操作符来调用,并生成一个特殊类型的对象。

复制代码
function Benjamin(username, sex) {this.username = username;this.sex = sex;
}
var benjamin = new Benjamin("zuojj", "male");
//Outputs: Benjamin{sex: "male",username: "zuojj"}
console.log(benjamin);
复制代码

正如我们所看到的,“Benjamin”构造函数仅仅是接收传递过来的参数,并把它们赋值给this对象。这是因为当构造函数被new操作符调用时,构造函数的this对象赋值为new操作返回的对象。
这意味着上面的代码等同于:

benjamin = {"username": "zuojj","sex": "male"
}
复制代码
function Person(name) {this.name = name;this.toString = function() {return 'Hello, ' + this.name + '!';};}var p = new Person('Ghostheaven');alert(p); // Hello, Ghostheaven! 在以上实例中Person函数作为类的构造函数使用,此时this指向新创建的实例对象,可以为实例增加属性和方法,关于详细的面向对象的JavaScript编程可以参考这篇文章。这里我想要说的是,JavaScript函数作为类构造函数使用时的返回值问题。
复制代码
复制代码
function MyClass(name) { this.name = name; return name;  // 构造函数的返回值? } var obj1 = new MyClass('foo'); var obj2 = MyClass('foo'); var obj3 = new MyClass({}); var obj4 = MyClass({});
复制代码

上面的构造函数比较特别,有返回语句,那么obj1~obj4分别指向什么对象呢?实际结果是这样的:

obj1 = MyClass对象
obj2 = 'foo'
obj3 = {}
obj4 = {}

 

具体原因这篇文章有解释,本文不再赘述,由于带返回值的构造函数会产生奇怪的结果,因此不要在构造函数中调用有返回值的返回语句(空return可以)。

为什么使用构造函数,有以下几个方面的原因:
1.使用构造函数,意味着所有的这些对象,都可以使用相同的基本结构创建
2.使用构造函数,意味着“benjamin”对象被明确的标记为“Benjamin”函数的实例

复制代码
function Benjamin(username, sex) {this.username = username;this.sex = sex;
}
var benjamin = new Benjamin("zuojj", "male");
var ben = {"username": "zuojj","sex": "male"
}
//Outputs: true
console.log(benjamin instanceof Benjamin);
//Outputs: false
console.log(ben instanceof Benjamin);
复制代码

3.使用构造函数,意味着我们可以在原型上定义公共方法,供多个实例共享

复制代码
function Benjamin(username, sex) {this.username = username;this.sex = sex;
}
Benjamin.prototype.getName = function() {return this.username;
}
var benjamin = new Benjamin("zuojj", "male");
var ben = new Benjamin("lemon", "female");
//Outputs: zuojj
console.log(benjamin.getName());
//Outputs: lemon
console.log(ben.getName());
复制代码

1.new 关键字
在实例化构造函数的时候一定不要忘了使用new关键字,是否使用new关键字,对this对象的影响很大,不用new关键字的情况下,this对象会指向全局对象(window in browser and global in node)。因此定义构造函数时,建议函数名称首字母大写。
2.如果被调用的函数没有显式的 return 表达式,则隐式的会返回 this 对象 – 也就是新创建的对象,否则将会影响返回的结果,但仅限于返回的是一个对象

复制代码
function Bar() {return 2;
}
var bar = new Bar();
//返回新创建的对象
//Outputs: Bar {} 
console.log(bar);
function Test() {this.value = 2;return {foo: 1};
}
var test = new Test();
//返回的对象
//Outputs: Object {foo: 1} 
console.log(test);
复制代码

我们需要注意的是:
a) new Bar() 返回的是新创建的对象,而不是数字的字面值 2。 因此 new Bar().constructor === Bar,但是如果返回的是数字对象,结果就不同了;
b) 这里得到的 new Test()是函数返回的对象,而不是通过new关键字新创建的对象,如下所示:

复制代码
function Bar() {return 2;
}
var bar = new Bar();
function BarN() {return new Number(2);
}
var barn = new BarN();
//Outputs: true
console.log(bar.constructor === Bar);
//Outputs: Number {} 
console.log(barn);
//Ouputs: false
console.log(barn.constructor === BarN);
//Outputs: true
console.log(barn.constructor === Number);
/* -------------------------------------- */
function Test() {this.value = 2;return {foo: 1};
}
var test = new Test();
//Outputs: undefined
console.log(test.value);
//Ouputs: 1
console.log(test.foo);
复制代码

 

闭包

复制代码
var myObject = {value   : 0,increment : function(inc){this.value = typeof inc === 'number' ? inc : 1;},getValue  : function(){return this.value;}
};
myObject.increment(10);
alert(myObject.value);
alert(myObject.getValue());
// 上面使用字面常量方式定义了一个myObject对象。但是value变量可以被外部对象访问
var myObject = function(){var value = 0;return {increment: function(inc){value += typeof inc === 'number' ? inc : 1;},getValue : function(){return value;}};
}();
myObject.increment(10);
alert(myObject.value); // 不能被外部对象访问
alert(myObject.getValue()); // 10
// 渐变body的背景色(黄色到白色)
var fade = function(node){var level = 1;var step = function(){var hex = level.toString(16);node.style.backgroundColor = '#FFFF' + hex + hex;if(level < 15){level += 1;setTimeout(step, 500); // 如果level小于15,则内部函数自我调用}};setTimeout(step, 1); // 调用内部函数
};
fade(document.body);
// 下面是一个很糟糕的例子
<a href="#" 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){ // 函数构造时的:ialert(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);
复制代码

 

回调

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

 

模块

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

复制代码
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" ? r : a;});};
}());
alert("<">".deentityify()); // 测试:<">
复制代码

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

级联(链式操作)
    对于一些不返回值的方法,我们返回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");
复制代码

套用
    所谓套用就是将函数与传递给它的参数相结合,产生一个新的函数。如:下面代码中定义一个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
复制代码

 

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

复制代码
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/>");
}
复制代码

自更新函数(Self-update Function)
在很多语言中,函数一旦声明过就不能再次声明同名函数,否则会产生语法错误,而在JavaScript中的函数不仅可以重复声明,而且还可以自己更新自己。自己吃自己的妖怪来了!

复制代码
function selfUpdate() { window.selfUpdate = function() { alert('second run!'); }; alert('first run!'); } selfUpdate(); // first run! selfUpdate(); // second run! 这种函数可以用于只运行一次的逻辑,在第一次运行之后就整个替换成一段新的逻辑。
复制代码

使用函数
前面已经提到,在JavaScript中,函数可以

◆ 被赋值给一个变量

 

复制代码
//声明一个函数,接受两个参数,返回其和 
function add(x, y){ 
return x + y; 
} var a = 0; 
a = add;//将函数赋值给一个变量 
var b = a(2, 3);//调用这个新的函数a 
print(b);
复制代码

 

这段代码会打印”5”,因为赋值之后,变量a引用函数add,也就是说,a的值是一个函数对象(一个可执行代码块),因此可以使用a(2, 3)这样的语句来进行求和操作。
◆ 被赋值为对象的属性

var obj = { 
id : "obj1" 
} obj.func = add;//赋值为obj对象的属性 
obj.func(2, 3);//返回5

事实上,这个例子与上个例子的本质上是一样的,第一个例子中的a变量,事实上是全局对象(如果在客户端环境中,表示为window对象)的一个属性。而第二个例子则为obj对象,由于我们很少直接的引用全局对象,就分开来描述。
◆ 作为参数被传入别的函数

 

复制代码
//高级打印函数的第二个版本 
function adPrint2(str, handler){ 
print(handler(str)); 
} //将字符串转换为大写形式,并返回 
function up(str){ 
return str.toUpperCase(); 
} //将字符串转换为小写形式,并返回 
function low(str){ 
return str.toLowerCase(); 
} adPrint2("Hello, world", up); 
adPrint2("Hello, world", low);
复制代码

 

运行此片段,可以得到这样的结果:
HELLO, WORLD
hello, world
应该注意到,函数adPrint2的第二个参数,事实上是一个函数,将这个处理函数作为参数传入,在adPrint2的内部,仍然可以调用这个函数,这个特点在很多地方都是有用的,特别是,当我们想要处理一些对象,但是又不确定以何种形式来处理,则完全可以将“处理方式”作为一个抽象的粒度来进行包装(即函数)。


◆ 作为函数的结果被返回

 

function currying(){ 
return function(){ 
print("curring"); 
} 
}

 

函数currying返回一个匿名函数,这个匿名函数会打印”curring”,简单的调用currying()会得到下面的结果:

function (){print("curring");}

如果要调用currying返回的这个匿名函数,需要这样:
currying()();
第一个括号操作,表示调用currying本身,此时返回值为函数,第二个括号操作符调用这个返回值,则会得到这样的结果:
currying
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中定义的namegetName : function(){// 通过此方法可以将test函数的this改变为person的this对象var that = this;  // 解决方案// getName中定义的namevar name = "lisi";var test = function(){// 通过that来访问person中的对象// this指向Global对象// this.name = defaultName// that.name = zhangsanalert([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>
复制代码

转载于:https://www.cnblogs.com/dlgood/p/6560820.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/372661.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

用于Spring JPA2后端的REST CXF

在本演示中&#xff0c;我们将使用spring / jpa2后端生成一个REST / CXF应用程序。 该演示演示了分钟项目的轨迹REST-CXF 。 演示2中的模型保持不变。 浓缩保持不变。 但是轨道改变了 添加的是2层&#xff1a; 在JPA2之上具有弹簧集成的DAO层 具有JAX-RS批注的REST-CXF层…

完整的WebApplication JSF EJB JPA JAAS –第1部分

这篇文章将是迄今为止我博客中最大的一篇文章&#xff01; 我们将看到完整的Web应用程序。 最新的技术将完成此工作&#xff08;直到今天&#xff09;&#xff0c;但是我将给出一些提示以显示如何使本文适用于较旧的技术。 在本文的结尾&#xff0c;您将找到要下载的源代码。 您…

使用Hibernate加载或保存图像-MySQL

本教程将引导您逐步了解如何使用Hibernate从数据库&#xff08; MySQL &#xff09;保存和加载图像。 要求 对于此示例项目&#xff0c;我们将使用&#xff1a; Eclipse IDE &#xff08;您可以使用自己喜欢的IDE&#xff09;&#xff1b; MySQL &#xff08;您可以使用任何…

javaweb回顾第四篇Servlet异常处理

前言&#xff1a;很多网站为了给用户很好的用户体验性&#xff0c;都会提供比较友好的异常界面&#xff0c;现在我们在来回顾一下Servlet中如何进行异常处理的。 1&#xff1a;声明式异常处理 什么是声明式&#xff1a;就是在web.xml中声明对各种异常的处理方法。 是通过<er…

java开发cs教程,日常运维(一)

w命令&#xff1a;用于查看系统负载、显示已经登陆系统的用户列表&#xff0c;并显示用户正在执行的指令等信息第一行从左面开始显示的信息依次为&#xff1a;时间&#xff0c;系统运行时间&#xff0c;登录用户数&#xff0c;平均负载。第二行开始以及下面所有的行&#xff0c…

coursera 《现代操作系统》 -- 第五周 同步机制(1)

临界区块&#xff08;Critical section&#xff09;指的是一个访问共用资源&#xff08;例如&#xff1a;共用设备或是共用存储器&#xff09;的程序片段&#xff0c;而这些共用资源有无法同时被多个线程访问的特性。&#xff08;不是字面意思的一个区域&#xff0c;是程序片段…

php进度条插件,分享8款优秀的 jQuery 加载动画和进度条插件_jquery

加载动画和进度条在网站和 Web 应用中的使用非常流行。虽然网速越来越快&#xff0c;但是我们的网站越来越复杂&#xff0c;同时用户对网站的使用体验的要求也越来越高。在内容加载缓慢的时候&#xff0c;使用时尚的加载动画和进度条告诉用户还有内容正在加载是一种非常好的方式…

卷积神经网络(CNN)与特殊的卷积

各种卷积操作的可视化的显示形式&#xff1a;GitHub - vdumoulin/conv_arithmetic: A technical report on convolution arithmetic in the context of deep learning1. fractionally-strided 卷积 如上图示&#xff0c;输入为 33 &#xff0c;想要卷积上采样成 55 的输出。需要…

MySQL安装步骤及相关问题解决

1. 下载MySQL Server&#xff0c;网址&#xff1a;http://dev.mysql.com/downloads/mysql/ 2. 点击MySQL5.5.21的安装文件&#xff0c;出现安装向导界面&#xff0c;单击“next”继续安装&#xff1a; 3. 选择接受协议&#xff0c;单击“next”继续安装&#xff1a; 4. 在出现选…

matlab的数学函数,matlab中常见数学函数的使用

matlab中常见数学函数的使用 MATLAB 基本知识 Matlab 的内部常数 pi 圆周率 exp(1) 自然对数的底数 e i 或 j 虚数单位 Inf 或 inf 无穷大 Matlab 的常用内部数学函数 指数函数 exp(x) 以 e 为底数 log(x) 自然对数&#xff0c;即以 e 为底数的对数 log10(x) 常用对数&#xff…

C++中 list与vector的区别

C中 list与vector的区别 引用http://www.cnblogs.com/shijingjing07/p/5587719.html C vector和list的区别 1.vector数据结构vector和数组类似&#xff0c;拥有一段连续的内存空间&#xff0c;并且起始地址不变。因此能高效的进行随机存取&#xff0c;时间复杂度为o(1);但因为内…

ActiveMQ网络连接器

这篇文章对我和任何对网络连接器如何为ActiveMQ工作感兴趣的ActiveMQ贡献者而言都是更多的内容。 我最近花了一些时间查看代码&#xff0c;并认为最好画一些快速的图表来帮助我记住我学到的东西&#xff0c;并在将来发现问题时帮助将来确定在哪里进行调试。 如果我输入有误&…

《程序设计与数据结构》第3周学习总结

学号 20162317 《程序设计与数据结构》第3周学习总结 教材学习内容总结 第三章的内容相比之前两章更为具体&#xff0c;介绍的内容更为集中&#xff0c;主要说到了类和对象的问题&#xff0c;其中也仔细介绍了String类、Random类、Math类、NumberFormat类等类。此外也说到了与类…

Java中带有JWebSocket的WebServerSocket

首先&#xff0c;转到http://jwebsocket.org/下载2个软件包Server and Client。 如果要查看源代码&#xff0c;请下载源代码包。 服务器 解压缩服务器程序包。 转到“ conf”文件夹 选择“ jWebSocket.xml”文件打开 编辑“ jWebSocket.xml”文件&#xff0c;在标签<dom…

OpenCV入门指南----人脸检测

本篇介绍图像处理与模式识别中最热门的一个领域——人脸检测&#xff08;人脸识别&#xff09;。人脸检测可以说是学术界的宠儿&#xff0c;在不少EI&#xff0c;SCI高级别论文都能看到它的身影。甚至很多高校学生的毕业设计都会涉及到人脸检测。当然人脸检测的巨大实用价值也让…

matlab提取艾里斑,艾里斑:我不是雀斑

正是艾里斑&#xff0c;限制了光学仪器的精度我们知道凸透镜能把入射光会聚到它的焦点上&#xff0c;由于透镜的口径有一定大小&#xff0c;限制了光线的传播&#xff0c;所以凸透镜也会发生衍射。这导致透镜无法把光线会聚成无限小的点&#xff0c;而只会在焦点上形成具有一定…

mysql启动错误排查-无法申请足够内存

一般情况下mysql的启动错误还是很容易排查的&#xff0c;但是今天我们就来说一下不一般的情况。拿到一台服务器&#xff0c;安装完mysql后进行启动&#xff0c;启动错误如下&#xff1a; 有同学会说&#xff0c;哥们儿你是不是buffer pool设置太大了&#xff0c;设置了96G内存。…

loadrunner 关联

1、记住关联的位置&#xff08;之前&#xff09;&#xff0c;因为登录之前需要token&#xff0c;才能验证登录是否成功&#xff0c;所以&#xff0c;放在登录之前 转载于:https://www.cnblogs.com/zyp1/p/5692343.html

Akka STM –与STM Ref和Agent进行乒乓球比赛

乒乓是一个经典示例&#xff0c;其中2个玩家&#xff08;或线程&#xff09;访问共享资源–乒乓球桌并在彼此之间传递Ball&#xff08;状态变量&#xff09;。 使用任何共享资源&#xff0c;除非我们同步访问&#xff0c;否则线程可能会遇到潜在的死锁情况。 PingPong算法非常简…

JSP九大内置对象,七大动作,三大指令

JSP之九大内置对象 隐藏对象入门探索 Servlet 和JSP中输出数据都需要使用out对象。Servlet 中的out对象是通过getWriter()方法获取的。而JSP中没有定义out对象却可以直接使用。这是因为out是JSO的内置隐藏对象。JSP中的常见的9个内置隐藏对象如下 out输出流对象 隐藏对象out是…