02JS函数深入讲解

Posted 2021-03-05 戒奢从简，起早贪黑，努力提升

js对象

var dog = {
name : ‘a‘,
sex : ‘male‘,
age : 18,
address : ‘beijing‘          //最后一个值不用逗号
};          //若干组键值对。

 

对象创建的三种方法

一、var a = {};

二、var a = new Object();

三、Object.create();

 

对象值的访问

dog.name   或者   dog[‘name‘]

 

对象值的修改

dog.name = ‘qq‘;   或者   dog[‘name‘] = ‘qq‘;

 

对象值的删除

delete  dog.name;   或者   delete  dog[‘name‘];

 

检测对象  是否有某个  属性

console.log(‘name‘  in  dog);    //name属性是否存在dog对象中

 

对象的遍历

for(var p in dog){
console.log(p);      //遍历出属性名
console.log(dog[p]);      //遍历出属性值
}     //对象没有length属性

//注意：遍历属性值的时候 dog.p == dog里面p的字符串

 

 

js函数

//定义一次后，可随时调用。调用函数 遵循作用域链，如调用对象里面的函数，对象名.函数名();    调用

return的作用：返回值；return后面的代码不会执行。

函数的本质：函数可以调用；函数是对象，具有对象的属性方法。

 

创建函数的方法：

1、字面量

function add(num1,num2){  return num1+num2;  }        //调用：add();

 

var  add  =  function (num1,num2){  return num1+num2;  };       //调用：add();

 

2、构造函数  

var add  =  new Function( ‘num1′,‘num2′,‘return num1+num2;‘ );          //调用：add();

 

//三种创建函数的方法，除了书写区别之外，还需注意预加载的区别。

//要先定义，后调用；先定义就是预解析的时候先知道，而不是单纯地把函数写在前面。

 

函数可以添加属性和方法

add.name = “name”;     //添加name属性

add.age = function(){};    //添加age属性，并给age属性添加方法

 

函数可以当普通数据使用（如存储在数组中，对象中 等，可以赋值给一个变量）

函数可以当参数使用（如作setTimeout的参数等）

函数可以当返回值使用（如return后面返回一个函数）

 

函数调用

命名函数调用：

function add(){}

add();

 

匿名函数调用：

var add = function (){};
add();

var add = function () {}();      //匿名函数自我执行

(function (){}) ();         //function前面只要有合法字符，预解析就不会加载到，可以是+-~！等。

console.log(function(){}(););       //在控制台执行函数

 

递归调用：

function factorial(num){
if (num<=1) return 1;
else return num * factorial(num-1);
}
console.log(factorial(8));       //计算阶乘

 

方法的调用

普通方法的调用

var operation = {         //operation定义两个方法
add: function (num1,num2){
return num1+num2;
},
subtract: function (num1,num2){
return num1-num2;
}
};
operation.add(1,1);         //调用operation的加法

 

var operation = {
‘@‘: function (num1,num2){
return num1+num2;
}
};
operation[‘@‘](1,1);                //当方法名出现不合法符号时，只能这样调用。

 

浏览器调用

document.onclick = function(){ console.log(123); };            //鼠标点击的时候调用

document.onclick();          //除了点击时调用外，还可以普通调用。

 

链式调用

var operation = {
add: function (num1,num2){
console.log(num1+num2);
return this;              //输出结果后返回operation对象
},
subtract: function (num1,num2){
console.log(num1-num2);
return this;                //输出结果后返回operation对象
}
};
operation.add(1,1).subtract(8,6);

 

构造函数的调用

function Add(){}                //一般构造函数都使用大写字母开头，为了好区分
new Add();          //构造函数都是通过new来调用。

 

 

间接调用（每个函数都有call、apply方法）

//只传一个参数的情况下，call跟apply差不多

var name = ‘小小‘;
var person = {};
person.name = ‘明明‘;
person.getName = function(){
return this.name;
};
console.log(person.getName()); //直接调用，调用的对象是person
console.log(person.getName.call(window)); //间接调用，用call方法把对象 指向window
console.log(person.getName.apply(window)); //间接调用，用apply方法把对象 指向window

 

function add(num1,num2){
return num1+num2;
}
console.log(add(1,3)); //直接调用
console.log(add.call(window,1,3)); //间接调用，call可以有多个参数，用逗号分割传
console.log(add.apply(window,[1,3])); //间接调用，apply只能两个参数，但数组里面可以传多个

 

参数类型

 

参数个数

当实参 > 形参：

//计算每个数字的和
function add(){
if(arguments == 0) return;
var sum = 0;
for(var i=0; i<arguments.length; i++){
sum += arguments[i];
}
return sum;
}
console.log(add(2,4,2,3));

 

当实参 < 形参：

没有实参对应的形参，为undefined。当然还可以自行设置默认值，

//计算某个数字的多少次幂
function pow(base,power){
//if (power == 0) power = 2;
power = power || 2;
return Math.pow(base,power);
}
console.log(pow(2,2));

 

arguments类数组（每个函数都有一个类数组）

arguments.callee 表示该函数本身，在严格模式下会报错，（”use strict”;）

arguments.length  表示传进来的个数

函数名.length     表示该函数的形参个数