JavaScript 内容总结(三)函数进阶

JavaScript 内容总结

1. 函数的定义和调用
2. this
3. 严格模式
4. 高阶函数
5. 闭包
6. 递归

1.函数的定义和调用

函数声明方式

1. function关键字（命名函数）

   function fn()
   

2. 函数表达式（匿名函数）

   var f = function(){}
   

3. 利用new Function(‘参数1’，‘参数2’,…，‘函数体’)

   var f = new Function('a','b','console.log(a + b)')
   f(1,2)
   

• Function 里面参数都必须是字符串格式
• 第三种方式执行效率低
• 所有函数都是Function的实例对象
• 函数也属于对象

函数的调用方式

1. 普通函数

   function fn(){}
   fn();
   

2. 对象的方法

   var o = {
      say : function(){}
   }
   o.say();
   

3. 构造函数

   function fn(){}
   new fn();
   

4. 绑定事件函数

   btn.onclick = function(){}
   

5. 定时器函数

   setInterval(function(),1000);//这个函数是定时器自动1秒钟调用一次
   

6. 立即执行函数

   (function(){})();//自动调用
   

2.this

调用方式	this指向
普通函数	window
构造函数	实例对象 原型对象里面的方法也指向实例对象
对象方法	该方法所属对象
绑定函数	绑定事件对象
定时器函数	window
立即执行函数	window

改变函数内部this指向

1. call()方法：调用一个对象，简单理解为调用函数的方式，但是它可以改变函数的this指向

   // 语法 : fun.call(thisArg,arg1,arg2,....)
   function Father(uname, age, sex) {
     this.uname = uname;
     this.age = age;
     this.sex = sex;
   }
   
   function Son(uname, age, sex) {
     Father.call(this, uname, age, sex);//第二个作用 继承
   }
   
   var son = new Son('刘德华', 18, '男')
   console.log(son);
   

   

2. apply()方法

   • thisArg：在fun函数运行时指定的this值
   • argArray：传递的值，必须包含在数组里面
   • 返回值就是函数的返回值，因为它就是调用函数

   // 语法 : fun.apply(thisArg,[argArray])
   var arr = [1, 22, 33];
   var max = Math.max.apply(Math, arr)
   console.log(max);
   

3. bind()方法：不会调用函数

   • 返回由指定的this值和初始化参数改造的原函数拷贝

   // 语法 : fun.bind(thisArg, arg1,arg2,...)
   var o = {
     name: 'andy'
   }
   function fn(a, b) {
     console.log(this);
     console.log(a + b);
   }
   var f = fn.bind(o, 1, 2);
   f();
   
   //常用于 不立即执行的调用
   var btn = document.createElement('botton')
   var body = document.body
   body.appendChild(btn)
   btn.innerHTML = '点击'
   btn.style.backgroundColor = 'red'
   btn.onclick = function () {
     btn.innerHTML = '哈哈'
     setTimeout(function () {
       this.innerHTML = '点击'
     }.bind(this), 3000);
   }
   

总结 ：call apply bind总结

相同点：都可以改变函数内部的this指向

区别点：

1. call 和apply 会调用函数，并改变this指向
2. call 和 apply 传递的参数不同 ，call传递参数aru1,aru2 形式，apply 必须数组形式
3. bind 不会调用函数，返回拷贝函数

3.严格模式

‘use strict’

4.高阶函数

高阶函数是对其他函数进行操作的函数，它接收函数作为参数或将函数作为返回值输出,最典型的就是回调函数

5.闭包

闭包 指有权访问另一个函数作用域中变量的函数。

6.递归

函数内部自己调用自己，这个函数就是递归函数

1* 2 * 3 *n

function fn(n) {
  if (n == 1) {
    return 1;
  }
  return n * fn(n - 1)
}
console.log(fn(3));

求斐波那契数列（兔子数列）：1、1、2、3、5、8…

function fb(n) {
  if (n === 1 || n === 2) {
    return 1;
  }
  return fb(n - 1) + fb(n - 2)
}
console.log(fb(3));//2

深拷贝

var obj = {
  id: 1,
  name: 'andy',
  msg: {
    age: 8
  },
  color: ['pink', 'red']
}
var o = {};
//封装函数
function deepCopy(newobj, oldobj) {
  for (const k in oldobj) {
    var item = oldobj[k];
    //判断是否为数组
    if (item instanceof Array) {
      newobj[k] = [];
      deepCopy(newobj[k], item)
    }
    //是否是对象
    if (item instanceof Object) {
      newobj[k] = {};
      deepCopy(newobj[k], item)
    }
    //简单数据类型
    else {
      newobj[k] = item
    }
  }
}
deepCopy(o, obj)
console.log(o);

o.msg.age = 12;

console.log(obj);