一、什么是对象?

对象是n个属性和方法组成的集合,如js内置的document, Date, Regexp, Math等等

document就是有很多的属性和方法, 如:getElementById, getElementsByTagName等等这些就是document对象支持的方法,那么我们常见的onclick, onmouseover,onmouseout等等就是document支持的属性。

二、javascript创建自定义对象,常用的有两种方式:

上面是js内置的对象,如果我们需要自己创建对象,可以使用下面2种方式【构造函数方式与字面量方式】:

1, var obj  = new Object()                    构造函数方式

2, var obj = {}                                      字面量方式,其实就是一个json

三、为对象添加属性和方法

var obj = new Object();
obj.userName = 'ghostwu';
obj.age = 22;
obj.sex = 'man';
obj.showUserName = function(){
    alert( obj.userName );
}
obj.showUserName();

此处创建了一个obj对象, 添加了3个属性: userName, age, sex,一个方法: showUserName

访问属性和方法:

对象.属性名称

对象.方法名称()

另一种形式创建对象

var obj = {};
obj.userName = 'ghostwu';
obj.age = 22;
obj.sex = 'man';
obj.showUserName = function(){
    return this.userName + '---->' + this.age  + '---->' + this.sex;
}
alert( obj.showUserName() );

先创建一个空的json,然后再为这个空的json对象添加属性和方法,上例方法中使用了一个关键词this, 关于this的指向问题,可以参考我的这篇文章[js高手之路]this知多少。

也可以直接在创建json的时候,添加属性和方法

var obj = {
    userName  : 'ghostwu',
    age  :22,
    sex  :'man',
    showInfo : function(){
        return this.userName + '---->' + this.age + '--->' + this.sex;
    }
};
alert( obj.showInfo() );

四,用面向对象的写法,封装一个加、减法

方式一:

var obj = new Object();
obj.add = function( a, b ){
    return a + b;
};
obj.sbb = function( a, b ){
    return a - b;
}
alert( obj.add( 10, 20 ) );
alert( obj.sbb( 10, 20 ) );

方式二:

var obj = {};
obj.add = function( a, b ){
    return a + b;
}
obj.sbb = function( a, b ){
    return a - b;
}
alert( obj.add( 10, 20 ) );
alert( obj.sbb( 10, 20 ) );

方式三:

var obj = {
    add : function( a, b ){
        return a + b;
    },
    sbb : function( a, b ){
        return a - b;
    }
};
alert( obj.add( 10, 20 ) );
alert( obj.sbb( 10, 20 ) );

五、用面向对象的写法,封装一个素数对象

var Prime = {
    aPrime : [],
    isPrime : function( n ){
        if ( n < 2 ) {
            return false;
        }else {
            var flag = true;
            for( var i = 2; i < n; i++ ){
                if( n % i == 0 ) {
                    flag = false;
                    break;
                }
            }
            return flag;
        }
    },
    getPrime : function( start, end ){
        for( var i = start; i <= end; i++ ){
            if( this.isPrime( i ) ) {
                this.aPrime.push( i );
            }
        }
        return this.aPrime;
    },
    count : function(){
        return this.aPrime.length;
    }
};
alert( Prime.isPrime( 11 ) );
alert( Prime.getPrime( 1, 100  ) );
alert( Prime.count() );

这里我用的是json方式,你可以试试用构造函数方式改写

六、面向对象的写法,封装一个隔行变色的效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta ="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            margin: 10px;
            padding: 10px;
        }
        .even-color {
            background:#ccc;
        }
        .odd-color {
            background: #eee;
        }
        .active{
            background:yellow;
        }
    </style>
    <script>
        var Bg = {
            aDiv : [],
            oldColor : null,
            init : function(){
                this.aDiv = document.querySelectorAll( "div" );
            },
            setBgColor : function(){
                for( var i = 0 ; i < this.aDiv.length; i++ ){
                    if( i % 2 == 0 ) {
                        this.aDiv[i].className = 'even-color';
                    }else {
                        this.aDiv[i].className = 'odd-color';
                    }
                }
            },
            hover : function(){
                var that = this;
                for( var i = 0 ; i < this.aDiv.length; i++ ){
                    this.aDiv[i].onmouseover = function(){
                        that.oldColor = this.className;
                        this.className = 'active';
                    }
                    this.aDiv[i].onmouseout = function(){
                        this.className = that.oldColor;
                    }
                }
            }
        }
        window.onload = function(){
            Bg.init();
            Bg.setBgColor();
            Bg.hover();
        }
    </script>
</head>
<body>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div> 
</body>
</html>

我们可以在此例的基础上,稍加改造,让对象支持像jquery一样的链式调用,只需要在3个方法中, 返回当前对象(this)即可

var Bg = {
    aDiv : [],
    oldColor : null,
    init : function(){
        this.aDiv = document.querySelectorAll( "div" );
        return this;
    },
    setBgColor : function(){
        for( var i = 0 ; i < this.aDiv.length; i++ ){
            if( i % 2 == 0 ) {
                this.aDiv[i].className = 'even-color';
            }else {
                this.aDiv[i].className = 'odd-color';
            }
        }
        return this;
    },
    hover : function(){
        var that = this;
        for( var i = 0 ; i < this.aDiv.length; i++ ){
            this.aDiv[i].onmouseover = function(){
                that.oldColor = this.className;
                this.className = 'active';
            }
            this.aDiv[i].onmouseout = function(){
                this.className = that.oldColor;
            }
        }
    }
}
window.onload = function(){
    Bg.init().setBgColor().hover();
}

我学院网