JavaScript高级学习笔记（总结）

矫情吗；* 2023-05-22 04:39 3阅读 0赞

JavaScript简称:JS

\* JS分三个部分:

\* 1 ECMAScript标准—基础的语法

\* 2 DOM Document Object Model 文档对象模型

\* 3 BOM Browser Object Model 浏览器对象模型

\* 什么是JS?

\* 是一门脚本语言

\* 是一门解释性语言

\* 是一门弱类型语言

\* 是一门基于对象的语言

\* 是一门动态类型的语言

\* 动态页面:页面由html+css+Js

\* 向服务器发送请求,服务器那边没有页面,是动态的生成,返回给客户端

\* js最初的目的:解决用户和服务器之间的交互问题

\* js做特效,游戏,移动端,服务端

\* 编程思想:

\* 面向过程:所有的事情都是亲力亲为,注重的是过程

\* 面向对象:提出需求,找对象,对象解决,注重的是结果

\* js不是一门面向对象的语言,是基于对象的语言,js来模拟面向对象

\* 面向对象的特性:封装,继承,多态,(抽象性)

\* 封装:就是包装,把一些重用的内容进行包装,在需要的时候,直接使用

\* 把一个值,存放在一个变量中,把一些重用的代码放在函数中,把好多相同功能的函数放在一个对象中,把好多功能的对象,放在一个文件中,把一些相同的内容放在一个对象中

\* 继承:类与类之间的关系,js中没有类的概念,js中有构造函数的概念,是可以有继承的,是基于原型

\* 多态:同一个行为,针对不同的对象,产生了不同的效果

\* \*/

\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-75N3lJOB-1586969926995)(/Users/song/Desktop/05javascript高级/03-JavaScript-高级-第1天/01教学资料/media/课程大纲.png)\]

### 创建对象的三种方式 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>title</title>
      <script>
        //对象:特指的某个事物,具有属性和方法(一组无序的属性的集合)
        //特征---->属性
        //行为---->方法
        //小苏:------>姓名,性别,年龄,吃,睡觉,玩
        
        
        //创建对象三种方式:
        
        //1 字面量的方式
        //2 调用系统的构造函数
        //3 自定义构造函数方式
        
        //实例对象
    // var per1={ 
    // name:"卡卡西",
    // age:20,
    // sex:"男",
    // eat:function () { 
    // console.log("吃臭豆腐");
    // },
    // readBook:function () { 
    // console.log("亲热天堂");
    // }
    // };
    //
    // //调用系统的构造函数
    // var per2=new Object();
    // per2.name="大蛇丸";
    // per2.age=30;
    // per2.sex="男";
    // per2.eat=function () { 
    // console.log("吃榴莲");
    // };
    // per2.play=function () { 
    // console.log("这个小蛇真好玩");
    // };
    //
    // function Person() { 
    //
    // }
    // console.log(per2 instanceof Object);
    //
    // var dog=new Object();
    
    
        //自定义构造函数
        function Person(name,age,sex) { 
          this.name=name;
          this.age=age;
          this.sex=sex;
          this.play=function () { 
            console.log("天天打游戏");
          };
        }
        var per=new Person("雏田",18,"女");
        console.log(per instanceof Person);
    
    
      </script>
    </head>
    <body>
    
    
    </body>
    </html>

### 构造函数与工厂函数的区别 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>title</title>
      <script>
        function Person(name,age) { 
          this.name=name;
          this.age=age;
          this.sayHi=function () { 
            console.log("您好");
          };
        }
        //创建对象---->实例化一个对象,的同时对属性进行初始化
        var per=new Person("小红",20);
    
        /* * * 1.开辟空间存储对象 * 2.把this设置为当前的对象 * 3.设置属性和方法的值 * 4.把this对象返回 * * * * */
      </script>
    </head>
    <body>
    
    
    </body>
    </html>

### 工厂模式创建对象 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>title</title>
      <script>
        
        function createObject(name,age) { 
          var obj=new Object();
          obj.name=name;
          obj.age=age;
          obj.sayHi=function () { 
            console.log("您好");
          };
          return obj;
        }
        function Person(name,age) { 
          this.name=name;
          this.age=age;
          this.sayHi=function () { 
            console.log("您好");
          };
        }
        //创建对象---->实例化一个对象,的同时对属性进行初始化
    
        /* * 共同点:都是函数,都可以创建对象,都可以传入参数 * * 工厂模式: * 函数名是小写 * 有new, * 有返回值 * new之后的对象是当前的对象 * 直接调用函数就可以创建对象 * * 自定义构造函数: * 函数名是大写(首字母) * 没有new * 没有返回值 * this是当前的对象 * 通过new的方式来创建对象 * * * */
    
    
    
    
        var per1=new Person("小红",20);
    
        var per2=createObject("小明",20);
      </script>
    </head>
    <body>
    
    
    </body>
    </html>

### 构造函数和实例对象之间的关系 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>title</title>
      <script>
        //面向对象的思想是----抽象的过程---->实例化的过程
    
        //小苏这个人,姓名,年龄,性别, 吃饭,打招呼,睡觉
    
        //自定义构造函数----->实例化对象
        function Person(name,age,sex) { 
          this.name=name;
          this.age=age;
          this.sex=sex;
          this.eat=function () { 
            console.log("吃大蒜拌臭豆腐加榴莲酱");
          };
        }
        //构造函数---->创建对象
        var per=new Person("小苏",38,"女");
        //per.eat();//吃
        //实例对象是通过构造函数来创建
        //实例对象会指向自己的构造函数(暂时理解,是错误的)
        //把这个对象的结构显示出来
        console.dir(per);
        console.dir(Person);
    
    
        //实例对象的构造器(构造函数)
        //实例对象的构造器是指向Person的,结果是true,所以,这个实例对象per就是通过Person来创建的
        console.log(per.constructor==Person);//
    
        console.log(per.__proto__.constructor==Person);
        console.log(per.__proto__.constructor==Person.prototype.constructor);
    
    
    
        //构造函数
        function Animal(name) { 
          this.name=name;
        }
        //实例对象
        var dog=new Animal("大黄");
        console.dir(dog);//实例对象
        console.dir(Animal);//构造函数的名字
    
        console.log(dog.__proto__.constructor==Person);
        console.log(dog.__proto__.constructor==Animal);
    
    
        //判断这个对象是不是这种数据类型
        console.log(dog.constructor==Animal);
    
        console.log(dog instanceof Person);
    
    
    
        //总结:
        /* * 实例对象和构造函数之间的关系: * 1. 实例对象是通过构造函数来创建的---创建的过程叫实例化 * 2.如何判断对象是不是这个数据类型? * 1) 通过构造器的方式 实例对象.构造器==构造函数名字 * 2) 对象 instanceof 构造函数名字 * 尽可能的使用第二种方式来识别,为什么?原型讲完再说 * * * * */
    
    
    
    
    
    
      </script>
    </head>
    <body>
    
    
    </body>
    </html>

### 构造函数创建对象带来的问题 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>title</title>
      <script>
    // function Person(name,age) { 
    // this.name=name;
    // this.age=age;
    // this.eat=function () { 
    // console.log("今天吃红烧土豆");
    // }
    // }
    // var per1=new Person("小白",20);
    // var per2=new Person("小黑",30);
    //
    // console.dir(per1);
    // console.dir(per2);
    
    
    
    function myEat() { 
      console.log("吃大榴莲");
    }
    var myEat=10;
    function Person(name,age) { 
      this.name=name;
      this.age=age;
      this.eat=myEat;
    }
    var per1=new Person("小白",20);
    var per2=new Person("小黑",30);
    
    console.dir(per1);
    console.dir(per2);
    console.log(per1.eat==per2.eat);
    //通过原型来解决---------数据共享,节省内存空间,作用之一
    
    
    
    //
    // per1.eat();
    // per2.eat();
    // //不是同一个方法
    // console.log(per1.eat==per2.eat);
    //
    // for(var i=0;i<100;i++){ 
    // var per=new Person("嘎嘎",20);
    // per.eat();
    // }
      </script>
    </head>
    <body>
    
    
    </body>
    </html>

### 原型添加方法解决数据共享问题 ###

### 原型 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>title</title>
      <script>
    
    
        function Person(name,age) { 
          this.name=name;
          this.age=age;
        }
        //通过原型来添加方法,解决数据共享,节省内存空间
        Person.prototype.eat=function () { 
          console.log("吃凉菜");
        };
    
        var p1=new Person("小明",20);
        var p2=new Person("小红",30);
    
        console.dir(p1);
        console.dir(p2);
        console.dir(Person);
        p1.__proto__.eat();
    
        console.log(p1.__proto__==Person.prototype);
    
    
        /* * 原型? * 实例对象中有__proto__这个属性,叫原型,也是一个对象,这个属性是给浏览器使用,不是标准的属性----->__proto__----->可以叫原型对象 * 构造函数中有prototype这个属性,叫原型,也是一个对象,这个属性是给程序员使用,是标准的属性------>prototype--->可以叫原型对象 * * 实例对象的__proto__和构造函数中的prototype相等--->true * 又因为实例对象是通过构造函数来创建的,构造函数中有原型对象prototype * 实例对象的__proto__指向了构造函数的原型对象prototype * * * * */
    
    
        //window是对象
        //document是属性,document也是一个对象
        //write()是方法
        //window.document.write("哈哈");
        //对象.style.color=值;
    
      </script>
    </head>
    <body>
    
    
    </body>
    </html>

### 体会面向对象的和面向过程的编程思想 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>title</title>
      <style>
        div { 
          width: 300px;
          height: 200px;
          background-color: red;
        }
      </style>
    </head>
    <body>
    <input type="button" value="显示效果" id="btn"/>
    <div id="dv"></div>
    <script src="common.js"></script>
    <script>
    
      function ChangeStyle(btnObj, dvObj, json) { 
        this.btnObj = btnObj;
        this.dvObj = dvObj;
        this.json = json;
      }
      ChangeStyle.prototype.init = function () { 
        //点击按钮,改变div多个样式属性值
        var that = this;
        this.btnObj.onclick = function () { //按钮
          for (var key in that.json) { 
            that.dvObj.style[key] = that.json[key];
          }
        };
      };
    
    
      //实例化对象
    
    
      var json = { "width": "500px", "height": "800px", "backgroundColor": "blue", "opacity": "0.2"};
      var cs = new ChangeStyle(my$("btn"), my$("dv"), json);
      cs.init();//调用方法
    
      //点击p标签,设置div的样式
    
    
    </script>
    <script>
    
      //点击按钮,改变div的背景颜色
    
      // document.getElementById("btn").οnclick=function () { 
      // document.getElementById("dv").style.backgroundColor="yellow";
      // };
    
      //面向对象思想----初级的
      //按钮是一个对象,div是一个对象,颜色是一个属性
    
    
      // function ChangeStyle(btnId,dvId,color) { 
      // this.btnObj=document.getElementById(btnId);//按钮对象
      // this.dvObj=document.getElementById(dvId);//div对象
      // this.color=color;//颜色
      // }
      // //数据共享来改变背景颜色
      // ChangeStyle.prototype.init=function () { 
      // //console.log(this);//就是实例对象---就是当前对象
      // var that=this;
      // //点击按钮,改变div的背景颜色
      // this.btnObj.οnclick=function () { 
      // that.dvObj.style.backgroundColor=that.color;
      // };
      // };
    
      //实例化对象
      // var cs=new ChangeStyle("btn","dv","yellow");
      // cs.init();
    
    
      // function Person() { 
      // this.sayHi=function () { 
      // console.log(this);
      // };
      // }
      // var p=new Person();
      // p.sayHi();
    
    </script>
    
    </body>
    </html>

### 原型的练习 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>title</title>
      <script>
    
        //构造函数
    
        function Person(sex,age) { 
          this.sex=sex;
          this.age=age;
        }
        //通过原型添加方法
        Person.prototype.sayHi=function () { 
          console.log("打招呼,您好");
        };
        var per=new Person("男",20);
        console.log(per.__proto__.constructor==Person.prototype.constructor);//实例对象
        console.dir(Person);//构造函数的名字
    
        var per2=new Person("女",30);
        console.log(per.sayHi==per2.sayHi);
    
        //实例对象中有两个属性(这两个属性是通过构造函数来获取的),__proto__这个属性
        //构造函数中并没有sex和age的两个属性
    
        /* * * 实例对象中有个属性,__proto__,也是对象,叫原型,不是标准的属性,浏览器使用的 * 构造函数中有一个属性,prototype,也是对象,叫原型,是标准属性,程序员使用 * * 原型---->__proto__或者是prototype,都是原型对象, * 原型的作用:共享数据,节省内存空间 * * * */
    
      </script>
    </head>
    <body>
    
    
    </body>
    </html>

### 构造函数和实例对象的关系 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>title</title>
      <script>
    
    // //通过构造函数实例对象,并初始化
    // var arr=new Array(10,20,30,40);
    // //join是方法,实例对象调用的方法
    // arr.join("|");
    // console.dir(arr);
    // //join方法在实例对象__proto__原型
    // console.log(arr.__proto__==Array.prototype);
    
      </script>
      <script>
    
        //原型的作用之一:共享数据,节省内存空间
        //构造函数
        function Person(age,sex) { 
          this.age=age;
          this.sex=sex;
        }
        //通过构造函数的原型添加一个方法
        Person.prototype.eat=function () { 
          console.log("明天中午吃完饭就要演讲,好痛苦");
        };
    
        var per=new Person(20,"男");
       // per.__proto__.eat();
        per.eat();
       // per.eat();
    
    
        //构造函数,原型对象,实例对象之间的关系
    
        console.dir(Person);
       //console.dir(per);
    
    
    
      </script>
    </head>
    <body>
    
    
    </body>
    </html>

### 总结三者的关系 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>title</title>
      <script>
    
        /* * * * 构造函数可以实例化对象 * 构造函数中有一个属性叫prototype,是构造函数的原型对象 * 构造函数的原型对象(prototype)中有一个constructor构造器,这个构造器指向的就是自己所在的原型对象所在的构造函数 * 实例对象的原型对象(__proto__)指向的是该构造函数的原型对象 * 构造函数的原型对象(prototype)中的方法是可以被实例对象直接访问的 * * * * */
      </script>
    </head>
    <body>
    
    
    </body>
    </html>

### 利用数据原型共享数据 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>title</title>
      <script>
        //什么样子的数据是需要写在原型中?
        //需要共享的数据就可以写原型中
        //原型的作用之一:数据共享
    
        //属性需要共享,方法也需要共享
        //不需要共享的数据写在构造函数中,需要共享的数据写在原型中
        //构造函数
        function Student(name,age,sex) { 
          this.name=name;
          this.age=age;
          this.sex=sex;
        }
        //所有学生的身高都是188,所有人的体重都是55
        //所有学生都要每天写500行代码
        //所有学生每天都要吃一个10斤的西瓜
        //原型对象
        Student.prototype.height="188";
        Student.prototype.weight="55kg";
        Student.prototype.study=function () { 
          console.log("学习,写500行代码,小菜一碟");
        };
        Student.prototype.eat=function () { 
          console.log("吃一个10斤的西瓜");
        };
        //实例化对象,并初始化
        var stu=new Student("晨光",57,"女");
        console.dir(Student);
        console.dir(stu);
    
    
    // stu.eat();
    // stu.study();
    
    
      </script>
    </head>
    <body>
    
    
    </body>
    </html>

### 原型的简单语法 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>title</title>
      <script>
        function Student(name, age, sex) { 
          this.name = name;
          this.age = age;
          this.sex = sex;
        }
        //简单的原型写法
        Student.prototype = { 
          //手动修改构造器的指向
          constructor:Student,
          height: "188",
          weight: "55kg",
          study: function () { 
            console.log("学习好开心啊");
          },
          eat: function () { 
            console.log("我要吃好吃的");
          }
        };
    
        var stu=new Student("段飞",20,"男");
        stu.eat();
        stu.study();
        console.dir(Student);
        console.dir(stu);
    
    
    
    
        // Student.prototype.height="188";
        // Student.prototype.weight="55kg";
        // Student.prototype.study=function () { 
        // console.log("学习,写500行代码,小菜一碟");
        // };
        // Student.prototype.eat=function () { 
        // console.log("吃一个10斤的西瓜");
        // };
        // //实例化对象,并初始化
        // var stu=new Student("晨光",57,"女");
        // console.dir(Student);
        // console.dir(stu);
    
      </script>
    </head>
    <body>
    
    
    </body>
    </html>

### 原型中添加方法 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>title</title>
      <script>
    
    // function Person(age) { 
    // this.age=age;
    // this.sayHi=function () { 
    // console.log("考尼奇瓦");
    // //打招呼的同时,直接调用吃的方法
    //
    // };
    // this.eat=function () { 
    // console.log("吃东西啦");
    // this.sayHi();
    // };
    // }
    // //实例对象的方法,是可以相互调用的
    //
    // //实例化对象，并初始化
    // var per=new Person(20);
    // //调用方法
    // //per.sayHi();
    // per.eat();
    
    
        //原型中的方法,是可以相互访问的
    
        function Animal(name,age) { 
          this.name=name;
          this.age=age;
        }
        //原型中添加方法
        Animal.prototype.eat=function () { 
          console.log("动物吃东西");
          this.play();
        };
        Animal.prototype.play=function () { 
          console.log("玩球");
          this.sleep();
        };
        Animal.prototype.sleep=function () { 
          console.log("睡觉了");
        };
    
        var dog=new Animal("小苏",20);
        dog.eat();
        //原型对象中的方法,可以相互调用
      </script>
    </head>
    <body>
    
    
    </body>
    </html>

### 实例对象使用属性和方法层层的搜索 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>title</title>
      <script>
        function Person(age,sex) { 
          this.age=age;//年龄
          this.sex=sex;
          this.eat=function () { 
            console.log("构造函数中的吃");
          };
        }
        Person.prototype.sex="女";
        Person.prototype.eat=function () { 
          console.log("原型对象中的吃");
        };v
    
    
        var per=new Person(20,"男");
        console.log(per.sex);//男
        per.eat();
        console.dir(per);
    
    
        /* * 实例对象使用的属性或者方法,先在实例中查找,找到了则直接使用,找不到则,去实例对象的__proto__指向的原型对象prototype中找,找到了则使用,找不到则报错 * * * */
    
    
      </script>
    </head>
    <body>
    
    
    </body>
    </html>

### 为内置对象添加原型方法 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>title</title>
      <script>
        //为内置对象添加原型方法
    
    // var arr=new Array(10,20,30,40,50);
        // arr.join("|");
        // console.dir(arr);
        //
        //
        // var str=new String("哦,唛嘎的");
        // str.indexOf("哦");
        // console.dir(str);
        
        
        // var dt=new Date();
        // dt.getFullYear();
        // console.dir(dt);
    
        //实例中的方法如果没有,去创建该实例对象的构造函数的原型对象中找
    
    
    
        //我们能否为系统的对象的原型中添加方法,相当于在改变源码
        //我希望字符串中有一个倒序字符串的方法
        String.prototype.myReverse=function () { 
          for(var i=this.length-1;i>=0;i--){ 
            console.log(this[i]);
          }
        };
        var str="abcdefg";
        str.myReverse();
    
    
        //为Array内置对象的原型对象中添加方法
        Array.prototype.mySort=function () { 
          for(var i=0;i<this.length-1;i++){ 
              for(var j=0;j<this.length-1-i;j++){ 
                  if(this[j]<this[j+1]){ 
                      var temp=this[j];
                    this[j]=this[j+1];
                    this[j+1]=temp;
                  }//end if
              }// end for
          }//end for
        };
    
        var arr=[100,3,56,78,23,10];
        arr.mySort();
        console.log(arr);
    
    
        String.prototype.sayHi=function () { 
          console.log(this+"哈哈,我又变帅了");
        };
    
        //字符串就有了打招呼的方法
        var str2="小杨";
        str2.sayHi();
      </script>
    </head>
    <body>
    
    
    </body>
    </html>

### 把局部变量变成全局变量 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>title</title>
      <script>
    
        //函数的自调用---自调用函数
    
        //一次性的函数--声明的同时,直接调用了
    // (function () { 
    // console.log("函数");
    //
    //
    // })();
    
    
        //页面加载后.这个自调用函数的代码就执行完了
    // (function (形参) { 
    // var num=10;//局部变量
    // })(实参);
    // console.log(num);
    
    
    // (function (win) { 
    // var num=10;//局部变量
    // //js是一门动态类型的语言,对象没有属性,点了就有了
    // win.num=num;
    // })(window);
    // console.log(num);
    
        //如何把局部变量变成全局变量?
        //把局部变量给window就可以了
    
    
    
      </script>
    </head>
    <body>
    
    
    </body>
    </html>

### 把随机数对象暴露给window成为全局对象 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>title</title>
      <script>
    
        //通过自调用函数产生一个随机数对象,在自调用函数外面,调用该随机数对象方法产生随机数
        (function (window) { 
          //产生随机数的构造函数
          function Random() { 
          }
          //在原型对象中添加方法
          Random.prototype.getRandom = function (min,max) { 
            return Math.floor(Math.random()*(max-min)+min);
          };
          //把Random对象暴露给顶级对象window--->外部可以直接使用这个对象
          window.Random=Random;
        })(window);
        //实例化随机数对象
        var rm=new Random();
        //调用方法产生随机数
        console.log(rm.getRandom(0,5));
        //全局变量
      </script>
    </head>
    <body>
    
    
    </body>
    </html>

### 案例随机小方块 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>title</title>
      <style>
        .map{ 
          width: 800px;
          height: 600px;
          background-color: #CCC;
          position: relative;
        }
      </style>
    </head>
    <body>
    <div class="map"></div>
    <script src="common.js"></script>
    <script>
      //产生随机数对象的
      (function (window) { 
        function Random() { 
        }
        Random.prototype.getRandom=function (min,max) { 
          return Math.floor(Math.random()*(max-min)+min);
        };
        //把局部对象暴露给window顶级对象,就成了全局的对象
        window.Random=new Random();
      })(window);//自调用构造函数的方式,分号一定要加上
    
    
      //产生小方块对象
      (function (window) { 
        //console.log(Random.getRandom(0,5));
        //选择器的方式来获取元素对象
        var map=document.querySelector(".map");
    
        //食物的构造函数
        function Food(width,height,color) { 
          this.width=width||20;//默认的小方块的宽
          this.height=height||20;//默认的小方块的高
          //横坐标,纵坐标
          this.x=0;//横坐标随机产生的
          this.y=0;//纵坐标随机产生的
          this.color=color;//小方块的背景颜色
          this.element=document.createElement("div");//小方块的元素
        }
        //初始化小方块的显示的效果及位置---显示地图上
        Food.prototype.init=function (map) { 
          //设置小方块的样式
          var div=this.element;
          div.style.position="absolute";//脱离文档流
          div.style.width=this.width+"px";
          div.style.height=this.height+"px";
          div.style.backgroundColor=this.color;
          //把小方块加到map地图中
          map.appendChild(div);
          this.render(map);
        };
        //产生随机位置
        Food.prototype.render=function (map) { 
          //随机产生横纵坐标
          var x=Random.getRandom(0,map.offsetWidth/this.width)*this.width;
          var y=Random.getRandom(0,map.offsetHeight/this.height)*this.height;
          this.x=x;
          this.y=y;
          var div=this.element;
          div.style.left=this.x+"px";
          div.style.top=this.y+"px";
        };
    
        //实例化对象
        var fd=new Food(20,20,"green");
        fd.init(map);
        console.log(fd.x+"===="+fd.y);
     
        
      })(window);
    </script>
    </body>
    </html>

## 第二部分 ##

### 承上总结 ###

### 二部分范围 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>title</title>
      <script>
        //案例:贪吃蛇---面向对象的思想
        //原型添加方法的练习----熟练
        //私有的函数----外部不能访问,自己访问
        //陌生的方法:bind(对象)------直接用,大概解释一下, 十一回来之后讲解这个方法
        //三个对象
        //面向对象的编程思想:根据需求,抽象出相关的对象,总结对象的特征和行为,把特征变成属性，行为变成方法,然后定义(js)构造函数,实例化对象,通过对象调用属性和方法,完成相应的需求.---编程的思想
    
      </script>
    </head>
    <body>
    
    
    </body>
    </html>

### 贪吃蛇案例 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>title</title>
      <style>
        .map { 
          width: 800px;
          height: 600px;
          background-color: #CCC;
          position: relative;
        }
      </style>
    </head>
    <body>
    
    <div class="map"></div>
    <script>
    
    
      //自调用函数----食物的
      (function () { 
        var elements = [];//用来保存每个小方块食物的
        //食物就是一个对象,有宽,有高,有颜色,有横纵坐标,先定义构造函数,然后创建对象
        function Food(x, y, width, height, color) { 
          //横纵坐标
          this.x = x || 0;
          this.y = y || 0;
          //宽和高
          this.width = width || 20;
          this.height = height || 20;
          //背景颜色
          this.color = color || "green";
        }
    
        //为原型添加初始化的方法(作用：在页面上显示这个食物)
        //因为食物要在地图上显示,所以,需要地图的这个参数(map---就是页面上的.class=map的这个div)
        Food.prototype.init = function (map) { 
          //先删除这个小食物
          //外部无法访问的函数
          remove();
    
          //创建div
          var div = document.createElement("div");
          //把div加到map中
          map.appendChild(div);
          //设置div的样式
          div.style.width = this.width + "px";
          div.style.height = this.height + "px";
          div.style.backgroundColor = this.color;
          //先脱离文档流
          div.style.position = "absolute";
          //随机横纵坐标
          this.x = parseInt(Math.random() * (map.offsetWidth / this.width)) * this.width;
          this.y = parseInt(Math.random() * (map.offsetHeight / this.height)) * this.height;
          div.style.left = this.x + "px";
          div.style.top = this.y + "px";
    
          //把div加入到数组elements中
          elements.push(div);
        };
    
        //私有的函数---删除食物的
        function remove() { 
          //elements数组中有这个食物
          for (var i = 0; i < elements.length; i++) { 
            var ele = elements[i];
            //找到这个子元素的父级元素,然后删除这个子元素
            ele.parentNode.removeChild(ele);
            //再次把elements中的这个子元素也要删除
            elements.splice(i, 1);
          }
        }
    
        //把Food暴露给Window,外部可以使用
        window.Food = Food;
      }());
    
      //自调用函数---小蛇
      (function () { 
        var elements = [];//存放小蛇的每个身体部分
        //小蛇的构造函数
        function Snake(width, height, direction) { 
          //小蛇的每个部分的宽
          this.width = width || 20;
          this.height = height || 20;
          //小蛇的身体
          this.body = [
            { x: 3, y: 2, color: "red"},//头
            { x: 2, y: 2, color: "orange"},//身体
            { x: 1, y: 2, color: "orange"}//身体
          ];
          //方向
          this.direction = direction || "right";
        }
    
        //为原型添加方法--小蛇初始化的方法
        Snake.prototype.init = function (map) { 
          //先删除之前的小蛇
          remove();//===========================================
    
          //循环遍历创建div
          for (var i = 0; i < this.body.length; i++) { 
            //数组中的每个数组元素都是一个对象
            var obj = this.body[i];
            //创建div
            var div = document.createElement("div");
            //把div加入到map地图中
            map.appendChild(div);
            //设置div的样式 
            div.style.position = "absolute";
            div.style.width = this.width + "px";
            div.style.height = this.height + "px";
            //横纵坐标
            div.style.left = obj.x * this.width + "px";
            div.style.top = obj.y * this.height + "px";
            //背景颜色
            div.style.backgroundColor = obj.color;
            //方向暂时不定
            //把div加入到elements数组中----目的是为了删除
            elements.push(div);
          }
        };
    
        //为原型添加方法---小蛇动起来
        Snake.prototype.move = function (food, map) { 
          //改变小蛇的身体的坐标位置
          var i = this.body.length - 1;//2
          for (; i > 0; i--) { 
            this.body[i].x = this.body[i - 1].x;
            this.body[i].y = this.body[i - 1].y;
          }
          //判断方向---改变小蛇的头的坐标位置
          switch (this.direction) { 
            case "right":
              this.body[0].x += 1;
              break;
            case "left":
              this.body[0].x -= 1;
              break;
            case "top":
              this.body[0].y -= 1;
              break;
            case "bottom":
              this.body[0].y += 1;
              break;
          }
    
          //判断有没有吃到食物
          //小蛇的头的坐标和食物的坐标一致
          var headX=this.body[0].x*this.width;
          var headY=this.body[0].y*this.height;
          //判断小蛇的头的坐标和食物的坐标是否相同
          if(headX==food.x&&headY==food.y){ 
            //获取小蛇的最后的尾巴
            var last=this.body[this.body.length-1];
            //把最后的蛇尾复制一个,重新的加入到小蛇的body中
            this.body.push({ 
              x:last.x,
              y:last.y,
              color:last.color
            });
            //把食物删除,重新初始化食物
            food.init(map);
          }
        }
        ;//删除小蛇的私有的函数=============================================================================
        function remove() { 
          //删除map中的小蛇的每个div,同时删除elements数组中的每个元素,从蛇尾向蛇头方向删除div
          var i = elements.length - 1;
          for (; i >= 0; i--) { 
            //先从当前的子元素中找到该子元素的父级元素,然后再弄死这个子元素
            var ele = elements[i];
            //从map地图上删除这个子元素div
            ele.parentNode.removeChild(ele);
            elements.splice(i, 1);
          }
        }
    
        //把Snake暴露给window,外部可以访问
        window.Snake = Snake;
      }());
    
      //自调用函数---游戏对象================================================
      (function () { 
    
        var that = null;//该变量的目的就是为了保存游戏Game的实例对象-------
    
        //游戏的构造函数
        function Game(map) { 
          this.food = new Food();//食物对象
          this.snake = new Snake();//小蛇对象
          this.map = map;//地图
          that = this;//保存当前的实例对象到that变量中-----------------此时that就是this
        }
    
        //初始化游戏-----可以设置小蛇和食物显示出来
        Game.prototype.init = function () { 
          //初始化游戏
          //食物初始化
          this.food.init(this.map);
          //小蛇初始化
          this.snake.init(this.map);
          //调用自动移动小蛇的方法========================||调用了小蛇自动移动的方法
          this.runSnake(this.food, this.map);
          //调用按键的方法
          this.bindKey();//========================================
        };
    
        //添加原型方法---设置小蛇可以自动的跑起来
        Game.prototype.runSnake = function (food, map) { 
    
          //自动的去移动
          var timeId = setInterval(function () { 
            //此时的this是window
            //移动小蛇
            this.snake.move(food, map);
            //初始化小蛇
            this.snake.init(map);
            //横坐标的最大值
            var maxX = map.offsetWidth / this.snake.width;
            //纵坐标的最大值
            var maxY = map.offsetHeight / this.snake.height;
            //小蛇的头的坐标
            var headX = this.snake.body[0].x;
            var headY = this.snake.body[0].y;
            //横坐标
            if (headX < 0 || headX >= maxX) { 
              //撞墙了,停止定时器
              clearInterval(timeId);
              alert("游戏结束");
            }
            //纵坐标
            if (headY < 0 || headY >= maxY) { 
              //撞墙了,停止定时器
              clearInterval(timeId);
              alert("游戏结束");
            }
          }.bind(that), 150);
        };
    
        //添加原型方法---设置用户按键,改变小蛇移动的方向
        Game.prototype.bindKey=function () { 
    
          //获取用户的按键,改变小蛇的方向
          document.addEventListener("keydown",function (e) { 
            //这里的this应该是触发keydown的事件的对象---document,
            //所以,这里的this就是document
            //获取按键的值
            switch (e.keyCode){ 
              case 37:this.snake.direction="left";break;
              case 38:this.snake.direction="top";break;
              case 39:this.snake.direction="right";break;
              case 40:this.snake.direction="bottom";break;
            }
          }.bind(that),false);
        };
    
        //把Game暴露给window,外部就可以访问Game对象了
        window.Game = Game;
      }());
    
    
    
      //初始化游戏对象
      var gm = new Game(document.querySelector(".map"));
    
      //初始化游戏---开始游戏
      gm.init();
    
    
      //外部测试代码
      // var fd = new Food();
      // fd.init(document.querySelector(".map"));
      // //创建小蛇
      // var snake = new Snake();
      // snake.init(document.querySelector(".map"));//先在地图上看到小蛇
      //
      //
      //
      // setInterval(function () { 
      // snake.move(fd, document.querySelector(".map"));
      // snake.init(document.querySelector(".map"));
      // }, 150);
    
    
      // snake.move(fd, document.querySelector(".map"));//走一步
      // snake.init(document.querySelector(".map"));//初始化---重新画一条小蛇(先删除之前的小蛇,把现在的小蛇显示出来)
    
      // snake.move(fd, document.querySelector(".map"));
      // snake.init(document.querySelector(".map"));
      // snake.move(fd, document.querySelector(".map"));
      // snake.init(document.querySelector(".map"));
      // snake.move(fd, document.querySelector(".map"));
      // snake.init(document.querySelector(".map"));
      // snake.move(fd, document.querySelector(".map"));
      // snake.init(document.querySelector(".map"));
      // snake.move(fd, document.querySelector(".map"));
      // snake.init(document.querySelector(".map"));
      //
      // snake.move(fd, document.querySelector(".map"));
      // snake.init(document.querySelector(".map"));
    
    
      // fd.init(document.querySelector(".map"));
      // fd.init(document.querySelector(".map"));
      // fd.init(document.querySelector(".map"));
      // fd.init(document.querySelector(".map"));
      //console.log(fd.x+"====>"+fd.y);
    
      //console.log(fd.width);
    
    </script>
    </body>
    </html>

## 第三部分 ##

### 第二部分回顾 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>title</title>
      <script>
        /* * * 复习: * * 面向过程和面向对象都是编程的思想,方式不一样 * 面向过程:凡事都是亲力亲为,所有的代码都要自己写,每一步都要很清楚,注重的是过程 * 面向对象:执行者成为指挥者,只要找对象,然后让对象做相关的事情,注重的是结果 * 面向对象的特性:封装,继承,多态 * 封装；就是代码的封装,把一些特征和行为封装在对象中. * 面向对象的编程思想:根据需求,抽象出相关的对象,总结对象的特征和行为,把特征变成属性，行为变成方法,然后定义(js)构造函数,实例化对象,通过对象调用属性和方法,完成相应的需求.---编程的思想 * * 对象:具体特指的某个事物,有特征(属性)和行为(方法) * * 如何创建对象? * 通过调用new Object(),还有{},自定义构造函数 * * 创建对象的方式 * 1. 调用系统Object()----->创建出来的对象都是Object类型的,不能很明确的指出这个对象是属于什么类型 * 2. 字面量的方式{}----->只能创建一个对象(一次只能创建一个) * * 3.工厂模式创建对象----->----->推论---->自定义构造函数的方式 * 自定义构造函数(优化后的工厂模式) * * 自定义构造函数创建对象:4件事 * 1.在内存中申请一块空闲的空间,存储创建的对象 * 2.this就是当前实例化的对象 * 3.设置对象中的属性和方法(为对象添加属性和方法,为属性和方法赋值) * 4.把创建后的对象返回 * 都是需要通过new的方式 * * * 什么是原型? * 构造函数中有一个属性prototype,是原型,程序员使用的 * 实例对象中有一个属性__proto__,是原型,浏览器使用的,不是很标准的, * 实例对象中的__proto__指向的就是该实例对象中的构造函数中的prototype * 构造函数中的prototype里面的属性或者方法,可以直接通过实例对象调用 * 正常的写法:实例对象.__proto__才能访问到构造函数中的prototype中的属性或者方法 * per.__proto__.eat();//__proto__不是标准的属性 * per.eat(); * 原型就是属性,而这个属性也是一个对象 * Person.prototype--->是属性 * Person.prototype.属性或者Person.ptototype.方法() * * 本身在构造函数中定义的属性和方法,当实例化对象的时候,实例对象中的属性和方法都是在自己的空间中存在的,如果是多个对象。这些属性和方法都会在单独的空间中存在,浪费内存空间,所以,为了数据共享,把想要节省空间的属性或者方法写在原型对象中,达到了数据共享，实现了节点内存空间 * function Person(name){ * this.name=name; * } * Person.prototype.sex="男"; * var per=new Person("小明"); * per.sex * var per2=new Person("小芳"); * per2.sex * * * 原型的作用之一:数据共享,节省内存空间 * * 原型的写法: * 构造函数.prototype.属性=值 * 构造函数.prototype.方法=值---->函数.prototype,函数也是对象,所以,里面也有__proto__ * 实例对象.prototype-------->实例对象中没有这个属性,只有__proto__(暂时的) * * 简单的原型的写法 * 缺陷:--->新的知识点---->原型直接指向{}---->就是一个对象,没有构造器 * 构造函数.prototype={ * 切记:如果这这种写法,要把构造器加上 * * }; * * * 通过原型为内置对象添加原型的属性或者方法----->原因: * 系统的内置对象的属性和方法可能不满足现在需求,所以,可以通过原型的方式加入属性或者方法,为了方便开发 * * 为内置对象的原型中添加属性和方法,那么这个内置对象的实例对象就可以直接使用了 * String.prototype.方法=匿名函数; * var str="哈哈"; * str.方法();---->实例对象可以直接调用原型中的属性或者方法 * * * String.prototype.fdsfdsf=function(){}; * 凡是string的实例对象都可以调用刚刚加入的方法 * * * * * * * */
        /* * 面向对象的思想来做: 分析对象,抽象出对象的特征和行为,定义构造函数,属性可以不共享 * 部分方法需要共享,方法加到prototype中定义(在原型中定义方法,数据共享,节省内存空间) * * 食物对象(食物的横纵坐标,宽和高,背景颜色) * * 食物需要画出来---渲染出来--画,随机的画,在画食物的时候要先删除原来的食物 * * * 小蛇对象(宽，高,方向) * 蛇需要画出来---渲染出来--画,每走一次,需要把前一次的小蛇删除 * 蛇走的时候,需要方向,是否吃到了食物 * 小蛇移动的时候,是否吃了食物(吃了就要把小蛇的后面加一个食物的宽和高，颜色,无非就是把原来的蛇尾复制了一个加入到body中,------>把蛇尾拿出来再次加入到蛇尾的后面) * * 游戏对象(初始化食物,初始化小蛇,自动移动小蛇,判断按键) * 自动的设置小蛇移动,判断小蛇是否撞墙,用户按下了什么方向键 * * window.变量=值;把这个局部变量的值暴露给window，成为了全局变量 * * 对象.bind(参数);---->改变this的指向 * * * * * */
    
    
        function Person(age) { 
          this.age=age;
          this.study=function () { 
    
          }
        }
        Person.prototype.sex="男";//属性,属性在原型中
        Person.prototype.sayHi=function () { //方法，方法在原型中
          console.log("您好");
        };
        //实例化对象同时进行初始化
        var per=new Person(10);
    // console.log(per.__proto__.sex);
    // per.__proto__.sayHi();
    
        console.log(per.sex);
        per.sayHi();
    
        Person.prototype={ 
          //简单的原型的写法,缺少构造器
          constructor:Person
        };
       //为内置对象添加原型方法
        String.prototype.sayHi=function () { 
          console.log("字符串的打招呼的方法");
        };
        //是一个实例对象
        var str="字符串";
        str.sayHi();
        //实例对象调用属性或者方法,属性或者方法肯定是在构造函数中或者是构造函数的原型中
      </script>
    </head>
    <body>
    
    
    </body>
    </html>

### 第二部分大纲 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>title</title>
      <script>
    
    
        /* * * 重点: 原型链 * 重点:不同的继承 * 原型的另一个作用 * 重点:this指向要知道到底是谁 * * 复习原型 * 原型链 * 原型的指向是否可以改变 * 继承 * 如何实现继承 * 原型的方式继承 * 借用构造函数继承 * 组合继承 * 拷贝继承 * * 函数的不同的表现方式 * 函数的调用的不同的方式 * * this指向 * 严格模式 * * 函数也是对象---记住就可以了 * 对象不一定是函数 * * 数组中的函数如何调用 * apply和call讲了 * * * * * * * * */
      </script>
    </head>
    <body>
    
    
    </body>
    </html>

### 原型和原型链 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>title</title>
      <script>
        //使用对象---->使用对象中的属性和对象中的方法,使用对象就要先有构造函数
        //构造函数
        function Person(name,age) { 
          //属性
          this.name=name;
          this.age=age;
          //在构造函数中的方法
          this.eat=function () { 
            console.log("吃好吃的");
          };
        }
        //添加共享的属性
        Person.prototype.sex="男";
        //添加共享的方法
        Person.prototype.sayHi=function () { 
          console.log("您好啊,怎么这么帅,就是这么帅");
        };
        //实例化对象,并初始化
        var per=new Person("小明",20);
        per.sayHi();
        //如果想要使用一些属性和方法,并且属性的值在每个对象中都是一样的,方法在每个对象中的操作也都是一样,那么,为了共享数据,节省内存空间,是可以把属性和方法通过原型的方式进行赋值
    
        console.dir(per);//实例对象的结构
        console.dir(Person);//构造函数的结构
    
        //实例对象的原型__proto__和构造函数的原型prototype指向是相同的
    
        //实例对象中的__proto__原型指向的是构造函数中的原型prototype
        console.log(per.__proto__==Person.prototype);
        //实例对象中__proto__是原型,浏览器使用的
        //构造函数中的prototype是原型,程序员使用的
    
        //原型链:是一种关系,实例对象和原型对象之间的关系,关系是通过原型(__proto__)来联系的
    
    
    
      </script>
    </head>
    <body>
    
    
    </body>
    </html>

### 原型的指向是否可以改变 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>title</title>
      <script>
        //构造函数中的this就是实例对象
        //原型对象中方法中的this就是实例对象
    // function Person(age) { 
    // this.age=age;
    // console.log(this);
    // }
    // Person.prototype.eat=function () { 
    // console.log(this);
    // console.log("您吃了没,走着,吃点臭豆腐去");
    // };
    // var per=new Person(10);
    // per.eat();
    // console.log(per);
    
    
    
    
    
    
    
    // function Student() { 
    //
    // }
    // Student.prototype.study=function () { 
    // console.log("就是天天学习,学习如何做人,如何敲代码,如何成为人");
    // };
    // Student.prototype={ 
    // eat:function () { 
    // console.log("哈哈,好吃的榴莲酥");
    // }
    // };
    //
    // var stu=new Student();
    //
    // stu.eat();
    
    
    
    
    
        //人的构造函数
        function Person(age) { 
          this.age=10;
        }
        //人的原型对象方法
        Person.prototype.eat=function () { 
          console.log("人的吃");
        };
        //学生的构造函数
        function Student() { 
    
        }
        Student.prototype.sayHi=function () { 
          console.log("嗨,小苏你好帅哦");
        };
        //学生的原型,指向了一个人的实例对象
        Student.prototype=new Person(10);
        var stu=new Student();
        stu.eat();
        stu.sayHi();
    
        //原型指向可以改变
        //实例对象的原型__proto__指向的是该对象所在的构造函数的原型对象
        //构造函数的原型对象(prototype)指向如果改变了,实例对象的原型(__proto__)指向也会发生改变
    
        //原型的指向是可以改变的
        //实例对象和原型对象之间的关系是通过__proto__原型来联系起来的,这个关系就是原型链
    
    
    
    
    
      </script>
    </head>
    <body>
    
    
    </body>
    </html>

### 原型最终指向了哪里 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>title</title>
      <script>
        function Person() { 
    
        }
        Person.prototype.eat=function () { 
          console.log("吃东西");
        };
    
        var per=new Person();
        console.dir(per);
        console.dir(Person);
    
        //实例对象中有__proto__原型
        //构造函数中有prototype原型
        //prototype是对象
        //所以,prototype这个对象中也有__proto__,那么指向了哪里
        //实例对象中的__proto__指向的是构造函数的prototype
        //所以,prototype这个对象中__proto__指向的应该是某个构造函数的原型prototype
    
        //Person的prototype中的__proto__的指向
        //console.log(Person.prototype.__proto__);
    
        //per实例对象的__proto__------->Person.prototype的__proto__---->Object.prototype的__proto__是null
    
        console.log(per.__proto__==Person.prototype);
        console.log(per.__proto__.__proto__==Person.prototype.__proto__);
        console.log(Person.prototype.__proto__==Object.prototype);
        console.log(Object.prototype.__proto__);
      </script>
    </head>
    <body>
    
    
    </body>
    </html>

### 原型指向改变如何添加方法和访问 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>title</title>
      <script>
        // //人的构造函数
        // function Person(age) { 
        // this.age=age;
        // }
        // //人的原型中添加方法
        // Person.prototype.eat=function () { 
        // console.log("人正在吃东西");
        // };
        // //学生构造函数
        // function Student(sex) { 
        // this.sex=sex;
        // }
        //
        // //学生的原型中添加方法----先在原型中添加方法
        // Student.prototype.sayHi=function () { 
        // console.log("您好哦");
        // };
        // //改变了原型对象的指向
        // Student.prototype=new Person(10);
        //
        // var stu=new Student("男");
        // stu.eat();
        // stu.sayHi();
        //
    
    
        //
        // //人的构造函数
        // function Person(age) { 
        // this.age=age;
        // }
        // //人的原型中添加方法
        // Person.prototype.eat=function () { 
        // console.log("人正在吃东西");
        // };
        // //学生构造函数
        // function Student(sex) { 
        // this.sex=sex;
        // }
        //
        // //改变了原型对象的指向
        // Student.prototype=new Person(10);
        // //学生的原型中添加方法----先在原型中添加方法
        // Student.prototype.sayHi=function () { 
        // console.log("您好哦");
        // };
        // var stu=new Student("男");
        // stu.eat();
        // stu.sayHi();
        //
        // console.dir(stu);
    
        //如果原型指向改变了,那么就应该在原型改变指向之后添加原型方法
    
    
        function Person(age) { 
          this.age = age;
        }
    
        //指向改变了
        Person.prototype = { 
          eat: function () { 
            console.log("吃");
          }
        };
        //先添加原型方法
        Person.prototype.sayHi = function () { 
          console.log("您好");
        };
        var per = new Person(10);
        per.sayHi();
    
      </script>
    </head>
    <body>
    
    
    </body>
    </html>

### 实例对象的属性和原型对象中属性重名问题 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>title</title>
      <script>
    
        function Person(age,sex) { 
          this.age=age;
          this.sex=sex;
        }
        Person.prototype.sex="女";
        var per=new Person(10,"男");
        console.log(per.sex);
        //因为JS是一门动态类型的语言,对象没有什么,只要点了,那么这个对象就有了这个东西,没有这个属性,只要对象.属性名字,对象就有这个属性了,但是,该属性没有赋值,所以,结果是:undefined
        console.log(per.fdsfdsfsdfds);
    
    
        console.log(fsdfdsfds);
    
    
    
        //实例对象访问这个属性,应该先从实例对象中找,找到了就直接用，找不到就去指向的原型对象中找,找到了就使用,找不到呢?=====
        //通过实例对象能否改变原型对象中的属性值?不能
        //就想改变原型对象中属性的值,怎么办?直接通过原型对象.属性=值;可以改变
    // Person.prototype.sex="哦唛嘎的";
    // per.sex="人";
    // console.log(per.sex);
    //
    // console.dir(per);
      </script>
    </head>
    <body>
    
    
    </body>
    </html>

### 神奇的原型链 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>title</title>
      <script>
        //原型链:实例对象和原型对象之间的关系,通过__proto__来联系
    
      </script>
    </head>
    <body>
    <div id="dv"></div>
    <script>
      var divObj=document.getElementById("dv");
      console.dir(divObj);
    
      //divObj.__proto__---->HTMLDivElement.prototype的__proto__--->HTMLElement.prototype的__proto__---->Element.prototype的__proto__---->Node.prototype的__proto__---->EventTarget.prototype的__proto__---->Object.prototype没有__proto__,所以,Object.prototype中的__proto__是null
    
    </script>
    </body>
    </html>

### 继承 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>title</title>
      <script>
    
        /* * * 面向对象编程思想:根据需求,分析对象,找到对象有什么特征和行为,通过代码的方式来实现需求,要想实现这个需求,就要创建对象,要想创建对象,就应该显示有构造函数,然后通过构造函数来创建对象.,通过对象调用属性和方法来实现相应的功能及需求,即可 * 首先JS不是一门面向对象的语言,JS是一门基于对象的语言,那么为什么学习js还要学习面向对象,因为面向对象的思想适合于人的想法,编程起来会更加的方便,及后期的维护.... * 面向对象的编程语言中有类(class)的概念(也是一种特殊的数据类型),但是JS不是面向对象的语言,所以,JS中没有类(class),但是JS可以模拟面向对象的思想编程,JS中会通过构造函数来模拟类的概念(class) * * * * * 小明,小红，小丽，小白，小花 都是人 * 共同的特征和行为 * 特征--->属性 * 行为---方法 * * 面向对象的特性:封装,继承,多态 * * 封装:就是包装 * 一个值存储在一个变量中--封装 * 一坨重复代码放在一个函数中--封装 * 一系列的属性放在一个对象中--封装 * 一些功能类似的函数(方法)放在一个对象中--封装 * 好多相类似的对象放在一个js文件中---封装 * * 继承: 首先继承是一种关系,类(class)与类之间的关系,JS中没有类,但是可以通过构造函数模拟类,然后通过原型来实现继承 * 继承也是为了数据共享,js中的继承也是为了实现数据共享 * * 原型作用之一:数据共享,节省内存空间 * 原型作用之二:为了实现继承 * * 继承是一种关系: * * 父类级别与类级别的关系 * * 例子: * * 小杨--->人, 姓名, 有钱, 帅, 有功夫--降龙十八掌 * 小杨子-->人, * 继承: * 姓氏----继承 * 外表----继承 * 财产----继承 * 功夫---继承 * * * 人: 姓名, 性别, 年龄 ,吃饭, 睡觉 * * 学生类别: 姓名, 性别, 年龄 ,吃饭, 睡觉 学习行为 * 老师类别: 姓名, 性别, 年龄 ,吃饭, 睡觉 工资,教学行为 * 程序员: 姓名, 性别, 年龄 ,吃饭, 睡觉 工资, 敲代码 * 司机类别: 姓名, 性别, 年龄 ,吃饭, 睡觉 工资 开车 * * * 动物类别: 体重， 颜色, 吃 * 狗类别: 体重,颜色, 吃, 咬人 * 二哈类别: 体重,颜色, 吃, 咬人 逗主人开心,汪汪,你好帅 * * * * * * * 多态:一个对象有不同的行为,或者是同一个行为针对不同的对象,产生不同的结果,要想有多态,就要先有继承,js中可以模拟多态,但是不会去使用,也不会模拟, * * * * * * */
    1
    
    
        //例子:
        //人,都有姓名,性别,年龄, 吃饭, 睡觉, 玩
        //学生,都有姓名,性别,年龄, 成绩, 吃饭, 睡觉, 玩 ,学习的行为
    
    
        //js中通过原型来实现继承
    
        function Person(name,age,sex) { 
          this.name=name;
          this.sex=sex;
          this.age=age;
        }
        Person.prototype.eat=function () { 
          console.log("人可以吃东西");
        };
        Person.prototype.sleep=function () { 
          console.log("人在睡觉");
        };
        Person.prototype.play=function () { 
          console.log("生活就是不一样的玩法而已");
        };
    
    
        function Student(score) { 
          this.score=score;
        }
        //改变学生的原型的指向即可==========>学生和人已经发生关系
        Student.prototype=new Person("小明",10,"男");
        Student.prototype.study=function () { 
          console.log("学习很累很累的哦.");
        };
    
        //相同的代码太多,造成了代码的冗余(重复的代码)
    
        var stu=new Student(100);
        console.log(stu.name);
        console.log(stu.age);
        console.log(stu.sex);
        stu.eat();
        stu.play();
        stu.sleep();
        console.log("下面的是学生对象中自己有的");
        console.log(stu.score);
        stu.study();
    
    
    
    
    
    
    
    
      </script>
    </head>
    <body>
    
    
    </body>
    </html>

### 继承案例 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>title</title>
      <script>
    
        //动物有名字,有体重,有吃东西的行为
        //小狗有名字,有体重,有毛色, 有吃东西的行为,还有咬人的行为
        //哈士奇名字,有体重,有毛色,性别, 有吃东西的行为,还有咬人的行为,逗主人开心的行为
    
        //动物的构造韩素
        function Animal(name,weight) { 
          this.name=name;
          this.weight=weight;
        }
        //动物的原型的方法
        Animal.prototype.eat=function () { 
          console.log("天天吃东西,就是吃");
        };
    
        //狗的构造函数
        function Dog(color) { 
          this.color=color;
        }
    
        Dog.prototype=new Animal("哮天犬","50kg");
        Dog.prototype.bitePerson=function () { 
          console.log("哼~汪汪~咬死你");
        };
    
        //哈士奇
        function ErHa(sex) { 
          this.sex=sex;
        }
        ErHa.prototype=new Dog("黑白色");
        ErHa.prototype.playHost=function () { 
          console.log("哈哈~要坏衣服,要坏桌子,拆家..嘎嘎...好玩,开心不,惊喜不,意外不");
        };
        var erHa=new ErHa("雄性");
        console.log(erHa.name,erHa.weight,erHa.color);
        erHa.eat();
        erHa.bitePerson();
        erHa.playHost();
      </script>
    </head>
    <body>
    </body>
    </html>

### 借用构造函数 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>title</title>
      <script>
        // function Person(name,age,sex,weight) { 
        // this.name=name;
        // this.age=age;
        // this.sex=sex;
        // this.weight=weight;
        // }
        // Person.prototype.sayHi=function () { 
        // console.log("您好");
        // };
        // function Student(score) { 
        // this.score=score;
        // }
        // //希望人的类别中的数据可以共享给学生---继承
        // Student.prototype=new Person("小明",10,"男","50kg");
        //
        // var stu1=new Student("100");
        // console.log(stu1.name,stu1.age,stu1.sex,stu1.weight,stu1.score);
        // stu1.sayHi();
        //
        // var stu2=new Student("120");
        // stu2.name="张三";
        // stu2.age=20;
        // stu2.sex="女";
        // console.log(stu2.name,stu2.age,stu2.sex,stu2.weight,stu2.score);
        // stu2.sayHi();
        // var stu3=new Student("130");
        // console.log(stu3.name,stu3.age,stu3.sex,stu3.weight,stu3.score);
        // stu3.sayHi();
    
    
        //为了数据共享,改变原型指向,做到了继承---通过改变原型指向实现的继承
        //缺陷:因为改变原型指向的同时实现继承,直接初始化了属性，继承过来的属性的值都是一样的了,所以,这就是问题
        //只能重新调用对象的属性进行重新赋值,
    
    
        //解决方案:继承的时候,不用改变原型的指向,直接调用父级的构造函数的方式来为属性赋值就可以了------借用构造函数:把要继承的父级的构造函数拿过来,使用一下就可以了
    
    
    
        //借用构造函数:构造函数名字.call(当前对象,属性,属性,属性....);
        //解决了属性继承,并且值不重复的问题
        //缺陷:父级类别中的方法不能继承
    
        function Person(name, age, sex, weight) { 
          this.name = name;
          this.age = age;
          this.sex = sex;
          this.weight = weight;
        }
        Person.prototype.sayHi = function () { 
          console.log("您好");
        };
        function Student(name,age,sex,weight,score) { 
          //借用构造函数
          Person.call(this,name,age,sex,weight);
          this.score = score;
        }
        var stu1 = new Student("小明",10,"男","10kg","100");
        console.log(stu1.name, stu1.age, stu1.sex, stu1.weight, stu1.score);
    
        var stu2 = new Student("小红",20,"女","20kg","120");
        console.log(stu2.name, stu2.age, stu2.sex, stu2.weight, stu2.score);
    
        var stu3 = new Student("小丽",30,"妖","30kg","130");
        console.log(stu3.name, stu3.age, stu3.sex, stu3.weight, stu3.score);
    
    
      </script>
    </head>
    <body>
    
    
    </body>
    </html>

### 借用构造函数 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>title</title>
      <script>
    
    
        //原型实现继承
        //借用构造函数实现继承
        //组合继承:原型继承+借用构造函数继承
    
        function Person(name,age,sex) { 
          this.name=name;
          this.age=age;
          this.sex=sex;
        }
        Person.prototype.sayHi=function () { 
          console.log("阿涅哈斯诶呦");
        };
        function Student(name,age,sex,score) { 
          //借用构造函数:属性值重复的问题
          Person.call(this,name,age,sex);
          this.score=score;
        }
        //改变原型指向----继承
        Student.prototype=new Person();//不传值
        Student.prototype.eat=function () { 
          console.log("吃东西");
        };
        var stu=new Student("小黑",20,"男","100分");
        console.log(stu.name,stu.age,stu.sex,stu.score);
        stu.sayHi();
        stu.eat();
        var stu2=new Student("小黑黑",200,"男人","1010分");
        console.log(stu2.name,stu2.age,stu2.sex,stu2.score);
        stu2.sayHi();
        stu2.eat();
    
        //属性和方法都被继承了
    
    
    
      </script>
    </head>
    <body>
    
    
    </body>
    </html>

### 拷贝继承 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>title</title>
      <script>
    
        //拷贝继承；把一个对象中的属性或者方法直接复制到另一个对象中
    
    // var obj1={ 
    // name:"小糊涂",
    // age:20,
    // sleep:function () { 
    // console.log("睡觉了");
    // }
    // };
    //
    // //改变了地址的指向
    // var obj2=obj1;
    // console.log(obj2.name,obj2.age);
    // obj2.sleep();
    
    
    
    // var obj1={ 
    // name:"小糊涂",
    // age:20,
    // sleep:function () { 
    // console.log("睡觉了");
    // }
    // };
    //
    //
    // var obj2={};
    // for(var key in obj1){ 
    // obj2[key]=obj1[key];
    // }
    // console.log(obj2.name);
    
    
    
        function Person() { 
        }
        Person.prototype.age=10;
        Person.prototype.sex="男";
        Person.prototype.height=100;
        Person.prototype.play=function () { 
          console.log("玩的好开心");
        };
        var obj2={ };
        //Person的构造中有原型prototype,prototype就是一个对象,那么里面,age,sex,height,play都是该对象中的属性或者方法
    
        for(var key in Person.prototype){ 
          obj2[key]=Person.prototype[key];
        }
        console.dir(obj2);
        obj2.play();
    
    
    
      </script>
    </head>
    <body>
    
    
    </body>
    </html>

### 总结继承 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>title</title>
      <script>
    
        //面向对象特性:封装,继承,多态
    
        //继承,类与类之间的关系,面向对象的语言的继承是为了多态服务的,
        //js不是面向对象的语言,但是可以模拟面向对象.模拟继承.为了节省内存空间
    
        //继承:
        /* * 原型作用: 数据共享 ，目的是:为了节省内存空间, * 原型作用: 继承 目的是:为了节省内存空间 * * 原型继承:改变原型的指向 * 借用构造函数继承:主要解决属性的问题 * 组合继承:原型继承+借用构造函数继承 * 既能解决属性问题,又能解决方法问题 * 拷贝继承:就是把对象中需要共享的属性或者犯法,直接遍历的方式复制到另一个对象中 * * * * * * * * * */
      </script>
    </head>
    <body>
    
    
    </body>
    </html>

### 逆推继承看原型 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>title</title>
      <script>
    
    
        function F1(age) { 
          this.age = age;
        }
        function F2(age) { 
          this.age = age;
        }
        F2.prototype = new F1(10);
        function F3(age) { 
          this.age = age;
        }
        F3.prototype = new F2(20);
    
        var f3 = new F3(30);
        console.log(f3.age);
    
    
      </script>
    </head>
    <body>
    
    
    </body>
    </html>

### 高阶函数 ###

#### 函数的角色 ####

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>title</title>
      <script>
        //函数的角色:
        //函数的声明
        function f1() { 
          console.log("我是函数");
        }
        f1();
        //函数表达式
        var ff=function () { 
          console.log("我也是一个函数");
        };
        ff();
      </script>
    </head>
    <body>
    
    
    </body>
    </html>

#### 函数生命和函数表达式的区别 ####

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>title</title>
      <script>
    
        //函数声明
    //
    // if(true){ 
    // function f1() { 
    // console.log("哈哈,我又变帅了");
    // }
    // }else{ 
    // function f1() { 
    // console.log("小苏好猥琐");
    // }
    // }
    // f1();
    
    
        //函数表达式
    
        var ff;
        if(true){ 
          ff=function () { 
            console.log("哈哈,我又变帅了");
          };
        }else{ 
          ff=function () { 
            console.log("小苏好猥琐");
          };
        }
        ff();
    
        //函数声明如果放在if-else的语句中,在IE8的浏览器中会出现问题
        //以后宁愿用函数表达式,都不用函数声明
    
    
    
      </script>
    </head>
    <body>
    
    
    </body>
    </html>

### 函数中的this指向问题 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
      <title>Document</title>
    </head>
    <body>
    
    </body>
    </html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>title</title>
      <script>
    
        /* * * 函数中的this的指向 * * * 普通函数中的this是谁?-----window * 对象.方法中的this是谁?----当前的实例对象 * 定时器方法中的this是谁?----window * 构造函数中的this是谁?-----实例对象 * 原型对象方法中的this是谁?---实例对象 * * * */
    
        //严格模式:
    // "use strict";//严格模式
    // function f1() { 
    // console.log(this);//window
    // }
    // f1();
    
    
        //普通函数
        // function f1() { 
        // console.log(this);
        // }
        // f1();
    
        //定时器中的this
        // setInterval(function () { 
        // console.log(this);
        // },1000);
    
        //构造函数
        // function Person() { 
        // console.log(this);
        //对象的方法
        // this.sayHi=function () { 
        // console.log(this);
        // };
        // }
        //原型中的方法
        // Person.prototype.eat=function () { 
        // console.log(this);
        // };
        // var per=new Person();
        // console.log(per);
        // per.sayHi();
        // per.eat();
    
    
        //BOM:中顶级对象是window,浏览器中所有的东西都是window的
    
    
    
    
      </script>
    </head>
    <body>
    
    
    </body>
    </html>

### 函数的不同调用模式 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>title</title>
      <script>
    
        //普通函数
        function f1() { 
          console.log("文能提笔控萝莉");
        }
        f1();
    
        //构造函数---通过new 来调用,创建对象
        function F1() { 
          console.log("我是构造函数,我骄傲");
        }
        var f=new F1();
    
        //对象的方法
        function Person() { 
          this.play=function () { 
            console.log("玩代码");
          };
        }
        var per=new Person();
        per.play();
      </script>
    </head>
    <body>
    
    
    </body>
    </html>

### 函数也是对象 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>title</title>
      <script>
    
        //函数是对象,对象不一定是函数
    
        //对象中有__proto__原型,是对象
        //函数中有prototype原型,是对象 
    
    // function F1() { 
    // }
    //
    // console.dir(F1);
    //
    // console.dir(Math);//中有__proto__,但是没有prorotype
    //
    // //对象中有__proto__,函数中应该有prototype
    //
    // 如果一个东西里面有prototype，又有__proto__,说明是函数,也是对象
    
    
    
    
    //
    // function F1(name) { 
    // this.name=name;
    // }
    //
    // console.dir(F1);
    
    
    
    
    
    
        //所有的函数实际上都是Function的构造函数创建出来的实例对象
    // var f1=new Function("num1","num2","return num1+num2");
    // console.log(f1(10,20));
    // console.log(f1.__proto__==Function.prototype);
    
        //所以,函数实际上也是对象
    
      // console.dir(f1);
    
    
      console.dir(Function);
    
    
    
    
    
      </script>
    </head>
    <body>
    
    
    </body>
    </html>

### 数组的调用 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>title</title>
      <script>
    
        //数组可以存储任何类型的数据
    
        var arr=[
            function () { 
              console.log("十一假期快乐");
            },
            function () { 
              console.log("十一假期开心");
            }
            ,
            function () { 
              console.log("十一假期健康");
            }
            ,
            function () { 
              console.log("十一假期安全");
            },
            function () { 
              console.log("十一假期如意");
            }
        ];
        //回调函数:函数作为参数使用
        arr.forEach(function (ele) { 
          ele();
        });
    
    
      </script>
    </head>
    <body>
    
    
    </body>
    </html>

## 第四部分 ##

### 第三部分回顾 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>title</title>
      <script>
    
        /* * * 复习: * * 原型: * 每个实例对象中都有一个属性__proto__,是原型,浏览器使用的,不标准的属性 * 每个构造函数中都有一个属性prototype,是原型,程序员使用的, * 面向对象和面向过程都是编程思想 * 面向对象注重的是结果,面向过程注重的是过程 * 面向对象的特性:封装,继承,多态 * 继承: * 1.通过原型实现继承,改变原型的指向,属性在初始化的时候就已经固定了,如果是多个对象实例化,那么每个实例对象的属性的值在初始化的时候都是一样的 * 2.借用构造函数继承,不能继承方法 * 3.组合继承,可以解决属性和方法的继承的问题 * 4.拷贝继承,就是把一个对象中的原型中的所有的属性和方法复制一份给另一个对象 * * * 创建对象的三种方式 * 1. 字面量的方式 * 2. 调用系统的构造函数 * 3. 自定义构造函数 * * * * 原型链:实例对象和原型对象之间的关系,主要是通过__proto__和prototype来联系 * * 原型的指向是可以改变,所以,js中是通过改变原型来实现继承 * * * 原型的作用: * 实现数据共享,继承, 都是为了节省内存空间 * 如果属性和方法都需要共享,那么就把属性和方法添加到原型中 * * * 函数中的this的指向 * * 普通的函数中this是window * 构造函数中的this,构造函数一般都是创建实例对象使用的,是通过new关键字,构造函数也是函数 * 构造函数中的this是实例对象 * 方法中的this是实例对象 * 原型中的方法中的this是实例对象 * 定时器中的this是window * * 函数是对象,构造函数也是函数,也是对象 * 对象是不是函数呢?不一定 * * 对象中有__proto__ * 函数中有prototype * * Math是对象,但不是函数 * * * * * */
        console.dir(Math);
    
        setInterval(function () { 
          console.log(this);
        },1000);
    
        function f1() { 
          console.log(this);
        }
        f1();
        console.dir(f1);
    
        function Teacher() { 
          console.log(this);
          this.sayHi=function () { 
            console.log(this);
          };
        }
        Teacher.prototype.sayHello=function () { 
          console.log(this);
        };
        var t=new Teacher();
        t.sayHi();
        t.sayHello();
    
        //字面量的方式创建对象
        var obj={ 
          age:10,
          sex:"男",
          sayHi:function () { 
            console.log("您好,十一过的快乐吗");
          }
        };
    
        //调用系统的构造函数创建对象
        var obj2=new Object();
        obj2.age=20;
        obj2.sex="男";
        obj2.sayHi=function () { 
          console.log("中秋节过的快乐吗");
        };
    
        //自定义构造函数创建对象
    
        function Person(age,sex) { 
          this.age=age;
          this.sex=sex;
          this.sayHi=function () { 
            console.log("今天就上课了,快乐吗");
          };
        }
    
    
    
        //继承的代码
    
        function Animal(age,sex) { 
          this.age=age;//年龄
          this.sex=sex;//性别
        }
        //通过原型添加属性
        Animal.prototype.color="黄色";
        //通过原型添加方法
        Animal.prototype.eat=function () { 
          console.log("中秋的时候没吃到月饼,但是,吃到了馒头,也是一样的");
        };
    
        //小狗的构造函数
        function Dog(age,sex,name) { 
          //借用构造函数
          Animal.call(this,age,sex);
          this.name=name;
        }
        //改变原型指向,为了继承方法的
        Dog.prototype=new Animal();
    
        var dog=new Dog(10,"女","小苏");
        console.log(dog.name);
        console.log(dog.age);
        console.log(dog.sex);
        console.log(dog.color);
        //调用方法
        dog.eat();
      </script>
    </head>
    <body>
    
    
    </body>
    </html>

### 第四部分大纲总结 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>title</title>
      <script>
        /* * * apply和call方法的使用 * bind方法的使用---------这三个方法是重点, * * * 函数中的几个成员的介绍----了解 * 高阶函数(函数作为参数,函数作为返回值) * 函数作为参数使用的例子 * 函数作为返回值使用的例子 * 作用域,作用域链,预解析 * 闭包--------重点,作用,优点,缺点 * 闭包的案例---重点 * * 沙箱---概念,作用,以后该怎么办 * * 递归---重点,难,难在应用,为了遍历 * * * * * */
      </script>
    </head>
    <body>
    
    
    </body>
    </html>

### apply和call方法使用 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>title</title>
      <script>
    
        //apply和call的使用
        //作用:可以改变this的指向
    
    // function f1(x,y) { 
    // console.log("结果是:"+(x+y)+this);
    // return "10000";
    // }
    // f1(10,20);//函数的调用
    
    
        //console.log("========");
        //此时的f1实际上是当成对象来使用的,对象可以调用方法
        //apply和call方法也是函数的调用的方式
        //f1.apply();
        //f1.call();
        //console.log("==========");
        //f1.apply(null);
        //f1.call(null);
    
        //apply和call方法中如果没有传入参数,或者是传入的是null,那么调用该方法的函数对象中的this就是默认的window
    
        //f1.apply(null,[100,200]);
        //f1.call(null,100,200);
    
        //apply和call都可以让函数或者方法来调用,传入参数和函数自己调用的写法不一样,但是效果是一样的
    
    // var result1=f1.apply(null,[10,20]);
    // var result2=f1.call(null,10,20);
    // console.log(result1);
    // console.log(result2);
    
    
    
    
    
    // function f1(x,y) { 
    // console.log("这个函数是window对象的一个方法:"+(x+y)+this.sex);
    // }
    // window.f1(10,20);
    // //obj是一个对象
    // var obj={ 
    // age:10,
    // sex:"男"
    // };
    //
    // window.f1.apply(obj,[10,20]);
    // window.f1.call(obj,10,20);
    // console.dir(obj);
    
    
        //apply和call可以改变this的指向
    
    
        function Person(age,sex) { 
          this.age=age;
          this.sex=sex;
        }
        //通过原型添加方法
        Person.prototype.sayHi=function (x,y) { 
          console.log("您好啊:"+this.sex);
          return 1000;
        };
        var per=new Person(10,"男");
        per.sayHi();
    
        console.log("==============");
        function Student(name,sex) {  
          this.name=name;
          this.sex=sex;
        }
        var stu=new Student("小明","人妖");
        var r1=per.sayHi.apply(stu,[10,20]);
        var r2=per.sayHi.call(stu,10,20);
    
        console.log(r1);
        console.log(r2);
    
    
    
    
    
    
    
    
    
    
      </script>
    </head>
    <body>
    
    
    </body>
    </html>

### 总结apple和call方法的使用 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>title</title>
      <script>
    
        //apply和call都可以改变this的指向
        //函数的调用,改变this的指向
        // function f1(x,y) { 
        // console.log((x+y)+":===>"+this);
        // return "这是函数的返回值";
        // }
        // //apply和call调用
        // var r1=f1.apply(null,[1,2]);//此时f1中的this是window
        // console.log(r1);
        // var r2=f1.call(null,1,2);//此时f1中的this是window
        // console.log(r2);
        // console.log("=============>");
        // //改变this的指向
        // var obj={ 
        // sex:"男"
        // };
        // //本来f1函数是window对象的,但是传入obj之后,f1函数此时就是obj对象的
        // var r3=f1.apply(obj,[1,2]);//此时f1中的this是obj
        // console.log(r3);
        // var r4=f1.call(obj,1,2);//此时f1中的this是obj
        // console.log(r4);
    
    
        //方法改变this的指向
    
    // function Person(age) { 
    // this.age = age;
    // }
    // Person.prototype.sayHi = function (x, y) { 
    // console.log((x + y) + ":====>" + this.age);//是实例对象
    // };
    //
    // function Student(age) { 
    // this.age = age;
    // }
    // var per = new Person(10);//实例对象
    // var stu = new Student(100);//实例对象
    // //sayHi方法是per实例对象的
    // per.sayHi.apply(stu, [10, 20]);
    // per.sayHi.call(stu, 10, 20);
    
    
        //apply和call的使用方法
        /* * apply的使用语法 * 函数名字.apply(对象,[参数1,参数2,...]); * 方法名字.apply(对象,[参数1,参数2,...]); * call的使用语法 * 函数名字.call(对象,参数1,参数2,...); * 方法名字.call(对象,参数1,参数2,...); * * 作用:改变this的指向 * 不同的地方:参数传递的方式是不一样的 * * 只要是想使用别的对象的方法,并且希望这个方法是当前对象的,那么就可以使用apply或者是call的方法改变this的指向 * * */
    
    
        function f1() { 
          console.log(this+":====>调用了");
        }
        //f1是函数,f1也是对象
        console.dir(f1);
        //对象调用方法,说明,该对象中有这个方法
        f1.apply();
        f1.call();
        console.log(f1.__proto__==Function.prototype);
        //所有的函数都是Function的实例对象
        console.log(Function.prototype);//ƒ () { [native code] }
        console.dir(Function);
        //apply和call方法实际上并不在函数这个实例对象中,而是在Function的prototype中
    
    
        function Person() { 
          this.sayHi=function () { 
            console.log("您好");
          };
        }
        Person.prototype.eat=function () { 
          console.log("吃");
        };
    
        var per=new Person();
        per.sayHi();
        per.eat();
        console.dir(per);
        //实例对象调用方法,方法要么在实例对象中存在,要么在原型对象中存在
    
    
    
    
      </script>
    </head>
    <body>
    
    
    </body>
    </html>

### bind方法 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>title</title>
      <script>
    
        function f1(x, y) { 
          console.log((x + y) + ":=====>" + this.age);
        }
        //复制了一份的时候,把参数传入到了f1函数中,x===>10,y===>20,null就是this,默认就是window
        //bind方法是复制的意思,参数可以在复制的时候传进去,也可以在复制之后调用的时候传入进去
        //apply和call是调用的时候改变this指向
        //bind方法,是赋值一份的时候,改变了this的指向
    
    
        // var ff=f1.bind(null);
        // ff(10,20);
    
    
        // function Person() { 
        // this.age = 1000;
        // }
        // Person.prototype.eat = function () { 
        // console.log("这个是吃");
        // };
        // var per = new Person();
        //
        // var ff = f1.bind(per, 10, 20);
        // ff();
    
        function Person(age) { 
          this.age=age;
        }
        Person.prototype.play=function () { 
          console.log(this+"====>"+this.age);
        };
    
        function Student(age) { 
          this.age=age;
        }
        var per=new Person(10);
        var stu=new Student(20);
        //复制了一份
        var ff=per.play.bind(stu);
        ff();
        //bind是用来复制一份
        //使用的语法:
        /* * 函数名字.bind(对象,参数1,参数2,...);---->返回值是复制之后的这个函数 * 方法名字.bind(对象,参数1,参数2,...);---->返回值是复制之后的这个方法 * * */
    
    
    
      </script>
    </head>
    <body>
    
    
    </body>
    </html>

### bind方法的使用 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>title</title>
      <script>
    
        //通过对象,调用方法,产生随机数
    
        function ShowRandom() { 
          //1-10的随机数
          this.number=parseInt(Math.random()*10+1);
        }
        //添加原型方法
        ShowRandom.prototype.show1=function () { 
          //改变了定时器中的this的指向了,本来应该是window,现在是实例对象了
          window.setInterval(this.show2.bind(this),1000);
        };
        //添加原型方法
        ShowRandom.prototype.show2=function () { 
          //显示随机数--
          console.log(this.number);
        };
        //实例对象
        var sr=new ShowRandom();
        //调用方法,输出随机数字
        //调用这个方法一次,可以不停的产生随机数字
        sr.show1();
      </script>
    </head>
    <body>
    
    
    </body>
    </html>

### 函数中几个成员 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>title</title>
      <script>
        //函数中有一个name属性----->函数的名字,name属性是只读的,不能修改
        //函数中有一个arguments属性--->实参的个数
        //函数中有一个length属性---->函数定义的时候形参的个数
        //函数中有一个caller属性---->调用(f1函数在f2函数中调用的,所以,此时调用者就是f2)
        function f1(x,y) { 
          console.log(f1.name);
          console.log(f1.arguments.length);
          console.log(f1.length);
          console.log(f1.caller);//调用者
        }
    // f1.name="f5";
    // f1(10,20,30,40);
    // console.dir(f1);
        function f2() { 
          console.log("f2函数的代码");
          f1(1,2);
        }
        f2();
      </script>
    </head>
    <body>
    </body>
    </html>

### 高阶函数之函数作为参数使用 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>title</title>
      <script>
    
    
    // function f1(fn) { 
    // console.log("f1的函数");
    // fn();//此时fn当成是一个函数来使用的
    // }
    // //fn是参数,最后作为函数使用了,函数是可以作为参数使用
    // //传入匿名函数
    // f1(function () { 
    // console.log("我是匿名函数");
    // });
    // //命名函数
    // function f2() { 
    // console.log("f2的函数");
    // }
    // f1(f2);
    // //函数作为参数的时候,如果是命名函数,那么只传入命名函数的名字,没有括号
    // function f1(fn) { 
    // setInterval(function () { 
    // console.log("定时器开始");
    // fn();
    // console.log("定时器结束");
    // },1000);
    // }
    //
    // f1(function () { 
    // console.log("好困啊,好累啊,就是想睡觉");
    // });
    
      </script>
    </head>
    <body>
    
    
    </body>
    </html>

### 高阶函数之函数作为返回值使用 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>title</title>
      <script>
        // function f1() { 
        // console.log("f1函数开始");
        // return function () { 
        // console.log("我是函数,但是此时是作为返回值使用的");
        // }
        //
        // }
        //
        // var ff=f1();
        // ff();
        // var num=10;
        // console.log(typeof num);//获取num这个变量的数据类型
        // var obj={};//对象
        // //判断这个对象是不是某个类型的
        // console.log(obj instanceof Object);
        // //获取某个对象的数据类型的样子
        // //Object.prototype.toString.call(对象);//此时得到的就是这个对象的类型的样子
        //
        //
        //
        // //此时输出的是Object的数据类型 [object Object]
        // console.log(Object.prototype.toString());
        // //输出的数组的数据类型 [object Array]
        // console.log(Object.prototype.toString.call([]));
        // 
        // var arr=[10,20,30];
        // console.log(Object.prototype.toString.call(arr));
        //
        console.log(Object.prototype.toString.call(new Date()));
    
    
        //获取某个对象的类型是不是你传入的类型
        //[10,20,30] 是不是"[object Array]"
        //type---是变量----是参数----"[object Array]"
        //obj---是变量-----是参数----[10,20,30];
    
        //判断这个对象和传入的类型是不是同一个类型
        function getFunc(type) { 
          return function (obj) { 
            return Object.prototype.toString.call(obj) === type;
          }
        }
    
        var ff = getFunc("[object Array]");
        var result = ff([10, 20, 30]);
        console.log(result);
    
        var ff1 = getFunc("[object Object]");
        var dt = new Date();
        var result1 = ff1(dt);
        console.log(result1);
    
    
      </script>
    </head>
    <body>
    
    
    </body>
    </html>

### 函数作为返回值的练习 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>title</title>
      <script>
    
        // var arr = [1, 100, 20, 200, 40, 50, 120, 10];
        // //排序
        // arr.sort();
        // console.log(arr);
    
        var arr = [1, 100, 20, 200, 40, 50, 120, 10];
        //排序---函数作为参数使用,匿名函数作为sort方法的参数使用,那么此时的匿名函数中有两个参数,
        arr.sort(function (obj1,obj2) { 
          if(obj1>obj2){ 
            return -1;
          }else if(obj1==obj2){ 
            return 0;
          }else{ 
            return 1;
          }
        });
        console.log(arr);
    
        var arr1=["acdef","abcd","bcedf","bced"];
        arr1.sort(function (a,b) { 
          if(a>b){ 
            return 1;
          }else if(a==b){ 
            return 0;
          }else{ 
            return -1;
          }
        });
        console.log(arr1);
    
    
    
    
    
    
    
    
    
      </script>
    </head>
    <body>
    
    
    </body>
    </html>

### 作用域和作用域链及预解析 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>title</title>
      <script>
    
        //变量---->局部变量和全局变量,
        //作用域:就是变量的使用范围
        //局部作用域和全局作用域
        //js中没有块级作用域---一对括号中定义的变量,这个变量可以在大括号外面使用
        //函数中定义的变量是局部变量
    
    // while(true){ 
    // var num=10;
    // break;
    // }
    // console.log(num);
    //
    // { 
    // var num2=100;
    // }
    // console.log(num2);
    //
    // if(true){ 
    // var num3=1000;
    // }
    // console.log(num3);
    
    // function f1() { 
    // //局部变量
    // var num=10;
    // }
    // console.log(num);
    
    
        作用域链:变量的使用,从里向外,层层的搜索,搜索到了就可以直接使用了
        层层搜索,搜索到0级作用域的时候,如果还是没有找到这个变量,结果就是报错
       var num=10; //作用域链 级别:0
       var num2=20;
       var str = "abc"
       function f1() { 
         var num2=20;
         function f2() { 
           var num3=30;
           console.log(num);
         }
         f2();
       }
       f1();
    
    
        //预解析:就是在浏览器解析代码之前,把变量的声明和函数的声明提前(提升)到该作用域的最上面
    
        //变量的提升
        console.log(num);
        var num=100;
    
        //函数的声明被提前了
        f1();
        function f1() { 
          console.log("这个函数,执行了");
        }
    
        var f2;
        f2=function () { 
          console.log("小杨好帅哦");
        };
        f2();
      </script>
    </head>
    <body>
    
    
    </body>
    </html>

### 闭包 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>title</title>
      <script>
        //闭包
        /* * 闭包的概念:函数A中,有一个函数B,函数B中可以访问函数A中定义的变量或者是数据,此时形成了闭包(这句话暂时不严谨) * 闭包的模式:函数模式的闭包,对象模式的闭包 * 闭包的作用:缓存数据,延长作用域链 * 闭包的优点和缺点:缓存数据 * * 闭包的应用 * * * */
    
    
        //函数模式的闭包:在一个函数中有一个函数
    // function f1() { 
    // var num=10;
    // //函数的声明
    // function f2() { 
    // console.log(num);
    // }
    // //函数调用
    // f2();
    // }
    // f1();
    
        //对象模式的闭包:函数中有一个对象
    
    // function f3() { 
    // var num=10;
    // var obj={ 
    // age:num
    // };
    // console.log(obj.age);//10
    // }
    // f3();
    
    
    
    // function f1() { 
    // var num=10;
    // return function () { 
    // console.log(num);
    // return num;
    // }
    // }
    //
    // var ff= f1();
    // var result= ff();
    // console.log(result);
    
    
    // function f2() { 
    // var num=100;
    // return { 
    // age:num
    // }
    // }
    //
    // var obj= f2();
    // console.log(obj.age);
    
    
    
    
    
    
      </script>
    </head>
    <body>
    
    
    </body>
    </html>

### 闭包小案例 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>title</title>
      <script>
    
    
        //普通的函数
        function f1() { 
          var num = 10;
          num++;
          return num;
        }
        console.log(f1());
        console.log(f1());
        console.log(f1());
    
        //函数模式的闭包
        function f2() { 
          var num = 10;
          return function () { 
            num++;
            return num;
          }
        }
        var ff = f2();
        console.log(ff());//11
        console.log(ff());//12
        console.log(ff());//13
      </script>
    </head>
    <body>
    
    
    </body>
    </html>

### 闭包案例产生多个相通的随机数 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>title</title>
      <script>
    
        function showRandom() { 
          var num=parseInt(Math.random()*10+1);
          console.log(num);
        }
    
        showRandom();
        showRandom();
        showRandom();
    
        //闭包的方式,产生三个随机数,但是都是相同的
    
        function f1() { 
          var num=parseInt(Math.random()*10+1);
          return function () { 
            console.log(num);
          }
        }
    
        var ff=f1();
    
        ff();
        ff();
        ff();
    
        //总结:如果想要缓存数据,就把这个数据放在外层的函数和里层的函数的中间位置
    
        //闭包的作用:缓存数据.优点也是缺陷,没有及时的释放
    
        //局部变量是在函数中,函数使用结束后,局部变量就会被自动的释放
        //闭包后,里面的局部变量的使用作用域链就会被延长
    
      </script>
    </head>
    <body>
    
    
    </body>
    </html>

### 闭包案例点赞应用 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>对自己狠点</title>
      <style>
        ul { 
          list-style-type: none;
        }
    
        li { 
          float: left;
          margin-left: 10px;
        }
    
        img { 
          width: 200px;
          height: 180px;
        }
    
        input { 
          margin-left: 30%;
        }
      </style>
      <script>
        //$永远都是24k纯帅的十八岁的杨哥$
      </script>
    </head>
    <body>
    <ul>
      <li><img src="images/ly.jpg" alt=""><br/><input type="button" value="赞(1)"></li>
      <li><img src="images/lyml.jpg" alt=""><br/><input type="button" value="赞(1)"></li>
      <li><img src="images/fj.jpg" alt=""><br/><input type="button" value="赞(1)"></li>
      <li><img src="images/bd.jpg" alt=""><br/><input type="button" value="赞(1)"></li>
    </ul>
    <script>
    
      //获取所有的按钮
      //根据标签名字获取元素
      function my$(tagName) { 
        return document.getElementsByTagName(tagName);
      }
      //闭包缓存数据
      function getValue() { 
        var value=2;
        return function () { 
          //每一次点击的时候,都应该改变当前点击按钮的value值
          this.value="赞("+(value++)+")";
        }
      }
      //获取所有的按钮
      var btnObjs=my$("input");
      //循环遍历每个按钮,注册点击事件
      for(var i=0;i<btnObjs.length;i++){ 
        //注册事件
        btnObjs[i].onclick=getValue();
      }
    
    
    
    
    // var btnObjs=my$("input");
    // var value=1;
    // //循环遍历每个按钮
    // for(var i=0;i<btnObjs.length;i++){ 
    //
    // //为每个按钮注册点击事件
    // btnObjs[i].οnclick=function () { 
    // console.log("哈哈");
    // this.value="赞("+(value++)+")";
    // };
    // }
    
    
    </script>
    </body>
    </html>

### 沙箱 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>title</title>
      <script>
        //沙箱:环境,黑盒,在一个虚拟的环境中模拟真实世界,做实验,实验结果和真实世界的结果是一样,但是不会影响真实世界
    
    
    
    // var num=10;
    // console.log(num+10);
    
    // //沙箱---小环境
    // (function () { 
    // var num=10;
    // console.log(num);
    // })();
    //
    // //沙箱---小环境
    // (function () { 
    // var num=20;
    // console.log(num+10);
    // }());
    
    
    
    
    // var num=100;
    // (function () { 
    // var num=10;
    // console.log(num);//10
    // }());
    //
    //
    // console.log(num);//100
    
    
    
      </script>
    </head>
    <body>
    
    
    </body>
    </html>

### 沙箱小案例 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>title</title>
      <script>
    
    
        (function () { 
          var str="小白喜欢小黑";
          str=str.substr(2);
          console.log(str);
        }());
    
    
        //沙箱
        (function () { 
          var str="小明喜欢小红";
          str=str.substr(2);
          console.log(str);
        }());
     
    
    
      </script>
    </head>
    <body>
    <input type="button" value="按钮" id="btn"/>
    <script>
      //点击按钮,弹出对话框
      (function () { 
        document.getElementById("btn").onclick=function () { 
          console.log("按钮被点击了");
        };
      }());
    
    </script>
    
    </body>
    </html>

### 沙箱的案例 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>title</title>
    
    </head>
    <body>
    <div>这是div</div>
    <div>这是div</div>
    <div>这是div</div>
    <p>这是p</p>
    <p>这是p</p>
    <p>这是p</p>
    <script>
      var getTag = 10;
      var dvObjs = 20;
      var pObjs = 30;
      (function () { 
        //根据标签名字获取元素
        function getTag(tagName) { 
          return document.getElementsByTagName(tagName)
        }
        //获取所有的div
        var dvObjs = getTag("div");
        for (var i = 0; i < dvObjs.length; i++) { 
          dvObjs[i].style.border = "2px solid pink";
        }
        //获取所有的p
        var pObjs = getTag("p");
        for (var i = 0; i < pObjs.length; i++) { 
          pObjs[i].style.border = "2px solid pink";
        }
      }());
      console.log(getTag);
      console.log(dvObjs);
      console.log(pObjs);
    </script>
    </body>
    </html>

### 递归 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>title</title>
      <script>
        //递归:函数中调用函数自己,此时就是递归,递归一定要有结束的条件
        //
    
        var i = 0;
        function f1() { 
          i++;
          if (i < 5) { 
            f1();
          }
          console.log("从前有个山,山里有个庙,庙里有个和尚给小和尚讲故事:");
    
        }
    
        f1();
      </script>
    </head>
    <body>
    
    
    </body>
    </html>

### 递归的案例 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>title</title>
      <script>
        //求n个数字的和,5 计算1+2+3+4+5
    // var sum=0;
    // for(var i=1;i<=5;i++){ 
    // sum+=i;
    // }
    // console.log(sum);
    
    
        //递归实现:求n个数字的和 n=5---> 5+4+3+2+1
    
        //函数的声明
    // function getSum(x) { 
    // if(x==1){ 
    // return 1;
    // }
    // return x+getSum(x-1);
    // }
    // //函数的调用
    // console.log(getSum(5));
    
        /* * * 执行过程: * 代码执行getSum(5)--->进入函数,此时的x是5,执行的是5+getSum(4),此时代码等待 * 此时5+getSum(4),代码先不进行计算,先执行getSum(4),进入函数,执行的是4+getSum(3),等待, 先执行的是getSum(3),进入函数,执行3+getSum(2),等待,先执行getSum(2),进入函数,执行 2+getSum(1);等待, 先执行getSum(1),执行的是x==1的判断,return 1,所以, * 此时getSum(1)的结果是1,开始向外走出去 * 2+getSum(1) 此时的结果是:2+1 * 执行: * getSum(2)---->2+1 * 3+getSum(2) 此时的结果是3+2+1 * 4+getSum(3) 此时的结果是4+3+2+1 * 5+getSum(4) 此时的结果是5+4+3+2+1 * * 结果:15 * * * * */
    
    
    
        //递归案例:求一个数字各个位数上的数字的和: 123 --->6 ---1+2+3
        //523
        function getEverySum(x) { 
          if(x<10){ 
            return x;
          }
          //获取的是这个数字的个位数
          return x%10+getEverySum(parseInt(x/10));
        }
       console.log(getEverySum(1364));//5
    
    
    
        //递归案例:求斐波那契数列
    
        function getFib(x) { 
          if(x==1||x==2){ 
            return 1
          }
          return getFib(x-1)+getFib(x-2);
        }
        console.log(getFib(12));
      </script>
    </head>
    <body>
    
    
    </body>
    </html>

## 第五部分 ##

### 第四部分回顾总结 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>title</title>
      <script>
        /* * * 复习 * * apply和call方法的使用和区别 * * 都可以改变this指向的 * 使用方式: * 函数名.apply(对象,[参数1,参数2,参数3,...]); * 函数名.call(对象,参数1,参数2,参数3,....); * 我想要使用其他对象的某个方法,其他对象.方法名.apply(当前对象,参数,...); * 这个方法就会被当前的对象所使用,同时这个方法中的this就是当前的对象,在调用方法的时候改变了this的指向 * * bind方法的使用和区别 * 复制一个方法或者是函数,是在复制的同时改变了this的指向 * 使用方式: * 函数名.bind(对象,参数1,参数2，...);------>返回值是复制之后的这个函数 * * 高阶函数---->函数的使用的方式:函数作为参数使用，函数作为返回值使用 * 函数作为参数使用的时候,这个函数可以是匿名函数,也可以是命名函数 * 作用域和作用域链及预解析 * * 闭包:函数中有另一个函数,或者是一个函数中有另一个对象,里面的函数或者是对象都可以使用外面函数中定义的变量或者数据,此时形成闭包 * * function f1(num){ * * return function(){ * console.log(num); * } * } * * f1(20); * * 闭包模式:函数模式闭包,对象模式的闭包 * 闭包的作用:缓存数据,延长作用域链,同时也是缺点,函数中的变量不能及时的释放 * * 沙箱:就是一个环境,也可以叫黑盒,在这个环境中模拟外面真实的开发环境,完成需求,效果和外面的真实的开发环境是一样的 * 沙箱避免命名冲突 * * 递归:函数中调用函数自己,递归一定要有结束的条件,否则就是死循环 * * 递归:一般应用在遍历上 * 递归轻易不要用,效率很低, * */
      </script>
      <script>
    // var num=100;
    // (function () { 
    // var num=10;
    // console.log(num);
    // }());
    // console.log(num);
    // (function () { 
    //
    // })();
      </script>
    </head>
    <body>
    
    
    </body>
    </html>

### 第五部分学习大纲规划 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>title</title>
      <script>
    
        /* * * 浅拷贝 * 深拷贝----------|======>递归 * 遍历DOM树-------|======>递归------晚上能够把代码写出来是最好的 * * 正则表达式-------很重要的东西 * 元字符 * 写几个正则表达式 * 写代码 * 正则表达式的案例=========>代码写出来 * 数组和伪数组的区别 * * * * * * * */
      </script>
    </head>
    <body>
    
    
    </body>
    </html>

### 浅拷贝 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>title</title>
      <script>
        
        //浅拷贝:拷贝就是复制,就相当于把一个对象中的所有的内容,复制一份给另一个对象,直接复制,或者说,就是把一个对象的地址给了另一个对象,他们指向相同,两个对象之间有共同的属性或者方法,都可以使用
        
        
        var obj1={ 
          age:10,
          sex:"男",
          car:["奔驰","宝马","特斯拉","奥拓"]
        };
        //另一个对象
        var obj2={ };
        
        //写一个函数,作用:把一个对象的属性复制到另一个对象中,浅拷贝
        //把a对象中的所有的属性复制到对象b中
        function extend(a,b) { 
          for(var key in a){ 
            b[key]=a[key];
          }
        }
        extend(obj1,obj2);
        console.dir(obj2);//开始的时候这个对象是空对象
        console.dir(obj1);//有属性
    
        
        
        
      </script>
    </head> 
    <body>
    
    
    </body>
    </html>

### 深拷贝 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>title</title>
      <script>
        //深拷贝:拷贝还是复制,深:把一个对象中所有的属性或者方法,一个一个的找到.并且在另一个对象中开辟相应的空间,一个一个的存储到另一个对象中
    
        var obj1={ 
          age:10,
          sex:"男",
          car:["奔驰","宝马","特斯拉","奥拓"],
          dog:{ 
            name:"大黄",
            age:5,
            color:"黑白色"
          }
        };
    
        var obj2={ };//空对象
        //通过函数实现,把对象a中的所有的数据深拷贝到对象b中
        function extend(a,b) { 
          for(var key in a){ 
            //先获取a对象中每个属性的值
            var item=a[key];
            //判断这个属性的值是不是数组
            if(item instanceof Array){ 
              //如果是数组,那么在b对象中添加一个新的属性,并且这个属性值也是数组
              b[key]=[];
              //调用这个方法，把a对象中这个数组的属性值一个一个的复制到b对象的这个数组属性中
              extend(item,b[key]);
            }else if(item instanceof Object){ //判断这个值是不是对象类型的
         //如果是对象类型的,那么在b对象中添加一个属性,是一个空对象
              b[key]={ };
              //再次调用这个函数,把a对象中的属性对象的值一个一个的复制到b对象的这个属性对象中
              extend(item,b[key]);
            }else{ 
              //如果值是普通的数据,直接复制到b对象的这个属性中
              b[key]=item;
            }
          }
        }
    
        extend(obj1,obj2);
        console.dir(obj1);
        console.dir(obj2);
    
    
    
      </script>
    </head>
    <body>
    
    
    </body>
    </html>

### 遍历DOM树 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>遍历DOM树</title>
    </head>
    
    <body>
    <h1>遍历 DOM 树</h1>
    <p style="color: green;">Tip: 可以在遍历的回调函数中任意定制需求</p>
    <div>
      <ul>
        <li>123</li>
        <li>456</li>
        <li>789</li>
      </ul>
      <div>
        <div>
          <span>haha</span>
        </div>
      </div>
    </div>
    <div id="demo_node">
      <ul>
        <li>123</li>
      </ul>
      <p>hello</p>
      <h2>world</h2>
      <div>
        <p>dsa</p>
        <h3>
          <span>dsads</span>
        </h3>
      </div>
    </div>
    <script>
    
      //获取页面中的根节点--根标签
      var root=document.documentElement;//html
      //函数遍历DOM树
      //根据根节点,调用fn的函数,显示的是根节点的名字
      function forDOM(root1) { 
        //调用f1,显示的是节点的名字
       // f1(root1);
        //获取根节点中所有的子节点
        var children=root1.children;
        //调用遍历所有子节点的函数
        forChildren(children);
      }
      //给我所有的子节点,我把这个子节点中的所有的子节点显示出来
      function forChildren(children) { 
        //遍历所有的子节点
        for(var i=0;i<children.length;i++){ 
          //每个子节点
          var child=children[i];
          //显示每个子节点的名字
          f1(child);
          //判断child下面有没有子节点,如果还有子节点,那么就继续的遍历
          child.children&&forDOM(child);
        }
      }
      //函数调用,传入根节点
      forDOM(root);
      function f1(node) { 
        console.log("节点的名字:"+node.nodeName);
      }
    
      //节点:nodeName,nodeType,nodeValue
    
    
    
    
    // 第一个函数:给我根节点,我会找到所有的子节点:forDOM(根节点)
    // 获取这个根节点的子节点
    // var children=根节点的.children
    // 调用第二个函数
    //
    // 第二个函数:给我所有的子节点,我把每个子节点的名字显示出来(children)
    // for(var i=0;i<children.length;i++){ 
    // 每个子节点
    // var child=children[i];
    // f1(child);给我节点,我显示该节点的名字
    // child是子节点,但是如果child里面还有子节点,此时child就是爹了
    // child.children&&第一个函数(child)
    //
    // }
    
    
    
    
    
    
    
    
    </script>
    </body>
    
    </html>

### 正则表达式 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>title</title>
      <script>
    
        /* * * 正则表达式:也叫规则表达式,按照一定的规则组成的一个表达式,这个表达式的作用主要是匹配字符串的, * "我的电话:10086,他的电话:10010,你的电话:10000" 正则表达式,把这个字符串中的所有的数字找到 * * 正则表达式的作用:匹配字符串的 * * 在大多数编程语言中都可以使用 * * 正则表达式的组成:是由元字符或者是限定符组成的一个式子 * * * 元字符: * * . 表示的是:除了\n以外的任意的一个字符 "fdsfs238" * * [] 表示的是:范围, [0-9] 表示的是0到9之间的任意的一个数字, "789" [0-9] * [1-7] 表示的是1到7之间的任意的一个数字 * [a-z] 表示的是:所有的小写的字母中的任意的一个 * [A-Z] 表示的是:所有的大写的字母中的任意的一个 * [a-zA-Z] 表示的是:所有的字母的任意的一个 * [0-9a-zA-Z] 表示的是: 所有的数字或者是字母中的一个 * [] 另一个函数: 把正则表达式中元字符的意义干掉 [.] 就是一个. * | 或者 [0-9]|[a-z] 表示的是要么是一个数字,要么是一个小写的字母 * () 分组 提升优先级 [0-9]|([a-z])|[A-Z] * ([0-9])([1-5])([a-z]) 三组, 从最左边开始计算 * (()(())) * * * 都是元字符,但是也可以叫限定符,下面的这些 * * 表示的是:前面的表达式出现了0次到多次 * [a-z][0-9]* 小写字母中的任意一个 后面是要么是没有数字的,要么是多个数字的 * "fdsfs3223323" [a-z][0-9]* * * + 表示的是:前面的表达式出现了1次到多次 * [a-z][9]+ 小写字母一个后面最少一个9,或者多个9 * "fesfewww9fefds" * * ? 表示的是:前面的表达式出现了0次到1次,最少是0次,最多1次 ,另一个含义:阻止贪婪模式 * [4][a-z]? "1231234ij" * 限定符:限定前面的表达式出现的次数 * {} 更加的明确前面的表达式出现的次数 * {0,} 表示的是前面的表达式出现了0次到多次,和 *一样的 * {1,} 表示的是前面的表达式出现了1次到多次,和 +一样的 * {0,1} 表示的是前面的表达式出现了0次到1次,和 ?一样的 * {5,10} 表示的是前面的表达式出现了5次到10次 * {4} 前面的表达式出现了4次 * {,10} 错误的========不能这么写 * ^ 表示的是以什么开始,或者是取非(取反) ^[0-9] 以数字开头 * ^[a-z] 以小写字母开始 * [^0-9] 取反,非数字 * [^a-z] 非小写字母 * [^0-9a-zA-Z_] * $ 表示的是以什么结束 [0-9][a-z]$ 必须以小写字母结束 * ^[0-9][a-z] 相当于是严格模式 "3f2432e" "4f" * \d 数字中的任意一个, * \D 非数字中的一个 * \s 空白符中的一个 * \S 非空白符 * \w 非特殊符号 * \W 特殊符号 * \b 单词的边界 * "what are you no sha lei" * * * * . 除了\n以外的任意一个单个字符 * [] 范围 * () 分组,提升优先级 * | 或者 * * 0-多次 * + 1-多次 * ? 0-1次 * {0,} 和*一样 * {1,} 和+ * {0,1} 和? * * \d 数字中的一个 * \D 非数字 * \s 空白符 * \S 非空白符 * \W 特殊符号 * \w 非特殊符号 _ * ^ 取反,以什么开始 * $ 以什么结束 * * \b 单词边界 * * * * * * * * * * * * * * * * */
      </script>
    </head>
    <body>
    
    
    
    </body>
    </html>

### 正则表达式练习 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>title</title>
      <script>
    
    
        /* * * * 写正则表达式,根据字符串来写正则表达式进行匹配 * * 经验: 1.找规律 2.不要追求完美 * * * 身份证的正则表达式 * * 15位或者18位 * ([1-9][0-9]{14})|([1-9][0-9]{16}[0-9xX]) * * * ([1-9][0-9]{14})([0-9]{2}[0-9xX])? * * * 练习: * 1.座机号码的正则表达式 * 010-19876754 * 0431-87123490 * * [0-9]{3,4}[-][0-9]{8} * \d{3,4}[-]\d{8} * * \d{3,4}[-][0-9]{8} * * * 2.qq号码的正则表达式 * * [1-9][0-9]{4,10} * \d{5,11} * * 3.手机号码的正则表达式 * * 130 131 132 133 134 135 136 137 138 139 * 143 147 * 150 151 152 153 154 155 156 157 158 159 * 170 171 173 176 177 * 180 181 182 183 184 185 186 187 188 189 * ([1][358][0-9][0-9]{8})|([1][4][37][0-9]{8})|([1][7][01367][0-9]{8}) * \d{11} * * * 邮箱的正则表达式,必须要记住的 * * sd2113_3.-fd@itcast.com.cn * * * * [0-9a-zA-Z_.-]+[@][0-9a-zA-Z_.-]+([.][a-zA-Z]+){1,2} * * * * * * * * * * * */
      </script>
    </head>
    <body>
    
    
    </body>
    </html>

### 创建正则表达式对象 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>title</title>
      <script>
    
       //创建正则表达式对象
    
        //两种:
        /* * * 1.通过构造函数创建对象 * * * 2.字面量的方式创建对象 * * * 正则表达式的作用:匹配字符串的 * * */
    // //对象创建完毕---
    // var reg=new RegExp(/\d{5}/);
    // //字符串
    // var str="我的电话是10086";
    // //调用方法验证字符串是否匹配
    // var flag=reg.test(str);
    // console.log(flag);
    
    
    
    // //对象创建完毕---
    // var reg=new RegExp(/\d{5}/);
    // //调用方法验证字符串是否匹配
    // var flag=reg.test("我的电话是10086");
    // console.log(flag);
    
    
        //字面量的方式创建正则表达式对象
        var reg=/\d{1,5}/;
        var flag=reg.test("小苏的幸运数字:888");
        console.log(flag);
    
    
    
      </script>
    </head>
    <body>
    
    
    </body>
    </html>

### 识别正则表达式是否匹配 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>title</title>
      <script>
    
    
        //console.log(/[a-zA-Z]+/.test("hello"));
    
    
    
    
    // console.log(/./.test("除了回车换行以为的任意字符"));//true
    // console.log(/.*/.test("0个到多个"));//true
    // console.log(/.+/.test("1个到多个"));//true
    // console.log(/.?/.test("哈哈"));//true
    // console.log(/[0-9]/.test("9527"));//true
    // console.log(/[a-z]/.test("what"));//true
    // console.log(/[A-Z]/.test("Are"));//true
    // console.log(/[a-zA-Z]/.test("干啥子"));//false
    // console.log(/[0-9a-zA-Z]/.test("9ebg"));//true
    // console.log(/b|(ara)/.test("abra"));//true
    // console.log(/[a-z]{2,3}/.test("arfsf"));//
    
    
    
    
        console.log(/\d/.test("998"));
    
        console.log(/\d*/.test("998"));
    
        console.log(/\d+/.test("998"));
    
        console.log(/\d{0,}/.test("998"));
    
        console.log(/\d{2,3}/.test("998"));
    
        console.log(/\D/.test("eat"));
    
        console.log(/\s/.test(" "));
        console.log(/\S/.test("嘎嘎 "));
        console.log(/\w/.test("_"));
        console.log(/\W/.test("_"));
    
      </script>
    </head>
    <body>
    
    
    </body>
    </html>

### 案例验证密码的强度 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Document</title>
    </head>
    <style type="text/css">
      #dv{ 
        width: 300px;
        height:200px;
        position: absolute;
        left:300px;
        top:100px;
      }
      .strengthLv0 { 
        height: 6px;
        width: 120px;
        border: 1px solid #ccc;
        padding: 2px;
      }
    
      .strengthLv1 { 
        background: red;
        height: 6px;
        width: 40px;
        border: 1px solid #ccc;
        padding: 2px;
      }
    
      .strengthLv2 { 
        background: orange;
        height: 6px;
        width: 80px;
        border: 1px solid #ccc;
        padding: 2px;
      }
    
      .strengthLv3 { 
        background: green;
        height: 6px;
        width: 120px;
        border: 1px solid #ccc;
        padding: 2px;
      }
    </style>
    <body>
    <div id="dv">
      <label for="pwd">密码</label>
      <input type="text" id="pwd" maxlength="16">
      <div>
        <em>密码强度：</em>
        <em id="strength"></em>
        <div id="strengthLevel" class="strengthLv0"></div>
      </div>
    </div>
    <script src="common.js"></script>
    <script>
    
      //获取文本框注册键盘抬起事件
      my$("pwd").onkeyup=function () { 
        //每次键盘抬起都要获取文本框中的内容,验证文本框中有什么东西,得到一个级别,然后下面的div显示对应的颜色
        //如果密码的长度是小于6的,没有必要判断
    // if(this.value.length>=6){ 
    // var lvl= getLvl(this.value);
    // my$("strengthLevel").className="strengthLv"+lvl;
    // }else{ 
    // my$("strengthLevel").className="strengthLv0";
    // }
        my$("strengthLevel").className="strengthLv"+(this.value.length>=6?getLvl(this.value) :0);
      };
    
      //给我密码,我返回对应的级别
      function getLvl(pwd) { 
        var lvl=0;//默认是0级
        //密码中是否有数字,或者是字母,或者是特殊符号
        if(/[0-9]/.test(pwd)){ 
          lvl++;
        }
        //判断密码中有没有字母
        if(/[a-zA-Z]/.test(pwd)){ 
          lvl++;
        }
        //判断密码中有没有特殊符号
        if(/[^0-9a-zA-Z_]/.test(pwd)){ 
          lvl++;
        }
        return lvl;//最小的值是1,最大值是3
      }
    
    
    
    
    </script>
    <script>
    
      /* * * 密码: 数字,字母,特殊符号 * * 密码: 只有数字- 或者是只有字母,或者是只有特殊符号---1级---弱 * 两两组合: 数字和字母, 数字和特殊符号, 字母和特殊符号 -----2级----中 * 三者都有: 数字和字母和特殊符号------3级-----强 * * */
    
    // //获取文本框注册键盘抬起事件
    // my$("pwd").οnkeyup=function () { 
    // //每次键盘抬起都要获取文本框中的内容,验证文本框中有什么东西,得到一个级别,然后下面的div显示对应的颜色
    // //如果密码的长度是小于6的,没有必要判断
    // if(this.value.length>=6){ 
    // var lvl=getLvl(this.value);
    // if(lvl==1){ 
    // //弱
    // my$("strengthLevel").className="strengthLv1";
    // }else if(lvl==2){ 
    // my$("strengthLevel").className="strengthLv2";
    // }else if(lvl==3){ 
    // my$("strengthLevel").className="strengthLv3";
    // }else{ 
    // my$("strengthLevel").className="strengthLv0";
    // }
    // }else{ 
    // my$("strengthLevel").className="strengthLv0";
    // }
    //
    //
    // };
    //
    // //给我密码,我返回对应的级别
    // function getLvl(pwd) { 
    // var lvl=0;//默认是0级
    // //密码中是否有数字,或者是字母,或者是特殊符号
    // if(/[0-9]/.test(pwd)){ 
    // lvl++;
    // }
    // //判断密码中有没有字母
    // if(/[a-zA-Z]/.test(pwd)){ 
    // lvl++;
    // }
    // //判断密码中有没有特殊符号
    // if(/[^0-9a-zA-Z_]/.test(pwd)){ 
    // lvl++;
    // }
    // return lvl;//1 3
    // }
    //
    
    
    
    </script>
    
    
    
    
    
    </body>
    </html>

### 案例验证用户输入的是不是邮箱 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>title</title>
    
    </head>
    <body>
    请您输入邮箱地址:<input type="text" value="" id="email"/> *<br/>
    <script>
      //如果输入的是邮箱,那么背景颜色为绿色,否则为红色
    
      //获取文本框,注册失去焦点的事件
      document.getElementById("email").onblur = function () { 
        //判断这个文本框中输入的是不是邮箱
        var reg = /^[0-9a-zA-Z_.-]+[@][0-9a-zA-Z_.-]+([.][a-zA-Z]+){1,2}$/;
        if (reg.test(this.value)) { 
          this.style.backgroundColor = "green";
        } else { 
          this.style.backgroundColor = "red";
        }
      };
    </script>
    
    </body>
    </html>

### 案例检验用户输入的是不是中文名字 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>title</title>
    
    </head>
    <body>
    请输入您的名字:<input type="text" value="" id="userName" />*<br/>
    <script>
      //是中文名字,则绿色,否则红色
      document.getElementById("userName").onblur=function () { 
        var reg=/^[\u4e00-\u9fa5]{2,6}$/;
        if(reg.test(this.value)){ 
          this.style.backgroundColor="green";
        }else{ 
          this.style.backgroundColor="pink";
        }
      };
    
    
      //[\u4e00-\u9fa5] [一-龥]
    </script>
    
    </body>
    </html>

### 大案例验证表单 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Document</title>
      <style type="text/css">
        body { 
          background: #ccc;
        }
    
        label { 
          width: 40px;
          display: inline-block;
        }
    
        span { 
          color: red;
        }
    
        .container { 
          margin: 100px auto;
          width: 400px;
          padding: 50px;
          line-height: 40px;
          border: 1px solid #999;
          background: #efefef;
        }
    
        span { 
          margin-left: 30px;
          font-size: 12px;
        }
    
        .wrong { 
          color: red
        }
    
        .right { 
          color: green;
        }
    
        .defau { 
          width: 200px;
          height: 20px;
        }
    
        .de1 { 
          background-position: 0 -20px;
        }
      </style>
    
    </head>
    
    <body>
    <div class="container" id="dv">
      <label for="qq">Q Q</label><input type="text" id="qq"><span></span><br/>
      <label>手机</label><input type="text" id="phone"><span></span><br/>
      <label>邮箱</label><input type="text" id="e-mail"><span></span><br/>
      <label>座机</label><input type="text" id="telephone"><span></span><br/>
      <label>姓名</label><input type="text" id="fullName"><span></span><br/>
    </div>
    <script src="common.js"></script>
    <script>
    
      //qq的
      checkInput(my$("qq"),/^\d{5,11}$/);
      //手机
      checkInput(my$("phone"),/^\d{11}$/);
      //邮箱
      checkInput(my$("e-mail"),/^[0-9a-zA-Z_.-]+[@][0-9a-zA-Z_.-]+([.][a-zA-Z]+){1,2}$/);
      //座机号码
      checkInput(my$("telephone"),/^\d{3,4}[-]\d{7,8}$/);
      //中文名字
      checkInput(my$("fullName"),/^[\u4e00-\u9fa5]{2,6}$/);
      //给我文本框,给我这个文本框相应的正则表达式,我把结果显示出来
      //通过正则表达式验证当前的文本框是否匹配并显示结果
      function checkInput(input,reg) { 
        //文本框注册失去焦点的事件
        input.onblur=function () { 
          if(reg.test(this.value)){ 
            this.nextElementSibling.innerText="正确了";
            this.nextElementSibling.style.color="green";
          }else{ 
            this.nextElementSibling.innerText="让你得瑟,错了吧";
            this.nextElementSibling.style.color="red";
          }
        };
      }
    
    </script>
    
    </body>
    </html>

### 正则表达式其他的方法的使用 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>title</title>
      <script>
        //正则表达式中:g 表示的是全局模式匹配
        //正则表达式中:i 表示的是忽略大小写
    
        
           var str="中国移动:10086,中国联通:10010,中国电信:10000";
           //把里面所有的数字全部显示出来
           var array=str.match(/\d{5}/g);
           console.log(array);
    
    
        //
        // var str = "123123@xx.com,fangfang@valuedopinions.cn 286669312@qq.com 2、emailenglish@emailenglish.englishtown.com 286669312@qq.com...";
        // var array = str.match(/\w+@\w+\.\w+(\.\w+)?/g);
        // console.log(array);
    
    
        //提取这里的日
        // var str="2017-11-12";
        // var array=str.match(/(\d{4})[-](\d{2})[-](\d{2})/g);
        // //console.log(array);
        // //正则表达式对象.$3
        // console.log(RegExp.$3);
    
    
        // var email="shuaiyangtaishuaile@itcast.com.cn";
        // email.match(/([0-9a-zA-Z_.-]+)[@]([0-9a-zA-Z_-]+)(([.][a-zA-Z]+){1,2})/);
        // console.log(RegExp.$1);//用户名
        // console.log(RegExp.$2);//126
        // console.log(RegExp.$3);//域名
    
    
        // var str="小苏好帅哦,真的是太帅了,帅,就是真帅";
        // str=str.replace(/帅/g,"猥琐");
        // console.log(str);
    
        // var str=" 哦买噶的 ,太幸福了 ";
        // str=str.trim();
        // console.log("==="+str+"===");
    
    
        // var str = " 哦买噶的 ,太幸福了 ";
        // str = str.replace(/\s+/g, "");
        // console.log("===" + str + "===");
    
    
        //所有的h都替换成S
        // var str="HhpphH";//SSppSS
        // str=str.replace(/[h]/gi,"S");
        // console.log(str);
    
    
        // var reg = new RegExp(/[h]/gi);
        // var str = "HhpphH";//SSppSS
        // str = str.replace(reg, "S");
        // console.log(str);
    
    //
    // var str = "中国移动:10086,中国联通:10010,中国电信:10000";
    // //把里面所有的数字全部显示出来
    // //var array = str.match(/\d{5}/g);
    // //正则表达式对象.exec方法传入字符串
    // var reg=/\d{5}/g;
    // //var array=reg.exec(str);
     console.log(array);
     console.log(reg.exec(str));
     console.log(reg.exec(str));
     console.log(reg.exec(str));
    //
    // var result=reg.exec(str);
    // while(result!=null){ 
    // console.log(result);
    // result=reg.exec(str);
    // }
    
    
    
    // var str = "中国移动:10086,中国联通:10010,中国电信:10000";
    // var reg=/\d{5}/g;
    // //通过正则表达式匹配这个字符串
    // var array=reg.exec(str);
    // console.log(array);
    // console.log(reg.exec(str));
    // console.log(reg.exec(str));
    // console.log(reg.exec(str));//null
    //
    
    
        var str = "中国移动:10086,中国联通:10010,中国电信:10000";
        var reg=/\d{5}/g;
        //通过正则表达式匹配这个字符串
        var array=reg.exec(str);
        while (array!=null){ 
          //输出匹配的内容
          console.log(array[0]);
          array=reg.exec(str);
        }
    
    
    
    
    
    
    
    
    
    
      </script>
    </head>
    <body>
    
    
    </body>
    </html>

### 数组和伪数组 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>title</title>
      <script>
        //伪数组和数组的区别
        //真数组的长度是可变的
        //伪数组的长度不可变
        //真数组可以使用数组中的方法
        //伪数组不可以使用数组中的方法
        
    
    // function f1() { 
    // var sum=0;
    // for(var i=0;i<arguments.length;i++){ 
    // sum+=arguments[i];
    // }
    // console.log(sum);
    // }
    // //arguments得到的是实参的个数及实参的每个值
    //
    // f1(10,20,30,40);
    
    
    // function f1() { 
    // var sum=0;
    // arguments.forEach(function () { 
    //
    // });
    // }
    // //arguments得到的是实参的个数及实参的每个值
    //
    // f1(10,20,30,40);
    
    // var arr=[10,20,30];
    // arr.forEach(function () { 
    //
    // });
    
    
    
        var arr=[10,20];
        arr.forEach()
        console.dir(arr);
    
        数组实例对象的__proto__----->Array的prototype
    
        //数组
    // var arr=[10,20,30];
    // arr[3]=100;
    // console.log(arr.length);
    // //对象---假的数组
    // var obj={ 
    // 0:10,
    // 1:20,
    // 2:30,
    // length:3
    // };
    //
    // console.log(obj[0]);
    // console.log(obj[1]);
    // console.log(obj[2]);
    // console.log(obj.length);
    // obj[3]=1000;
    // console.log(obj[3]);
    // console.log(obj.length);
    
        //遍历数组 
    // for(var i=0;i<arr.length;i++){ 
    // console.log(arr[i]);
    // }
    //
    // for(var i=0;i<obj.length;i++){ 
    // console.log(obj[i]);
    // }
      </script>
    </head>
    <body>
    
    
    </body>
    </html>