JavaScript 高级篇-01 (面向对象/构造函数/原型对象/实例对象)

最新推荐文章于 2024-06-14 15:02:13 发布
最新推荐文章于 2024-06-14 15:02:13 发布
阅读量531 收藏
点赞数
分类专栏： JavaScript 高级篇 文章标签： javascript 开发语言 ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/FellAsleep/article/details/122115726
版权

1. 面向对象编程

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

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

2.理解什么是对象

  • 对象的本质是程序代码与现实世界沟通的一座桥梁。它有两种含义
    • 对象：是一种数据类型（存储数据的容器），以键值对的形式存储数据
    • 对象：对现实世界实物的一种抽象。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    
<script>
    /*1.面向对象编程与面向过程编程并不是一门技术，而是一种解决问题的思路和方式
            面向对象：注重的是结果
            面向过程：注重的是过程
     */

    //举例：做饭
    //1.1 面向过程：注重的是过程
    //买菜
    //洗菜
    //切菜
    //开火热锅
    //放油
    //把菜放到锅里炒
    //放盐，醋，酱油
    //把菜装到盘子里

    //1.2 面向对象：注重的是结果
    //不想自己做，找一个专业的对象来解决
    //地沟油一条街的厨师们

    /*是不是有了面向对象就不需要面向过程了呢？，不是，面向对象其实是对面向过程的一个封装 */

    /*2.理解什么是对象*/

    //2.1 对象是对单个实物的抽象     --------万物皆对象
    /*
    一台车： 特征：品牌 价格 颜色 轮子数量              行为：加速  刹车
    一个人： 特征：姓名 身高 年龄 性别                     行为：吃饭 睡觉 敲代码
    一条狗： 特征：品种 颜色  性别                            行为：拉屎 撒尿  打招呼
     */

    //2.2  对象是一个存储数据的容器    ------------键值对的形式存储数据
    let student = {
        name:'张三',
        age:18,
        eat:function (  ) {
            console.log ( "大吉大利，今晚吃鸡" );
        }
    }

    //2.3 如何寻找对象：名词提炼法
    //小明在公交车上牵着一条叼着热狗的狗

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

2. 内置对象:

  • 内置对象api： js作者提前写好的对象，里面有一些预先定义的方法，我们直接使用即可，无需关心原理
    • api : 预先定义的函数
  • 学习内置对象： 不需要死记硬背，忘记了随时查阅文档。 用多了自然就记住了，熟能生巧

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

1.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. 工厂函数(了解)

   <script>
        // 解决代码冗余方案: 封装函数
        // 什么是工厂函数 : 创建多个对象的函数
        function creatPerson(name, age, sex) {
            // 1.声明对象
            let p = {
                // 2.属性名:属性值
                namer: name,
                ager: age
            }
            //2.对象.属性名 = 属性值
            p.sex = sex
            // 3. 返回值
            return p
        }

        let zxy = creatPerson('张学友', 18, '男')
        let ldh = creatPerson('刘德华', 20, "男")
        console.log(zxy);
        console.log(ldh);
    </script>

4. 构造函数(重点)

  • 构造函数:作用于工厂函数一致,但是代码更少
  • 构造函数:使用new来调用的函数

new 工作原理

  • 1.创建一个空对象{}
  • 2.this指向这个对象 this.属性名 = {}
  • 3.对象赋值
  • 4.返回这个对象

new 细节:

  • (1)构造函数首字母大写:为了提醒别人不要忘记new关键字
  • (2)构造函数里主动写了return:
    如果是值类型:无效 继续返回new创建的对象
    引用类型:有效 会覆盖new创建的对象
 function Person(name, age) {
            // 1.创建一个空对象{}
            // 2.this指向这个对象 this.属性名 = {}
            // 3.对象赋值
            this.name = name
            this.age = age
            //4.返回这个对象
        }

        let zs = new Person('张三', 18)
        let l4 = new Person('李四', 19)
        console.log(zs, l4);

在这里插入图片描述

5.原型对象

1.什么是原型对象：

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

2.原型对象作用:

  • 解决内存浪费+ 变量污染

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

  • 构造函数自身：构造函数名.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.学习目标
            a. 原型 ：每一个函数被创建的时候，系统都会自动创建与之对应的对象，称之为原型对象
            b. 作用： 解决 构造函数   （1）内存资源浪费 （2）全局变量污染
            c. 怎么用： （1）构造函数.prototype  (2)实例化对象直接访问

        2.学习路线
            (1)复习js构造函数new的工作原理
            (2)引出构造函数的弊端 ： 浪费内存性能
            (3)引出解决方案 ： 函数 ->全局变量污染
            (4)引出对象 -> 内存资源浪费 + 全局变量污染
            (5)引出原型对象
        
        */  
        

        //1.构造函数 ：  调用一个函数使用了new关键字
        // 构造函数中的方法 弊端 ： 浪费内存资源

        /*new关键字工作原理 
            //(1)创建空对象  {}
            //(2)this指向这个对象 this = {}
            //(3)执行赋值代码
            //(4)返回这个对象  return this
        */
        // function Person(name,age){
        //     //(1)创建空对象  {}
        //     //(2)this指向这个对象 this = {}
        //     //(3)执行赋值代码
        //     //(4)返回这个对象  return this
        //     this.name = name;
        //     this.age = age;
        //     this.sayHi = function(){
        //         console.log('猴赛雷呀，我爱坤坤哟');
        //     }
        // };

        // let p1 =  new Person('班长',28);
        // console.log(p1);
        // p1.sayHi();

        // let p2 = new Person('班花',18);
        // p2.sayHi();
        // //每一个对象的方法都不是同一个
        // console.log(p1.sayHi == p2.sayHi);//false


        //2. 使用全局函数 ： 解决内存资源浪费问题

        //弊端 ： 全局变量污染的问题

        // function fn(){
        //     console.log('猴赛雷呀，我爱坤坤哟');
        // };

        // function eat(){
        //     console.log('中午我要以面向对象的形式吃个饭'); 
        // };

        // function Person(name,age){
        //     //(1)创建空对象  {}
        //     //(2)this指向这个对象 this = {}
        //     //(3)执行赋值代码
        //     //(4)返回这个对象  return this
        //     this.name = name;
        //     this.age = age;
        //     this.sayHi = fn;
        //     this.eat = eat;
        // };

        // let p1 =  new Person('班长',28);
        // console.log(p1);
        // p1.sayHi();

        // let p2 = new Person('班花',18);
        // p2.sayHi();
     
        // console.log(p1.sayHi == p2.sayHi);//true



        //3.使用对象 解决 ： （1）解决内存资源浪费  （2）全局变量污染
        //弊端 ： 对象自身还是全局的，造成新的全局变量污染

        // let obj = {
        //     fn:function(){
        //         console.log('猴赛雷呀，我爱坤坤哟');
        //     },
        //     eat:function(){
        //         console.log('中午我要以面向对象的形式吃个饭'); 
        //     }
        // }
        

        // function Person(name,age){
        //     //(1)创建空对象  {}
        //     //(2)this指向这个对象 this = {}
        //     //(3)执行赋值代码
        //     //(4)返回这个对象  return this
        //     this.name = name;
        //     this.age = age;
        //     this.sayHi = obj.fn;
        //     this.eat = obj.eat;
        // };

        // let p1 =  new Person('班长',28);
        // console.log(p1);
        // p1.sayHi();

        // let p2 = new Person('班花',18);
        // p2.sayHi();
     
        // console.log(p1.sayHi == p2.sayHi);//true


        /*     4.使用原型 ：             */
        
        /* 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>

6.构造函数 原型对象 实例对象的关系

  • 1.prototype:属于构造函数,指向原型对象
    作用:解决内存浪费+变量污染
  • 2.proto:属于实例对象,指向原型对象
    作用:实例对象访问原型对象的成员
  • 3.constructor:属于原型对象,指向构造函数
    作用让实例对象知道自己是谁创建的
  //1.构造函数

        function Person(name, age) {
            this.name = name
            this.age = age
        }
        //2.原型对象
        Person.prototype.eat = function () {
            console.log('鸡腿');
        }
        //3.实例对象
        let p = new Person('张三', 19)
        console.log(p);
        console.log(p.eat);

1.构造函数:每一个构造函数都有一个属性prototype,指向原型对象
2.原型对象:每一个原型对象都有一个属性constructor,指向构造函数
3.实例对象:每一个实例对象都有一个属性_proto_,指向原型对象
先有构造函数 再有原型对象 再有实例对象
在这里插入图片描述

A-sleep
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript 面向对象程序设计详解【类的创建、实例对象、构造函数、原型等】
10-15
主要介绍了JavaScript 面向对象程序设计,结合具体实例形式详细分析了JavaScript面向对象程序设计中类的创建、实例对象、构造函数、原型等相关概念、原理、用法及操作注意事项,需要的朋友可以参考下
JavaScript原型对象、构造函数和实例对象功能与用法详解
10-18
主要介绍了JavaScript原型对象、构造函数和实例对象功能与用法,结合实例形式分析了javascript面向对象相关原型对象、构造函数及实例对象的概念、功能与相关使用技巧,需要的朋友可以参考下
构造器、原型对象、实例对象
weixin_43617206的博客
04-18 132
面向过程 函数封装的缺点 1、函数内部定义的局部作用域变量，函数外部无法直接使用 2、函数调用时，会占用大量的系统内存，容易造成数据溢出即数据泄露，被攻击 3、函数一般只是封装一些模块化的功能，由此多个模块化功能需要多个模块式函数，但多次使用同一个功能时，将会创建多个功能函数所占用的系统空间，对内存是一种浪费 面向对象 核心 将多个模块化的函数，存储到原型对象中，将多次即使用次数高的变量或函数，存...
javascript面向对象（一）：object基础以及构造函数详解
T型人小付的博客
07-04 858
或许在我们平时的项目中，js的面向对象使用的并不多。但是一旦项目变得庞大，我们可能会发现定义了越来越多结构功能相似的对象，这时候如果能引入面向对象的思想，会对项目的代码结构进行非常大的优化。追根溯源，既然说到面向对象，就先从js中的object这个对象数据类型说起。 文章目录object数据类型内存清理机制this关键字构造函数和new关键字Json格式转换总结参考 object数据类型 和另外几种单一类型的基本数据不同，object类型用来存储一系列键值对。 声明 有如下两种方式去声明一个object对象
构造函数,原型对象,实例对象的关系
li5466667的博客
04-11 708
构造函数,原型对象,实例对象的关系
【每日知识】原型对象
qq_46580087的博客
03-08 341
一个真正想成功的人是勤奋与努力的，而不是躺在床上说大话。·
day17（面向对象）
m0_49992474的博客
12-22 102
面向对象 一、面向对象 1、概念 面向对象（Object Oriented，OO）是软件开发方法。面向对象的概念和应用已超越了程序设计和软件开发，扩展到如数据库系统，交互式界面，应用结构，应用平台，分布式系统，网络管理结构，CAD技术，人工智能等领域。面向对象是一种对现实世界理解和抽象的方法，是计算机编程技术发展到一定阶段后到产物，是一种高级的编程思想。 2、面向对象和面向过程区别 面向过程 强调的是功能行为 关注的是解决问题需要哪些步骤 回想下前面我们完成一个需求的步骤： 首先搞清楚我们要
JavaScript 基础之对象以及构造函数
u011863822的博客
11-17 1651
现在了解JavaScript对象的构造方式，毕竟后面可以聊一些原型和原型链这些都是基础。 var obj={ name:"张三"， year:12 } var obj1={ name:"李四"， year:13 } 当然也可以通过对象.属性对其属性重新赋值。用这个特性也可以这样定义两个对象 var obj={}; //或者 var obj=new Object() 其实new Object() 和直接用{}没有什么本质区别，所以一般直接用{} obj.name="张三"
一文秒懂JavaScript构造函数、实例、原型对象以及原型链
10-14
主要介绍了一文秒懂JavaScript构造函数、实例、原型对象以及原型链的相关知识，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
举例说明JavaScript中的实例对象与原型对象
01-19
constructor指向对象的构造函数，prototype指向使用构造函数创建的对象实例的原型对象。 function Person(){ } var person = new Person(); Person.prototype = { constructor : Person, name : 'zxs', age :...
详解JavaScript创建对象——构造函数模式
林木木的博客
07-26 2258
JavaScript面向对象篇——构造函数
javascript面向对象（三）：class语法详解
T型人小付的博客
08-06 1553
在本系列的前两篇《javascript面向对象（一）：object基础以及构造函数详解》和《javascript面向对象（二）：prototype以及继承详解》中，我们已经对JS中面向对象的基础知识了解的八九不离十了，但是其实都是为了给本系列的最后一篇做铺垫。这一篇就让我们一起学习class语法，对前面的知识进行一次升华。 文章目录class语法匿名classGetter/Setter类属性this丢失class的继承重写方法重写构造函数静态属性和方法私有和受保护的属性及方法instanceofMixin
JavaScript 面向对象之构造函数+成员函数详解
wml
10-09 3223
对象—对象（成员）函数的初步介绍 在某些情况下，我们要需要定义对象函数。比如人对象：除了有一些属性外（成员变量表示的年龄，姓名……），我们人对象还有一些行为比如：可以说话，跑步……，通过学习，我们人还可以做算术题。这是就要用函数才能完成。现在要对Person对象完善： ①添加speak函数，输出我是一个好人 ②添加jisuan函数，可以计算从1+...+1000的结果 ③修改jisuan函
类的原型对象
xm_jp的博客
08-04 522
什么是原型对象？ 原型对象----构造函数每次在声明的时候,系统会自动的帮我们创建一个与之对应的对象 prototype---- 属于构造函数,指向原型对象 __proto__----属于构造函数的实例化对象,指向原型对象 为什么使用原型对象？ 定义一个构造函数 function Student(name, age, gender) { // 通过this给类添加属性 this.name = name this.age = a
JS中一个dom元素能绑定多少事件
ggq53219的博客
06-10 564
在JavaScript中，一个DOM元素可以绑定的事件数量并没有明确的限制，这主要取决于浏览器的实现和内存限制。然而，在实际应用中，为同一个DOM元素绑定过多的事件监听器可能会导致性能问题，尤其是在事件处理函数执行复杂操作的情况下。总之，虽然JavaScript中DOM元素可以绑定的事件数量没有明确的限制，但在实际应用中应注意避免过度绑定和优化事件处理函数，以确保良好的性能和用户体验。
基于JavaScript 如何实现爬山算法以及优化方案
乐闻世界
06-10 1436
爬山算法（Hill Climbing Algorithm）是一种常见的启发式搜索算法，常用于解决优化问题。其核心思想是从一个初始状态出发，通过逐步选择使目标函数值增大的邻近状态来寻找最优解。接下来，我们将通过 JavaScript 实现一个简单的爬山算法，帮助大家理解其原理和应用。从一个初始状态开始。评估当前状态的目标函数值。在当前状态的邻居中选择一个目标函数值更大的状态。如果找到了更优的邻居，则移动到该邻居并重复步骤2和步骤3。如果没有更优的邻居，则算法结束，当前状态即为局部最优解。
HTML入门教程：深度解析HTML，开启你的前端技术之旅
zhangwenok的博客
06-14 1270
HTML（HyperText Markup Language，超文本标记语言）是前端开发的基础，它负责构建网页的结构和内容。作为前端技术栈的基石，HTML的掌握程度直接影响到网页的开发效率和用户体验。本教程将带你从零开始，逐步深入了解HTML的各个方面，帮助你打下坚实的前端技术基础。HTML是一种用于创建网页的标准标记语言，它通过一系列的元素（elements）和标签（tags）来定义网页的结构和内容。HTML文档由一系列的元素组成，这些元素通过标签来标识。
Harmony 开发的艺术 面向对象
不懂先生的博客
06-13 1063
然后你可以创建多个子类，如“圆形”、“矩形”和“三角形”，它们都继承自“形状”类并实现了自己的“绘制”方法。尽管每个对象的类型可能不同（圆形、矩形、三角形等），但由于它们都继承了“形状”类并实现了相同的“绘制”方法，因此你可以通过父类引用来统一调用它们的方法。然后你可以创建一个“狗”类，它继承自“动物”类，并添加或覆盖一些特定的属性和方法（如“叫”和“摇尾巴”）。所以面向对象的三大特征（封装、继承、多态）在java语言中很容易实现的设计，搬到早期的JavaScript中，就变噩梦一样的存在。
盲盒App开发时有哪些技术框架可以借鉴
最新发布
bytekj的博客
06-14 510
在开发盲盒App时，可以根据项目需求和团队技术栈选择合适的技术框架。前端可以选择微信小程序框架、React Native或Vue.js等；后端可以选择Node.js或Spring Boot等；数据库可以选择MySQL或MongoDB等。同时，还需要考虑缓存、消息队列、支付和物流接口等其他技术来完善应用的功能和性能。
构造函数是构造函数实例对象的原型吗
05-10
实例对象在创建时会继承构造函数原型的属性和方法，这些属性和方法可以通过实例对象来访问和使用，但实例对象并不是构造函数原型的实例化对象。 需要注意的是，JavaScript 中的继承是通过原型链来实现的，实例对象...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值