JS高级-函数

目录

 一、函数

 （一）函数的定义方式

（二）函数的调用方式

（三）函数内this的指向

（四）修改函数内this指向

1、call方法

2、apply方法

3、bind方法

（五）高阶函数

（六）闭包

1、概念

2、作用

3、实际运用

（七）递归函数

（八）浅拷贝 & 深拷贝

1、浅拷贝概念

 2、浅拷贝语法糖

3、深拷贝概念

二、原型与原型链

（一）函数的prototype 

（二）显示原型与隐式原型

（三）原型链

（四）探索instanceof

（五）原型对象的this指向问题

三、继承

1、call（）

2、借用构造函数继承父类型属性

---

 

 一、函数

 （一）函数的定义方式

        1、函数声明方式function关键字（命名函数）

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

        3、new Function（）

var fn = new Function('参数1', '参数2', ..., '函数体')

•  Function里面参数都必须是字符串格式
• 第三种方式执行效率低，也不方便书写，因此使用较少
• 所有函数都是Function的实例（对象）
• 函数也属于对象

（二）函数的调用方式

        1、普通函数                     fn()

        2、对象的方法                 obj.fn()

        3、构造函数                    new Star()

        4、绑定事件函数             点击按钮

        5、定时器函数                 定时结束

        6、立即执行函数(IIFE)    自主执行

（三）函数内this的指向

这些this的指向，是当我们调用函数的时候确定的。调用方式的不同决定了this的指向不同

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

（四）修改函数内this指向

JavaScript为我们专门提供了一些函数方法来帮我们更优雅地处理函数内部this的指向问题，常用的有bind()、call()、apply()三种方法

1、call方法

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

        fn.call(thisArg, arg1, arg2, ...)

2、apply方法

        apply()方法调用一个函数。简单理解为调用函数的方式，但是它可以改变函数的this指向。

/**
     *  fn.apply(thisArg, [argsArray])
     *  thisArg：在fu函数运行时指定的this值
     *  argsArray：传递的值，必须包含在数组里面
     *  返回值就是函数的返回值，因为它就是调用函数
     * */
    var o = {
      name: 'Bob'
    };
    function fn() {
      console.log(this);
    };
    fn.apply(o);

    // 主要应用：进行数组的一些操作
    var arr = [1, 66, 3, 98, 4];
    var result = Math.max.apply(null, arr);    //调用Math库中的方法，this设为null，将数组作为参数传递进去
    console.log(result);

3、bind方法

        bind()方法不会调用函数，但能改变函数内部的this指向

/**
     *  fn.bind(thisArg, arg1, arg2, ...)
     *  thisArg：在fu函数运行时指定的this值
     *  arg1, arg2：传递的其他参数
     *  返回值就是指定的this值和初始化参数改造的原函数拷贝
     * */
    // 1基础
    var o = {
      name: 'Bob'
    };
    function fn() {
      console.log(this);
    }
    var fun = fn.bind(o);   //只改this，不调用函数，返回一个改完this的拷贝函数
    fun()                   //调用拷贝函数
    // 2运用
    var btn = document.querySelector('button');
    btn.onclick = function () {
      this.disabled = true;
      setTimeout(function () {
        this.disabled = false;    //由于定时器中的this指向的是window，而此处需要的this是btn的this，因此需要利用bind将定时器内