面向对象

1、面向对象概念 
什么是对象
万事万物皆对象
用于描述一个事物的所有信息的整体
对象特性 : 属性  方法
数据类型 : 基本类型   对象类型(引用类型)
对象类型的数据就会有属性和方法
例如 :
复制代码
var num = 90;  基本类型数据 没有属性  方法
num.index = 1;
alert( num.index )   undefined
 
var arr = [];
arr.index = 2;
alert( arr.index )   2
 
arr.sum = function(){   方法  (私有的)
    return eval( arr.join("+") )
}
arr.sum()
 
function sum(){  函数(全局)
 
}
sum()   
复制代码
函数和方法 : 
方法 属于 函数  
函数 包含 方法
 
var oDiv = document.getElementById("idname");   typeof oDiv
oDiv.aa = 90;
alert( oDiv );

 

 
什么是面向对象  oop
面向对象是一种编程思想
 
面向过程 和 面向对象 : 
面向过程 : 体现的是一种数学逻辑
面向对象 : 体现的是一种生活逻辑
 
例如 : 一条马路长2000米 , 人走路的速度  20米/分    走完这条路需要多久?
var len = 2000, speed = 20;
时间 = 长 / 速度  -- 面向过程
 
面向对象 : 
路  长: 2000
人  速度 : 20
时间 :   路.长度 / 人.速度
 
面向对象好处 : 
功能独立  便于后期的管理和维护  
防止全局变量污染
 
面向对象缺点 : 
开发周期长  成本高
 
 
什么是类? (js中没有类的概念 , js中的构造函数 就是 类)
  类和对象的区别
类 : 类是具有相同属性和行为的一类事物的总称
 
类和对象的区别 : 
类是对象的抽象化 (类是对象的抽象)
对象是类的具象化  (对象是类的实例)  var arr = new Array()  实例化一个对象
 
先有对象还是先有类??
先有对象 后有类
 
instanceof  判断一个对象属于哪一个类 
用法 :  对象  instanceof 构造函数   返回true/false
 
2、构造函数 :  使用new关键字创建出对象的函数 就是构造函数
特点 : 
    构造函数的函数名一般是大驼峰
    构造函数中的this 指向构造函数new出来的对象
 
//创建对象  Object  
    var obj = {};
    var obj = new Object();
    var arr = new Array();
    //判断对象属于哪一类?
    console.log(obj instanceof Array);
    console.log(arr instanceof Array);
复制代码
<script>
    //创建对象  Object  
    //var obj = {};
    var obj = new Object();
    //为创建的对象添加属性或功能
    obj.name = "jack";
    obj.age = 18;
    obj.study = function(name){
        console.log( name + "学习ing" );
    }
    console.log( obj.name , obj.age );
    obj.study( obj.name );
    
    var obj2 = new Object();
    //为创建的对象添加属性或功能
    obj2.name = "lily";
    obj2.age = 13;
    obj2.study = function(name){
        console.log( name + "学习ing" );
    }
    
    
</script>
复制代码
复制代码
<script>
    /*function Animal(){
        
    }
    
    //a1 就是在构造函数Animal上new出来的对象
    var a1 = new Animal();
    //为创建的对象添加属性和方法
    a1.name = "小白";
    a1.age = "2";
    a1.running = function(){
        return this.name + "在奔跑";
    }
    alert( a1.running() );
    
    var a2 = new Animal();
    a2.name = "小白";
    a2.age = "2";
    a2.running = function(){
        return this.name + "在奔跑";
    }*/
    
    
    
    function Student(name,age){
        //为创建的对象添加属性和方法
        this.name = name;
        this.age = age;
        this.study = function(){
            return this.name + "在学习...";
        }
    }
    var s1 = new Student("小王",12);
    var s2 = new Student("老王",37);
    console.log( s1.study() , s2.study() );
</script>
复制代码

面向对象实现 --隔行变色:

复制代码
<!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>
            <li>孩子多个6</li>
            <li>孩子多个7</li>
            <li>孩子多个8</li>
        </ul>
        <ol>
            <li>孩子多个1</li>
            <li>孩子多个2</li>
            <li>孩子多个3</li>
            <li>孩子多个4</li>
            <li>孩子多个5</li>
            <li>孩子多个6</li>
            <li>孩子多个7</li>
            <li>孩子多个8</li>
        </ol>
    </body>
</html>
<script>
    /*
     面向对象实现思路 : 
     1、确定构造函数   HighLight
     2、确定属性   特效操作的元素
     3、确定功能   特效中的方法
         入口方法 : 第一个功能 init
                   鼠标移入和移出事件
                   颜色设置
    this : 在事件中 指向事件触发者(事件源)
               在方法中 指向方法的调用者
              不确定 事件源或方法的调用者 一般都会指向window
              
            构造函数值中的this指向构造函数实例化的对象
        this : 事件 和 定时器       
     */
    window.onload = function(){
        var hl = new HighLight( document.getElementsByTagName("ul")[0] );
        hl.init();
        hl.fnMouse2();
        
        var hl2 = new HighLight( document.getElementsByTagName("ol")[0] );
        hl2.init();
        hl2.fnMouse2();
    }
    function HighLight(parent){
        this.list = parent.children ;//属性 所有要操作的li
        this.init = function(){ //入口方法  隔行变色
            for( var i = 0 ; i < this.list.length ; i++ ){
                if( i%2 ){
                     this.setColor( this.list[i] , "teal" );
                }else{
                    this.setColor( this.list[i] , "skyblue" );
                }
            }
        }
        this.fnMouse = function(){
            var self = this;//self 变量  指向new出来的对象
            for( var i = 0 ; i < this.list.length ; i++ ){
                this.list[i].onmouseenter = function(){
                    //this:指向谁? 指向当前操作的li
                    //改变当前操作的li的颜色 
                    self.setColor( this , "red" );
                }
                this.list[i].onmouseleave = function(){
                    self.setColor( this , "" );
                }
            }
        }
        this.fnMouse2 = function(){
            for( let i = 0 ; i < this.list.length ; i++ ){
                this.list[i].onmouseenter = function(){
                    //this:指向谁? 指向当前操作的li
                    //移入到li上  记录当前操作的li的颜色
                    //为new出来的对象添加一个属性  记录颜色
                    this.color = this.list[i].style.backgroundColor;
                    //改变当前操作的li的颜色 
                    this.setColor( this.list[i] , "red" );
                }.bind(this) //此处的this指向构造函数new出来的对象
                
                this.list[i].onmouseleave = function(){
                    this.setColor( this.list[i] , this.color );
                }.bind(this)
            }
        }
        this.setColor = function(obj,color){
            obj.style.backgroundColor = color;
        }
        
    }
</script>
复制代码

面向对象--高级拖拽:

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .active{
                width: 100px;
                height: 100px;
                position: absolute;
            }
        </style>
    </head>
    <body>
        <button id="btn">创建</button>
    </body>
</html>
<script src="../common.js"></script>
<script>
    /*
     1、确定构造函数  DivGrag
     2、确定属性  操作的元素--动态创建的  create("div")
     3、确定功能
         入口 : init
         拖拽 :  down  move  up
     */
    window.onload = function(){
        btn.onclick = function(){
            var dg = new DivGrag();
            dg.init();
        }
    }
    function DivGrag(){
        this.div = create("div");    
        this.init = function(){ //入口方法  描述div
            this.div.className = "active";
            document.body.appendChild( this.div );
            this.div.style.backgroundColor = getColor();
            this.div.style.left = rand( 0 , window.innerWidth-100 ) + "px";
            this.div.style.top = rand( 0 , window.innerHeight-100 ) + "px";
        
            this.drag();
        }
        this.drag = function(){
            this.div.onmousedown = function(e){
                var e = e || event;
                this.fnDown(e);
                document.onmousemove = function(e){
                    var e = e || event;
                    this.fnMove(e);
                }.bind(this)
                document.onmouseup = function(){
                    this.fnUp();
                }.bind(this)
                return false;
            }.bind(this)
        }
        this.fnDown = function(e){
            //记录鼠标按下div时的内部偏移量
            this.disx = e.offsetX;
            this.disy = e.offsetY;
        }
        this.fnMove = function(e){
            //操作div的left和top值的改变
            this.div.style.left = e.pageX - this.disx + "px";
            this.div.style.top = e.pageY - this.disy + "px";
        }
        this.fnUp = function(){
            document.onmousemove = null;
        }
    }
</script>
复制代码

 

posted @   一直敲敲敲  阅读(133)  评论(0编辑  收藏  举报
努力加载评论中...
点击右上角即可分享
微信分享提示