js高级笔记

JS高级笔记

JS高级第一天

1-面向对象介绍

面向对象 : 面向对象是一种解决问题的思维方式
面向对象 : 注重的是结果
面向过程 : 注重的是过程
面向对象本质 : 面向过程的封装
(1)以前思维方式:面向过程    ->   注重的是过程
(2)面向对象思维方式  ->  注重的是结果

2-面向对象编程

// 面向过程 : 注重的是过程
// 弊端 : (1)代码冗余 (2)不便于维护

// 使用函数封装
// 好处: 解决代码冗余
//弊端: 全局变量污染  (全局变量重复设置导致覆盖现象)

//使用对象方法
//封装 : 将代码放入对象的方法中  (1)解决代码冗余  (2)解决全局变量污染

了解面向对象的原理: 对面向过程的封装
实际开发中,遇到功能先在网上找有没有现成的对象,如果有就直接CV,没有自己写
用别人写好的对象: (1) 好处: 效率高  (2)坏处: 不好维护
自己写好的对象: (1) 坏处: 效率低  (2)好处: 便于维护

3-原型

// 对象创建原理(new关键字工作原理)
// 1. 创建对象
// 2. this指向这个对象
// 3. 知名对象的赋值
// 4. 自动返回这个对象
// 原型: 每一个构造函数创建的时候,系统会自动创建一个对象,称之为原型对象。
// 原型作用:解决 (1)内存资源浪费  + (2)全局变量污染
// 原型语法 : 两种对象可以访问
        a. 构造函数.prototype
        b. 实例对象直接访问

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9vbvMmMD-1599820996698)(C:/Users/86188/AppData/Roaming/Typora/typora-user-images/1596424804820.png)]

1-构造函数方法的弊端:
 内存资源浪费: 每调用一次构造函数,就会在内存声明一个函数。导致内存资源浪费
2-.使用全局函数解决 : 内存资源浪费 
  弊端----全局变量污染
3-使用对象 封装 : 把代码放到对象方法中
	同时解决 内存资源浪费 + 全局变量污染
	弊端: 治标不治本. 使用对象后,只能减少全局变量的数量,而且obj本身还是全局的
// 4-原型对象 : 完美解决构造函数  内存资源浪费 + 全局变量污染
	//(1)原型 : 每一个函数在被创建的时候,系统自动创建一个与之对应的对象,称为原型对象
//	(2)作用 : 内存资源浪费 + 全局变量污染
// 	(3)语法 : 如何访问(取值+赋值)原型
	// 	a. 构造函数.prototype
		//b. 实例对象直接访问原型的成员

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-suhSw23I-1599820996705)(C:/Users/86188/AppData/Roaming/Typora/typora-user-images/1596425169233.png)]

//a. __proto__ : 属于实例对象,指向原型对象
//b. __proto__作用: 可以让实例对象 访问原型中的成员
//c. 注意点:
      // 开发中: 不要写__proto__,直接省略。 因为__proto__不是W3C标准属性
      // 学习中: 可以使用,可以帮助我们更好的理解原型

4-constructor属性

// .prototype : 属于构造函数,指向原型对象
//            * 作用: 解决内存资源浪费 + 全局变量污染
// .__proto__: 属性实例对象,指向原型对象
//            * 作用: 可以让实例对象访问原型中的成员
// constructor : 属于原型对象,指向构造函数
//            * 作用: 可以让实例对象 知道自己是被哪一个构造函数创建

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JmANPOAM-1599820996708)(01-jS高级第一天/01-JS高级课程笔记/day01.assets/1588083693450.png)]

5-总结

 1. 哪些成员应该放入原型?
       * 所有实例对象共有的成员
2. 实例对象访问原型的规则?
       * 就近原则: 如果一个实例对象自己有成员,优先访问自己的。自己没有就访问原型的。
3、原型可以重新赋值。
        * 实例对象访问 修改前的原型还是修改后的原型? 取决于这个实例对象是在修改前还是修改后背创建
                * 修改前创建: 访问修改前的
                * 修改后创建: 访问修改后的

JS高级第二天

1-面向对象三大特征介绍

面向对象是一种(解决问题)思维方式
面向对象的思维方式有三大特征
	//a. 封装 : 将代码放入对象的方法中
	//b. 继承 : 一个对象拥有另一个对象所有的成员(属性+方法)
		//(1) 自己实现继承的三种方式
		//(2) js通过原型链来实现继承的
	//c. 多态 : 一个对象在不同情况下的多种状态

2-继承的三种实现方式

// 1. 继承 : 一个对象(子对象)拥有另一个对象(父对象)所有的成员
// 2. 三种实现继承的方式
	(1) 混入式继承 : 遍历父对象的成员,添加给子对象
		特点 : 每继承一次,需要遍历一次父元素
		应用场景 :使用与单个对象继承
	(2) 替换原型 : 将父对象 作为子对象构造函数的原型
		特点 : 可能会覆盖子对象构造函数 原本的原型
		应用场景 : 用于多对象继承
	(3) 混合式 :混入式 + 替换原型
	     方案 : 遍历父对象,添加给子对象构造函数的原型

3-原型链

//js是通过原型链来实现继承
	//1.原型链: 每一个对象都有__proto__属性指向自己的原型,而原型又是一个对象,也有自己的__proto__属性指向原型的原型,以此类推形成一种链式结构,称之为原型链
	//2.对象访问原型链中成员的规则: 就近原则
		//对象访问成员的时候,优先访问自己的.自己没有就反问原型的,如果原型也没有,那就找原型的原型,以此类推直到终点Null.如果还找不到,则是程序报错,提示'xxx' is not a function

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Documenttitle>
head>
<body>
    <script>
    	//1.构造函数
        function Person(name,age){
      
            this.name = name;
            this.age = age;
        };

        //2.原型对象
        Person.prototype.sayHi = function(){
      
            console.log('人生若只如初见,何事秋风悲画扇');
        };

        Person.prototype.type = '哺乳动物';

        //3.实例化对象
        let p1 = new Person('又又',18);
        console.log(p1);

        //请说出以下代码执行结果
        console.log(p1.name);//又又      p1自己有name属性
        console.log(p1.type);//哺乳动物   p1自己没有type,但是p1的原型有
        console.log(p1.hobby);//undefined p1自己没有hobby,原型也没有
        p1.sayHi();// 人生若只如初见,何事秋风悲画扇   p1自己没有这个方法,原型有
       // p1.eat();//报错 xxx is not defined    p1自己没有这个方法,原型也没有

       //为什么不报错?  p1自己没有这个方法,原型也没有这个方法,但是原型的原型有
        p1.toString();

        //查看p1的原型链
        console.log(p1.__proto__.constructor);//Person
        console.log(p1.__proto__ === Person.prototype);//true

        //查看p1的原型的原型
        console.log(p1.__proto__.__proto__.constructor);//Object
        console.log(p1.__proto__.__proto__ === Object.prototype);//true

        //查看p1的原型的原型的原型
        console.log(p1.__proto__.__proto__.__proto__);//null

    script>
body>
html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-51f0uRBm-1599820996714)(C:/Users/86188/AppData/Roaming/Typora/typora-user-images/1596510621569.png)]

4-内置对象的原型链

//基本包装类型:  new String()   new Boolean()  new Number()
这个三个对象里封装一些处理基本数据类型的方法
var : 老版本的声明变量关键字
let : 最新版js声明变量关键字,两者区别不大,但是开发主流一般会使用left
// ECMAScript内置对象
	1. date日期对象原型链
	2. array数组对象原型链
	3. string对象的原型链
//DOM对象的原型链

4-1date日期对象原型链

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-a4GbCaUq-1599820996717)(实践/JS高级.day2/imgs/date原型链代码.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OLDZBds4-1599820996720)(实践/JS高级.day2/imgs/date日期对象原型链.png)]

4-2 array数组对象原型链

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zVziZsxJ-1599820996722)(实践/JS高级.day2/imgs/arr原型链代码.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IgxseaSP-1599820996725)(实践/JS高级.day2/imgs/arr数组对象原型链.png)]

4-3String对象的原型链

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ugFb7o8P-1599820996727)(实践/JS高级.day2/imgs/String原型链.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Uxyj5Q5x-1599820996729)(实践/JS高级.day2/imgs/String字符串对象的原型链.png)]

4-4DOM对象的原型链

let box = document.querySelector('#box');
let p1 = document.querySelector('#p1');

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fFVquLuy-1599820996731)(JS高级.day2/imgs/DOM.png)]

5-函数也是对象

<html>
<body>
<script>
//函数属于对象.
	//对象有点语法操作属性,如果函数也可以使用点语法来操作属性,说明函数也是对象
	//1.原型
		//构造函数prototype : 指向原型
		//原型对象constructor : 指向构造函数
		//实例对象__proto__ : 指向原型
	//2.js中所有的对象都是构造结构函数创建
		//原型对象 : 都是被Object构造函数创建
		//函数对象 : 都是被Function构造函数
		//实例对象 : 由对应的结构函数创建(自定义构造函数Person,SonWang创建的实例对象,由对应的构造函数创建)
    
    /* 所有函数的声明,底层原理都是调用  new Function()
        a. 前面所有的参数都是形参  b. 最后一个函数是函数体代码
        */
        //声明无参无返回函数
        let fn1 =  new Function('console.log("老铁666")');
        fn1();

        //声明有参有返回函数
        let fn2 = new Function('a','b','return a + b');
        console.log(  fn2(10,20) );//30
    
    //1. js基础 : 函数声明有两种语法
    //(1)函数声明 : function 函数名(){//函数体代码}
    // 具名函数 : 声明的时候有函数名
    function fun1(a,b){
      
        console.log('1111');
        return a+b;
    };
    
    //(2)表达式声明 : let 函数名 = 匿名函数
    //匿名函数: 声明的时候没有函数名
    let fn2 =  function(){
      
        consloe.log('2222');
    };
    
    //2. js基础: 函数调用也有两种语法
    //2.1 函数调用: 函数名();
    fu1(10,20);
    fn2();
    
    //2.2自调用语法: (函数)();
    (function(){
      console.log(666)})();  //常用于匿名函数自调用
    (function fn3()){
      
     console.log(8888)
     })(); //任何函数都可以使用这种自调用语法,只是一般具名函数不会这样写
script>
body>
html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RDylbSIf-1599820996737)(02-js高级第二天/01-教学资源/函数也是对象.png)]

6-instanceof运算符原理结束


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Documenttitle>
head>
<body>
    <script>
        /* 
        1. 原型 : 函数对象、原型对象、实例对象三者之间的关系
            构造函数prototype : 指向原型
            原型对象constructor : 指向构造函数
            实例对象__proto__ : 指向原型
        2. js中所有的对象都是构造函数创建
            原型对象 : 都是被Object构造函数创建
            函数对象 : 都是被Function构造函数
            实例对象 : 由对应的构造函数创建 (自定义构造函数Person,SonWang创建的实例对象,由对应的构造函数创建)
        3. instanceof运算符 : 检测一个构造函数prototype 在不在对象的原型链中。
            语法:  实例对象  instanceof 构造函数
            规则: 检测 右边构造函数的prototype 在不在左边对象的原型链中
                true: 在  false:不在
        */     
        
        let arr = [10,20,30];
        /* 
        arr实例对象原型链  arr.__proto__  ->  Array.prototype -> Object.prototype - > null
        */
        console.log( arr instanceof Array);//true
        console.log( arr instanceof Object);//true

        /* 
        根据instanceof运算符规则: 左边object是一个对象,  右边object是一个函数
        object对象原型链 object.__proto__ -> Function.prototype ->Object.prototype ->null
        
        */
       console.log( Object.__proto__.constructor );//Function
       console.log( Object.__proto__ === Function.prototype );//true
    
        console.log( Object instanceof Object);//true
        console.log( Object instanceof Function);//true


        /* 
        根据instanceof运算符规则: 左边Functiont是一个对象,  右边Function是一个函数
        function对象原型链 Function.__proto__ -> Fuction.prototype -> Object.prototype -> null
        */
        console.log( Function.__proto__.constructor );//Function
        console.log( Function.__proto__ === Function.prototype );//true

        console.log( Function instanceof Function);//true
        console.log( Function instanceof Object);//true
    script>
body>
html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IGLuEXw2-1599820996739)(C:/Users/86188/AppData/Roaming/Typora/typora-user-images/1596532646904.png)]

7-静态成员与实例成员


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Documenttitle>
head>
<body>
    <script>
    	/*
    	静态成员: 属于函数对象自己的成员
    	实例成员: 属于实例对象的成员
    	*/
        function.Person(name,age){
      
            //构造函数里面的成员属于实例成员
            this.name = name;
            this.age = age;
        }
        //静态成员: 函数自己的成员
        Person.hobby = '保养对象';
        let p1 = new Person('ikun',30);
        console.log(p1.name);//实例成员: 属于实例对象
        console.log(p1.age);//实例成员: 属于实例对象
        
        //console.log(p1.hobby);//undefined 静态成员只有函数自己才可以访问
        console.log(Person.hobby);//保养健康
        
        /* 静态成员经典场景: 只执行一次函数 
        */
        function fn(){
      
            if(!fn.flag){
      
                console.log('投票了');
                fn.flag = true;
            };
        };
        fn();//有效
        fn();//无效
        fn();//无效
        fn();//无效
        fn();//无效
        
        //let bol = true;
        //if(bol){
      
        //    console.log(1);
        //}else{
      
        //    console.log(2);
        //};
        
        /*
        if(条件 true/false){
        	条件成立需要执行的代码
        }else{
        	条件不成立需要执行的代码
        }
        
        注意点: if小括号里面的条件可以写三种代码
        关系表达式: 结果是布尔类型
        布尔类型的值
        其他的值: 编译器会自动转成为布尔类型判断是否成立
        */
    script>
body>
html>

JS高级第三天

1-函数三种调用模式(this指向)


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<body>
    <script>
        /* 
        1. 函数三种执行方式: 普通函数  对象方法   构造函数
        2. this指向 : 谁调用,就指向谁
            this的指向取决于调用方式,与声明无关
                a. 普通函数 :  this指向window
                b. 对象方法 :  this指向对象
                c. 构造函数 :  指向new创建的对象
         */

        function fn (){
      
            console.log('1111');
            console.log(this);
        }

        //  1 普通函数
        fn(); // window.fn();

        //  2 对象的方法
        let obj = {
      
            name: 'ikun',
            age:30,
            eat:fn
        };

        // 由于eat的值就是fn的值,所以调用eat就是调用的fn
        //  3 构造函数 
        let p1 = new fn();//this 指向new创建的对象
        console.log(p1);
    script>
body>
html>

02-函数上下文执行模式


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<body>
    <script>
  /* 函数4中调用方式 
        
        1. 函数三种执行方式 : 普通函数  对象方法 构造函数
            共同点 : this的指向无法修改  是固定的 (一旦修改程序报错)
            普通函数 : this指向window
            对象方法 : this指向对象 
            构造函数 : this指向new创建的对象

        2. 函数第四种执行方式 : 上下文模式
            作用 : 修改函数里面的this
            语法 : 三个语法作用一直都是修改this, 只是传参方式不同
                2.1 函数名.call(修改后的this,形参1,形参2)
                    应用场景 : 适用于函数形参 <= 1
                2.2 函数名.apply(修改后的this,数组或伪数组)
                    应用场景 : 适用于函数形参 >= 2
                2.3 函数名.bind(修改后的this,形参1,形参2)
                    注意点 : 
                        a. bind()不会立即执行,这个函数,而是返回一个修改this之后的新函数
                        b. 一般用bind调用不会立即传递形参(一旦传递,形参就固定了无法修改),而是调用返回						的新函数的时候再传参
                    应用场景 : 适用于某个函数不需要立即执行,而是过一会儿才执行
                        事件处理函数 + 定时器函数
         */
         function fn (a,b){
      
             console.log(this);
             console.log(a+b);

             return a+b;
         }
         fn();
        //  2.1 函数名.call(修改后的this,形参1,形参2)
        fn.call({
      name:'张三'},100,101);

        // 2.2 函数名.apply(修改后的this,数组或伪数组)
                //  应用场景 : 适用于函数形参 >= 2
        fn.apply({
      name:'李四'},[10,20]);
        
        // 2.3 函数名.bind(修改后的this,形参1,形参2)
        //             注意点 : 
        //                 a. bind()不会立即执行,这个函数,而是返回一个修改this之后的新函数
        //                 b. 一般用bind调用不会立即传递形参(一旦传递,形参就固定了无法修改),而是调用							返回的新函数的时候再传参
        //             应用场景 : 适用于某个函数不需要立即执行,而是过一会儿才执行
        //                 事件处理函数 + 定时器函数
        let newFn = fn.bind({
      name:'王五'});
        newFn(22,33);
    script>
body>
html>

3-函数上下执行模式注意点

<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<body>
     <script>
         /*
         1. 上下文执行默认作用 : 修改函数中的this指向
         2. 注意点 : this只能指向引用类型(array function object). 如果指向基本类型
         	* 基本包装类型string number boolean : 自动转成对应的对象类型 new String() new Number()  				new Boolean()
         	* undefined与null : 修改无效,this指向window
         */
         function fn(){
      
            console.log(this);
            console.log( typeof this);
        };
        fn.call({
      name:'1111'});
        fn.call([10,20,30]);
         //如果上下文模式把this修改为基本数据类型
        //基本包装对象会自动转成对应的内置对象
        fn.call('abc');
        fn.call(123);
        fn.call(true);
        //undefined和null : 修改无限,this默认指向window
        fn.call(undefined);//window
        fn.call(null);//window
        fn.call();//window
    script>
body>
html>

4-伪数组转数组

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Documenttitle>
head>
<body>
    <script>
        /* 函数4种调用方式
        1.函数三种执行方式 : 普通函数、对象方法、构造函数
            * 共同点 : this的指向无法修改,是固定的.(一旦修改程序报错)
            * 普通函数 : this指向window
            * 对象方法 : this指向对象
            * 构造函数 : this指向new创建的对象
        2.函数第四种执行方式: 上下文模式
            * 作用: 修改函数里面的this
            * 语法: 三个语法作用一致都是修改this,只是传参方式不同
                2.1 函数名.call(修改后的this,形参1,形参2)
                    场景:用于函数原本形参 <= 1
                2.2 函数名.apply(修改后的this,数组或伪数组)
                    场景:用于函数原本形参 >= 2
                2.3 函数名.bind(修改后的this,形参1,形参2)
                    不会立即执行函数体,而是返回一个修改this之后的新函数
                    场景: 用于这个函数不需要立即执行,而是过一会儿执行(事件处理函数,定时器函数)
        */
        //1.伪数组 : 有数组三要素(下标,元素,长度),但是不能调用数组的API
        //伪数组本质是一个对象 : (属性名恰好就是下标, 但是对象原型不是指向Array.prototype,所以无法调				用数字方法)
        let weiArr = {
      
            0:20,
            1:30,
            2:60,
            3:80,
            length:4
        };
        console.log(weiArr);
        // console.log(weiArr.reverse());//报错 伪数组无法调用数组方法
        
        //2.伪数组转数组 : 目的是让伪数组也可以调用数组的方法
        //2.1 遍历伪数组,添加到真数组中
        let arr = [];
        for(let i = 0;i<weiArr.length;i++){
      
            arr.push( weiArr[i] );
        };
        console.log(arr);
        
         //2.2 arr.push.apply(arr,伪数组)
        //(1)push()方法支持一次性添加多个元素
        //弊端 : 形参数量太多
        let arr = [];
        arr.push( weiArr[0],weiArr[1],weiArr[2],weiArr[3] );
        console.log(arr);
        
        let arr = [];
        //这里不需要修改this,仅仅只是利用apply可以自动遍历数组|伪数组,来逐一传参的特点
        arr.push.apply(arr,weiArr);
        console.log(arr);
        
         /* 
        2.3 Array.prototype.slice.call(伪数组)
        (1)数组的原型中有一个方法叫做slice 。  它有一个特点,不传参数,默认会返回数组自身
        (2)如果伪数组也可以调用slice,那么就可以返回一个真数组
        (3)但是伪数组不能直接调用slice,会报错。  原因:伪数组自己没有slice,原型也没有slice
        (4)思考:为啥真数组可以调用slice呢?  原因: 数组自己没有slice,但是原型有
        (5)原型中的成员,有两种访问方式
            a. 构造函数自身:  Array.prototype
            b. 每一个实例对象
        (6)越过原型链,直接利用构造函数的prototype来调用slice :  Array.prototype.slice()
        (7)越过原型链虽然可以调用slice,但是此时slice方法中的this就是原型对象 Array.prototype
        (8)既要调用slice,又希望slice方法里面的this指向伪数组
            * 相当于是weiArr来调用slice
        */
        let arr1 =  Array.prototype.slice.call(weiArr);
        console.log(arr1);
    script>
body>
html>

5-伪数组排序

<html>
    <body>
        <script>
           	 //第一种方式: 先把伪数组转成真数组,然后调用sort
			let arr = Array.prototype.slice.call(weiArr);
            arr.sort(function(a,b){
      return a-b});
            cnnsole.log(arr);
            // Array.prototype.sort.call(weiArr,function(a,b){return a-b});
            // 思路: 越过原型链查找机制,直接调用数组原型的sort,并且把this修改为伪数组
            Array.prototype.sort.call(weiArr,function(a,b){
      return a-b});
            console.log(weiArr);
        script>
    body>
html>

6-求最大值

<html>
    <body>
        <script>
            /* 求数组最大值 */
            let arr = [112,234,,676,5,6343,67];
            // 擂台思想
            // 1.擂台思想
            	let max = -Infinity;//用于存放表示正无穷大的数值
            // 2. 遍历挑战者
            for(let i = 0; i < arr.length;i++){
      
                // 3.依次和擂主pk
                if(arr[i] > max){
      
                    max = arr[i]
                };
            };
            console.log(max);
            
            /* Math.max */
            // let max1 = Math.max(arr[0],arr[1],arr[2],arr[3],arr[4]);
            // 利用apply自动遍历数组传参的特点 (底层与上面代码一致,只是apply会自动遍历数组逐一传参)
            let max1 = Math.max.apply(Math,arr);
            console.log(max1);
        script>
    body>
html>

7-求数组最大值

<html>
    <body>
        <script>
            /* 
            1. 复习 typeof关键字检测数据类型 : typeof 数据
            	* 弊端: 无法检测 null 和 array 这两种数据类型,返回值都是object
            	* typeof null : 'object'
            	* typeof []   : 'object'
            2. 介绍 对象的toString()方法检测数据类型
            	* Object.prototype.toString() : 返回固定格式字符串 [object 数据类型]
            	* Array.prototype.toString() : 返回数组.join ()方法拼接的字符串
            3. 总结: 万能检测数据类型
            	* 固定语法: Object.prototype.toString.call(数据)
            */
            // a. 值类型(基本数据类型)
            let str = '我爱你们';
            let num = 68;
            let bol = true;
            let und = undefined;
            let nul = null;
            // b. 引用类型(复杂数据类型)
            let arr = [12,13,14];
            let fn  = function(){
      };
            let obj = {
      name:'link'};
            console.log(typeof str); //'string'
            console.log(typeof num); //'number'
            console.log(typeof bol); //'boolean'
            console.log(typeof und); //'undefined'
            console.log(typeof nul); //'object'
            console.log(typeof arr); //'object'
            console.log(typeof fn);  //'function'
            console.log(typrof obj); //'object'
            
            /* 2. 对象的toString()方法介绍
            Object.prototype.toString() : 返回一个固定格式字符串 '[object 数据类型]'
            Array.protottpe.toString()  : 底层原来是调用数组的join()方法
            */
            console.log(obj.toString()); //[object Object]
            console.log(arr.toString()); //[object Array]
            
            /* 3. 万能检测数据类型 : 越过了原型链,直接调用Object.prototype里面的toString
            	* 因为很多对象的原型都覆盖了toString(),所以通过原型链无法直接访问到Object的原型里面				dtoString
            	* 总结 : Object.prototype.toString.call(数据)
            */
            console.log(Object.prototype.toString.call(str));//[objcet	String]
            console.log(Object.prototype.toString.call(num));//[object	Number]
            console.log(Object.prototype.toString.call(bol));//[object	Boolean]
            console.log(Object.prototype.toString.call(und));//[object Undefined]
            console.log(Object.prototype.toString.call(nul));//[object	Null]
            console.log(Object.prototype.toString.call(arr));//[object	Arrat]
            console.log(Object.prototype.toString.call(fn)); //[object	Function]
            console.log(Object.prototype.toString.call(obj));//[object	Object]
        script>
    body>
html>

JS高级第四天

1-递归函数

<html>
    <body>
        <script>
        	/* 
        	1. 递归函数 : 一个函数在函数体中调用自己
        	2. 递归函数作用 : 函数体代码重发执行
        		* 递归函数做到事和循环一样的,能用递归做的就可以用循环做.只是语法简洁性不同.
        	3. 递归注意点 : 一定要有结束条件,否则会导致死循环.
        	*/
            
            // 单函数递归
            function fn(){
      
                console.log('好好学习');
                fn();
            };
            fn();
            
            // 双函数递归
            
            // 使用递归
            function getSum(n){
      
                return n == 1 ? 1 : n + getSum(n - 1);
                
                /* if(n == 1){
                    return 1;
                }else{
                    return n + getSum(n - 1);
                }; */
            }
        script>
    body>
html>

2-递归遍历DOM树

<html>
    <body>
        <script>
        	 /* 需求: 获取某一个父元素所有的后代元素 (变量DOM树)
        1. js原生的DOM语法可以实现吗?  不行
            a. DOM原生语法, 只能获取子代元素:  父元素.chlidren
        2. 思路: 写一个函数,遍历父元素的子元素. 如果子元素也有自己的子元素,ze继续遍历获取子元素的子元素,以此类推形成函数递归调用
         */

        let box = document.querySelector('#box');
        let arr = [];//存储所有的后代元素

        function find(ele){
      
            for(let i = 0;i < ele.children.length;i++) {
      
                console.log(ele.children[i]);
                arr.push(ele.children[i]);
                // 继续递归调用: 获取子元素的子元素
                find(ele.children[i]);
            }
        };
        find(document);
        script>
    body>
html>

3-闭包

1-闭包介绍


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<body>
    <script>
        /*
        1.闭包函数
            1.1 作用:
            1.2 语法:
            1.3 注意点:
         
        2.学习路线 : 需求, 在函数外边访问函数里变量
            2.1 复习函数作用域
            2.2 函数返回值的特点
            2.3 闭包介绍
        */

        /*
        1. js有两种作用域
            1.1 全局作用域(全局变量): 在函数外面声明,可以在页面任何地方访问
                * 全局变量生命周期 : 页面打开时声明 页面关闭时销毁
                * 生命周期: 从变量声明 到 变量销毁
            1.2 局部作用域(局部变量): 在函数里面声明,只能在函数体里面使用
                * 局部变量声明周期 : 执行函数体开始声明, 然后函数调用结束销毁
        */
        // function fn (){
      
        //     let person = {
      
        //         name:'jk姐姐',
        //         age:19
        //     };
        // };
        // fn();
        // // 函数外面无法直接获取(访问)函数内部的成员
        // console.log(person);

        /* 2. 如何实现在函数外部访问函数里边的变量
            解决方案 : 使用return
            问题 : 每调用一次,就会生成一个新的对象
         */

        // function fn() {
      
        //     let person = {
      
        //         name: 'jk姐姐',
        //         age: 19
        //     };
        //     return;
        // };
        // let p1 = fn();
        // // p1 和 p2 虽然里面的数据相同,但是这是两个不同的对象(地址不同)
        // console.log(p1);

        /* 
        3. 如何实现 在函数外边访问函数里面的变量,并且保证
            解决方案: 使用闭包
            闭包作用: 在函数外面访问函数里面的变量
            闭包语法: 语法不固定,但是分为三个步骤
                (1) 在外部函数中声明一个闭包函数
                (2) 在闭包函数中返回你想访问的变量
                (3) 返回闭包函数
            闭包本质 : 沟通全局作用域与局部作用域的一座桥梁
         */

        function outer(){
      
            let person = {
      
                name:'Jk姐姐'
            };
            // (1)在外部函数的里面声明一个内部函数(闭包函数)
            function closure(){
      
                // (2) 在闭包函数中返回你想要返回的变量
                return person
            };
            // (3)返回这个闭包函数
            return closure; 
        };
        // 调用外边函数  得到闭包函数
        let  bibao = outer();
        // 调用闭包函数,得到局部变量
        let p1 = bibao();
        let p2 = bibao();

        console.log(p1,p2);
        console.log(p1 == p2);//true
    script>
body>
html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NWaFSP4i-1599820996743)(资料/04-JS高级第四天/imgs/图解闭包.png)]

2-闭包注意点


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Documenttitle>
head>
<body>
    <script>
        /* 闭包
        1.1 作用:在函数外面访问函数内部的变量
        1.2 语法:
            a. 在函数里面声明一个闭包函数
            b. 在闭包函数中访问局部变量
            c. 返回这个闭包函数
        1.3 注意点:
            (1)得到相同的值:外部函数调用一次,闭包函数调用多次
            (2)得到不同的值:外部函数调用多次,闭包函数调用1次
        */   
       
        //外部函数
        function outer(){
      
            let num = Math.ceil(Math.random()*100);
            //a.在函数里面声明一个闭包函数
            function closure(){
      
                //b.在闭包函数中访问局部变量
                return num;
            };
            //c.返回这个闭包函数
            return closure;
        };

        //(1)得到是相同的值: 外部函数调用一次,闭包函数调用多次
        //调用外部函数一次,得到闭包函数
        // let bibao = outer();
        // //调用闭包函数多次
        // let n1 = bibao();
        // let n2 = bibao();
        // let n3 = bibao();
        // console.log(n1,n2,n3);

        //(2) 得到不同的值: 外部函数调用多次,闭包函数调用一次
        // let bibao1 = outer();
        // let num1 = bibao1();
        let num1 = outer()();

        // let bibao2 = outer();
        // let num2 = bibao2();
        let num2 = outer()();

        // let bibao3 = outer();
        // let num3 = bibao3();
        let num3 = outer()();

        console.log(num1,num2,num3);
    script>
body>
html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eXHERLH1-1599820996746)(资料/04-JS高级第四天/imgs/闭包相同(不同值)]图解.png)

3-闭包经典应用场景(沙箱模式)


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Documenttitle>
head>
<body>
    <script>
       /* 
       1.沙箱模式:值得是一个独立的内存空间(局部作用域).通常是一个匿名函数自调用
       2.沙箱模式作用:
            a. 避免全局变量污染
            b. 模块化开发 : 一个功能对应一个沙箱
        3.沙箱注意点 :不要在沙箱内部访问全局变量,应该使用参数传递
            * (1)沙箱外面的变量,代码可能会压缩出错
            * (2)破坏封装性
       */   
       (function(w){
      
           let a = {
      
                eat:function(){
      
                    console.log('吃饭');
                },
                play:function(){
      
                    console.log('玩');
                }
           };

           //暴露接口
           w.a = a;
       })(window);
       
   script>
body>
html>

4-ES6类与继承

1-class关键字


<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>

<body>
    <script>
        /* 
        1. class关键字作用: 声明类函数 (相当于以前的构造函数)
            * class语法作用和以前的构造函数语法一致,只是写法不同
                a. 将构造函数与原型方法 卸载一个大括号中,提高代码阅读性
                b. class类函数必须要使用new来调用,语法更加桂发
        2. 语法: 
                class 构造函数名 {
                    // 构造函数
                    constructor(){

                    };
                    // 原型中的方法
                    eat(){

                    };
                };
         */

        // ES6继承 : class类函数
        class Person {
      
            //(1) 构造函数: 固定的语法 constructor(){}
            constructor() {
      
                this.name = 'name';
                this.age = '20';
            }

            //(2) 原型中的方法
            eat() {
      
                console.log('吃饭');
            };

            learn() {
      
                console.log('续写');
            }
        };

        /* ES6语法的本质其实还是以前的原型语法,只是写法不同.还是可以用以前的语法给原型添加成员 */
        Person1.prototype.type = '人类';

        //(3) 实例对象
        // class类函数必须要用new调用,否则会报错
        let p2 = new Person1('班长', 19);
        console.log(p2);
    script>
body>
html>

2-extends关键字


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<body>
    <script>
        /* 
        1. extends关键字 : 用于继承
        2. 底层原理 : 替换原型
            * Student.prototype.__proto__ = Person.preototype
            * s1.__proto__.__proto__ === Person.prototypr
         */

         /*  父对象 */
         class Person{
      
            //  构造函数
            constructor(name,age){
      
                this.name = name;
                this.age = age;
            };

            // 原型方法
            eat(){
      
                console.log('人要吃饭');
            }
         };
         Person.prototype.type = '人类';
         let p1 = new Person('ikun',30);

         /*  子对象 继承与父对象 
         extends关键字底层原理: Student.prototype.__proto__ = Person.prototype
        */

         class Student extends Person{
      
            //  构造函数
            // constructor(name,age,score){
      
            //     this.name = name;
            //     this.age = age;
            //     this.score = score;
            // };
            // 原型方法
            work(){
      
                console.log('停止斗图');
            };

         }
         let s1 = new Student('班长,20,001');
         console.log(s1);

         console.log(s1.type);//人类
         s1.eat();//吃饭
    script>
body>
html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cw9adS3t-1599820996748)(资料/04-JS高级第四天/imgs/ectends关键字图解.png)]

3-super关键字


<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>

<body>
    <script>
        /* 
        super关键字 : 在子类函数中调用父类的方法
         */

        class Student extends Person {
      
            //  构造函数
            constructor(name, age, score) {
      
                // 在子类结构函数中,去调用父类的构造函数
                /*  细节: 如果重写了子类的构造函数construc, 必须要调用父类的方法super()
                 */
                super(name, age);
                this.score = score;
            };
            // 原型方法
            work() {
      
                /* 调用父类的方法 */
                //  super.eat()底层原理:  Person.prototype.eat();
                console.log('停止斗图');
            };

        };
        let s1 = new Student('班长', 20, 99);
        console.log(s1);
        s1.work();
    script>
body>

html>

JS第五天

1-正则表达式

<html>
    <body>
    	<script>
        /* 
        1.正则表达式 :RegExp (regular expression)  是ECMAScript内置对象
        2.作用 :对 字符串进行逻辑匹配 运算
        3.使用流程 :
            (1)创建正则对象 :  new RegExp(/正则表达式/);
            (2)test('字符串') : 对字符串进行逻辑匹配运算
        */

        /* 
        1.正则表达式 :是一个对 字符串进行逻辑匹配运算 的对象
            a. 正则是内置对象 : 存储一些属性和方法
            b. 表达式 :  对字符串 进行逻辑匹配 运算
        
        2.使用流程 :两个步骤
        */

        //(1)调用构造函数,创建正则对象
        let reg =  new RegExp(/a/);

        //(2)调用test方法,对字符串进行运算   true:符合规则   false:不符合
        console.log(  reg.test('abcdefg') );
        console.log(  reg.test('123456') );


        /* 了解: 正则表达式字面量写法  /正则表达式/ */

        console.log(  /a/.test('我爱你') );//false
         script>
    body>
html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vOg0NEEl-1599820996749)(实践/JS高级.day5/imgs/正则表达式.png)]

1-2.元字符与原义文本字符

<html>
    <body>
        <script>
        /* 
        一个正则表达式主要由两部分组成
            1.原义文本字符 : 就是字符本身的含义,千万别想多了
            2.元字符 : 改变了字符串本身的含义 (相当于js的关键字)
                . \ | [] {} () + ? * $ ^
        */    
		
       
        //1.原义文本字符 : 就是字符本身的含义,千万别想多了
        /*  /abc/ :  含义,就是检查字符串中有没有abc。 别想多了
                不是说有a或者有b或者有c,也不是说有a 和 b 和 c
        */

        console.log(/abc/.test('a123'));//false
        console.log(/abc/.test('ab123c'));//false
        console.log(/abc/.test('abc123'));//true

        console.log(/黑马/.test('绿裙很黑'));//false
        console.log(/黑马/.test('一匹黑色的马'));//false
        console.log(/黑马/.test('黑马程序员,宇宙最强IT培训'));//true
        script>
    body>
html>

2-字符类与反向类

// 字符类 : /[abc]/
	// 	/abc/ : 原义文本字符,检测字符串有没有abc
	//	/[abc]/ : 字符类   将a和b和c这三种字符类归为一类,只要满足任何一类即可
		// 字符串里面只要有abc 任意一个字符即可
// 2.反向类 : /[^abc]/ : 将没有a , 没有b,没有c的字符串归为一类。
	//	字符串里面只要有任意一个不是a 、 b 、 c即可

3-范围类

1. 范围类 
        /[0-9]/  : 检测是否有数字字符
        /[a-z]/  : 检测是否有小写字母
        /[A-Z]/  : 检测是否有大写字母
2.注意点:
        a. 范围是一个闭区间 :  /[0-9]/  包含0和9
        b. 范围类可以连接 :  /[0-9a-zA-Z]/ : 检测字符串有没有数字 或者 英文字母
        c. 范围类左边 < 右边 , 否则正则报错
              /[5-8]/ :正确 检测5-8范围的数字
              /[8-5]/ :错误 报错

4-预定义类

  • ​ 预定义类:相当于js的api。 作者提前封装好的直接使用即可[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HI5jdSO0-1599820996753)(实践/JS高级.day5/imgs/预定义类.png)]

5-边界

  • 严格匹配: ^字符串$
    • 例如: ^abc$ : 含义是, 字符串必须是以a开头, 中间必须是b, 结尾必须是c
      • 满足该条件的只有一个字符串: abc

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jVGL4DXg-1599820996757)(实践/JS高级.day5/imgs/边界.png)]

6-量词

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-s1KWIk8x-1599820996758)(实践/JS高级.day5/imgs/量词.png)]

7-分组

/*1. () 这个元字符有三个含义
		 a.分组:使量词作用于分组
		 	* 量词只能作用于一个字符,如果想作用与多个字符,就要使用分组(将多个字符当成一组)
		   b.提升优先级:通常与元字符 | 一起使用
            c.反向引用
   2. |   或
   		* | 默认作用于两边的所有字符,如果只想作用与指定字符,则可以使用() 来提升优先级
 */

 //1. 需求: 匹配连续出现三次love的字符串

    //1.错误写法:  /love{3}/  , 含义: lov + e{3}
    console.log ( /love{3}/.test ( "lovelovelove" ) );//false
    console.log ( /love{3}/.test ( "loveee" ) );//true
    console.log ( /love{3}/.test ( "loveeeabc" ) );//true
    //2.正确做法:使用分组   /(love){3}/
    console.log ( /(love){3}/.test ( "lovelovelove" ) );//true
    console.log ( /(love){3}/.test ( "loveee" ) );//false

    //2. 需求:匹配 love 或者 live
    //1.错误写法:  /lo|ive/  ,含义:  lo  或者  ive

    console.log ( "I love you".replace ( /lo|ive/, "X" ) );// I Xve you
    console.log ( "I live you".replace ( /lo|ive/, "X" ) );// I lX you

    //2.正确写法: /l(o|i)ve/, 含义:匹配love 或者 live

    console.log ( "I love you".replace ( /l(o|i)ve/, "X" ) );// I X you
    console.log ( "I live you".replace ( /l(o|i)ve/, "X" ) );// I X you
	
	/* 
        3.反向引用 : 正则表达式会把小括号中匹配到的内容给存起来。存入$1-$9中。 用于反向引用。

        场景 : 日期格式  大陆日期格式 yyy-mm-dd   香港日期格式:dd-mm-yyyy
        2020-08-15  转换成  15/08/2020
     */
	 console.log( '2020-08-15'.replace(/(\d{4})-(\d{2})-(\d{2})/,'$3/$2/$1') );//15/08/2020

8-修饰符# JS高级笔记

JS高级第一天

1-面向对象介绍

面向对象 : 面向对象是一种解决问题的思维方式
面向对象 : 注重的是结果
面向过程 : 注重的是过程
面向对象本质 : 面向过程的封装
(1)以前思维方式:面向过程    ->   注重的是过程
(2)面向对象思维方式  ->  注重的是结果

2-面向对象编程

// 面向过程 : 注重的是过程
// 弊端 : (1)代码冗余 (2)不便于维护

// 使用函数封装
// 好处: 解决代码冗余
//弊端: 全局变量污染  (全局变量重复设置导致覆盖现象)

//使用对象方法
//封装 : 将代码放入对象的方法中  (1)解决代码冗余  (2)解决全局变量污染

了解面向对象的原理: 对面向过程的封装
实际开发中,遇到功能先在网上找有没有现成的对象,如果有就直接CV,没有自己写
用别人写好的对象: (1) 好处: 效率高  (2)坏处: 不好维护
自己写好的对象: (1) 坏处: 效率低  (2)好处: 便于维护

3-原型

// 对象创建原理(new关键字工作原理)
// 1. 创建对象
// 2. this指向这个对象
// 3. 知名对象的赋值
// 4. 自动返回这个对象
// 原型: 每一个构造函数创建的时候,系统会自动创建一个对象,称之为原型对象。
// 原型作用:解决 (1)内存资源浪费  + (2)全局变量污染
// 原型语法 : 两种对象可以访问
        a. 构造函数.prototype
        b. 实例对象直接访问

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Zma47w0h-1599820998283)(C:/Users/86188/AppData/Roaming/Typora/typora-user-images/1596424804820.png)]

1-构造函数方法的弊端:
 内存资源浪费: 每调用一次构造函数,就会在内存声明一个函数。导致内存资源浪费
2-.使用全局函数解决 : 内存资源浪费 
  弊端----全局变量污染
3-使用对象 封装 : 把代码放到对象方法中
	同时解决 内存资源浪费 + 全局变量污染
	弊端: 治标不治本. 使用对象后,只能减少全局变量的数量,而且obj本身还是全局的
// 4-原型对象 : 完美解决构造函数  内存资源浪费 + 全局变量污染
	//(1)原型 : 每一个函数在被创建的时候,系统自动创建一个与之对应的对象,称为原型对象
//	(2)作用 : 内存资源浪费 + 全局变量污染
// 	(3)语法 : 如何访问(取值+赋值)原型
	// 	a. 构造函数.prototype
		//b. 实例对象直接访问原型的成员

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YjiZDqRu-1599820998286)(C:/Users/86188/AppData/Roaming/Typora/typora-user-images/1596425169233.png)]

//a. __proto__ : 属于实例对象,指向原型对象
//b. __proto__作用: 可以让实例对象 访问原型中的成员
//c. 注意点:
      // 开发中: 不要写__proto__,直接省略。 因为__proto__不是W3C标准属性
      // 学习中: 可以使用,可以帮助我们更好的理解原型

4-constructor属性

// .prototype : 属于构造函数,指向原型对象
//            * 作用: 解决内存资源浪费 + 全局变量污染
// .__proto__: 属性实例对象,指向原型对象
//            * 作用: 可以让实例对象访问原型中的成员
// constructor : 属于原型对象,指向构造函数
//            * 作用: 可以让实例对象 知道自己是被哪一个构造函数创建

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1nqQkeaS-1599820998291)(01-jS高级第一天/01-JS高级课程笔记/day01.assets/1588083693450.png)]

5-总结

 1. 哪些成员应该放入原型?
       * 所有实例对象共有的成员
2. 实例对象访问原型的规则?
       * 就近原则: 如果一个实例对象自己有成员,优先访问自己的。自己没有就访问原型的。
3、原型可以重新赋值。
        * 实例对象访问 修改前的原型还是修改后的原型? 取决于这个实例对象是在修改前还是修改后背创建
                * 修改前创建: 访问修改前的
                * 修改后创建: 访问修改后的

JS高级第二天

1-面向对象三大特征介绍

面向对象是一种(解决问题)思维方式
面向对象的思维方式有三大特征
	//a. 封装 : 将代码放入对象的方法中
	//b. 继承 : 一个对象拥有另一个对象所有的成员(属性+方法)
		//(1) 自己实现继承的三种方式
		//(2) js通过原型链来实现继承的
	//c. 多态 : 一个对象在不同情况下的多种状态

2-继承的三种实现方式

// 1. 继承 : 一个对象(子对象)拥有另一个对象(父对象)所有的成员
// 2. 三种实现继承的方式
	(1) 混入式继承 : 遍历父对象的成员,添加给子对象
		特点 : 每继承一次,需要遍历一次父元素
		应用场景 :使用与单个对象继承
	(2) 替换原型 : 将父对象 作为子对象构造函数的原型
		特点 : 可能会覆盖子对象构造函数 原本的原型
		应用场景 : 用于多对象继承
	(3) 混合式 :混入式 + 替换原型
	     方案 : 遍历父对象,添加给子对象构造函数的原型

3-原型链

//js是通过原型链来实现继承
	//1.原型链: 每一个对象都有__proto__属性指向自己的原型,而原型又是一个对象,也有自己的__proto__属性指向原型的原型,以此类推形成一种链式结构,称之为原型链
	//2.对象访问原型链中成员的规则: 就近原则
		//对象访问成员的时候,优先访问自己的.自己没有就反问原型的,如果原型也没有,那就找原型的原型,以此类推直到终点Null.如果还找不到,则是程序报错,提示'xxx' is not a function

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Documenttitle>
head>
<body>
    <script>
    	//1.构造函数
        function Person(name,age){
      
            this.name = name;
            this.age = age;
        };

        //2.原型对象
        Person.prototype.sayHi = function(){
      
            console.log('人生若只如初见,何事秋风悲画扇');
        };

        Person.prototype.type = '哺乳动物';

        //3.实例化对象
        let p1 = new Person('又又',18);
        console.log(p1);

        //请说出以下代码执行结果
        console.log(p1.name);//又又      p1自己有name属性
        console.log(p1.type);//哺乳动物   p1自己没有type,但是p1的原型有
        console.log(p1.hobby);//undefined p1自己没有hobby,原型也没有
        p1.sayHi();// 人生若只如初见,何事秋风悲画扇   p1自己没有这个方法,原型有
       // p1.eat();//报错 xxx is not defined    p1自己没有这个方法,原型也没有

       //为什么不报错?  p1自己没有这个方法,原型也没有这个方法,但是原型的原型有
        p1.toString();

        //查看p1的原型链
        console.log(p1.__proto__.constructor);//Person
        console.log(p1.__proto__ === Person.prototype);//true

        //查看p1的原型的原型
        console.log(p1.__proto__.__proto__.constructor);//Object
        console.log(p1.__proto__.__proto__ === Object.prototype);//true

        //查看p1的原型的原型的原型
        console.log(p1.__proto__.__proto__.__proto__);//null

    script>
body>
html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xnP9RxAP-1599820998299)(C:/Users/86188/AppData/Roaming/Typora/typora-user-images/1596510621569.png)]

4-内置对象的原型链

//基本包装类型:  new String()   new Boolean()  new Number()
这个三个对象里封装一些处理基本数据类型的方法
var : 老版本的声明变量关键字
let : 最新版js声明变量关键字,两者区别不大,但是开发主流一般会使用left
// ECMAScript内置对象
	1. date日期对象原型链
	2. array数组对象原型链
	3. string对象的原型链
//DOM对象的原型链

4-1date日期对象原型链

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1UFgazcD-1599820998304)(实践/JS高级.day2/imgs/date原型链代码.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jgyDYOt8-1599820998308)(实践/JS高级.day2/imgs/date日期对象原型链.png)]

4-2 array数组对象原型链

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ozgfE7IN-1599820998311)(实践/JS高级.day2/imgs/arr原型链代码.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hbHOba5J-1599820998313)(实践/JS高级.day2/imgs/arr数组对象原型链.png)]

4-3String对象的原型链

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uCswxqYT-1599820998317)(实践/JS高级.day2/imgs/String原型链.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nbQXydA3-1599820998319)(实践/JS高级.day2/imgs/String字符串对象的原型链.png)]

4-4DOM对象的原型链

let box = document.querySelector('#box');
let p1 = document.querySelector('#p1');

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sJkqc04V-1599820998321)(JS高级.day2/imgs/DOM.png)]

5-函数也是对象

<html>
<body>
<script>
//函数属于对象.
	//对象有点语法操作属性,如果函数也可以使用点语法来操作属性,说明函数也是对象
	//1.原型
		//构造函数prototype : 指向原型
		//原型对象constructor : 指向构造函数
		//实例对象__proto__ : 指向原型
	//2.js中所有的对象都是构造结构函数创建
		//原型对象 : 都是被Object构造函数创建
		//函数对象 : 都是被Function构造函数
		//实例对象 : 由对应的结构函数创建(自定义构造函数Person,SonWang创建的实例对象,由对应的构造函数创建)
    
    /* 所有函数的声明,底层原理都是调用  new Function()
        a. 前面所有的参数都是形参  b. 最后一个函数是函数体代码
        */
        //声明无参无返回函数
        let fn1 =  new Function('console.log("老铁666")');
        fn1();

        //声明有参有返回函数
        let fn2 = new Function('a','b','return a + b');
        console.log(  fn2(10,20) );//30
    
    //1. js基础 : 函数声明有两种语法
    //(1)函数声明 : function 函数名(){//函数体代码}
    // 具名函数 : 声明的时候有函数名
    function fun1(a,b){
      
        console.log('1111');
        return a+b;
    };
    
    //(2)表达式声明 : let 函数名 = 匿名函数
    //匿名函数: 声明的时候没有函数名
    let fn2 =  function(){
      
        consloe.log('2222');
    };
    
    //2. js基础: 函数调用也有两种语法
    //2.1 函数调用: 函数名();
    fu1(10,20);
    fn2();
    
    //2.2自调用语法: (函数)();
    (function(){
      console.log(666)})();  //常用于匿名函数自调用
    (function fn3()){
      
     console.log(8888)
     })(); //任何函数都可以使用这种自调用语法,只是一般具名函数不会这样写
script>
body>
html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-csqtwoe0-1599820998325)(02-js高级第二天/01-教学资源/函数也是对象.png)]

6-instanceof运算符原理结束


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Documenttitle>
head>
<body>
    <script>
        /* 
        1. 原型 : 函数对象、原型对象、实例对象三者之间的关系
            构造函数prototype : 指向原型
            原型对象constructor : 指向构造函数
            实例对象__proto__ : 指向原型
        2. js中所有的对象都是构造函数创建
            原型对象 : 都是被Object构造函数创建
            函数对象 : 都是被Function构造函数
            实例对象 : 由对应的构造函数创建 (自定义构造函数Person,SonWang创建的实例对象,由对应的构造函数创建)
        3. instanceof运算符 : 检测一个构造函数prototype 在不在对象的原型链中。
            语法:  实例对象  instanceof 构造函数
            规则: 检测 右边构造函数的prototype 在不在左边对象的原型链中
                true: 在  false:不在
        */     
        
        let arr = [10,20,30];
        /* 
        arr实例对象原型链  arr.__proto__  ->  Array.prototype -> Object.prototype - > null
        */
        console.log( arr instanceof Array);//true
        console.log( arr instanceof Object);//true

        /* 
        根据instanceof运算符规则: 左边object是一个对象,  右边object是一个函数
        object对象原型链 object.__proto__ -> Function.prototype ->Object.prototype ->null
        
        */
       console.log( Object.__proto__.constructor );//Function
       console.log( Object.__proto__ === Function.prototype );//true
    
        console.log( Object instanceof Object);//true
        console.log( Object instanceof Function);//true


        /* 
        根据instanceof运算符规则: 左边Functiont是一个对象,  右边Function是一个函数
        function对象原型链 Function.__proto__ -> Fuction.prototype -> Object.prototype -> null
        */
        console.log( Function.__proto__.constructor );//Function
        console.log( Function.__proto__ === Function.prototype );//true

        console.log( Function instanceof Function);//true
        console.log( Function instanceof Object);//true
    script>
body>
html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RlRpJdXG-1599820998331)(C:/Users/86188/AppData/Roaming/Typora/typora-user-images/1596532646904.png)]

7-静态成员与实例成员


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Documenttitle>
head>
<body>
    <script>
    	/*
    	静态成员: 属于函数对象自己的成员
    	实例成员: 属于实例对象的成员
    	*/
        function.Person(name,age){
      
            //构造函数里面的成员属于实例成员
            this.name = name;
            this.age = age;
        }
        //静态成员: 函数自己的成员
        Person.hobby = '保养对象';
        let p1 = new Person('ikun',30);
        console.log(p1.name);//实例成员: 属于实例对象
        console.log(p1.age);//实例成员: 属于实例对象
        
        //console.log(p1.hobby);//undefined 静态成员只有函数自己才可以访问
        console.log(Person.hobby);//保养健康
        
        /* 静态成员经典场景: 只执行一次函数 
        */
        function fn(){
      
            if(!fn.flag){
      
                console.log('投票了');
                fn.flag = true;
            };
        };
        fn();//有效
        fn();//无效
        fn();//无效
        fn();//无效
        fn();//无效
        
        //let bol = true;
        //if(bol){
      
        //    console.log(1);
        //}else{
      
        //    console.log(2);
        //};
        
        /*
        if(条件 true/false){
        	条件成立需要执行的代码
        }else{
        	条件不成立需要执行的代码
        }
        
        注意点: if小括号里面的条件可以写三种代码
        关系表达式: 结果是布尔类型
        布尔类型的值
        其他的值: 编译器会自动转成为布尔类型判断是否成立
        */
    script>
body>
html>

JS高级第三天

1-函数三种调用模式(this指向)


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<body>
    <script>
        /* 
        1. 函数三种执行方式: 普通函数  对象方法   构造函数
        2. this指向 : 谁调用,就指向谁
            this的指向取决于调用方式,与声明无关
                a. 普通函数 :  this指向window
                b. 对象方法 :  this指向对象
                c. 构造函数 :  指向new创建的对象
         */

        function fn (){
      
            console.log('1111');
            console.log(this);
        }

        //  1 普通函数
        fn(); // window.fn();

        //  2 对象的方法
        let obj = {
      
            name: 'ikun',
            age:30,
            eat:fn
        };

        // 由于eat的值就是fn的值,所以调用eat就是调用的fn
        //  3 构造函数 
        let p1 = new fn();//this 指向new创建的对象
        console.log(p1);
    script>
body>
html>

02-函数上下文执行模式


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<body>
    <script>
  /* 函数4中调用方式 
        
        1. 函数三种执行方式 : 普通函数  对象方法 构造函数
            共同点 : this的指向无法修改  是固定的 (一旦修改程序报错)
            普通函数 : this指向window
            对象方法 : this指向对象 
            构造函数 : this指向new创建的对象

        2. 函数第四种执行方式 : 上下文模式
            作用 : 修改函数里面的this
            语法 : 三个语法作用一直都是修改this, 只是传参方式不同
                2.1 函数名.call(修改后的this,形参1,形参2)
                    应用场景 : 适用于函数形参 <= 1
                2.2 函数名.apply(修改后的this,数组或伪数组)
                    应用场景 : 适用于函数形参 >= 2
                2.3 函数名.bind(修改后的this,形参1,形参2)
                    注意点 : 
                        a. bind()不会立即执行,这个函数,而是返回一个修改this之后的新函数
                        b. 一般用bind调用不会立即传递形参(一旦传递,形参就固定了无法修改),而是调用返回						的新函数的时候再传参
                    应用场景 : 适用于某个函数不需要立即执行,而是过一会儿才执行
                        事件处理函数 + 定时器函数
         */
         function fn (a,b){
      
             console.log(this);
             console.log(a+b);

             return a+b;
         }
         fn();
        //  2.1 函数名.call(修改后的this,形参1,形参2)
        fn.call({
      name:'张三'},100,101);

        // 2.2 函数名.apply(修改后的this,数组或伪数组)
                //  应用场景 : 适用于函数形参 >= 2
        fn.apply({
      name:'李四'},[10,20]);
        
        // 2.3 函数名.bind(修改后的this,形参1,形参2)
        //             注意点 : 
        //                 a. bind()不会立即执行,这个函数,而是返回一个修改this之后的新函数
        //                 b. 一般用bind调用不会立即传递形参(一旦传递,形参就固定了无法修改),而是调用							返回的新函数的时候再传参
        //             应用场景 : 适用于某个函数不需要立即执行,而是过一会儿才执行
        //                 事件处理函数 + 定时器函数
        let newFn = fn.bind({
      name:'王五'});
        newFn(22,33);
    script>
body>
html>

3-函数上下执行模式注意点

<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<body>
     <script>
         /*
         1. 上下文执行默认作用 : 修改函数中的this指向
         2. 注意点 : this只能指向引用类型(array function object). 如果指向基本类型
         	* 基本包装类型string number boolean : 自动转成对应的对象类型 new String() new Number()  				new Boolean()
         	* undefined与null : 修改无效,this指向window
         */
         function fn(){
      
            console.log(this);
            console.log( typeof this);
        };
        fn.call({
      name:'1111'});
        fn.call([10,20,30]);
         //如果上下文模式把this修改为基本数据类型
        //基本包装对象会自动转成对应的内置对象
        fn.call('abc');
        fn.call(123);
        fn.call(true);
        //undefined和null : 修改无限,this默认指向window
        fn.call(undefined);//window
        fn.call(null);//window
        fn.call();//window
    script>
body>
html>

4-伪数组转数组

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Documenttitle>
head>
<body>
    <script>
        /* 函数4种调用方式
        1.函数三种执行方式 : 普通函数、对象方法、构造函数
            * 共同点 : this的指向无法修改,是固定的.(一旦修改程序报错)
            * 普通函数 : this指向window
            * 对象方法 : this指向对象
            * 构造函数 : this指向new创建的对象
        2.函数第四种执行方式: 上下文模式
            * 作用: 修改函数里面的this
            * 语法: 三个语法作用一致都是修改this,只是传参方式不同
                2.1 函数名.call(修改后的this,形参1,形参2)
                    场景:用于函数原本形参 <= 1
                2.2 函数名.apply(修改后的this,数组或伪数组)
                    场景:用于函数原本形参 >= 2
                2.3 函数名.bind(修改后的this,形参1,形参2)
                    不会立即执行函数体,而是返回一个修改this之后的新函数
                    场景: 用于这个函数不需要立即执行,而是过一会儿执行(事件处理函数,定时器函数)
        */
        //1.伪数组 : 有数组三要素(下标,元素,长度),但是不能调用数组的API
        //伪数组本质是一个对象 : (属性名恰好就是下标, 但是对象原型不是指向Array.prototype,所以无法调				用数字方法)
        let weiArr = {
      
            0:20,
            1:30,
            2:60,
            3:80,
            length:4
        };
        console.log(weiArr);
        // console.log(weiArr.reverse());//报错 伪数组无法调用数组方法
        
        //2.伪数组转数组 : 目的是让伪数组也可以调用数组的方法
        //2.1 遍历伪数组,添加到真数组中
        let arr = [];
        for(let i = 0;i<weiArr.length;i++){
      
            arr.push( weiArr[i] );
        };
        console.log(arr);
        
         //2.2 arr.push.apply(arr,伪数组)
        //(1)push()方法支持一次性添加多个元素
        //弊端 : 形参数量太多
        let arr = [];
        arr.push( weiArr[0],weiArr[1],weiArr[2],weiArr[3] );
        console.log(arr);
        
        let arr = [];
        //这里不需要修改this,仅仅只是利用apply可以自动遍历数组|伪数组,来逐一传参的特点
        arr.push.apply(arr,weiArr);
        console.log(arr);
        
         /* 
        2.3 Array.prototype.slice.call(伪数组)
        (1)数组的原型中有一个方法叫做slice 。  它有一个特点,不传参数,默认会返回数组自身
        (2)如果伪数组也可以调用slice,那么就可以返回一个真数组
        (3)但是伪数组不能直接调用slice,会报错。  原因:伪数组自己没有slice,原型也没有slice
        (4)思考:为啥真数组可以调用slice呢?  原因: 数组自己没有slice,但是原型有
        (5)原型中的成员,有两种访问方式
            a. 构造函数自身:  Array.prototype
            b. 每一个实例对象
        (6)越过原型链,直接利用构造函数的prototype来调用slice :  Array.prototype.slice()
        (7)越过原型链虽然可以调用slice,但是此时slice方法中的this就是原型对象 Array.prototype
        (8)既要调用slice,又希望slice方法里面的this指向伪数组
            * 相当于是weiArr来调用slice
        */
        let arr1 =  Array.prototype.slice.call(weiArr);
        console.log(arr1);
    script>
body>
html>

5-伪数组排序

<html>
    <body>
        <script>
           	 //第一种方式: 先把伪数组转成真数组,然后调用sort
			let arr = Array.prototype.slice.call(weiArr);
            arr.sort(function(a,b){
      return a-b});
            cnnsole.log(arr);
            // Array.prototype.sort.call(weiArr,function(a,b){return a-b});
            // 思路: 越过原型链查找机制,直接调用数组原型的sort,并且把this修改为伪数组
            Array.prototype.sort.call(weiArr,function(a,b){
      return a-b});
            console.log(weiArr);
        script>
    body>
html>

6-求最大值

<html>
    <body>
        <script>
            /* 求数组最大值 */
            let arr = [112,234,,676,5,6343,67];
            // 擂台思想
            // 1.擂台思想
            	let max = -Infinity;//用于存放表示正无穷大的数值
            // 2. 遍历挑战者
            for(let i = 0; i < arr.length;i++){
      
                // 3.依次和擂主pk
                if(arr[i] > max){
      
                    max = arr[i]
                };
            };
            console.log(max);
            
            /* Math.max */
            // let max1 = Math.max(arr[0],arr[1],arr[2],arr[3],arr[4]);
            // 利用apply自动遍历数组传参的特点 (底层与上面代码一致,只是apply会自动遍历数组逐一传参)
            let max1 = Math.max.apply(Math,arr);
            console.log(max1);
        script>
    body>
html>

7-求数组最大值

<html>
    <body>
        <script>
            /* 
            1. 复习 typeof关键字检测数据类型 : typeof 数据
            	* 弊端: 无法检测 null 和 array 这两种数据类型,返回值都是object
            	* typeof null : 'object'
            	* typeof []   : 'object'
            2. 介绍 对象的toString()方法检测数据类型
            	* Object.prototype.toString() : 返回固定格式字符串 [object 数据类型]
            	* Array.prototype.toString() : 返回数组.join ()方法拼接的字符串
            3. 总结: 万能检测数据类型
            	* 固定语法: Object.prototype.toString.call(数据)
            */
            // a. 值类型(基本数据类型)
            let str = '我爱你们';
            let num = 68;
            let bol = true;
            let und = undefined;
            let nul = null;
            // b. 引用类型(复杂数据类型)
            let arr = [12,13,14];
            let fn  = function(){
      };
            let obj = {
      name:'link'};
            console.log(typeof str); //'string'
            console.log(typeof num); //'number'
            console.log(typeof bol); //'boolean'
            console.log(typeof und); //'undefined'
            console.log(typeof nul); //'object'
            console.log(typeof arr); //'object'
            console.log(typeof fn);  //'function'
            console.log(typrof obj); //'object'
            
            /* 2. 对象的toString()方法介绍
            Object.prototype.toString() : 返回一个固定格式字符串 '[object 数据类型]'
            Array.protottpe.toString()  : 底层原来是调用数组的join()方法
            */
            console.log(obj.toString()); //[object Object]
            console.log(arr.toString()); //[object Array]
            
            /* 3. 万能检测数据类型 : 越过了原型链,直接调用Object.prototype里面的toString
            	* 因为很多对象的原型都覆盖了toString(),所以通过原型链无法直接访问到Object的原型里面				dtoString
            	* 总结 : Object.prototype.toString.call(数据)
            */
            console.log(Object.prototype.toString.call(str));//[objcet	String]
            console.log(Object.prototype.toString.call(num));//[object	Number]
            console.log(Object.prototype.toString.call(bol));//[object	Boolean]
            console.log(Object.prototype.toString.call(und));//[object Undefined]
            console.log(Object.prototype.toString.call(nul));//[object	Null]
            console.log(Object.prototype.toString.call(arr));//[object	Arrat]
            console.log(Object.prototype.toString.call(fn)); //[object	Function]
            console.log(Object.prototype.toString.call(obj));//[object	Object]
        script>
    body>
html>

JS高级第四天

1-递归函数

<html>
    <body>
        <script>
        	/* 
        	1. 递归函数 : 一个函数在函数体中调用自己
        	2. 递归函数作用 : 函数体代码重发执行
        		* 递归函数做到事和循环一样的,能用递归做的就可以用循环做.只是语法简洁性不同.
        	3. 递归注意点 : 一定要有结束条件,否则会导致死循环.
        	*/
            
            // 单函数递归
            function fn(){
      
                console.log('好好学习');
                fn();
            };
            fn();
            
            // 双函数递归
            
            // 使用递归
            function getSum(n){
      
                return n == 1 ? 1 : n + getSum(n - 1);
                
                /* if(n == 1){
                    return 1;
                }else{
                    return n + getSum(n - 1);
                }; */
            }
        script>
    body>
html>

2-递归遍历DOM树

<html>
    <body>
        <script>
        	 /* 需求: 获取某一个父元素所有的后代元素 (变量DOM树)
        1. js原生的DOM语法可以实现吗?  不行
            a. DOM原生语法, 只能获取子代元素:  父元素.chlidren
        2. 思路: 写一个函数,遍历父元素的子元素. 如果子元素也有自己的子元素,ze继续遍历获取子元素的子元素,以此类推形成函数递归调用
         */

        let box = document.querySelector('#box');
        let arr = [];//存储所有的后代元素

        function find(ele){
      
            for(let i = 0;i < ele.children.length;i++) {
      
                console.log(ele.children[i]);
                arr.push(ele.children[i]);
                // 继续递归调用: 获取子元素的子元素
                find(ele.children[i]);
            }
        };
        find(document);
        script>
    body>
html>

3-闭包

1-闭包介绍


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<body>
    <script>
        /*
        1.闭包函数
            1.1 作用:
            1.2 语法:
            1.3 注意点:
         
        2.学习路线 : 需求, 在函数外边访问函数里变量
            2.1 复习函数作用域
            2.2 函数返回值的特点
            2.3 闭包介绍
        */

        /*
        1. js有两种作用域
            1.1 全局作用域(全局变量): 在函数外面声明,可以在页面任何地方访问
                * 全局变量生命周期 : 页面打开时声明 页面关闭时销毁
                * 生命周期: 从变量声明 到 变量销毁
            1.2 局部作用域(局部变量): 在函数里面声明,只能在函数体里面使用
                * 局部变量声明周期 : 执行函数体开始声明, 然后函数调用结束销毁
        */
        // function fn (){
      
        //     let person = {
      
        //         name:'jk姐姐',
        //         age:19
        //     };
        // };
        // fn();
        // // 函数外面无法直接获取(访问)函数内部的成员
        // console.log(person);

        /* 2. 如何实现在函数外部访问函数里边的变量
            解决方案 : 使用return
            问题 : 每调用一次,就会生成一个新的对象
         */

        // function fn() {
      
        //     let person = {
      
        //         name: 'jk姐姐',
        //         age: 19
        //     };
        //     return;
        // };
        // let p1 = fn();
        // // p1 和 p2 虽然里面的数据相同,但是这是两个不同的对象(地址不同)
        // console.log(p1);

        /* 
        3. 如何实现 在函数外边访问函数里面的变量,并且保证
            解决方案: 使用闭包
            闭包作用: 在函数外面访问函数里面的变量
            闭包语法: 语法不固定,但是分为三个步骤
                (1) 在外部函数中声明一个闭包函数
                (2) 在闭包函数中返回你想访问的变量
                (3) 返回闭包函数
            闭包本质 : 沟通全局作用域与局部作用域的一座桥梁
         */

        function outer(){
      
            let person = {
      
                name:'Jk姐姐'
            };
            // (1)在外部函数的里面声明一个内部函数(闭包函数)
            function closure(){
      
                // (2) 在闭包函数中返回你想要返回的变量
                return person
            };
            // (3)返回这个闭包函数
            return closure; 
        };
        // 调用外边函数  得到闭包函数
        let  bibao = outer();
        // 调用闭包函数,得到局部变量
        let p1 = bibao();
        let p2 = bibao();

        console.log(p1,p2);
        console.log(p1 == p2);//true
    script>
body>
html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wEjFQm4v-1599820998335)(资料/04-JS高级第四天/imgs/图解闭包.png)]

2-闭包注意点


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Documenttitle>
head>
<body>
    <script>
        /* 闭包
        1.1 作用:在函数外面访问函数内部的变量
        1.2 语法:
            a. 在函数里面声明一个闭包函数
            b. 在闭包函数中访问局部变量
            c. 返回这个闭包函数
        1.3 注意点:
            (1)得到相同的值:外部函数调用一次,闭包函数调用多次
            (2)得到不同的值:外部函数调用多次,闭包函数调用1次
        */   
       
        //外部函数
        function outer(){
      
            let num = Math.ceil(Math.random()*100);
            //a.在函数里面声明一个闭包函数
            function closure(){
      
                //b.在闭包函数中访问局部变量
                return num;
            };
            //c.返回这个闭包函数
            return closure;
        };

        //(1)得到是相同的值: 外部函数调用一次,闭包函数调用多次
        //调用外部函数一次,得到闭包函数
        // let bibao = outer();
        // //调用闭包函数多次
        // let n1 = bibao();
        // let n2 = bibao();
        // let n3 = bibao();
        // console.log(n1,n2,n3);

        //(2) 得到不同的值: 外部函数调用多次,闭包函数调用一次
        // let bibao1 = outer();
        // let num1 = bibao1();
        let num1 = outer()();

        // let bibao2 = outer();
        // let num2 = bibao2();
        let num2 = outer()();

        // let bibao3 = outer();
        // let num3 = bibao3();
        let num3 = outer()();

        console.log(num1,num2,num3);
    script>
body>
html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iGz9M4zZ-1599820998341)(资料/04-JS高级第四天/imgs/闭包相同(不同值)]图解.png)

3-闭包经典应用场景(沙箱模式)


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Documenttitle>
head>
<body>
    <script>
       /* 
       1.沙箱模式:值得是一个独立的内存空间(局部作用域).通常是一个匿名函数自调用
       2.沙箱模式作用:
            a. 避免全局变量污染
            b. 模块化开发 : 一个功能对应一个沙箱
        3.沙箱注意点 :不要在沙箱内部访问全局变量,应该使用参数传递
            * (1)沙箱外面的变量,代码可能会压缩出错
            * (2)破坏封装性
       */   
       (function(w){
      
           let a = {
      
                eat:function(){
      
                    console.log('吃饭');
                },
                play:function(){
      
                    console.log('玩');
                }
           };

           //暴露接口
           w.a = a;
       })(window);
       
   script>
body>
html>

4-ES6类与继承

1-class关键字


<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>

<body>
    <script>
        /* 
        1. class关键字作用: 声明类函数 (相当于以前的构造函数)
            * class语法作用和以前的构造函数语法一致,只是写法不同
                a. 将构造函数与原型方法 卸载一个大括号中,提高代码阅读性
                b. class类函数必须要使用new来调用,语法更加桂发
        2. 语法: 
                class 构造函数名 {
                    // 构造函数
                    constructor(){

                    };
                    // 原型中的方法
                    eat(){

                    };
                };
         */

        // ES6继承 : class类函数
        class Person {
      
            //(1) 构造函数: 固定的语法 constructor(){}
            constructor() {
      
                this.name = 'name';
                this.age = '20';
            }

            //(2) 原型中的方法
            eat() {
      
                console.log('吃饭');
            };

            learn() {
      
                console.log('续写');
            }
        };

        /* ES6语法的本质其实还是以前的原型语法,只是写法不同.还是可以用以前的语法给原型添加成员 */
        Person1.prototype.type = '人类';

        //(3) 实例对象
        // class类函数必须要用new调用,否则会报错
        let p2 = new Person1('班长', 19);
        console.log(p2);
    script>
body>
html>

2-extends关键字


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<body>
    <script>
        /* 
        1. extends关键字 : 用于继承
        2. 底层原理 : 替换原型
            * Student.prototype.__proto__ = Person.preototype
            * s1.__proto__.__proto__ === Person.prototypr
         */

         /*  父对象 */
         class Person{
      
            //  构造函数
            constructor(name,age){
      
                this.name = name;
                this.age = age;
            };

            // 原型方法
            eat(){
      
                console.log('人要吃饭');
            }
         };
         Person.prototype.type = '人类';
         let p1 = new Person('ikun',30);

         /*  子对象 继承与父对象 
         extends关键字底层原理: Student.prototype.__proto__ = Person.prototype
        */

         class Student extends Person{
      
            //  构造函数
            // constructor(name,age,score){
      
            //     this.name = name;
            //     this.age = age;
            //     this.score = score;
            // };
            // 原型方法
            work(){
      
                console.log('停止斗图');
            };

         }
         let s1 = new Student('班长,20,001');
         console.log(s1);

         console.log(s1.type);//人类
         s1.eat();//吃饭
    script>
body>
html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XE0JhVBl-1599820998344)(资料/04-JS高级第四天/imgs/ectends关键字图解.png)]

3-super关键字


<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>

<body>
    <script>
        /* 
        super关键字 : 在子类函数中调用父类的方法
         */

        class Student extends Person {
      
            //  构造函数
            constructor(name, age, score) {
      
                // 在子类结构函数中,去调用父类的构造函数
                /*  细节: 如果重写了子类的构造函数construc, 必须要调用父类的方法super()
                 */
                super(name, age);
                this.score = score;
            };
            // 原型方法
            work() {
      
                /* 调用父类的方法 */
                //  super.eat()底层原理:  Person.prototype.eat();
                console.log('停止斗图');
            };

        };
        let s1 = new Student('班长', 20, 99);
        console.log(s1);
        s1.work();
    script>
body>

html>

JS第五天

1-正则表达式

<html>
    <body>
    	<script>
        /* 
        1.正则表达式 :RegExp (regular expression)  是ECMAScript内置对象
        2.作用 :对 字符串进行逻辑匹配 运算
        3.使用流程 :
            (1)创建正则对象 :  new RegExp(/正则表达式/);
            (2)test('字符串') : 对字符串进行逻辑匹配运算
        */

        /* 
        1.正则表达式 :是一个对 字符串进行逻辑匹配运算 的对象
            a. 正则是内置对象 : 存储一些属性和方法
            b. 表达式 :  对字符串 进行逻辑匹配 运算
        
        2.使用流程 :两个步骤
        */

        //(1)调用构造函数,创建正则对象
        let reg =  new RegExp(/a/);

        //(2)调用test方法,对字符串进行运算   true:符合规则   false:不符合
        console.log(  reg.test('abcdefg') );
        console.log(  reg.test('123456') );


        /* 了解: 正则表达式字面量写法  /正则表达式/ */

        console.log(  /a/.test('我爱你') );//false
         script>
    body>
html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-l8JT9lUI-1599820998346)(实践/JS高级.day5/imgs/正则表达式.png)]

1-2.元字符与原义文本字符

<html>
    <body>
        <script>
        /* 
        一个正则表达式主要由两部分组成
            1.原义文本字符 : 就是字符本身的含义,千万别想多了
            2.元字符 : 改变了字符串本身的含义 (相当于js的关键字)
                . \ | [] {} () + ? * $ ^
        */    
		
       
        //1.原义文本字符 : 就是字符本身的含义,千万别想多了
        /*  /abc/ :  含义,就是检查字符串中有没有abc。 别想多了
                不是说有a或者有b或者有c,也不是说有a 和 b 和 c
        */

        console.log(/abc/.test('a123'));//false
        console.log(/abc/.test('ab123c'));//false
        console.log(/abc/.test('abc123'));//true

        console.log(/黑马/.test('绿裙很黑'));//false
        console.log(/黑马/.test('一匹黑色的马'));//false
        console.log(/黑马/.test('黑马程序员,宇宙最强IT培训'));//true
        script>
    body>
html>

2-字符类与反向类

// 字符类 : /[abc]/
	// 	/abc/ : 原义文本字符,检测字符串有没有abc
	//	/[abc]/ : 字符类   将a和b和c这三种字符类归为一类,只要满足任何一类即可
		// 字符串里面只要有abc 任意一个字符即可
// 2.反向类 : /[^abc]/ : 将没有a , 没有b,没有c的字符串归为一类。
	//	字符串里面只要有任意一个不是a 、 b 、 c即可

3-范围类

1. 范围类 
        /[0-9]/  : 检测是否有数字字符
        /[a-z]/  : 检测是否有小写字母
        /[A-Z]/  : 检测是否有大写字母
2.注意点:
        a. 范围是一个闭区间 :  /[0-9]/  包含0和9
        b. 范围类可以连接 :  /[0-9a-zA-Z]/ : 检测字符串有没有数字 或者 英文字母
        c. 范围类左边 < 右边 , 否则正则报错
              /[5-8]/ :正确 检测5-8范围的数字
              /[8-5]/ :错误 报错

4-预定义类

  • ​ 预定义类:相当于js的api。 作者提前封装好的直接使用即可[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-S1gcuLzk-1599820998348)(实践/JS高级.day5/imgs/预定义类.png)]

5-边界

  • 严格匹配: ^字符串$
    • 例如: ^abc$ : 含义是, 字符串必须是以a开头, 中间必须是b, 结尾必须是c
      • 满足该条件的只有一个字符串: abc

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TdWRLxD4-1599820998350)(实践/JS高级.day5/imgs/边界.png)]

6-量词

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0jQXXFsd-1599820998359)(实践/JS高级.day5/imgs/量词.png)]

7-分组

/*1. () 这个元字符有三个含义
		 a.分组:使量词作用于分组
		 	* 量词只能作用于一个字符,如果想作用与多个字符,就要使用分组(将多个字符当成一组)
		   b.提升优先级:通常与元字符 | 一起使用
            c.反向引用
   2. |   或
   		* | 默认作用于两边的所有字符,如果只想作用与指定字符,则可以使用() 来提升优先级
 */

 //1. 需求: 匹配连续出现三次love的字符串

    //1.错误写法:  /love{3}/  , 含义: lov + e{3}
    console.log ( /love{3}/.test ( "lovelovelove" ) );//false
    console.log ( /love{3}/.test ( "loveee" ) );//true
    console.log ( /love{3}/.test ( "loveeeabc" ) );//true
    //2.正确做法:使用分组   /(love){3}/
    console.log ( /(love){3}/.test ( "lovelovelove" ) );//true
    console.log ( /(love){3}/.test ( "loveee" ) );//false

    //2. 需求:匹配 love 或者 live
    //1.错误写法:  /lo|ive/  ,含义:  lo  或者  ive

    console.log ( "I love you".replace ( /lo|ive/, "X" ) );// I Xve you
    console.log ( "I live you".replace ( /lo|ive/, "X" ) );// I lX you

    //2.正确写法: /l(o|i)ve/, 含义:匹配love 或者 live

    console.log ( "I love you".replace ( /l(o|i)ve/, "X" ) );// I X you
    console.log ( "I live you".replace ( /l(o|i)ve/, "X" ) );// I X you
	
	/* 
        3.反向引用 : 正则表达式会把小括号中匹配到的内容给存起来。存入$1-$9中。 用于反向引用。

        场景 : 日期格式  大陆日期格式 yyy-mm-dd   香港日期格式:dd-mm-yyyy
        2020-08-15  转换成  15/08/2020
     */
	 console.log( '2020-08-15'.replace(/(\d{4})-(\d{2})-(\d{2})/,'$3/$2/$1') );//15/08/2020

8-修饰符# JS高级笔记

JS高级第一天

1-面向对象介绍

面向对象 : 面向对象是一种解决问题的思维方式
面向对象 : 注重的是结果
面向过程 : 注重的是过程
面向对象本质 : 面向过程的封装
(1)以前思维方式:面向过程    ->   注重的是过程
(2)面向对象思维方式  ->  注重的是结果

2-面向对象编程

// 面向过程 : 注重的是过程
// 弊端 : (1)代码冗余 (2)不便于维护

// 使用函数封装
// 好处: 解决代码冗余
//弊端: 全局变量污染  (全局变量重复设置导致覆盖现象)

//使用对象方法
//封装 : 将代码放入对象的方法中  (1)解决代码冗余  (2)解决全局变量污染

了解面向对象的原理: 对面向过程的封装
实际开发中,遇到功能先在网上找有没有现成的对象,如果有就直接CV,没有自己写
用别人写好的对象: (1) 好处: 效率高  (2)坏处: 不好维护
自己写好的对象: (1) 坏处: 效率低  (2)好处: 便于维护

3-原型

// 对象创建原理(new关键字工作原理)
// 1. 创建对象
// 2. this指向这个对象
// 3. 知名对象的赋值
// 4. 自动返回这个对象
// 原型: 每一个构造函数创建的时候,系统会自动创建一个对象,称之为原型对象。
// 原型作用:解决 (1)内存资源浪费  + (2)全局变量污染
// 原型语法 : 两种对象可以访问
        a. 构造函数.prototype
        b. 实例对象直接访问

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bdUBQ2s8-1599820999734)(C:/Users/86188/AppData/Roaming/Typora/typora-user-images/1596424804820.png)]

1-构造函数方法的弊端:
 内存资源浪费: 每调用一次构造函数,就会在内存声明一个函数。导致内存资源浪费
2-.使用全局函数解决 : 内存资源浪费 
  弊端----全局变量污染
3-使用对象 封装 : 把代码放到对象方法中
	同时解决 内存资源浪费 + 全局变量污染
	弊端: 治标不治本. 使用对象后,只能减少全局变量的数量,而且obj本身还是全局的
// 4-原型对象 : 完美解决构造函数  内存资源浪费 + 全局变量污染
	//(1)原型 : 每一个函数在被创建的时候,系统自动创建一个与之对应的对象,称为原型对象
//	(2)作用 : 内存资源浪费 + 全局变量污染
// 	(3)语法 : 如何访问(取值+赋值)原型
	// 	a. 构造函数.prototype
		//b. 实例对象直接访问原型的成员

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0xffdmig-1599820999737)(C:/Users/86188/AppData/Roaming/Typora/typora-user-images/1596425169233.png)]

//a. __proto__ : 属于实例对象,指向原型对象
//b. __proto__作用: 可以让实例对象 访问原型中的成员
//c. 注意点:
      // 开发中: 不要写__proto__,直接省略。 因为__proto__不是W3C标准属性
      // 学习中: 可以使用,可以帮助我们更好的理解原型

4-constructor属性

// .prototype : 属于构造函数,指向原型对象
//            * 作用: 解决内存资源浪费 + 全局变量污染
// .__proto__: 属性实例对象,指向原型对象
//            * 作用: 可以让实例对象访问原型中的成员
// constructor : 属于原型对象,指向构造函数
//            * 作用: 可以让实例对象 知道自己是被哪一个构造函数创建

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-k3YRI7GQ-1599820999738)(01-jS高级第一天/01-JS高级课程笔记/day01.assets/1588083693450.png)]

5-总结

 1. 哪些成员应该放入原型?
       * 所有实例对象共有的成员
2. 实例对象访问原型的规则?
       * 就近原则: 如果一个实例对象自己有成员,优先访问自己的。自己没有就访问原型的。
3、原型可以重新赋值。
        * 实例对象访问 修改前的原型还是修改后的原型? 取决于这个实例对象是在修改前还是修改后背创建
                * 修改前创建: 访问修改前的
                * 修改后创建: 访问修改后的

JS高级第二天

1-面向对象三大特征介绍

面向对象是一种(解决问题)思维方式
面向对象的思维方式有三大特征
	//a. 封装 : 将代码放入对象的方法中
	//b. 继承 : 一个对象拥有另一个对象所有的成员(属性+方法)
		//(1) 自己实现继承的三种方式
		//(2) js通过原型链来实现继承的
	//c. 多态 : 一个对象在不同情况下的多种状态

2-继承的三种实现方式

// 1. 继承 : 一个对象(子对象)拥有另一个对象(父对象)所有的成员
// 2. 三种实现继承的方式
	(1) 混入式继承 : 遍历父对象的成员,添加给子对象
		特点 : 每继承一次,需要遍历一次父元素
		应用场景 :使用与单个对象继承
	(2) 替换原型 : 将父对象 作为子对象构造函数的原型
		特点 : 可能会覆盖子对象构造函数 原本的原型
		应用场景 : 用于多对象继承
	(3) 混合式 :混入式 + 替换原型
	     方案 : 遍历父对象,添加给子对象构造函数的原型

3-原型链

//js是通过原型链来实现继承
	//1.原型链: 每一个对象都有__proto__属性指向自己的原型,而原型又是一个对象,也有自己的__proto__属性指向原型的原型,以此类推形成一种链式结构,称之为原型链
	//2.对象访问原型链中成员的规则: 就近原则
		//对象访问成员的时候,优先访问自己的.自己没有就反问原型的,如果原型也没有,那就找原型的原型,以此类推直到终点Null.如果还找不到,则是程序报错,提示'xxx' is not a function

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Documenttitle>
head>
<body>
    <script>
    	//1.构造函数
        function Person(name,age){
      
            this.name = name;
            this.age = age;
        };

        //2.原型对象
        Person.prototype.sayHi = function(){
      
            console.log('人生若只如初见,何事秋风悲画扇');
        };

        Person.prototype.type = '哺乳动物';

        //3.实例化对象
        let p1 = new Person('又又',18);
        console.log(p1);

        //请说出以下代码执行结果
        console.log(p1.name);//又又      p1自己有name属性
        console.log(p1.type);//哺乳动物   p1自己没有type,但是p1的原型有
        console.log(p1.hobby);//undefined p1自己没有hobby,原型也没有
        p1.sayHi();// 人生若只如初见,何事秋风悲画扇   p1自己没有这个方法,原型有
       // p1.eat();//报错 xxx is not defined    p1自己没有这个方法,原型也没有

       //为什么不报错?  p1自己没有这个方法,原型也没有这个方法,但是原型的原型有
        p1.toString();

        //查看p1的原型链
        console.log(p1.__proto__.constructor);//Person
        console.log(p1.__proto__ === Person.prototype);//true

        //查看p1的原型的原型
        console.log(p1.__proto__.__proto__.constructor);//Object
        console.log(p1.__proto__.__proto__ === Object.prototype);//true

        //查看p1的原型的原型的原型
        console.log(p1.__proto__.__proto__.__proto__);//null

    script>
body>
html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7SoTincQ-1599820999741)(C:/Users/86188/AppData/Roaming/Typora/typora-user-images/1596510621569.png)]

4-内置对象的原型链

//基本包装类型:  new String()   new Boolean()  new Number()
这个三个对象里封装一些处理基本数据类型的方法
var : 老版本的声明变量关键字
let : 最新版js声明变量关键字,两者区别不大,但是开发主流一般会使用left
// ECMAScript内置对象
	1. date日期对象原型链
	2. array数组对象原型链
	3. string对象的原型链
//DOM对象的原型链

4-1date日期对象原型链

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jOG0la1u-1599820999743)(实践/JS高级.day2/imgs/date原型链代码.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vmI2BOZA-1599820999749)(实践/JS高级.day2/imgs/date日期对象原型链.png)]

4-2 array数组对象原型链

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tSzYhusM-1599820999751)(实践/JS高级.day2/imgs/arr原型链代码.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iT6E1r0G-1599820999755)(实践/JS高级.day2/imgs/arr数组对象原型链.png)]

4-3String对象的原型链

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LeoFNh10-1599820999758)(实践/JS高级.day2/imgs/String原型链.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KbrwexlJ-1599820999760)(实践/JS高级.day2/imgs/String字符串对象的原型链.png)]

4-4DOM对象的原型链

let box = document.querySelector('#box');
let p1 = document.querySelector('#p1');

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sAbU2jB0-1599820999762)(JS高级.day2/imgs/DOM.png)]

5-函数也是对象

<html>
<body>
<script>
//函数属于对象.
	//对象有点语法操作属性,如果函数也可以使用点语法来操作属性,说明函数也是对象
	//1.原型
		//构造函数prototype : 指向原型
		//原型对象constructor : 指向构造函数
		//实例对象__proto__ : 指向原型
	//2.js中所有的对象都是构造结构函数创建
		//原型对象 : 都是被Object构造函数创建
		//函数对象 : 都是被Function构造函数
		//实例对象 : 由对应的结构函数创建(自定义构造函数Person,SonWang创建的实例对象,由对应的构造函数创建)
    
    /* 所有函数的声明,底层原理都是调用  new Function()
        a. 前面所有的参数都是形参  b. 最后一个函数是函数体代码
        */
        //声明无参无返回函数
        let fn1 =  new Function('console.log("老铁666")');
        fn1();

        //声明有参有返回函数
        let fn2 = new Function('a','b','return a + b');
        console.log(  fn2(10,20) );//30
    
    //1. js基础 : 函数声明有两种语法
    //(1)函数声明 : function 函数名(){//函数体代码}
    // 具名函数 : 声明的时候有函数名
    function fun1(a,b){
      
        console.log('1111');
        return a+b;
    };
    
    //(2)表达式声明 : let 函数名 = 匿名函数
    //匿名函数: 声明的时候没有函数名
    let fn2 =  function(){
      
        consloe.log('2222');
    };
    
    //2. js基础: 函数调用也有两种语法
    //2.1 函数调用: 函数名();
    fu1(10,20);
    fn2();
    
    //2.2自调用语法: (函数)();
    (function(){
      console.log(666)})();  //常用于匿名函数自调用
    (function fn3()){
      
     console.log(8888)
     })(); //任何函数都可以使用这种自调用语法,只是一般具名函数不会这样写
script>
body>
html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RZvPDnsS-1599820999765)(02-js高级第二天/01-教学资源/函数也是对象.png)]

6-instanceof运算符原理结束


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Documenttitle>
head>
<body>
    <script>
        /* 
        1. 原型 : 函数对象、原型对象、实例对象三者之间的关系
            构造函数prototype : 指向原型
            原型对象constructor : 指向构造函数
            实例对象__proto__ : 指向原型
        2. js中所有的对象都是构造函数创建
            原型对象 : 都是被Object构造函数创建
            函数对象 : 都是被Function构造函数
            实例对象 : 由对应的构造函数创建 (自定义构造函数Person,SonWang创建的实例对象,由对应的构造函数创建)
        3. instanceof运算符 : 检测一个构造函数prototype 在不在对象的原型链中。
            语法:  实例对象  instanceof 构造函数
            规则: 检测 右边构造函数的prototype 在不在左边对象的原型链中
                true: 在  false:不在
        */     
        
        let arr = [10,20,30];
        /* 
        arr实例对象原型链  arr.__proto__  ->  Array.prototype -> Object.prototype - > null
        */
        console.log( arr instanceof Array);//true
        console.log( arr instanceof Object);//true

        /* 
        根据instanceof运算符规则: 左边object是一个对象,  右边object是一个函数
        object对象原型链 object.__proto__ -> Function.prototype ->Object.prototype ->null
        
        */
       console.log( Object.__proto__.constructor );//Function
       console.log( Object.__proto__ === Function.prototype );//true
    
        console.log( Object instanceof Object);//true
        console.log( Object instanceof Function);//true


        /* 
        根据instanceof运算符规则: 左边Functiont是一个对象,  右边Function是一个函数
        function对象原型链 Function.__proto__ -> Fuction.prototype -> Object.prototype -> null
        */
        console.log( Function.__proto__.constructor );//Function
        console.log( Function.__proto__ === Function.prototype );//true

        console.log( Function instanceof Function);//true
        console.log( Function instanceof Object);//true
    script>
body>
html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VyVB1ae8-1599820999768)(C:/Users/86188/AppData/Roaming/Typora/typora-user-images/1596532646904.png)]

7-静态成员与实例成员


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Documenttitle>
head>
<body>
    <script>
    	/*
    	静态成员: 属于函数对象自己的成员
    	实例成员: 属于实例对象的成员
    	*/
        function.Person(name,age){
      
            //构造函数里面的成员属于实例成员
            this.name = name;
            this.age = age;
        }
        //静态成员: 函数自己的成员
        Person.hobby = '保养对象';
        let p1 = new Person('ikun',30);
        console.log(p1.name);//实例成员: 属于实例对象
        console.log(p1.age);//实例成员: 属于实例对象
        
        //console.log(p1.hobby);//undefined 静态成员只有函数自己才可以访问
        console.log(Person.hobby);//保养健康
        
        /* 静态成员经典场景: 只执行一次函数 
        */
        function fn(){
      
            if(!fn.flag){
      
                console.log('投票了');
                fn.flag = true;
            };
        };
        fn();//有效
        fn();//无效
        fn();//无效
        fn();//无效
        fn();//无效
        
        //let bol = true;
        //if(bol){
      
        //    console.log(1);
        //}else{
      
        //    console.log(2);
        //};
        
        /*
        if(条件 true/false){
        	条件成立需要执行的代码
        }else{
        	条件不成立需要执行的代码
        }
        
        注意点: if小括号里面的条件可以写三种代码
        关系表达式: 结果是布尔类型
        布尔类型的值
        其他的值: 编译器会自动转成为布尔类型判断是否成立
        */
    script>
body>
html>

JS高级第三天

1-函数三种调用模式(this指向)


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<body>
    <script>
        /* 
        1. 函数三种执行方式: 普通函数  对象方法   构造函数
        2. this指向 : 谁调用,就指向谁
            this的指向取决于调用方式,与声明无关
                a. 普通函数 :  this指向window
                b. 对象方法 :  this指向对象
                c. 构造函数 :  指向new创建的对象
         */

        function fn (){
      
            console.log('1111');
            console.log(this);
        }

        //  1 普通函数
        fn(); // window.fn();

        //  2 对象的方法
        let obj = {
      
            name: 'ikun',
            age:30,
            eat:fn
        };

        // 由于eat的值就是fn的值,所以调用eat就是调用的fn
        //  3 构造函数 
        let p1 = new fn();//this 指向new创建的对象
        console.log(p1);
    script>
body>
html>

02-函数上下文执行模式


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<body>
    <script>
  /* 函数4中调用方式 
        
        1. 函数三种执行方式 : 普通函数  对象方法 构造函数
            共同点 : this的指向无法修改  是固定的 (一旦修改程序报错)
            普通函数 : this指向window
            对象方法 : this指向对象 
            构造函数 : this指向new创建的对象

        2. 函数第四种执行方式 : 上下文模式
            作用 : 修改函数里面的this
            语法 : 三个语法作用一直都是修改this, 只是传参方式不同
                2.1 函数名.call(修改后的this,形参1,形参2)
                    应用场景 : 适用于函数形参 <= 1
                2.2 函数名.apply(修改后的this,数组或伪数组)
                    应用场景 : 适用于函数形参 >= 2
                2.3 函数名.bind(修改后的this,形参1,形参2)
                    注意点 : 
                        a. bind()不会立即执行,这个函数,而是返回一个修改this之后的新函数
                        b. 一般用bind调用不会立即传递形参(一旦传递,形参就固定了无法修改),而是调用返回						的新函数的时候再传参
                    应用场景 : 适用于某个函数不需要立即执行,而是过一会儿才执行
                        事件处理函数 + 定时器函数
         */
         function fn (a,b){
      
             console.log(this);
             console.log(a+b);

             return a+b;
         }
         fn();
        //  2.1 函数名.call(修改后的this,形参1,形参2)
        fn.call({
      name:'张三'},100,101);

        // 2.2 函数名.apply(修改后的this,数组或伪数组)
                //  应用场景 : 适用于函数形参 >= 2
        fn.apply({
      name:'李四'},[10,20]);
        
        // 2.3 函数名.bind(修改后的this,形参1,形参2)
        //             注意点 : 
        //                 a. bind()不会立即执行,这个函数,而是返回一个修改this之后的新函数
        //                 b. 一般用bind调用不会立即传递形参(一旦传递,形参就固定了无法修改),而是调用							返回的新函数的时候再传参
        //             应用场景 : 适用于某个函数不需要立即执行,而是过一会儿才执行
        //                 事件处理函数 + 定时器函数
        let newFn = fn.bind({
      name:'王五'});
        newFn(22,33);
    script>
body>
html>

3-函数上下执行模式注意点

<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<body>
     <script>
         /*
         1. 上下文执行默认作用 : 修改函数中的this指向
         2. 注意点 : this只能指向引用类型(array function object). 如果指向基本类型
         	* 基本包装类型string number boolean : 自动转成对应的对象类型 new String() new Number()  				new Boolean()
         	* undefined与null : 修改无效,this指向window
         */
         function fn(){
      
            console.log(this);
            console.log( typeof this);
        };
        fn.call({
      name:'1111'});
        fn.call([10,20,30]);
         //如果上下文模式把this修改为基本数据类型
        //基本包装对象会自动转成对应的内置对象
        fn.call('abc');
        fn.call(123);
        fn.call(true);
        //undefined和null : 修改无限,this默认指向window
        fn.call(undefined);//window
        fn.call(null);//window
        fn.call();//window
    script>
body>
html>

4-伪数组转数组

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Documenttitle>
head>
<body>
    <script>
        /* 函数4种调用方式
        1.函数三种执行方式 : 普通函数、对象方法、构造函数
            * 共同点 : this的指向无法修改,是固定的.(一旦修改程序报错)
            * 普通函数 : this指向window
            * 对象方法 : this指向对象
            * 构造函数 : this指向new创建的对象
        2.函数第四种执行方式: 上下文模式
            * 作用: 修改函数里面的this
            * 语法: 三个语法作用一致都是修改this,只是传参方式不同
                2.1 函数名.call(修改后的this,形参1,形参2)
                    场景:用于函数原本形参 <= 1
                2.2 函数名.apply(修改后的this,数组或伪数组)
                    场景:用于函数原本形参 >= 2
                2.3 函数名.bind(修改后的this,形参1,形参2)
                    不会立即执行函数体,而是返回一个修改this之后的新函数
                    场景: 用于这个函数不需要立即执行,而是过一会儿执行(事件处理函数,定时器函数)
        */
        //1.伪数组 : 有数组三要素(下标,元素,长度),但是不能调用数组的API
        //伪数组本质是一个对象 : (属性名恰好就是下标, 但是对象原型不是指向Array.prototype,所以无法调				用数字方法)
        let weiArr = {
      
            0:20,
            1:30,
            2:60,
            3:80,
            length:4
        };
        console.log(weiArr);
        // console.log(weiArr.reverse());//报错 伪数组无法调用数组方法
        
        //2.伪数组转数组 : 目的是让伪数组也可以调用数组的方法
        //2.1 遍历伪数组,添加到真数组中
        let arr = [];
        for(let i = 0;i<weiArr.length;i++){
      
            arr.push( weiArr[i] );
        };
        console.log(arr);
        
         //2.2 arr.push.apply(arr,伪数组)
        //(1)push()方法支持一次性添加多个元素
        //弊端 : 形参数量太多
        let arr = [];
        arr.push( weiArr[0],weiArr[1],weiArr[2],weiArr[3] );
        console.log(arr);
        
        let arr = [];
        //这里不需要修改this,仅仅只是利用apply可以自动遍历数组|伪数组,来逐一传参的特点
        arr.push.apply(arr,weiArr);
        console.log(arr);
        
         /* 
        2.3 Array.prototype.slice.call(伪数组)
        (1)数组的原型中有一个方法叫做slice 。  它有一个特点,不传参数,默认会返回数组自身
        (2)如果伪数组也可以调用slice,那么就可以返回一个真数组
        (3)但是伪数组不能直接调用slice,会报错。  原因:伪数组自己没有slice,原型也没有slice
        (4)思考:为啥真数组可以调用slice呢?  原因: 数组自己没有slice,但是原型有
        (5)原型中的成员,有两种访问方式
            a. 构造函数自身:  Array.prototype
            b. 每一个实例对象
        (6)越过原型链,直接利用构造函数的prototype来调用slice :  Array.prototype.slice()
        (7)越过原型链虽然可以调用slice,但是此时slice方法中的this就是原型对象 Array.prototype
        (8)既要调用slice,又希望slice方法里面的this指向伪数组
            * 相当于是weiArr来调用slice
        */
        let arr1 =  Array.prototype.slice.call(weiArr);
        console.log(arr1);
    script>
body>
html>

5-伪数组排序

<html>
    <body>
        <script>
           	 //第一种方式: 先把伪数组转成真数组,然后调用sort
			let arr = Array.prototype.slice.call(weiArr);
            arr.sort(function(a,b){
      return a-b});
            cnnsole.log(arr);
            // Array.prototype.sort.call(weiArr,function(a,b){return a-b});
            // 思路: 越过原型链查找机制,直接调用数组原型的sort,并且把this修改为伪数组
            Array.prototype.sort.call(weiArr,function(a,b){
      return a-b});
            console.log(weiArr);
        script>
    body>
html>

6-求最大值

<html>
    <body>
        <script>
            /* 求数组最大值 */
            let arr = [112,234,,676,5,6343,67];
            // 擂台思想
            // 1.擂台思想
            	let max = -Infinity;//用于存放表示正无穷大的数值
            // 2. 遍历挑战者
            for(let i = 0; i < arr.length;i++){
      
                // 3.依次和擂主pk
                if(arr[i] > max){
      
                    max = arr[i]
                };
            };
            console.log(max);
            
            /* Math.max */
            // let max1 = Math.max(arr[0],arr[1],arr[2],arr[3],arr[4]);
            // 利用apply自动遍历数组传参的特点 (底层与上面代码一致,只是apply会自动遍历数组逐一传参)
            let max1 = Math.max.apply(Math,arr);
            console.log(max1);
        script>
    body>
html>

7-求数组最大值

<html>
    <body>
        <script>
            /* 
            1. 复习 typeof关键字检测数据类型 : typeof 数据
            	* 弊端: 无法检测 null 和 array 这两种数据类型,返回值都是object
            	* typeof null : 'object'
            	* typeof []   : 'object'
            2. 介绍 对象的toString()方法检测数据类型
            	* Object.prototype.toString() : 返回固定格式字符串 [object 数据类型]
            	* Array.prototype.toString() : 返回数组.join ()方法拼接的字符串
            3. 总结: 万能检测数据类型
            	* 固定语法: Object.prototype.toString.call(数据)
            */
            // a. 值类型(基本数据类型)
            let str = '我爱你们';
            let num = 68;
            let bol = true;
            let und = undefined;
            let nul = null;
            // b. 引用类型(复杂数据类型)
            let arr = [12,13,14];
            let fn  = function(){
      };
            let obj = {
      name:'link'};
            console.log(typeof str); //'string'
            console.log(typeof num); //'number'
            console.log(typeof bol); //'boolean'
            console.log(typeof und); //'undefined'
            console.log(typeof nul); //'object'
            console.log(typeof arr); //'object'
            console.log(typeof fn);  //'function'
            console.log(typrof obj); //'object'
            
            /* 2. 对象的toString()方法介绍
            Object.prototype.toString() : 返回一个固定格式字符串 '[object 数据类型]'
            Array.protottpe.toString()  : 底层原来是调用数组的join()方法
            */
            console.log(obj.toString()); //[object Object]
            console.log(arr.toString()); //[object Array]
            
            /* 3. 万能检测数据类型 : 越过了原型链,直接调用Object.prototype里面的toString
            	* 因为很多对象的原型都覆盖了toString(),所以通过原型链无法直接访问到Object的原型里面				dtoString
            	* 总结 : Object.prototype.toString.call(数据)
            */
            console.log(Object.prototype.toString.call(str));//[objcet	String]
            console.log(Object.prototype.toString.call(num));//[object	Number]
            console.log(Object.prototype.toString.call(bol));//[object	Boolean]
            console.log(Object.prototype.toString.call(und));//[object Undefined]
            console.log(Object.prototype.toString.call(nul));//[object	Null]
            console.log(Object.prototype.toString.call(arr));//[object	Arrat]
            console.log(Object.prototype.toString.call(fn)); //[object	Function]
            console.log(Object.prototype.toString.call(obj));//[object	Object]
        script>
    body>
html>

JS高级第四天

1-递归函数

<html>
    <body>
        <script>
        	/* 
        	1. 递归函数 : 一个函数在函数体中调用自己
        	2. 递归函数作用 : 函数体代码重发执行
        		* 递归函数做到事和循环一样的,能用递归做的就可以用循环做.只是语法简洁性不同.
        	3. 递归注意点 : 一定要有结束条件,否则会导致死循环.
        	*/
            
            // 单函数递归
            function fn(){
      
                console.log('好好学习');
                fn();
            };
            fn();
            
            // 双函数递归
            
            // 使用递归
            function getSum(n){
      
                return n == 1 ? 1 : n + getSum(n - 1);
                
                /* if(n == 1){
                    return 1;
                }else{
                    return n + getSum(n - 1);
                }; */
            }
        script>
    body>
html>

2-递归遍历DOM树

<html>
    <body>
        <script>
        	 /* 需求: 获取某一个父元素所有的后代元素 (变量DOM树)
        1. js原生的DOM语法可以实现吗?  不行
            a. DOM原生语法, 只能获取子代元素:  父元素.chlidren
        2. 思路: 写一个函数,遍历父元素的子元素. 如果子元素也有自己的子元素,ze继续遍历获取子元素的子元素,以此类推形成函数递归调用
         */

        let box = document.querySelector('#box');
        let arr = [];//存储所有的后代元素

        function find(ele){
      
            for(let i = 0;i < ele.children.length;i++) {
      
                console.log(ele.children[i]);
                arr.push(ele.children[i]);
                // 继续递归调用: 获取子元素的子元素
                find(ele.children[i]);
            }
        };
        find(document);
        script>
    body>
html>

3-闭包

1-闭包介绍


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<body>
    <script>
        /*
        1.闭包函数
            1.1 作用:
            1.2 语法:
            1.3 注意点:
         
        2.学习路线 : 需求, 在函数外边访问函数里变量
            2.1 复习函数作用域
            2.2 函数返回值的特点
            2.3 闭包介绍
        */

        /*
        1. js有两种作用域
            1.1 全局作用域(全局变量): 在函数外面声明,可以在页面任何地方访问
                * 全局变量生命周期 : 页面打开时声明 页面关闭时销毁
                * 生命周期: 从变量声明 到 变量销毁
            1.2 局部作用域(局部变量): 在函数里面声明,只能在函数体里面使用
                * 局部变量声明周期 : 执行函数体开始声明, 然后函数调用结束销毁
        */
        // function fn (){
      
        //     let person = {
      
        //         name:'jk姐姐',
        //         age:19
        //     };
        // };
        // fn();
        // // 函数外面无法直接获取(访问)函数内部的成员
        // console.log(person);

        /* 2. 如何实现在函数外部访问函数里边的变量
            解决方案 : 使用return
            问题 : 每调用一次,就会生成一个新的对象
         */

        // function fn() {
      
        //     let person = {
      
        //         name: 'jk姐姐',
        //         age: 19
        //     };
        //     return;
        // };
        // let p1 = fn();
        // // p1 和 p2 虽然里面的数据相同,但是这是两个不同的对象(地址不同)
        // console.log(p1);

        /* 
        3. 如何实现 在函数外边访问函数里面的变量,并且保证
            解决方案: 使用闭包
            闭包作用: 在函数外面访问函数里面的变量
            闭包语法: 语法不固定,但是分为三个步骤
                (1) 在外部函数中声明一个闭包函数
                (2) 在闭包函数中返回你想访问的变量
                (3) 返回闭包函数
            闭包本质 : 沟通全局作用域与局部作用域的一座桥梁
         */

        function outer(){
      
            let person = {
      
                name:'Jk姐姐'
            };
            // (1)在外部函数的里面声明一个内部函数(闭包函数)
            function closure(){
      
                // (2) 在闭包函数中返回你想要返回的变量
                return person
            };
            // (3)返回这个闭包函数
            return closure; 
        };
        // 调用外边函数  得到闭包函数
        let  bibao = outer();
        // 调用闭包函数,得到局部变量
        let p1 = bibao();
        let p2 = bibao();

        console.log(p1,p2);
        console.log(p1 == p2);//true
    script>
body>
html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-agTIiv2E-1599820999772)(资料/04-JS高级第四天/imgs/图解闭包.png)]

2-闭包注意点


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Documenttitle>
head>
<body>
    <script>
        /* 闭包
        1.1 作用:在函数外面访问函数内部的变量
        1.2 语法:
            a. 在函数里面声明一个闭包函数
            b. 在闭包函数中访问局部变量
            c. 返回这个闭包函数
        1.3 注意点:
            (1)得到相同的值:外部函数调用一次,闭包函数调用多次
            (2)得到不同的值:外部函数调用多次,闭包函数调用1次
        */   
       
        //外部函数
        function outer(){
      
            let num = Math.ceil(Math.random()*100);
            //a.在函数里面声明一个闭包函数
            function closure(){
      
                //b.在闭包函数中访问局部变量
                return num;
            };
            //c.返回这个闭包函数
            return closure;
        };

        //(1)得到是相同的值: 外部函数调用一次,闭包函数调用多次
        //调用外部函数一次,得到闭包函数
        // let bibao = outer();
        // //调用闭包函数多次
        // let n1 = bibao();
        // let n2 = bibao();
        // let n3 = bibao();
        // console.log(n1,n2,n3);

        //(2) 得到不同的值: 外部函数调用多次,闭包函数调用一次
        // let bibao1 = outer();
        // let num1 = bibao1();
        let num1 = outer()();

        // let bibao2 = outer();
        // let num2 = bibao2();
        let num2 = outer()();

        // let bibao3 = outer();
        // let num3 = bibao3();
        let num3 = outer()();

        console.log(num1,num2,num3);
    script>
body>
html>

3-闭包经典应用场景(沙箱模式)


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Documenttitle>
head>
<body>
    <script>
       /* 
       1.沙箱模式:值得是一个独立的内存空间(局部作用域).通常是一个匿名函数自调用
       2.沙箱模式作用:
            a. 避免全局变量污染
            b. 模块化开发 : 一个功能对应一个沙箱
        3.沙箱注意点 :不要在沙箱内部访问全局变量,应该使用参数传递
            * (1)沙箱外面的变量,代码可能会压缩出错
            * (2)破坏封装性
       */   
       (function(w){
      
           let a = {
      
                eat:function(){
      
                    console.log('吃饭');
                },
                play:function(){
      
                    console.log('玩');
                }
           };

           //暴露接口
           w.a = a;
       })(window);
       
   script>
body>
html>

4-ES6类与继承

1-class关键字


<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>

<body>
    <script>
        /* 
        1. class关键字作用: 声明类函数 (相当于以前的构造函数)
            * class语法作用和以前的构造函数语法一致,只是写法不同
                a. 将构造函数与原型方法 卸载一个大括号中,提高代码阅读性
                b. class类函数必须要使用new来调用,语法更加桂发
        2. 语法: 
                class 构造函数名 {
                    // 构造函数
                    constructor(){

                    };
                    // 原型中的方法
                    eat(){

                    };
                };
         */

        // ES6继承 : class类函数
        class Person {
      
            //(1) 构造函数: 固定的语法 constructor(){}
            constructor() {
      
                this.name = 'name';
                this.age = '20';
            }

            //(2) 原型中的方法
            eat() {
      
                console.log('吃饭');
            };

            learn() {
      
                console.log('续写');
            }
        };

        /* ES6语法的本质其实还是以前的原型语法,只是写法不同.还是可以用以前的语法给原型添加成员 */
        Person1.prototype.type = '人类';

        //(3) 实例对象
        // class类函数必须要用new调用,否则会报错
        let p2 = new Person1('班长', 19);
        console.log(p2);
    script>
body>
html>

2-extends关键字


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<body>
    <script>
        /* 
        1. extends关键字 : 用于继承
        2. 底层原理 : 替换原型
            * Student.prototype.__proto__ = Person.preototype
            * s1.__proto__.__proto__ === Person.prototypr
         */

         /*  父对象 */
         class Person{
      
            //  构造函数
            constructor(name,age){
      
                this.name = name;
                this.age = age;
            };

            // 原型方法
            eat(){
      
                console.log('人要吃饭');
            }
         };
         Person.prototype.type = '人类';
         let p1 = new Person('ikun',30);

         /*  子对象 继承与父对象 
         extends关键字底层原理: Student.prototype.__proto__ = Person.prototype
        */

         class Student extends Person{
      
            //  构造函数
            // constructor(name,age,score){
      
            //     this.name = name;
            //     this.age = age;
            //     this.score = score;
            // };
            // 原型方法
            work(){
      
                console.log('停止斗图');
            };

         }
         let s1 = new Student('班长,20,001');
         console.log(s1);

         console.log(s1.type);//人类
         s1.eat();//吃饭
    script>
body>
html>

3-super关键字


<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>

<body>
    <script>
        /* 
        super关键字 : 在子类函数中调用父类的方法
         */

        class Student extends Person {
      
            //  构造函数
            constructor(name, age, score) {
      
                // 在子类结构函数中,去调用父类的构造函数
                /*  细节: 如果重写了子类的构造函数construc, 必须要调用父类的方法super()
                 */
                super(name, age);
                this.score = score;
            };
            // 原型方法
            work() {
      
                /* 调用父类的方法 */
                //  super.eat()底层原理:  Person.prototype.eat();
                console.log('停止斗图');
            };

        };
        let s1 = new Student('班长', 20, 99);
        console.log(s1);
        s1.work();
    script>
body>

html>

JS第五天

1-正则表达式

<html>
    <body>
    	<script>
        /* 
        1.正则表达式 :RegExp (regular expression)  是ECMAScript内置对象
        2.作用 :对 字符串进行逻辑匹配 运算
        3.使用流程 :
            (1)创建正则对象 :  new RegExp(/正则表达式/);
            (2)test('字符串') : 对字符串进行逻辑匹配运算
        */

        /* 
        1.正则表达式 :是一个对 字符串进行逻辑匹配运算 的对象
            a. 正则是内置对象 : 存储一些属性和方法
            b. 表达式 :  对字符串 进行逻辑匹配 运算
        
        2.使用流程 :两个步骤
        */

        //(1)调用构造函数,创建正则对象
        let reg =  new RegExp(/a/);

        //(2)调用test方法,对字符串进行运算   true:符合规则   false:不符合
        console.log(  reg.test('abcdefg') );
        console.log(  reg.test('123456') );


        /* 了解: 正则表达式字面量写法  /正则表达式/ */

        console.log(  /a/.test('我爱你') );//false
         script>
    body>
html>

1-2.元字符与原义文本字符

<html>
    <body>
        <script>
        /* 
        一个正则表达式主要由两部分组成
            1.原义文本字符 : 就是字符本身的含义,千万别想多了
            2.元字符 : 改变了字符串本身的含义 (相当于js的关键字)
                . \ | [] {} () + ? * $ ^
        */    
		
       
        //1.原义文本字符 : 就是字符本身的含义,千万别想多了
        /*  /abc/ :  含义,就是检查字符串中有没有abc。 别想多了
                不是说有a或者有b或者有c,也不是说有a 和 b 和 c
        */

        console.log(/abc/.test('a123'));//false
        console.log(/abc/.test('ab123c'));//false
        console.log(/abc/.test('abc123'));//true

        console.log(/黑马/.test('绿裙很黑'));//false
        console.log(/黑马/.test('一匹黑色的马'));//false
        console.log(/黑马/.test('黑马程序员,宇宙最强IT培训'));//true
        script>
    body>
html>

2-字符类与反向类

// 字符类 : /[abc]/
	// 	/abc/ : 原义文本字符,检测字符串有没有abc
	//	/[abc]/ : 字符类   将a和b和c这三种字符类归为一类,只要满足任何一类即可
		// 字符串里面只要有abc 任意一个字符即可
// 2.反向类 : /[^abc]/ : 将没有a , 没有b,没有c的字符串归为一类。
	//	字符串里面只要有任意一个不是a 、 b 、 c即可

3-范围类

1. 范围类 
        /[0-9]/  : 检测是否有数字字符
        /[a-z]/  : 检测是否有小写字母
        /[A-Z]/  : 检测是否有大写字母
2.注意点:
        a. 范围是一个闭区间 :  /[0-9]/  包含0和9
        b. 范围类可以连接 :  /[0-9a-zA-Z]/ : 检测字符串有没有数字 或者 英文字母
        c. 范围类左边 < 右边 , 否则正则报错
              /[5-8]/ :正确 检测5-8范围的数字
              /[8-5]/ :错误 报错

4-预定义类

5-边界

  • 严格匹配: ^字符串$
    • 例如: ^abc$ : 含义是, 字符串必须是以a开头, 中间必须是b, 结尾必须是c
      • 满足该条件的只有一个字符串: abc

6-量词

7-分组

/*1. () 这个元字符有三个含义
		 a.分组:使量词作用于分组
		 	* 量词只能作用于一个字符,如果想作用与多个字符,就要使用分组(将多个字符当成一组)
		   b.提升优先级:通常与元字符 | 一起使用
            c.反向引用
   2. |   或
   		* | 默认作用于两边的所有字符,如果只想作用与指定字符,则可以使用() 来提升优先级
 */

 //1. 需求: 匹配连续出现三次love的字符串

    //1.错误写法:  /love{3}/  , 含义: lov + e{3}
    console.log ( /love{3}/.test ( "lovelovelove" ) );//false
    console.log ( /love{3}/.test ( "loveee" ) );//true
    console.log ( /love{3}/.test ( "loveeeabc" ) );//true
    //2.正确做法:使用分组   /(love){3}/
    console.log ( /(love){3}/.test ( "lovelovelove" ) );//true
    console.log ( /(love){3}/.test ( "loveee" ) );//false

    //2. 需求:匹配 love 或者 live
    //1.错误写法:  /lo|ive/  ,含义:  lo  或者  ive

    console.log ( "I love you".replace ( /lo|ive/, "X" ) );// I Xve you
    console.log ( "I live you".replace ( /lo|ive/, "X" ) );// I lX you

    //2.正确写法: /l(o|i)ve/, 含义:匹配love 或者 live

    console.log ( "I love you".replace ( /l(o|i)ve/, "X" ) );// I X you
    console.log ( "I live you".replace ( /l(o|i)ve/, "X" ) );// I X you
	
	/* 
        3.反向引用 : 正则表达式会把小括号中匹配到的内容给存起来。存入$1-$9中。 用于反向引用。

        场景 : 日期格式  大陆日期格式 yyy-mm-dd   香港日期格式:dd-mm-yyyy
        2020-08-15  转换成  15/08/2020
     */
	 console.log( '2020-08-15'.replace(/(\d{4})-(\d{2})-(\d{2})/,'$3/$2/$1') );//15/08/2020

8-修饰符

 
     
         
     

你可能感兴趣的:(JavaScript)