js高级--面向对象编程之巩固1.面向对象面向对象不是一门技术，而是一种解决问题的思维方式面向对象的本质是对面向过程

1.面向对象

面向对象不是一门技术，而是一种解决问题的思维方式
面向对象的本质是对面向过程的一种封装

1,2对象

对象的本质是程序代码与现实世界沟通的一座桥梁。它有两种含义

对象：是一种数据类型（存储数据的容器），以键值对的形式存储数据
对象：对现实世界实物的一种抽象。

1.3面向对象编程举例01

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            height: 50px;
            margin-top: 20px;
            background-color: greenyellow;
        }

        p{
            height: 50px;
            margin-top: 20px;
            background-color: hotpink;
        }
    </style>
</head>
<body>

<div></div>
<div></div>
<div></div>
<p></p>
<p></p>
<p></p>

<script>
    //需求：给三个div和p标签设置边框

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            height: 50px;
            margin-top: 20px;
            background-color: greenyellow;
        }

        p{
            height: 50px;
            margin-top: 20px;
            background-color: hotpink;
        }
    </style>
</head>
<body>

<div></div>
<div></div>
<div></div>
<p></p>
<p></p>
<p></p>

<script src="jquery-1.12.4.js"></script>
<script>
    需求：给三个div和p标签设置边框
    $('div,p').css('border','10px solid green');

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

2.-内置对象api

学习传送门：www.runoob.com/jsref/jsref…

2.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>

2.2-字符串对象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(2,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>

3.原型对象

3.1工厂函数：用于批量创建对象的函数

<!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>
  工厂函数 ： 
      function createPerson (name, age, sex) {
        //(1)创建空对象
        let p = {}
        //(2)对象赋值
        p.name = name
        p.age = age
        p.sex = sex
        //(3)返回创建好的对象
        return p
      }

      let p1 = createPerson('ikun', 32, '男')
      let p2 = createPerson('班长', 38, '男')
      let p3 = createPerson('王悦', 28, '男')
      console.log(p1, p2, p3)

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

3.2重点构造函数


<!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.构造函数 ： 使用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('ikun', 32, '男')
      let person2 = new Person('班长', 38, '男')
      let person3 = new Person('王悦', 28, '男')
      console.log(person1, person2, person3)

      /* 声明一个空函数 */
    //   function fn () {}

    //   let res1 = fn() //普通函数
    //   let res2 = new fn() //构造函数
    //   console.log(res1, res2)
    </script>
  </body>
</html>

4.原型对象

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

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

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

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

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

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

      /* 
      4.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
     
    </script>
</body>
</html>

4.1 proto 属性介绍

1.属于对象，指向实例化这个对象的构造函数对应的原型
2.proto属性不是W3C的标准属性，所以实际开发中一般不会使用它来访问原型
- developer.mozilla.org/zh-CN/docs/…
- 往原型添加属性方法，最好使用构造函数来访问构造函数名.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>

constructor属性介绍

<!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>

静态成员与实例成员

<!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>

js高级--面向对象编程之巩固

1.面向对象

1,2对象

1.3面向对象编程举例01

2.-内置对象api

2.1数组对象api

2.2-字符串对象api

3.原型对象

3.1工厂函数：用于批量创建对象的函数

3.2重点构造函数

4.原型对象

4.1 __ proto __ 属性介绍

constructor属性介绍

静态成员与实例成员

4.1 proto 属性介绍