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

一、对象的概念

建议回复：

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

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

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

数据类型：

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

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

函数和方法的区别：

　　方法属于函数，函数包含方法.       比如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:; padding:; 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>

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

　　面向过程的思想：　　

 <!DOCTYPE html>
 <html>
     <head>
         <meta charset="UTF-8">
         <title></title>
     </head>
     <body>
         <table width="400" border=1>
             <tr>
                 <td>10</td>
                 <td>10</td>
                 <td>10</td>
                 <td>10</td>
                 <td>10</td>
                 <td>10</td>
             </tr>
             <tr>
                 <td>10</td>
                 <td>10</td>
                 <td>10</td>
                 <td>10</td>
                 <td>10</td>
                 <td>10</td>
             </tr>
             <tr>
                 <td>10</td>
                 <td>10</td>
                 <td>10</td>
                 <td>10</td>
                 <td>10</td>
                 <td>10</td>
             </tr>
             <tr>
                 <td>10</td>
                 <td>10</td>
                 <td>10</td>
                 <td>10</td>
                 <td>10</td>
                 <td>10</td>
             </tr>
             <tr>
                 <td>10</td>
                 <td>10</td>
                 <td>10</td>
                 <td>10</td>
                 <td>10</td>
                 <td>10</td>
             </tr>
         </table>
     </body>
 </html>
 <script>
     // 找到所有的tr  ， 通过tr[下标]  操作某一个行
     var oTrs = document.getElementsByTagName("tr");
     for(var i = 0 ; i < 5; i++){
         //页面加载隔行变色
         if( i%2==0 ){
             oTrs[i].style.backgroundColor = "pink";
         }else{
             oTrs[i].style.backgroundColor = "teal";
         }

         //鼠标移入  高亮
         oTrs[i].onmouseover = function(){
             //用一个变量记录当前行的颜色
             color = this.style.backgroundColor;

             this.style.backgroundColor = "gray";
         }
         //鼠标移出  颜色恢复
         oTrs[i].onmouseout = function(){
             this.style.backgroundColor = color;
         }
     }
 </script>

code

　  面向对象的思想： 　

 <!DOCTYPE html>
 <html>
     <head>
         <meta charset="UTF-8">
         <title></title>
     </head>
     <body>
         <ul>
             <li>兄弟多个1</li>
             <li>兄弟多个2</li>
             <li>兄弟多个3</li>
             <li>兄弟多个4</li>
             <li>兄弟多个5</li>
         </ul>
     </body>
 </html>
 <script type="text/javascript">
     /*
     页面加载  隔行变色
     鼠标事件 操作颜色  

     构造函数：
     功能： 设置颜色
     属性： lis
      */
     function HighLight(list){
         this.list = list;
     }
     HighLight.prototype.setColor = function(obj,color){
         obj.style.backgroundColor = color;
     }

     HighLight.prototype.init = function(){
         var that = this;
         for (var i = 0 ; i < this.list.length ; i ++) {
             if( i%2 == 0 ){
                 this.setColor(this.list[i],"gray")
             }else{
                 this.setColor(this.list[i],"teal")
             }
             this.list[i].onmouseover = function(){
                 //动态为new出来的对象 添加一个color属性
                 that.color = this.style.backgroundColor;
                 that.setColor(this,"pink");
             }
             this.list[i].onmouseout = function(){
                 that.setColor(this,that.color);
             }
         }
     }
     var high = new HighLight( document.getElementsByTagName("li") );
     high.init();
 </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>