JS高级-面向对象内置对象原型对象

学习吖

已于 2022-04-30 16:31:54 修改

阅读量156

点赞数

分类专栏： javascript进阶高级文章标签： javascript webview html

于 2022-04-28 23:17:14 首次发布

本文链接：https://blog.csdn.net/weixin_68531033/article/details/124467484

版权

javascript进阶高级专栏收录该内容

4 篇文章 0 订阅

订阅专栏

面向对象

1.理解什么是面向对象编程

面向对象不是一门技术，而是一种解决问题的思维方式

面向对象的本质是对面向过程的一种封装

2.理解什么是对象

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

对象：是一种数据类型（存储数据的容器），以键值对的形式存储数据

对象：对现实世界实物的一种抽象。

面向对象与面向过程的区别与联系

面向过程 : 注重过程

面向对象 : 注重结果

面向对象与面向过程关系 : 面向对象的本质是对面向过程的封装

  <script>
        /*  这里需要写总结哟
        1. 面向对象是什么 : 是一种 注重结果的思维方式
            面向过程 :  注重过程
            面向对象 : 注重结果

        2. 面向对象与面向过程关系 : 面向对象的本质是对面向过程的 封装
        */

        /* 举例：要吃火锅 */
        /*1.面向过程：注重过程 
        (1)买鸳鸯锅
        (2)买电磁炉
        (3)买锅底
        (4)买牛肉、羊肉、青菜、千张、毛肚、火锅面、菌类
        (5)开火热锅
        (6)放食材
        (7)夹起来开干
         */

        /* 2.面向对象:注重结果 
        点火锅送过来
        */
    </script>

面向对象编程举例

<!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>
  <div>div1</div>
  <div>div2</div>
  <div>div3</div>
  <p>p1</p>
  <p>p2</p>
  <p>p3</p>
  <p>p4</p>
  <script>

    //需求： 给页面每一个div标签 和 p标签 设置颜色 和 边框

    /* 1.面向过程 : 注重过程 
      特点：代码冗余
      */
     /* 封装函数
     好处解决代码复用
     弊端变量污染(变量名过多,会导致重名风险)*/
    /* 对象方法 */

    /* 2.面向对象
      (1)函数封装 :
          全局变量污染 : 
      (2)对象封装: 
    */
    let obj = {
      setColor: function (list, color) {
        for (let i = 0; i < list.length; i++) {
          list[i].style.backgroundColor = color
        }
      },
      setBorder: function (list, border) {
        for (let i = 0; i < list.length; i++) {
          list[i].style.backgroundColor = border
        }
      }
    }

    obj.setColor(divList, "red")
    obj.setColor(pList, "cyan")
  </script>
</body>

</html>

面向对象编程举例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>
    <div>div1</div>
    <div>div2</div>
    <div>div3</div>
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
    <p>p4</p>

    <script src="./jquery-1.12.4.js"></script>
    <script>
      /*  本小节无需写代码与注释，仅为概念性辅助理解
        1. 面向对象 : 是 一种注重结果的解决问题 思维方式
            面向过程 : 注重的是过程
            面向对象 : 注重的是结果

        2. 面向对象 本质 是对面向过程的封装
        */

      //需求： 给页面每一个div标签 和 p标签 设置颜色 和 边框

      $('div,p').css({
          backgroundColor:'red',
          border:'5px solid cyan'
      })

      /*今后实际开发中如何运用面向对象开发思维 
      当拿来一个需求的时候，先不要急着写，而是去网上找有没有现成的框架。如果有，则下载CV搞定。如果没有再自己写。
      用别人的对象： 好处效率高    坏处不利于维护
      自己写的对象： 好处维护方便  坏处效率低
      */
    </script>
  </body>
</html>

内置对象

数组对象

1.arr.concat(数组)

// 1.arr.concat(数组):连接数组,得到一个连接后的新数组

// 应用场景:下拉加载更多的时候,会吧新数组连接到原来数组的后面

<script>

 let arr=[10,20,30]
        // // 1.arr.concat(数组):连接数组,得到一个连接后的新数组
        // 应用场景:下拉加载更多的时候,会吧新数组 连接到原来数组的后面
        arr=arr.concat([40,50,60])
        console.log(arr);   //[10,20,30,40,50,60]
</scriot>

2. arr.join('分隔符')

//2. arr.join('分隔符')把数组每一个元素拼接成字符串

// 应用场景:歌手不止一个,服务器会给你一个数组

// ['周杰伦','蔡依林'].join('&') '周杰伦'&'蔡依林'

<script>

 // ['周杰伦','蔡依林'].join('&') '周杰伦'&'蔡依林'
        let str=arr.join('')//空格默认为逗号
        console.log(str);
</script>

3.reverse() 翻转数组

// 3.reverse() 翻转数组

// 应用场景电商类销售,价格距离点击之后就会翻转显示

<script>
// 3.reverse() 翻转数组
        // 应用场景 电商类 销售,价格 距离 点击之后就会翻转显示
 let arr=[10,20,30]
        arr.reverse()
        console.log(arr);
</script>

4. arr.sort():数组排序

<script>

//4. arr.sort():数组排序
        let numArr=[2,5,8,4,7,52,45,86,74]
        // numArr.sort()
         numArr.sort(function(a,b){
        //  return a-b 从小到大排列
        return b-a
         })
         console.log(numArr);
</script>

字符串对象

1.str.length

<script>
let str = '今天是2022年三月八号女神节快乐!' 
        // 1.str.length字符串雷速与数组 也有长度 +下标   
         console.log(str.length);
        console.log(str[2]);//程
</script>

2. str.indexOf('字符串')

// 如果存在则返回首字符下标,若不存在返回固定值-1

<script>
//2. str.indexOf('字符串') 返回 字符串 在str中的首字符
        // 应用:字符串在不在str中
        let index1=str.indexOf('女神')
        console.log(index1);//13
        let index2=str.indexOf('干饭')
        console.log(index2);//-1
        let index3=str.indexOf('今年')
        console.log(index3);//-1
</script>

3. str.split('分隔符')

<script>
// 3. str.split('分隔符')  把str按照分隔符切割成一个数组
        // 应用 切换url网址
        let url='https://www.baidu.com/?username=sdafsffsf&password=15648'
        let arr1=url.split('?')
        console.log(arr1);
        let arr2=url.split('=')
        console.log(arr2);
</script>

4.str.substr(起始位置,街区长度) 截取部分字符串

<script>
 console.log(str.substr(13,5)); //从第十个下标开始,截取5个字
        // 大小写转换 :中文没有大小写
        // toLocaleUpperCase()
        // toLocaleLowerCase()
        console.log('sadjbJHADJAsjkdn'.toLocaleUpperCase());//大写
        console.log('sadjbJHADJAsjkdn'.toLocaleLowerCase());//小写
</script>

原型函数

<script>
/* 需求 :  需要创建很多个对象 （姓名、年龄、性别） */
        //
        function Person(name,age,sex){
            //(1)创建空对象   {}
           
            //(3)对象赋值
            p.name = name
            p.age = age
            p.sex = sex
            //(4)返回这个对象 
            return p
        }
       //    调用函数
        let p1 = new Person('张三',20,'男')
        console.log(p1)
</script>

构造函数new原理

1.工厂函数(了解) :

2.构造函数 : 使用new 关键字调用一个函数

3.构造函数new工作原理(重点)

(1)创建空对象

(2)this指向对象

(3)对象赋值

(4)返回这个对象

4.构造函数new在使用时需要注意的地方(拓展)

(1) 构造函数首字母一般为大写,为了提醒调用者记得加new

(2) 如果手动在构造函数内添加return

return 值类型:无效还是返回new创建的对象

return 引用类型有效会覆盖new创建的对象

new工作原理

3.构造函数new工作原理(重点)

(1)创建空对象

(2)this指向对象

(3)对象赋值

(4)返回这个对象

<script>
        /* 
        1.工厂函数(了解) : 
        2.构造函数 :  使用new 关键字调用一个 函数
        3.构造函数new工作原理(重点)
        (1)创建空对象
        (2)this指向对象
        (3)对象赋值
        (4)返回这个对象
        4.构造函数new在使用时需要注意的地方(拓展)
        (1) 构造函数首字母一般为大写,为了提醒调用者记得加new
        (2) 如果手动在构造函数内添加return
        return 值类型:无效 还是返回new创建的对象
        return  引用类型 有效 会覆盖new创建的对象
        */
//    构造函数
        function Person(name,age,sex){
            //(1)创建空对象   {}
            //(2)this指向这个对象  this = {}
            //(3)对象赋值
            this.name = name
            this.age = age
            this.sex = sex
            //(4)返回这个对象 return this
        }

        let p1 = new Person('张三',20,'男')
        console.log(p1)
  
        // // // 工厂函数 :  用于创建对象的函数
        // function createPerson(name,age,sex){
        //     //1.创建对象
        //     let p = {}
        //     //2.给对象赋值
        //     p.name = name
        //     p.age = age
        //     p.sex = sex
        //     //3. 返回对象
        //     return p
        // }
        // // let p1 = createPerson('张三',20,'男')//没有return 就会返回一个undefined
        // let p2 =new createPerson('李四',22,'女')//空对象,new自动创建对象
        // console.log(p2)  
        // console.log(p1,p2)
        /*
        数组 new Array()
        对象 new Object() 
        */
    </script>

原型对象01（构造函数资源浪费）

1.原型对象是什么? : 任何函数在声明的时候，系统会自动帮你创建一个对象，称之为原型对象
2.原型对象作用? : 解决内存浪费+变量污染
3.原型对象相关三个属性
//(2) 使用全局函数,解决内存浪费
// 弊端造成变量污染
// (3)使用对象解决内存浪费+变量污染

原型对象和构造函数里面的this都指向实例对象

<script>
     /* 
        1.原型对象是什么? : 任何函数在声明的时候，系统会自动帮你创建一个对象，称之为原型对象
        2.原型对象作用? :  解决内存浪费+变量污染
        3.原型对象相关三个属性
        */
      //(2) 使用全局函数,解决内存浪费
    // 弊端 造成变量污染
// (3)使用对象 解决内存浪费+变量污染
const obj={
       eat: function(){
         console.log('吃东西');
       },
       learn:function(){
         console.log('学习');
       }
      }
     function Person(){
       this.name=name
       this.age=age
       this.eat=eat
       this.learn=learn
       }
       let p1=new Person('张三',20)
       let p2=new Person('李四',20)

    //  function Person(){
    //    this.name=name
    //    this.age=age
    //   this.eat=function(){
    //     console.log('吃东西');
    //   }
    //    }
    //    let p1=new Person('张三',20)
    //    let p2=new Person('李四',20)
      //  p1和p2都有eat方法,并且代码一致 但是他们不是同一个方法
      // 虽然 p1和p2的代码一直,但是他们两个函数在堆中是两个不同的堆地址
    //  引用类型: 数组对象 {}[]
    // 知识易错误区 引用类型只比较地址,不比较值 不能因为值相同,就认为引用类型地址相同
let arr1=[10,20,30]
let arr2=[10,20,30]
arr1[0] ==arr2[0]  //true 比较的时数字类型
      console.log(arr1==arr2);//false 
    </script>

原型对象02（原型对象）

<script>
       /* 
        1.原型对象是什么? : 创建函数的时候，系统会自动帮你创建一个对象，称之为原型对象
        2.原型对象作用? :  解决内存浪费+变量污染
        3.原型对象相关三个属性 描述构造函数 原型对象  实例函数之间的关系
        */
    //1. 构造函数  父
  function Person(name,age){
 this.name=name
 this.age=age
  }
  // 2.原型对象 母
  Person.prototype.eat=function(){
    console.log('吃东西');
  }
  Person.prototype.learn=function(){
    console.log('学习');
  }  
   //3.实例对象  子
   let p1=new Person('张三',30)
   let p2=new Person('李四',30)
   console.log(p1,p2); 
   p1.eat
   p2.learn
    </script>

prototype :属于构造函数指向原型函数

//   构造函数
function Person(){
    this.name=name
}
    //原型对象
    Person.prototype.eat=function(){
console.log('吃东西');
    }    
// 实例对象
let p1=new Person('张三',18)
console.log(p1);

__proto_:属于实例对象指向原型对象

<script>
        /* 
        1.原型对象是什么? :  任何函数在创建的时候,系统会自动的创建一个对象,叫做原型对象
        2.原型对象作用? : 
        3.原型对象相关三个属性 : 构造函数 原型对象 实例对象
        prototype :属于构造函数  指向原型函数
        __proto_:属于实例对象 指向原型对象   
            
        */    
//   构造函数
function Person(){
    this.name=name
}
    //原型对象
    Person.prototype.eat=function(){
console.log('吃东西');
    }    
// 实例对象
let p1=new Person('张三',18)
console.log(p1);
/* 
__proto_属于实例对象 指向原型对象
实际开发中__proto_不能使用的,因为不是ECMA标准语法
学习阶段,为了理解原型 ,可以适当使用
*/
p1.eat()//p1.__proto_.eat()
    </script>

1.原型对象是什么? : 任何函数在创建的时候,系统会自动的创建一个对象,叫做原型对象

2.原型对象作用? :

3.原型对象相关三个属性 : 构造函数原型对象实例对象

prototype :属于构造函数指向原型函数

作用解决构造函数内存浪费+变量污染

__proto_:属于实例对象指向原型对象

作用让实例对象直接使用原型的成员(函数+属性)

constructor 属于原型对象,指向构造函数

让实例对象知道自己的构造函数是谁

 <script>
        /* 
        1.原型对象是什么? :  任何函数在创建的时候,系统会自动的创建一个对象,叫做原型对象
        2.原型对象作用? : 
        3.原型对象相关三个属性 : 构造函数 原型对象 实例对象
        prototype :属于构造函数  指向原型函数
           作用  解决构造函数内存浪费+变量污染
        __proto_:属于实例对象 指向原型对象
        作用 让实例对象直接使用原型的成员(函数+属性)   
        constructor 属于原型对象,指向构造函数    
        让实例对象知道自己的构造函数是谁
        */    
//   构造函数
function Person(){
    this.name=name
}
    //原型对象
    Person.prototype.eat=function(){
console.log('吃东西');
    }    
    // 
    console.log(Person.prototype.constructor);//person
// 实例对象
let p1=new Person('张三',18)
console.log(p1);
// 查看p1的原型
console.log(p1.__proto_.constructor);//Person
console.log(p1._proto_===Person.prototype);true 
    </script>

静态成员与实例成员

<script>
       /* 
       静态成员：  函数的属性
       实例成员：  实例对象的属性
       */
      let Person={
          name:'张三',
          age:18,
          gender:'男'
      }
      for(let key in person){
          console.log(person[key]);
      }
    //    Object.values(对象名)
    console.log(Object.values(person));
    </script>

this 指向的 eat 所返回出来的值为eat所存储的地址

p1在栈中所存储的值为p1运行过后所存储在栈的地址

p2在栈中所存储的值为p2运行过后所存储在栈的地址

虽然p1 p2都有eat方法但是两者在栈中所存储的地址是不同的

p1的 this.eat == p2的this.eat //false