JS高级学习

最新推荐文章于 2023-07-18 09:41:55 发布

可乐~！

最新推荐文章于 2023-07-18 09:41:55 发布

阅读量603

点赞数 1

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_45650436/article/details/122093796

版权

1.面向对象：

不是技术，而是一种思维

面向对象思维：注重结果

面向过程思维：注重过程

2.面向对象本质：

对面向过程的一种封装

3.内置对象api

内置对象api： js作者提前写好的对象，里面有一些预先定义的方法，直接使用即可

api : 预先定义的函数

3.1数组对象api

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>

<script>
    //声明数组
    let arr = [10,20,30]

    /*1.数组的增删改查操作 
    新增元素到最后面 ： arr.push( 元素 )
    新增元素到最前面 ： arr.unshift()
    删除最后一个元素 ： arr.pop()
    删除第一个元素   ： arr.shift()
    删除指定位置元素 ： arr.splice(起始下标,删除数量)
     */

    //2.将数组中的每一个元素都拼接成一个字符串
    let str = arr.join()//10,20,30
    console.log ( str )

    //3.翻转数组
    var newArr =  arr.reverse()
    console.log ( newArr )//[100,20,10]

    //4.数组排序
    let arr1 = [10,20,70,40,50,60]
    //数组排序方法的参数是一个回调函数：告诉数组内置对象你的排序规则
    //从小到大排序
    arr1.sort(function (a,b)
    {
        return a - b
    });

    console.log ( arr1 )//从小到大
    
</script>
</html>

3.1字符串对象api

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>

<script>
    

    let str = "键盘敲烂月薪过万";
    
    //1 判断一个字符串在不在某个字符串里面
    let index1 = str.indexOf("月薪")//如果存在，则返回参数字符串首字母所在的下标
    let index2 = str.indexOf("万")
    let index3 = str.indexOf("月万")//如果不存在，则返回 -1
    console.log ( index1, index2, index3 )//0,6,-1

    //2 截取字符串  第一个参数：从哪个下标开始截取  第二个参数：截取的长度
    let str1 = str.substr(4,4)//月薪过万
    console.log ( str1 )
    
    //3  修改字符串  第一个参数：要修改的字符串  第二个参数：修改后的字符串
    let str2 = str.replace("过万","过百万")
    console.log ( str2 )//键盘敲烂月薪过百万

    //4 分隔字符串:将字符串按照指定的符号分隔，得到一个数组
    let str3 = "我&爱&你"
    //这个函数的返回值一定是一个数组
    let arry = str3.split("&")//以&符号分隔字符串  [我,爱,你]
    console.log ( arry )// [我,爱,你]
    
    //5 大小写转换  (只有英文才有大小写，中文不存在大小写)
    console.log ( "AKlkshflsLKJHDHL".toLowerCase () )//转为小写 aklkshflslkjhdhl
    console.log ( "AKlkshflsLKJHDHL".toUpperCase () )//转为大写  AKLKSHFLSLKJHDHL
    console.log ( "中文不存在大小写".toLowerCase () )//转为小写
    

</script>
</html>

4.原型对象

4.1构造函数new的工作原理

4.2工厂函数

//工厂函数 ： 
      function createPerson (name, age, sex) {
        //(1)创建空对象
        let p = {}
        //(2)对象赋值
        p.name = name
        p.age = age
        p.sex = sex
        //(3)返回创建好的对象
        return p
      }

      let p1 = createPerson('小明', 32, '男')
      let p2 = createPerson('小红', 38, '女')
      let p3 = createPerson('小黄', 28, '男')
      console.log(p1, p2, p3)

4.3构造函数

 /*构造函数作用与工厂函数一致，都是创建对象。但是构造函数代码更加简洁
      1.构造函数 ： 使用new关键字调用一个函数
      
      */
      function Person (name, age, sex) {
        //(1)创建空对象  {}
        //(2)将this指向这个对象  this = {}
        //(3)对象赋值
        this.name = name
        this.age = age
        this.sex = sex
        //(4)返回这个对象  return this
      }

      let person1 = new Person('小明', 32, '男')
      let person2 = new Person('小红', 38, '女')
      let person3 = new Person('小黄', 28, '男')
      console.log(person1, person2, person3)

原型：任何构造函数在被创建的时候，系统都会自动帮我们创建一个与之对应的对象，称之为原型对象

同时解决内存浪费与全局变量污染的问题

谁可以访问原型对象中的成员(属性和方法)

构造函数自身：构造函数名.prototype
构造函数实例化的每一个对象：点语法直接访问

  /*     使用原型 ：             */
        
        /* 1 原型 ： 每一个构造函数在声明的时候，系统会自动的创建一个与之对应的对象，
        称之为原型对象
        */
        function Person(name,age){
            this.name = name;
            this.age = age;
        };

        /*2 如何获取原型对象 
            每一个函数都有一个 prototype 属性，指向这个原型对象
        */
       console.log(Person.prototype);

       /* 
       3 既然原型是一个对象 ： 用于存储数据
       */
      Person.prototype.sayHi = function(){
          console.log('小明我爱你');
          
      };

      /* 
      4 谁可以访问 原型中的成员（属性+方法）
        a. 构造函数自身 ： 构造函数名.prototype
        b. 这个构造函数所创建(实例化)的每一个对象
      */
     // 实例化对象
     let p1 = new Person('小红',18);
     p1.sayHi();

     //实例化对象
     let p2 = new Person('小花',20);
     p2.sayHi();

     console.log(p1.sayHi === p2.sayHi);//true

4.4--proto--属性介绍

1.属于对象，指向实例化这个对象的构造函数对应的原型

2.proto属性不是W3C的标准属性，所以实际开发中一般不会使用它来访问原型

往原型添加属性方法，最好使用构造函数来访问构造函数名.prototype

<!DOCTYPE html>
<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>Document</title>
  </head>
  <body>
    <script>
       /* 
        1.prototype属性： 属于构造函数，指向原型对象
            * 作用： 解决构造函数资源浪费+变量污染
        2.__proto__属性： 属于实例对象，指向原型对象
            * 作用： 可以让实例对象访问原型中的成员
        */

      //1.构造函数
      function Person (name, age) {
        this.name = name
        this.age = age
      }

      //2.原型对象
      Person.prototype.eat = function () {
        console.log('我中午吃了红烧武昌鱼')
      }
      Person.prototype.country = '中国人'

      //3.实例对象
      let p1 = new Person('班长', 28)
      console.log(p1)

      /* 
      __proto__ : 属于实例对象,指向原型对象
      */
     console.log( Person.prototype === p1.__proto__ )//true

     //实例对象为什么可以直接访问原型中的成员，其实都是通过__proto__来访问的
     /* 
     1.虽然实例对象可以直接访问原型的原理是 __proto__,但是开发中不推荐使用
     2.原因： __proto__不是ECMA标准语法，有一些浏览器不支持。
     3.结论： 学习阶段，学习原型可以用__proto__. 实际开发中，建议省略__proto__
     */
     p1.eat()//p1.__proto__.eat()
     
      
    </script>
  </body>
</html>

4.5constructor属性介绍

<!DOCTYPE html>
<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>Document</title>
  </head>
  <body>
    <script>
        /* 
        1. prototype : 属于构造函数，指向原型对象
            * 作用：解决资源浪费+变量污染 
        2.__proto__ : 属于实例对象，指向原型对象
            * 作用： 可以让实例对象访问原型中的成员
        3.constructor: 属于原型对象，指向构造函数
            * 作用： 可以让实例对象 知道自己被哪一个构造函数创建的
        */

      //1.构造函数
      function Person (name, age) {
        this.name = name
        this.age = age
      }

      //2.原型对象
      Person.prototype.type = '动物'
      Person.prototype.eat = function () {
        console.log('吃东西')
      }

      //3.实例对象
      let p1 = new Person('布丁', 3)
      p1.eat()
      console.log(p1.type)

      /* 
      constructor : 属于原型对象，指向构造函数
        作用：可以让实例对象知道自己被那个构造函数创建的
      */
      console.log(Person.prototype.constructor)//Person
      console.log(Person.prototype.constructor === Person )//true
      console.log( p1.constructor )//Person p1.__proto__.constructor
      


    </script>
  </body>
</html>

5静态成员与实例成员

<!DOCTYPE html>
<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>Document</title>
</head>
<body>
    <script>
        /* 
        构造函数也可以有自己的属性： 例如prototype

        静态成员 ： 属于函数对象的成员
        实例成员： 属于实例化对象的成员
         */

        //构造函数
         function Person(name,age){
            this.name = name;
            this.age = age;
        };

        Person.aaa = '啊啊啊';
        console.log(Person.aaa);//静态成员
        

        //实例化对象
        let p1 = new Person('张三',20);

        console.log(p1.name);//实例成员
        console.log(p1.age);//实例成员
        
    </script>
</body>
</html>