Function 函数对象
1.函数的特点
1.用function代表函数
2.没有返回类型，有return xxx;
3.参数随意，根据调用时去处理用户的参数
4.函数默认对象 arguments,所有参数都存在arguments中
2.函数类型-Function
每个函数都是Function类型的实例，所以函数具有属性和方法，由于函数是对象，所以函数名是一个指向函数对象的引用，即函数名会指向这个函数对象的地址，不会与函数绑定。
2.1函数没有重载
//方式一：
function addNum(num){
return num+100;
}
function addNum(num){
return num+200;
}
//方式二：
var addNum = function(num){
return num+100;
}
addNum = function(num){
return num+200;
}
//两种方式，addNum定义了两次，后面的函数会将前面的覆盖
2.2函数声明方式-两种：
1.函数声明：
function sayHi(){
alert("hello js");
}
//调用
sayHi();
2.函数表达式：
var add = function(a,b){
return a+b
}
//调用
var sum = add(a,b);
console.log(sum);
**注：以上两种方式相同，但执行顺序不同：javascript优先执行函数声明(方式一)，所以在函数调用时，先调用后声明不会出错。在函数表达式中会出错。
//先调用，在写声明--->可以执行
sayHi();
function sayHi(){
alert("hello js");
}
//先调用，再写表达式--->Uncaught TypeError: sayHi is not a function
sayHi();
var sayHi = function(){
alert("hello,js");
}
所以，最好先声明后使用，避免出错。
2.3 函数的调用
2.3.1 将函数作为参数调用
var callFun = function(f,args){
return f(args);
}
var add = function(b){
return 10+b;
}
//将add作为参数传递给callFun函数
var sum = callFun(add,10);
console.log(sum);//--->30
//callFun中的f参数，可以是函数名，也可以是匿名函数
var print = callFun(function(){
return "我是匿名函数";
});
console.log(print);//--->我是匿名函数
2.3.2 将函数作为返回值-arr.sort()方法
//1.普通数组排序（升序）
var nums = [10,3,8,40,33,2];
function compare(a,b){
if(a>b){
return 1;
}else if(a==b){
return 0;
}else{
return -1;
}
}
nums.sort(compare);
console.log(nums);//-->[2, 3, 8, 10, 33, 40]
//2.对象数组排序（升序）
var objs = [{name:"admin",age:30},{name:"jack",age:20}];
function compareObject(property){
return function(obj1,obj2){ //返回一个函数
var value1 = obj1[property];//对象[属性名]-->获取属性值
var value2 = obj2[property];
if(value1>value2){
return 1;
}else if(value1==value2){
return 0;
}else{
return -1;
}
}
}
objs.sort(compareObject("age"));
console.log(objs);//-->[{name:"jack",age:20},{name:"admin",age:30}]
*** 补充：对象[属性名]-->获取属性值
var person = {
name:"lucy",
age:20,
sex:'女'
}
for(var i in person){
console.log(i+":"+person[i]);
}
--->name:lucy
age:20
sex:女
说明：i是对象的属性名，对象名[属性名]--->属性值，此方式js特有的，类似于java中的反射
2.4 函数内部属性
1.arguments-它是一个类数组对象，包含着传入函数中的所有参数
2.this：
js中的this和java一样，指的是调用代码的对象，是不固定的；
如果函数是直接被调用的，那么this--->window/global；
如果函数的调用是由组件事件触发的，那么this就是组件本身。
function showThis(){
console.log(this);
}
//1.this-->window/global
showThis();//-->window/global
<input type="button" id="btnShow" onclick="showThis();"/> -->window/global
//2.this-->组件本身
<input type="button" id="btnShow"/>
var btn = document.getElementById("btnShow");
btn.onclick = showThis;//-->按钮对象
//通过事件触发
<input type="button" id="btnShow" value="+" onclick="add(this);"/>
//这里是将btn组件本身传入
function add(btn){
var operator = btn.value;
console.log(operator);//--->"+"
}
2.5 函数属性和方法
- length:接收函数的参数个数
function add(num1,num2){
return num1+num2;
}
function show(){
alert("hello,js");
}
console.log(add.length);//-->2
console.log(show.length);//-->0
-
prototype:保存他们所有实例方法的真正位置（返回对象类型原型的引用）
-
apply()和call()方法:
//参考https://www.w3school.com.cn/js/js_function_call.asp
var person = {
fullName: function() {
return this.firstName + " " + this.lastName;
}
}
var person1 = {
firstName:"Bill",
lastName: "Gates"
}
var person2 = {
firstName:"Steve",
lastName: "Jobs"
}
var x = person.fullName.call(person1);
console.log(x);//-->Bill Gates
var y = person.fullName.call(person2);
console.log(y);//-->Steve Jobs
-
call() 和 apply() 之间的区别
不同之处是：
call() 方法分别接受参数。
apply() 方法接受数组形式的参数。
如果要使用数组而不是参数列表，则 apply() 方法非常方便
var person = {
fullName: function(city, country) {
return this.firstName + " " + this.lastName + "," + city + "," + country;
}
}
var person1 = {
firstName:"John",
lastName: "Doe"
}
var x = person.fullName.apply(person1, ["Oslo", "Norway"]);
console.log(x);//-->John Doe,Oslo,Norway
x = person.fullName.call(person1, "Oslo", "Norway");
consloe.log(x);//-->John Doe,Oslo,Norway
- ES-5中定义了一个方法：bind()
window.color = "red";
var o = {color:"blue"};
function showColor(){
alert(this.color);
}
var objShowColor = showColor.bind(o);//用o对象去调用showColor函数，返回的是showColor函数
objShowColor();//-->blue
console.log(objShowColor);
/*-->
ƒ showColor(){
alert(this.color);
}
*/
浙公网安备 33010602011771号