function 函数
一、JavaScript函数基础
对于函数的命名方式有两种,一种是通过函数表达式来命名、另一种是通过函数声明来命名。比较有意思的是函数在JavaScript中的类型是Object,是一个对象。对于其他语言来说,这是匪夷所思的。先来演示一下函数的两种命名方式
函数声明
function add(x,y) {
return x + y;
}
var result = add(1,2);
console.log(result); // 3
var add1 = add;
add = null;
console.log(add1(1,2)); // 3
对于函数声明来说,add是一个函数的名字,即指向对象的一个指针,那么函数就可以有多个名字,上述的add1 = add 表示的是创建一个变量add1,将add的值赋给add1,此时调用add1函数会得到与add函数相同的值,把add设置为null,断绝与函数的关系,再调用add函数还是会得到相同的值,因为通过add1也是上面函数(对象)的一个指针
函数表达式声明
var add = function(x,y) {
return x + y;
};
add(1,2);
对于函数表达式声明来说,add是声明的一个变量,给这个变量赋一个值,这个值是一个函数.
二、没有重载
把函数名想象为指针,有助于理解没有重载这个问题
function addSomeNumer(num) {
return num + 100;
}
function addSomeNumer(num) {
return num + 200;
}
console.log(addSomeNumer(100)) // 300
对于上面的例子声明了两个同名函数,而结果则是后面的函数把前一个函数覆盖了。
三、函数声明与函数表达式区别
解释器在向执行环境中加载数据时,并不会把函数声明和函数表达一视同仁,会率先读取函数声明,保证任何代码执行前可以用,而函数表达式,必须等到解释器执行到它的代码行,才是真正的被解释执行.
aler(sum(1,2)); // 3
function sum(x,y) {
return x + y;
}
上述代码会正确执行
alert(sum(1,2));
var sum = function(x,y) {
return x + y;
}
上述代码会在运行期间报错
四、作为值的函数
在JavaScript中,函数本身就是一个变量,函数可以当作值来使用. 也就是说函数不仅可以像参数一样传递,还可以以返回值的形式来传递
function callSomeFunction(someFunction,someArgument) {
return someFunction(someArgument);
}
function add10(x) {
return x + 100;
}
var result = callSomeFunction(add10,10);
console.log(result); // 10
console.log(typeof result); // number
这种方法也在对象.属性进行大小比较得到了较好的应用
function compare(propertyName) {
console.log("hhhh");
return function(Object1,Object2) {
var value1 = Object1[propertyName];
var value2 = Object2[propertyName];
return value1 - value2;
}
}
var data = [{name:'lfj',age:28},{name:'lx',age:12}];
let x = data.sort(compare("age"));
console.log(x); // [{name:'lx',age:12},{name:'lfj',age:28}];
五、函数内部属性
函数内部有两个属性,arguments和this属性
this引用的是当前环境的执行对象-也可以说是this的值
var color = "red";
var o = {color : "blue"};
function getColor() {
alert(this.color);
}
getColor(); // red;
o.getColor() = getColor();
o.getColor() // blue;
对于上述代码执行结果,对于第一个getColor()得到的是red,是因为此时this引用的对象是window对象,这个时候执行环境是全局执行环境。第二个o.getColor() ,给对象o赋了一个函数getColor(),当o调用getColor()函数时,此时this就是指的对象是o.
六、函数的属性和方法
因为函数本身也是一个对象,那么它也有属性和方法,属性:length和prototype. 方法:apply()和call()
length: 指的函数接受的参数个数
prototype:保存了所有的实例方法
apply和call方法都是用在特定的作用域中调用函数,apply()传入两个对象,一个是在其中运行函数的作用域,另一个是参数数组,这个参数数组可以是实例数组Array,也可以是arguments对象
function add(num1,num2) {
return num1 + num2;
}
function callSum(num1,num2) {
return add.apply(this,[num1,num2]);
}
function callSum2(num1,num2) {
return add.apply(this.arguments);
}
console.log(callSum(1,2)); // 3
console.log(callSum2(1,2)); // 3
说明:在严格模式下,this并不指向arguments对象,而是undefined.
call和apply一样,只是需要把参数一一列举出来,具体用哪一个函数,依据情况而定
add.call(this,num1,num2);
它们两个牛逼之处是能够扩充函数赖以运行的作用域,能够让对象与方法不再有耦合关系
var color = "red";
var o = {color : "blue"};
function getColor() {
alert(this.color);
}
getColor.call(this); // red
getColor.call(window) // red
getColor.call(o) // blue
怎么样,看了上述代码是不是感觉很实用呢?这就是函数的一些相关知识点