当前位置：首页 > news >正文

js常见知识点2.面向对象相关

news 来源：原创 2024/5/20 20:59:29

一、对象的概念

建议回复：

　　对象是一个整体，对外提供一些功能.

　　一切具有属性和方法的事物.

　　一切具有本质特征和行为的物质.

数据类型：

所有的基本数据类型都没有属性和方法.

所有的对象数据类型都有属性和方法.

函数和方法的区别：

　　方法属于函数，函数包含方法. 比如dancer是一个未婚男士，那他就是一个函数，人人都可以约他（调用），但是如果他结婚了，就是某个对象的方法了，只有他的对象能调用他。

二、类的概念

建议回复：

　　类是具有相同本质特征的一类事物的总称。js中的类 --- 构造函数

　　类和对象的区别：　　　

　　　　类是对象的抽象对象是类的实例（类是对象的抽象化，对象是类的具象化）.

　　　　先有对象，根据一类对象的共同特征抽象出类的概念.

三、面向对象

建议回复：

　　面向对象编程：是一种编程思想。

　　面向对象语言有：java、c++、.net、php等等。

　　面向过程语言有：c语言。

四、创建对象

　　创建对象的基本创建方式有两种：

　　第一种：　

    var obj = new Object();//定义对象
    　　obj.name = "dancer"; //定义对象属性
    　　obj.age = 12;//定义对象属性
    　　obj.walk = function(){  //定义对象的方法
       　　alert("dancer run almost every day!");
    　　}
    alert( obj.name );
    obj.walk();

　　第二种：

　　var car = {
   　　"name":"福特汽车",
      "color":"白色",
      "price":"15W",
      "description":function(){
          return `这是一辆${this.color}颜色,价格为${this.price}的${this.name} `;
      },
      "running":function(){
          return "汽车缓慢形式在人行道上";
      }
    };
    alert( car.description() );

　　注：上述第二种方式创建对象时格式与json格式的区别：严格的json对象只有属性，没有方法。

上述方式创建同类对象时，会产生重复的代码。所以来看下以下创建对象的方式：

　　（1）工厂模式　　　

    //模具
    function createObj(name,tel){
        //备料   ---   创建对象
        var obj = new Object();
        //加工   ---   为对象添加属性和方法
        obj.name = name;
        obj.tel = tel;
        obj.say = function(){
            return "hello，dancer";
        }
        //出厂   ---   将创建的对象返回
        return obj;
    }
    var obj1 = createObj("dancer1","999");
    var obj2 = createObj("dancer2","120");
    alert( obj1.name );
    alert( obj2.name );
    alert( obj1.say());

　　优点：工厂模式可以解决同类对象创建时重复代码写多次的问题

　　缺点：

　　不能确定某个对象属于哪一个类

　　一般一个对象是通过new关键字构造出来的，而工厂模式只是一个普通的函数的调用，不符合对象的创建规范。

　　（2）构造函数（面向对象中的类）　　　

　　　　构造函数中的属性叫做实例属性

　　　　构造函数中的方法叫做实例方法

　　　　为了和普通函数区分，一般构造函数的命名规范是：大驼峰 QianFengJiaoYu

　　　　基本上所有的对象都是通过构造函数创建出来的

　　　　构造函数中的this 指向的是构造函数执行时创建出来的那个对象。

　　 //定义一个构造函数
    function Animal(name,age,food){
        //构造函数中的this 指向的是  构造函数执行时创建出来的那个对象。
        this.name = name;
        this.age = age;
        this.food = food;
        this.eat = function(){
            return this.name + "正在吃" + this.food;
        }
    }
    
    var animal = new Animal("小白",2,"骨头");
    var animal2 = new Animal("小黑",1,"肉");
    alert( animal2.eat() );
    //方法被重复创建  空间不共享
    alert( animal.eat == animal2.eat );//false

　　　　优点：解决了工厂模式中存在的缺点，可以通过构造函数方式确定某个对象属于哪一个类

　　　　缺点：同类对象创建时，相同方法会重复创建，空间不共享

　　（3）原型 prototype　　　　

　　　　写在原型函数中的属性叫做原型属性

　　　　写在原型函数中的方法叫做原型方法

    function Student(){
        
    }
    Student.prototype.name = "dancer"; //原型属性
    Student.prototype.age = 18;
    Student.prototype.study = function(){//原型方法
        return "dancer在学习";
    }
    var stu = new Student();
    var stu2 = new Student();
    alert(stu.name);//dancer
    alert(stu2.name);//dancer
    alert( stu.study() );
    alert( stu.study == stu2.study );//true

　　　　优点：解决了相同对象创建时方法重建的问题

　　　　缺点：多个对象的属性值相同，不能更改

　　（4）混合　　　

　　　　将属性写成构造函数的实例属性

　　　　将方法写成构造函数的原型方法

    function Teacher(name,salary){
        this.name = name; //实例属性
        this.salary = salary;
    }
    Teacher.prototype.teach = function(){//原型方法
        return "dancer在讲课....";
    }
    Teacher.prototype.eat = function(){
        return "dancer在吃冰激凌....";
    }
    
    var t = new Teacher("dancer",1000);
    
    alert( t.name );
    alert( t.eat() );

　　下面来看看几个用面向过程和面向对象做的几个案例：

　　案例一：选项卡

　　面向过程的思想：　　

<style>
    *{margin: 0; padding: 0; font-family: "微软雅黑";font-size: 14px;}
    #container{
        width: 398px; 
        margin: 100px auto;}
    #container a{
        display:block ;
        width: 98px; 
        height: 42px; 
        line-height: 42px; 
        text-align: center; 
        float: left;
        border-top: solid 1px #FF4400;
        border-bottom: solid 1px #FF4400;
        border-left: solid 1px #FF4400;
        color: #333333;
        text-decoration: none;
    }
    #container a:hover{
        color: #FF4400;
    }
    .content{
        width: 355px;
        height: 140px;
        text-align: center;
        border-right: solid 1px #FF4400;
        border-bottom: solid 1px #FF4400;
        border-left: solid 1px #FF4400;
        padding: 30px 0 0 40px;
        display: none;
    }
    .clear{clear: left;}
    #container a.on{ background: #FF4400; color: #fff;}
</style>

css

<body>
    <div id="container">
            <a href="#" class="on">充话费</a>
            <a href="#">充流量</a>
            <a href="#">充固话</a>
            <a href="#" style="border-right: solid 1px #FF4400;">充宽带</a>

            <div class="clear"></div>
            
            <div class="content" style="display:block;">
                <img src="imgs/1.png" />
            </div>


            <div class="content">
                <img src="imgs/2.png" />
            </div>


            <div class="content">
                <img src="imgs/3.png" />
            </div>


            <div class="content">
                <img src="imgs/4.png" />
            </div>
        </div>
</body>

html

<script>
    var as=document.getElementsByTagName("a");
    var oDivs=document.getElementsByClassName("content");
    for(var i=0;i<as.length;i++){
        as[i].index=i;
        as[i].onclick=function(){
//                方法一:
//            for(var j=0;j<as.length;j++){
//                if(this==as[j]){
//                    this.className="on";
//                    oDivs[j].style.display="block";
//                }else{
//                    as[j].className="";
//                    oDivs[j].style.display="none";
//                }
//            }
//              法二:
//通过循环的方式将所有的标题清除样式，所有的内容隐藏
            for(var j=0;j<as.length;j++){
                as[j].className="";
                oDivs[j].style.display="none";
            }
            
            //留下自己
            this.className="on";
            oDivs[this.index].style.display="block";
        }
    }
</script>

　　面向对象的思想　　

<style>
        .box {
            width: 400px;
            margin:100px auto;
            border:1px solid #ccc;
        }
        .top button.purple {
            background-color: purple;
        }
        .bottom div{
            width:100%;
            height: 300px;
            background-color: pink;
            display: none;
        }
       
        .bottom div.show{
            display:block;
        }
    
    </style>

css

<body>
<div class="box">
    <div class="top" id="top">
        <button class="purple">第一个</button>
        <button>第二个</button>
        <button>第三个</button>
        <button>第四个</button>
        <button>第五个</button>
    </div>
    <div class="bottom" id="divs">
        <div class="show">1好盒子</div>
        <div>2好盒子</div>
        <div>3好盒子</div>
        <div>4好盒子</div>
        <div>5好盒子</div>
    </div>
</div>
</body>

html

<script>    
    function $(id){
        return document.getElementById(id);
    }
    //功能选项卡
     function Tab(btns,divs){
         this.btns = btns;//实例属性
         this.divs = divs;//实例属性
          
     }
     //清空所有按钮的背景色
     Tab.prototype.clearColor  = function(){//原型方法
         for(var i = 0 ; i < this.btns.length ; i++){
             this.btns[i].className = "";
         }
     }
     //清空所有盒子的内容
     Tab.prototype.clearContent = function(){
         for(var i = 0 ; i < this.divs.length ; i++){
             this.divs[i].className = "";
         }
     }
     //初始化方法
     Tab.prototype.init = function(){
         var that = this;
         for(var i = 0 ; i < this.btns.length ; i++){
             this.btns[i].index = i;
             this.btns[i].onmouseover = function(){
                 that.clearColor();//清空所有按钮背景颜色
                 this.className = "purple";// 留下当前操作按钮的背景颜色
                 that.clearContent();//隐藏所有内容盒子                
                 that.divs[ this.index ].className = "show";//显示当前操作的按钮对应的内容            
             }
         }
     }
     //构造函数中的this 指向的是 构造函数new出来的对象
     //任何对象都有自己的属性和方法
     //事件中的this指向的是当前事件的触发者（一般这个触发者是html元素）<img src="">   定时器中的this指向的是window
     //事件中(或定时器中)如果用到构造函数new出来的对象的属性和方法时，一定要改变this指向
     var tab = new Tab($("top").children,$("divs").children);
     tab.init();
</script>

　　案例二：隔行变色高亮显示

　　面向过程的思想：　　

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6     </head>
 7     <body>
 8         <table width="400" border=1>
 9             <tr>
10                 <td>10</td>
11                 <td>10</td>
12                 <td>10</td>
13                 <td>10</td>
14                 <td>10</td>
15                 <td>10</td>
16             </tr>
17             <tr>
18                 <td>10</td>
19                 <td>10</td>
20                 <td>10</td>
21                 <td>10</td>
22                 <td>10</td>
23                 <td>10</td>
24             </tr>
25             <tr>
26                 <td>10</td>
27                 <td>10</td>
28                 <td>10</td>
29                 <td>10</td>
30                 <td>10</td>
31                 <td>10</td>
32             </tr>
33             <tr>
34                 <td>10</td>
35                 <td>10</td>
36                 <td>10</td>
37                 <td>10</td>
38                 <td>10</td>
39                 <td>10</td>
40             </tr>
41             <tr>
42                 <td>10</td>
43                 <td>10</td>
44                 <td>10</td>
45                 <td>10</td>
46                 <td>10</td>
47                 <td>10</td>
48             </tr>
49         </table>
50     </body>
51 </html>
52 <script>
53     // 找到所有的tr  ， 通过tr[下标]  操作某一个行
54     var oTrs = document.getElementsByTagName("tr");
55     for(var i = 0 ; i < 5; i++){
56         //页面加载隔行变色
57         if( i%2==0 ){
58             oTrs[i].style.backgroundColor = "pink";
59         }else{
60             oTrs[i].style.backgroundColor = "teal";
61         }
62         
63         //鼠标移入  高亮
64         oTrs[i].onmouseover = function(){
65             //用一个变量记录当前行的颜色
66             color = this.style.backgroundColor;
67             
68             this.style.backgroundColor = "gray";
69         }
70         //鼠标移出  颜色恢复
71         oTrs[i].onmouseout = function(){
72             this.style.backgroundColor = color;
73         }
74     }
75 </script>

code

　面向对象的思想：　

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6     </head>
 7     <body>
 8         <ul>
 9             <li>兄弟多个1</li>
10             <li>兄弟多个2</li>
11             <li>兄弟多个3</li>
12             <li>兄弟多个4</li>
13             <li>兄弟多个5</li>
14         </ul>
15     </body>
16 </html>
17 <script type="text/javascript">
18     /*
19     页面加载  隔行变色
20     鼠标事件 操作颜色  
21     
22     
23     构造函数：
24     功能： 设置颜色
25     属性： lis
26      */
27     function HighLight(list){
28         this.list = list;
29     }
30     HighLight.prototype.setColor = function(obj,color){
31         obj.style.backgroundColor = color;
32     }
33     
34     HighLight.prototype.init = function(){
35         var that = this;
36         for (var i = 0 ; i < this.list.length ; i ++) {
37             if( i%2 == 0 ){
38                 this.setColor(this.list[i],"gray")
39             }else{
40                 this.setColor(this.list[i],"teal")
41             }
42             this.list[i].onmouseover = function(){
43                 //动态为new出来的对象 添加一个color属性
44                 that.color = this.style.backgroundColor; 
45                 that.setColor(this,"pink");
46             }
47             this.list[i].onmouseout = function(){
48                 that.setColor(this,that.color);
49             }
50         }
51     }
52     var high = new HighLight( document.getElementsByTagName("li") );
53     high.init();
54 </script>

code

　　案例三：二级下拉菜单

　　html实现：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>二级导航划过效果</title>
<style tyle="text/css">
*{
    margin:0;
    padding:0;
    }
body{
    font-family:"微软雅黑";
    }
a{
    text-decoration:none;
    }
ul li{
    list-style:none;
    }
.nav{
    width:600px;
    height:35px;
    margin:0 auto;
    background:blue;
    }
.nav li{
    width:100px;
    height:35px;
    line-height:35px;
    text-align:center;
    float:left;
    position:relative;
    }
.nav li a{
    color:white;
    display:block;
    width:100px;
    height:35px;
    }
.second_nav{
    display:none;
    background:gray;
    position:absolute;
    top:35px;
    left:0;
    font-size:14px;
    }
.nav li:hover .second_nav{
    display:block;
}
.nav li:hover .firstA{
    background:green;
}
.nav li .second_nav a:hover{
    background-color:red;
}
</style>
</head>

<body>
<ul class="nav">

<li>
  <a href="#" class="firstA">首页</a>
  <div class="second_nav">
  </div>
</li>
<li>
  <a href="#" class="firstA">课程</a>
  <div class="second_nav">
    <a href="#">UI设计</a>
    <a href="#">PHP设计</a>
    <a href="#">iOS设计</a>
    <a href="#">WEB前端设计</a>
  </div>
</li>
<li>
  <a href="#" class="firstA">频道</a>
  <div class="second_nav">
    <a href="#">新闻频道</a>
    <a href="#">体育频道</a>
    <a href="#">音乐频道</a>
  </div>
</li>
<li>
  <a href="#" class="firstA">讲师团队</a>
  <div class="second_nav">
    <a href="#">UI讲师</a>
    <a href="#">PHP布道师</a>
    <a href="#">HTML5讲师</a>
  </div>
</li>
<li>
  <a href="#" class="firstA">城市</a>
  <div class="second_nav">
    <a href="#">中国北京</a>
    <a href="#">法国巴黎</a>
    <a href="#">英国伦敦</a>
    <a href="#">韩国首尔</a>
  </div>
</li>
<li>
  <a href="#" class="firstA">联系我们</a>
  <div class="second_nav">
  </div>
</li>
</ul>
</body>
</html>

code

　　面向对象的思想：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style type="text/css">
*{ padding:0; margin:0; list-style:none;}
.all{ width:330px; height:30px; background:url(img/bg.jpg) no-repeat; margin:100px auto; line-height:30px; text-align:center; padding-left:10px; margin-bottom:0;}
.all ul li{ width:100px; height:30px; background:url(img/libg.jpg); float:left; margin-right:10px; position:relative; cursor:pointer;}
.all ul ul{ position:absolute; left:0; top:30px; display:none;}
</style>
</head>

<body>
<div class="all" >
    <ul id="list">
        <li>一级菜单
            <ul>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul>
        </li>
        <li>一级菜单
            <ul>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul>
        </li>
        <li>一级菜单
            <ul>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul>
        </li>
    </ul>
</div>
</body>
</html>
<script>
    /*
    下拉菜单 ---  功能写成构造函数
    功能中操作的对 象 ---  构造函数的属性            操作的 对象    一级li   
    功能中操作的方法 ---   构造函数的方法           显示  、 隐藏
    */
    function List(lis){ //一级的li对象
        this.list = lis;
        
    }
    //显示
    List.prototype.show = function(obj){
        obj.style.display = "block";
    }
    //隐藏
    List.prototype.hide = function(obj){
        obj.style.display = "none";
    }
    //初始化方法
    List.prototype.init = function(){
        var that = this;
        for(var i = 0 ; i < this.list.length ; i++){
            this.list[i].onmouseover = function(){
                //事件中的this指向的是 事件的触发者
                //显示
                that.show(this.children[0]);
            }
            this.list[i].onmouseout = function(){
                //隐藏
                that.hide(this.children[0]);
            }
        }
    }
    
    var objList = new List( document.getElementById("list").children );
    objList.init();
    
    
</script>

code

面向对象的一些知识点就这样吧最后再来一个用面向对象实现的关于拖拽的案例就结束这篇了，关于实现拖拽用到的知识点，以后也会陆续专门写出来......

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <input type="button" value = '创建div' id="btn" />
    </body>
</html>
<script type="text/javascript">
    var oBtn = document.getElementById('btn');
    oBtn.onclick = function(){
        var dd = new DragDiv(100,100);
        dd.createDiv();
    }
    
    function DragDiv(w,h){
        this.w = w;
        this.h = h;
    }
    //创建div方法
    DragDiv.prototype.createDiv = function(){
        this.oDiv = document.createElement("div");
        this.oDiv.style.width = this.w + "px";
        this.oDiv.style.height = this.h + "px";
        this.oDiv.style.background ="red";
        this.oDiv.style.position = "absolute";
        this.oDiv.style.left = this.rand(10,900) +"px";
        this.oDiv.style.top = this.rand(10,700) +"px";
        document.body.appendChild(this.oDiv);
        this.drag();
    }
    //随机方法
    DragDiv.prototype.rand = function(min,max){
        return Math.floor(Math.random()*(max-min+1)) + min;
    }
    //拖拽
    DragDiv.prototype.drag = function(){
        var that = this;
        this.oDiv.onmousedown = function(e){
            var e = e || event;
            var rex = e.offsetX;
            var rey = e.offsetY;
            document.onmousemove = function(e){
                var e = e || event;
                var x = e.clientX - rex;
                var y = e.clientY - rey;
                that.oDiv.style.left = x + "px";
                that.oDiv.style.top = y + "px";
            }
        }
        document.onmouseup = function(){
            document.onmousemove = "";
        }
    }
</script>