JavaScript函数深入了解

JavaScript函数深入了解

对象的了解

  //{} 对象的空集合

    'name'键 'Tom'值  对   键值对也可以叫名值对
  //对象是由一个个键值对组成的
    { 
    'name':'Tom',
      'age':4}

  //对象中包裹对象
  //基本数据类型
    var cat = {
      'name':'Tom',
      'age':4,
      //数组
      'family':['father','mom'],
      //放置函数
      'speak':function(){
        console.log("喵喵~");
      },
      //继续存储对象
      'friend':{
        'name':'Jerry',
        'age':4
      }
    };

构造函数的创建方式

var cat = new Object(); //也可以写成   var cat{};

访问对象的属性，并操作对象的属性

    cat.name = 'Tim'; //也可以写成 cat['name'] = 'Tim';  都叫修改原属性
    console.log(cat.name);//Tim

//不改变原来的结构，添加属性
    cat.type = '加菲猫';
    cat.color = 'white';
    console.log(cat);//name: "Tim" type: "加菲猫" color: "white"
    console.log(cat.type);//加菲猫 也可以写成 console.log(cat['type']); 


//不改变原来的结构，去删除属性
    delete cat.color;
    console.log(cat.color);//undefined


//检测一个对象是否又属性
    console.log('name' in cat);//true 说明拥有这个属性
    console.log('color' in cat);//false 因为上面删除了这个属性 所以是false

循环遍历，迭代循环

for (var p in cat){
      console.log(p);//name type 属性的名字
      console.log(cat[p]);//Tim 加菲猫 每个属性的内容
    }

关乎函数：一次封装（定义） 四处使用（调用）

命名函数及匿名函数

//命名函数
function add(num1,num2){
      var result = num1+num2;  //也可以写做 return num1+num2;
      return result;
    }
    console.log(add(1,2));//3
    console.log(add(1,3));//4
    console.log(add(1,4));//5

//匿名函数
window.onload = function(){

    }

字面量

function add (num1,num2){}

函数声明

function add(){} 
add();

函数表达式

var add = function(){}

构造函数的创建方式

var add = new Function ('num1','num2','return num1+num2');
    console.log(add(1,2));

总结：构造函数效率差，首先解析字符串变量，其次再实例化函数，函数声明和函数表达式比较直观、简洁、方便运行，所有通常用的比较多

递归调用----阶乘

函数声明，可以先使用后定义

console.log(add());//1
    function add(){
      return 1;
    }

函数表达式，先定义后使用

var add = function(){
      return 1;
    }
    console.log(add());//1

全局作用域

add();//在哪里都能调用，是全局作用域
    function add(){}

对象的定义

var person = {
      name : 'xm',
      setSex:function(sex){
        //this 对象中作为属性声明 第一个sex是属性名字 第二个sex是参数
        this.sex = sex;
      }
    };
    person.setName = function(name){
      this.name = name;
    }
    person.setName('xh');
    console.log(person.name);//xh

关于调用

//命名函数调用
function add(){

    } 
    add();

//匿名函数调用
var add = function(){

    }
    add();

//不加变量的匿名函数如何调用
(function (){
      console.log(1);
    })
    ();//1
除了加()	还能在function前面加 + - ~  单独执行匿名函数 不加是无法单独执行匿名函数的

递归调用 继承

    5!=5*4*3*2*1; ==> 5!=5*4!
    4!=4*3*2*1;   ==> 4!=4*3!
    3!=3*2*1;   ==> 3!=3*2!
    
    function factorial(num){
      if(num<=1){
        return 1;
      }
      return num*factorial(num-1);
    }
    console.log(factorial(5));//120
    console.log(factorial(4));//24

面向对象的思维方式

var operation = {
      add:function(num1,num2){
        return num1+num2;
      },
      substract:function(num1,num2){
        return num1-num2;
      },
      '@':function(){

      }
    };
    console.log('@');//@
    console.log (operation.add(1,1));//2

函数的赋值

//把add函数赋值给了key 调用变量 用operation.key不行的，必须使用[]
    var key = 'add';
    console.log(operation.add(1,1));//2
    // console.log(operation.key(1,1));//报错
    console.log(operation[key](1,1));//2

关于间接调用

//间接调用 call方法 apply方法 区别在于参数
    var name = 'xm';
    var person = {};
    person.name = 'xh';
    person.getName = function(){
      return this.name;
    }
    console.log(person.getName());//xh
    console.log(person.getName);//函数本身
    console.log(person.getName.call(window));//xm
    console.log(person.getName.apply(window));//xm

关于call和apply的区别
function add(num1,num2){
      return num1+num2;
    }
    console.log(window.add(1,2));//3
    console.log(add(1,2));//3
    // var datas = [1,2];
    console.log(add.call(window,1,2));//3
    console.log(add.apply(window,[1,2]));//3
    console.log(add.apply(window,datas));

apply必须是数组方式  相同点：都是间接调用  不同点：call是一个一个传 apply是以数组或者类数组传

参数

形参==实参

//  形参 == 实参
    function add(num1,num2){
      return num1+num2;
    }
    console.log(add(1,2));//3

实参<形参
幂运算
1、如果之传入一个值，表示默认计算2次方
2、如果传入两个值，表示计算数字的几次方

function pow (base,power){
      return Math.pow(base,power)//数学函数的幂运算
    }
    console.log(pow(3,2));//9
    console.log(pow(2,2));//4


    function pow(base,power){
      if(!power){power=2;}
      //也可以写成power=power||2; 或运算：两个都是假的才为假，只要有一个是真就是真
      return Math.pow(base,power);
    }
    console.log(pow(3));//9
    console.log(pow(2,2));//4

实参>形参

// function add(){
    //  arguments[0];
    //  arguments[1];
    //  return num1+num2;
    // }
    // add(1,2,3); arguments[0]=1 arguments[1]=2

    function add(){
      if(arguments.length==0){return;}
      var sum = 0;
      for(var i = 0;i<arguments.length;i++){
        sum+=arguments[i];
      }
      return sum;
    }
    console.log(add());//undefined
    console.log(add(1,2));//3
    console.log(add(1,2,3,4));//10

arguments 类数组，但不是数组

    //arguments真身
    // {
    //  '0':1,
    //  '1':2,
    //  '2':3,
    //  length:3
    // }

function fn(name){
      arguments[0]="";
      console.log(name);
    } 
    fn('xm');
    //空字符串 arguments和我们的形参都指向了同一个值

//arguments.callee指的是函数本身
    function add(num1,num2){
      // console.log(arguments.callee);//函数本身
      return num1+num2;
    }
    add();

阶乘

function jiecheng(num){
      if(num<=1) {return 1;}
      return num*arguments.callee(num-1);
    }
    console.log(jiecheng(5));//120
    console.log(jiecheng(4));//24
    //在严格模式use strict下不可用arguments callee

var jiecheng = function fn(num){
      if (num<=1){return 1}
        return num*fn(num-1);
    }
    console.log(jiecheng(5));//120
    console.log(jiecheng(4));//24