前端学习:JS(面向对象)代码笔记

最新推荐文章于 2023-05-16 22:53:02 发布
最新推荐文章于 2023-05-16 22:53:02 发布
阅读量269 收藏
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44204058/article/details/101503490
版权

前端学习:JS(面向对象)代码笔记

前端学习：JS面向对象知识学习（图解）

创建类和对象

创建对象方式1调用Object函数

<body>
</body>
<script type="text/javascript">

        //新建英雄:刘备
        var hero=new Object();
        hero.name='刘备';
        hero.blood=100;
        hero.weapon='双股剑';
        hero.attack=function(){
            return this.name+'使用'+this.weapon+'发起了攻击';
        };
        
        alert(hero.attack());
        
        
        var hero2=new Object();
        hero2.name='关羽';
        hero2.blood=100;
        hero2.weapon='青龙偃月刀';
        hero2.attack=function(){
            return this.name+'使用'+this.weapon+'发起了攻击';
        };
        
        alert(hero2.attack());
        
</script>
View Code

创建对象方式2使用字面形式

<body>
</body>
<script type="text/javascript">

         var stu1={
              name:'张三',
              age:28,
              sex:'男',
              show: function(){
                  return '我的名字是:'+this.name+'\n我的性别是:'+this.sex+'\n我的年龄是:'+this.age;
              }
         };
         
         alert( stu1.show()  );
         
         var stu2={
                 name:'李四',
                 age:18,
                 sex:'女',
                 show: function(){
                     return '我的名字是:'+this.name+'\n我的性别是:'+this.sex+'\n我的年龄是:'+this.age;
                 }
         };
            
         alert( stu2.show()  );
        
</script>
View Code

创建对象方式3使用工厂函数创建多个对象

<body>
</body>
<script type="text/javascript">

         //形参
         var createPerson=function(name,age,sex){
                 var person = new Object();
                 person.name=name;
                 person.age=age;
                 person.sex=sex;
                 person.show=function(){
                     return '我的名字是:'+this.name+'\n我的性别是:'+this.sex+'\n我的年龄是:'+this.age;
                 }
                 return person;
         };
         
         
         var p1=createPerson('张三',18,'男');
         var p2=createPerson('李四',19,'男');
         var p3=createPerson('王五',20,'男');
         
         alert(p1.show());
         alert(p2.show());
         alert(p3.show());


</script>
View Code

创建对象方式4调用构造函数创建对象

<body>
</body>
<script type="text/javascript">

        //定义一个Person类
        function Person(name,age,sex){
             //this代表的是当前对象
             
             //当前对象的名字=需要设置的名字
             this.name=name;
             this.age=age;
             this.sex=sex;
             
             this.show=function(){
                 return '我的名字是:'+this.name+'\n我的性别是:'+this.sex+'\n我的年龄是:'+this.age;
             }
             
        }

        //创建三个对象
        var p1=new Person('张三',27,'男');
        var p2=new Person('李四',28,'男');
        var p3=new Person('王五',29,'男');
        
        
        alert(p1.show());
        alert(p2.show());
        alert(p3.show());
        
        console.log(p1.show===p2.show);
        console.log(p1.show===p3.show);
         

</script>
View Code

静态成员和实例成员

静态成员和实例成员

<body>
</body>
<script type="text/javascript">

        //静态成员    类名.成员名  
        /*
        var MyMath={
             PI:3.1415,
             MAX:function(){
                 return 9999;
             },
             MIN:function(){
                 return 1;
             }
        };
        
        
        console.log(MyMath.PI);
        console.log(MyMath.MAX());
        console.log(MyMath.MIN());
        */                
        //~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
        
        //实例成员   对象名.成员名 
        function Student(name,age,sex){
            
            this.name=name;
            this.age=age;
            this.sex=sex;
            
            this.show=function(){
                return 'name='+name+'\nage='+age+'\nsex='+sex;
            }
        }
        
        //通过Student类的构造函数创建一个具体的实例对象
        var stu1=new Student('小红帽',18,'女');
        var stu2=new Student('大灰狼',28,'男');
        
        
        console.log('姓名:'+stu1.name );
        console.log('姓名:'+stu2.show()  );     
        
</script>
View Code

原型

使用全局函数

<body>
  
</body>
<script type="text/javascript">

            function Student(name,age,sex){
                
                this.name=name;
                this.age=age;
                this.sex=sex;
                this.show=show;
                
            }
            //全局函数
            var show=function(){
                return 'name='+name+'\nage='+age+'\nsex='+sex;
            };
            
            var stu1=new Student("DICK",22,"男");
            var stu2=new Student("DICK",22,"男");
            
            //比较的是这两个对象中show方法保存的内存地址
            console.log(stu1.show===stu2.show);      //true

</script>
View Code

使用构造函数的原型解决方法的重复创建问题

<body>
  
</body>
<script type="text/javascript">

            //得到一个结论:以后我们在定义一个类的函数的时候,不要定义在该类的构造函数中,应该
            //定在该类的构造函数的原型中,这样更加高效一些.
         

            //Student类的构造函数
            function Student(name,age,sex){
                
                this.name=name;
                this.age=age;
                this.sex=sex;
                
            }
            
            //向Student类的构造函数的原型中插入show方法
            Student.prototype.show=function(){
                return '在原型中生成的:   name='+this.name+'\nage='+this.age+'\nsex='+this.sex;
            };
    
            
            var stu1=new Student("DICK",22,"男");
            var stu2=new Student("KING",22,"男");
            
            console.log(stu1.show());
            console.log(stu2.show());
            
            //比较的是这两个对象中show方法保存的内存地址
            console.log(stu1.show===stu2.show);      //true
            

</script>
View Code

对象的原型

<body>
</body>
<script type="text/javascript">

            //Student类的构造函数
            function Student(name,age,sex){
                
                this.name=name;
                this.age=age;
                this.sex=sex;
                this.eat=function(){
                    console.log('我在构造函数中吃东西');
                }            
                
            }
            
            Student.prototype.eat=function(){
                console.log('我在构造函数的原型中吃东西');
            }    
            
            //构造方法的原型      Student.prototype 
            //对象的原型          对象名.__proto__
            var stu=new Student("KING",22,"男");
            
            //我们发现构造方法的原型和对象的原型指向的是同一个地址 
            //console.log(stu.__proto__===Student.prototype);
            
            
            
            //当构造函数中和构造函数的原型中同时定义了同一个方法,这个时候会调用构造函数中的eat方法.
            stu.eat();
            
</script>
View Code

属性的查找规则

<body>
</body>
<script type="text/javascript">
        //Student类的构造函数
        function Student(name,age,sex){
            
            this.name=name;
            this.age=age;
            this.sex=sex;
            
        }
        
        //在Student类的构造函数的原型中存入属性
        Student.prototype.txt='xxx';
        
        var stu1=new Student("KING",22,"男");
        //该段代码并没有修改掉原型中txt的值,是在在stu1对象中新建了一个txt属性=abc
        //stu1.txt='abc';
        Student.prototype.txt='ABC';
        var stu2=new Student("KING",22,"男");
        
        console.log('stu1='+stu1.txt);    //abc
        console.log('stu2='+stu2.txt);    //xxx    
        
</script>
View Code

在原型中写入多个方法属性-精简写法

<body>
</body>
<script type="text/javascript">

     /*
     function Person(){
         
     }
     Person.prototype.eat=function(){
         console.log('eat');
     }
     
     Person.prototype.run=function(){
         console.log('run');
     }
     
     Person.prototype.sleep=function(){
         console.log('sleep');
     }
     
     Person.prototype.from='地球 ';
     
     var p1=new Person();
     p1.eat();
     p1.run();
     p1.sleep();
     */

     function Person(){
         
     }
     Person.prototype={
            from: '地球',
            eat: function(){
                 console.log('eat');
            },
            run: function(){
                    console.log('run');
               },
               sleep: function(){
                 console.log('sleep');
            }
     };
     
     var p1=new Person();
     p1.eat();
     p1.run();
     p1.sleep();
     alert(p1.from);
 
</script>
View Code

原生对象的原型

<body>
</body>
<script type="text/javascript">
        //Array类的对象
        var arr=[];  
        
        console.log(Array.prototype===Array.prototype);   //true
        //          对象的原型      构造函数的原型    
        console.log(arr.__proto__===Array.prototype);     //true
        
        console.log(Object.prototype===Array.prototype);  //false   
        
</script>
View Code

拓展原生对象中原型的方法

<body>
</body>
<script type="text/javascript">
        var arr=[21,22,43,67,12,34,20,10];
        console.log('排序前:  '+arr);
        arr.sort();
        console.log('排序后:  '+arr);
        
        //求出数组中所有的偶数的和
        //拓展Array类构造函数的原型中的方法: getSum()
        
        Array.prototype.getSum=function(){
            var sum=0;   
            for(var i=0;i<this.length;i++){
                if(this[i]%2==0){
                    sum+=this[i];
                }
            }
            return sum;
        }
        
        //错误的写法！！！！！！
        /*
        Array.prototype={
              getSum:function(){
                  var sum=0;   
                for(var i=0;i<this.length;i++){
                    if(this[i]%2==0){
                        sum+=this[i];
                    }
                }
                return sum;
              }
        };
        */        
        
        console.log(arr.getSum());
        
</script>
View Code

案例：随机生成方块

 

案例：贪吃蛇

 

菜鸟-传奇
关注
前端学习笔记：JavaScript类和对象
ycsss的博客
11-24 689
黑马Pink老师的javaScript进阶面向对象ES6教程： https://www.bilibili.com/video/BV1Kt411w7MP?p=1 本文在原教程的基础上对目录结构进行了排序和裁剪。针对视频中的讲解、案例、PPT和源码材料作了一些总结，仅用于个人复习以及学习交流分享。 目录1. 面向对象编程1.1 两大编程思想1.2 面向过程编程 POP(Process oriented programming)1.3 面向对象编程 OOP(Object Oriented Programming)
黑马程序员前端JavaScript高级——ES6学习笔记
weixin_44566194的博客
10-29 2989
黑马程序员前端教程的PPT和代码学习笔记，里面包含了面向对象的编程思想，以及构造函数，类和对象、原型链、箭头函数、数组和字符串新增方法、函数递归、深拷贝浅拷贝、正则表达式等知识点。本文是对CSDN其他博主记录的一个补充，因为黑马也是今年才陆续补充一些知识点的视频的，本文将其收录于此，雷同勿怪。
js实现面向对象基础代码
02-02
如果你读过extjs的原代码，一定知道它是基于面向对象思想代码。该代码不同于extjs,更加合理且容易理解。
JS 面向对象编程
zouzxxi的博客
05-16 526
挑战极限，无悔人生奋力拼搏进取，谱写风华篇章。
js面向对象编程代码
motian06的专栏
12-06 1683
Insert title here /* * 初探 */ //变量的定义 var name = 'xxx'; var email = 'xxx@163.com'; var website = 'http://baidu.com'; //对象的定义 var X = { name:'xxx', email:'xxx@163.com', website
JS面向对象编程
快乐江小鱼的博客
08-04 528
本文简单介绍JavaScript的面向对象编程
Js面向对象
qq_40781291的博客
02-26 119
Js中通过new创建一个对象时发生了什么 创建一个新的对象 将构造函数的作用赋给创建的新对象（将this指向新对象） 执行构造函数中的代码，为新创建的对象赋属性和方法 返回创建的对象 ...
Web前端JavaScript面向对象编程
09-27
这个笔记是我在B站根据Mosh的JavaScript面向对象编程教学视频中学习并记录的，里面有我记录的知识点，自己写的代码，还有小部分的截图。大家可以在学习这个内容的时候看一下我的笔记进行参考一下。 视频链接：...
前端JavaScript基础学习笔记案例
最新发布
08-02
个人在学习前端JavaScript时的学习笔记，内含JavaScript的中基础知识点，以及案例。里面有兼容市面上浏览器的方法 1.知识点包括：基础语法，字符串操作，object对象，DOM对象，BOM对象，offset，client，scroll对象...
h5前端学习笔记
03-21
7. **面向对象补充.md**：JavaScript支持面向对象编程，此文件可能探讨了类、构造函数、继承、封装等面向对象的概念和技巧。 8. **javascript时间戳和日期字符串相互转换.txt**：这部分内容可能讲解了JavaScript中...
代码详解：使用JavaScript进行面向对象编程的指南
读芯术的博客
11-18 997
全文共3525字，预计学习时长12分钟 图源：pexels 一切都从对象开始。 对象，即我们相互交流的一个载体，有其属性和方法。对象是面向对象编程的核心，不仅用于JavaScript，而且还适用于Java、C语言、C++等。不再考虑单个变量和函数，而选择自给型的对象。 以下是在讨论面向对象编程（OOP）时最常用到的概念： · 对象，属性，方法 · 类 · 封装 · 抽象 ...
编写面向对象的JS代码
weixin_30823001的博客
02-14 114
现在虽然Js的使用率依然很高，但是感觉他也会慢慢被其他前端框架所代替，相比于Typescript等直接面向对象的客户端语言，它显得比较繁琐和麻烦。 但是由于工作地缘故，对于js的使用率还是居高不下，这期间了解了一些编写优雅js代码的方法，放在这里慢慢积累，慢慢补充。 1.尽量使用对象，不要使用单独的方法 因为当方法多了的时候，就会显得很混乱，方法之间调用的关系也不易显示出来。 fu...
JS面向对象
LYM0411的博客
06-02 1238
js对象及面向对象
JavaScript 进阶 - 第3天
A
11-23 571
JavaScript 进阶 - 第3天 了解构造函数原型对象的语法特征，掌握 JavaScript 中面向对象编程的实现方式，基于面向对象编程思想实现 DOM 操作的封装。 了解面向对象编程的一般特征 掌握基于构造函数原型对象的逻辑封装 掌握基于原型对象实现的继承 理解什么原型链及其作用 能够处理程序异常提升程序执行的健壮性 一、面向对象 学习 JavaScript 中基于原型的面向对象编程序的`语法实现，理解面向对象编程的特征。 面向对象编程是一种程序设计思想，它具有 3 个显著的特征：封装、
js 面向对象编程实例
w632235548的专栏
01-18 8122
当我们在写js代码的时候，总是会想能否和java一样面向对象去编程，让人更易维护以及代码的分离。下面举一例说明：jsp页面如下<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>JSP Page</tit
JS-4种实现面向对象类的方法
Web_boom的博客
06-01 2748
我们在编写和维护复杂或庞大的代码时，必须使用模块化策略。目前，业界的主流做法就是采用"面向对象编程"。我们把模块中的属性及方法封装起来，日后使用将非常方便，也可以避免繁琐重复的工作。 然而，Javascript与其他语言（如 java）不同，它不支持"类"（class），导致传统的面向对象编程方法无法直接使用。本文总结了Javascript中实现面向对象类的4种方式以及它们的使用方法，供大家学习参考。在 ES6中， (类) 作为对象的模板被引入，可以通过 关键字定义类。它可以被看作一个语法糖，让对象原型的
人人都能看懂的JS学习笔记——JS面向对象程序设计（一）
甜妹的博客
11-17 3648
【理解面向对象编程】 首先，当你学习过面向对象编程时，别人一定会告诉你：“一切皆对象”。 “一切皆对象到底是什么意思？” 野生编程君的理解：对象的意思是具体的每个人，程序中一些的代码片段可以变成一个具体的人。这就是我对一切皆对象的解释。 那么，怎么样编写才能让一段代码创造出一个具体的人呢？这个过程就是面向对象程序设计的思路。 【大家总说：封装、继承、多态】 学习的时候，大家总说，面向对
前端学习：JS面向对象知识学习（图解）
菜鸟-传奇
09-26 208
前端学习：JS面向对象知识学习（图解） 前端学习:JS(面向对象)代码笔记 JS面向对象图解知识全览 创建类和对象 方式1：使用Object()函数 方式2：使用自变量 方式3：使用工厂函数 创建多个对象 方式4：构造函数 静态成员和实例成员 静态成员 实例成员 原型 构造函数的原型 内存图 方式一 方式二 方式三 ...
前端基础学习笔记：从JS到Node进阶
前端基础学习笔记是一份由作者精心整理的文档，主要涵盖了JavaScript和Node.js的学习内容，旨在帮助公司的前端开发人员系统地理解和掌握这两种关键技术。以下是部分内容的详细解读： 1. JavaScript基础知识： - **...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值