JS-面向对象

一、js面向对象的探讨与结论

 

window.onload=functionready() {

    /*js面向对象的探讨与结论*/

 

    // a();//给一个对象添加属性

    // b();//给一个对象添加方法

    // c();//this：当前方法属于的对象

    // d();//利用Object对象创建一个属于自己的对象

    // e();//将自己的对象封装在方法里，方便创建，此方法即构造方法(工厂方式)

    // f();//完善上一个没有new的缺点

    // g();//原型prototype就是给一个对象添加一个方法，使这个方法在这个对象的所有实例上都可用，用来解除不能在外部给一个对象添加一个方法的限制

    // h();//利用构造方法加属性、原型加方法的混合方式创建自己的对象

    // i();//json方式创建的对象，常用于单体对象，不适合用做多个对象实例

    // j();//用更进一层的命名空间将json对象的属性和方法包起来，防止多人开发命名空间冲突

    // k();//利用call()继承对象属性

    // l();//利用=号继承对象方法，错误方式

    // m();//利用for in继承对象方法，正确方式

}

 

function a() {

    var arr=[1,2,3];

    arr.a=4;

    alert(arr.a);

}

 

function b() {

    var arr=[1,2,3];

    arr.b=function () {

        alert("arr的方法");

    }

    arr.b();

}

 

function c() {

    var arr=[1,2,3];

    arr.a=4;

    arr.b=function () {

        alert("arr的方法");

    }

    arr.c=function () {

        alert(this.a);

    }

    arr.c();

}

 

function d() {

    var obj=new Object();

 

    obj.name="gxy";

    obj.qq="1419178613";

 

    obj.showName=function () {

        alert("我的名字叫"+this.name);

    }

    obj.showQq=function () {

        alert("我的QQ是"+this.qq);

    }

 

    obj.showName();

    obj.showQq();

}

 

function e() {

    //构造方法(工厂方式)

    function Create(name,qq) {

        //原料

        var obj=new Object();

 

        //加工

        obj.name=name;

        obj.qq=qq;

        obj.showName=function () {

            alert("名字"+this.name);

        }

        obj.showQq=function () {

            alert("QQ"+this.qq);

        }

 

        //出厂

        return obj;

    }

 

    varmy=Create("gxy","1419178613");

    my.showName();

    my.showQq();

    varyou=Create("你的名字","1234567890");

    you.showName();

    you.showQq();

 

    /*

     *缺点

     *1.没有new关键字，不规范

     *2.每个对象实例的方法都是各自的方法，资源浪费

     */

    alert(my.showName==you.showName);

}

 

function f() {

    function Create(name,qq) {

        this.name=name;

        this.qq=qq;

        this.showName=function () {

            alert("名字"+this.name);

        }

        this.showQq=function () {

            alert("QQ"+this.qq);

        }

    }

 

   //用new关键字修饰一个方法，方法中的this关键字将从Window对象指向系统自动新建的Object对象，并返回这个Object对象

    var my=newCreate("gxy","1419178613");

    my.showName();

    my.showQq();

    var you=newCreate("你的名字","1234567890");

    you.showName();

    you.showQq();

}

 

function g() {

   //使用原型前，Create的两个实例my、you想要添加showAll方法，都得各自创建一遍

    function Create(name,qq) {

        this.name=name;

        this.qq=qq;

        this.showName=function () {

            alert("名字"+this.name);

        }

        this.showQq=function () {

            alert("QQ"+this.qq);

        }

    }

 

    var my=newCreate("gxy","1419178613");

    var you=newCreate("你的名字","1234567890");

 

    my.showAll=function () {

        alert("名字"+my.name+""+"QQ"+my.qq);

    }

    you.showAll=function () {

        alert("名字"+you.name+""+"QQ"+you.qq);

    }

 

    my.showAll();

    you.showAll();

 

   //使用原型后，Create的两个实例my、you想要添加showAll方法，只需给父对象Create创建一遍

    function Create(name,qq) {

        this.name=name;

        this.qq=qq;

        this.showName=function () {

            alert("名字"+this.name);

        }

        this.showQq=function () {

            alert("QQ"+this.qq);

        }

    }

 

    Create.prototype.showAll=function () {

        alert("名字"+this.name+""+"QQ"+this.qq);

    }

 

    var my=newCreate("gxy","1419178613");

    var you=newCreate("你的名字","1234567890");

 

    my.showAll();

    you.showAll();

 

    //不使用原型创建的对象方法不相等，浪费资源

    alert(my.showName==you.showName);

    //使用原型创建的对象方法不再不相等，不再浪费资源

    alert(my.showAll==you.showAll);

 

    /*

    *Create父对象相当于模具，没有实际功能，所以js不允许其在外部添加方法.showAll=function(){}

    *my、you实例是由Create模具生产出来的产品，有实际功能，所以js允许其直接在外部添加方法.showAll=function(){}

     * 想要给Create父对象在外部添加方法，就需要使用原型prototype解除限制

     */

}

 

function h() {

    //构造方法加属性

    function Create(name,qq) {

        this.name=name;

        this.qq=qq;

        this.showName=function () {

            alert("名字"+this.name);

        }

        this.showQq=function () {

            alert("QQ"+this.qq);

        }

    }

    //原型加方法

    Create.prototype.showName=function () {

        alert("名字"+this.name);

    }

    Create.prototype.showQq=function () {

        alert("QQ"+this.qq);

    }

    Create.prototype.showAll=function () {

        alert("名字"+this.name+""+"QQ"+this.qq);

    }

 

    //实例化对象并使用方法

    var my=newCreate("gxy","1419178613");

    my.showName();

    my.showQq();

    my.showAll();

}

 

function i() {

    var json={

        name:'you',

        qq:'1234567890',

        showName:function () {

            alert("名字"+this.name);

        },

        showQq:function () {

            alert("QQ"+this.qq);

        }

    };

 

    json.showName();

    json.showQq();

}

 

function j() {

    var json={};

 

    json.my={};

    json.you={};

 

    json.my.showName=function () {

        alert("myName");

    }

    json.you.showName=function () {

        alert("yourName");

    }

 

    json.my.showName();

    json.you.showName();

}

 

function k() {

    function A() {

        this.a="a";

    }

    A.prototype.showA=function () {

        alert(this.a);

    }

 

    function B() {

        //B继承A的属性

        A.call(this);

    }

 

    var obj=new B();

    alert(obj.a);

}

 

function l() {

    function A() {

        this.a="a";

    }

    A.prototype.showA=function () {

        alert(this.a);

    }

 

    function B() {

        A.call(this);

    }

   //利用=号会创建方法的引用，而不是正真的新创建一份，由于操作的是同一块内存空间，所以A也会使用到这块内存空间里添加的方法showB()

    B.prototype=A.prototype;

    B.prototype.showB=function () {

        alert("b")

    }

 

    //对象A将能够使用对象B的方法

    var obj=new A();

    obj.showB();

}

 

function m() {

    function A() {

        this.a="a";

    }

    A.prototype.showA=function () {

        alert(this.a);

    }

 

    function B() {

        A.call(this);

    }

    //利用for in遍历A对象的方法原型，赋给B对象的方法原型，真正的新创建一份

    for(var i in A.prototype){

        B.prototype[i]=A.prototype[i];

    }

    B.prototype.showB=function () {

        alert("b")

    }

 

    //对象A将不能使用对象B的方法

    var obj=new A();

    try {

        obj.showB();

    }catch (err){

        alert(err.message);

    }

 

    //对象B能正确继承A里面的方法

    var obj=new B();

    obj.showA();

}

二、js面向对象的范例

 

【.html】

<!DOCTYPE html>

<htmllang="en">

<head>

    <meta charset="UTF-8">

    <title>js面向对象范例</title>

</head>

<body>

<divid="box1" class="box1" style="width: 100px;height:100px;background-color: skyblue;position:absolute;">自由拖动的Oop</div>

<divid="box2" class="box2" style="width: 100px;height:100px;background-color: pink;position:absolute;">限制网页内拖动的ExtentOop,继承自Oop</div>

 

<scriptsrc="js/js面向对象范例.js"></script>

</body>

</html>

 

【.js】

window.onload=functionready() {

    /*js面向对象范例*/

 

    // opp();//面向过程的写法

    new Oop('box1');//面向对象的写法

 

    new ExtentOop('box2');//继承上面的对象，并重写了拖动的方法

}

/*

 *面向过程的写法

 */

function opp() {

    varbox=document.getElementById("box1");

    box.onmousedown=function (ev) {

        var oEvent=ev||event;

        var boxX=oEvent.clientX-box.offsetLeft;

        var boxY=oEvent.clientY-box.offsetTop;

        document.onmousemove=function (ev) {

            var oEvent=ev||event;

           box.style.left=oEvent.clientX-boxX+'px';

           box.style.top=oEvent.clientY-boxY+'px';

        }

        document.onmouseup=function () {

            document.onmousemove=null;

            document.onmouseup=null;

        }

    }

}

 

/*

 *面向对象的写法

 */

function Oop(id) {

    var _this=this;

    this.box=document.getElementById(id);//盒子

    this.boxX;//盒子的横坐标

    this.boxY;//盒子的纵坐标

 

    this.box.onmousedown=function (ev){//控制盒子移动的方法

        _this.fnDown(ev);

 

        //设置文字不能被选中

        return false;

    };

}

Oop.prototype.fnDown=function(ev){//盒子被点击的方法

    var _this=this;

    var oEvent=ev||event;

   this.boxX=oEvent.clientX-this.box.offsetLeft;

   this.boxY=oEvent.clientY-this.box.offsetTop;

    document.onmousemove=function (ev) {

        _this.fnMove(ev);

    }

    document.onmouseup=function () {

        _this.fnUp();

    }

}

Oop.prototype.fnMove=function(ev){//盒子被拖动的方法

    var oEvent=ev||event;

   this.box.style.left=oEvent.clientX-this.boxX+'px';

   this.box.style.top=oEvent.clientY-this.boxY+'px';

}

Oop.prototype.fnUp=function(){//盒子被放开的方法

    document.onmousemove=null;

    document.onmouseup=null;

}

 

/*

 *继承上面的对象，并重写了拖动的方法

 */

function ExtentOop(id){

    Oop.call(this,id);

}

for (var i inOop.prototype){

    ExtentOop.prototype[i]=Oop.prototype[i];

}

ExtentOop.prototype.fnMove=function(ev) {//重写父对象的拖动方法

    var oEvent=ev||event;

    var leftBorder=oEvent.clientX-this.boxX;

    var topBorder=oEvent.clientY-this.boxY;

    vardomWidthOfBox=document.documentElement.clientWidth-this.box.offsetWidth;

    vardomHeightOfBox=document.documentElement.clientHeight-this.box.offsetHeight;

    if(leftBorder<0){

        leftBorder=0;

    }else if(leftBorder>domWidthOfBox){

        leftBorder=domWidthOfBox;

    }

    if(topBorder<0){

        topBorder=0;

    }else if(topBorder>domHeightOfBox){

        topBorder=domHeightOfBox;

    }

    this.box.style.left=leftBorder+'px';

    this.box.style.top=topBorder+'px';

}