Js_面向对象_01

1.面向对象

<script type="text/javascript">    //  面向对象：就是一种编程思想，只关注其功能，不关注其内部细节    //  面向对象特点：    //1.封装 ：不考虑内部实现，只考虑功能     //2.继承 ：从已有的对象上，继承出新的对象    //3.多态 ：不同的操作，产生不同的结果    //JS的面向对象    //JS是基于对象的，它不是面向对象    //对象组成    //1.属性 ：变量    //2.方法 ：函数    var ary = [1, 2, 3];    //alert(typeof(ary)); //object    //数组的属性 ary.length    //数组的对象的方法 ary.push()    var ary2 = [4, 5, 6];    //属于一个对象的变量叫属性    //属于一个对象的函数叫方法    //创建空对象    var obj = new Object();    obj.name = "邹振洲";    obj.sex = "boy";    obj.showName = function(){        alert(this.name);    }    obj.showName();    var obj2 = new Object();    obj2.name = "小风儿";    obj2.sex = "boy";    obj2.showName = function(){        alert(this.name);    }    obj2.showName();</script>

2.工厂方式

<script type="text/javascript">    //工厂方式    function CreatePerson(name, sex){        //1.原料        var obj = new Object();        //2.加工        obj.name = name;        obj.sex = sex;        obj.showName = function(){            alert(this.name);        };        obj.showSex = function(){            alert(this.sex);        }        //3.出厂        return obj;    }    var p1 = CreatePerson("阿波罗", "boy");    var p2 = CreatePerson("asdf", "boy");    p1.showName();    p2.showName();    alert(p1.showName == p2.showName);//false    //工厂方式的缺点：    //1.每一个对象都有一套自己的方法，浪费资源    //2.没有new</script>

3.new

<script type="text/javascript">    //构造函数：用来创建对象的函数    function CreatePerson(name, sex){        //var this = new Object();  //下面使用new 本行系统默认写出        this.name = name;        this.sex = sex;        this.showName = function(){            alert(this.name);        };        this.showSex = function(){            alert(this.sex);        }        //return this;  //下面使用new 本行系统默认写出    }    //new过程叫做实例化    //p1实例（实例化的对象）    var p1 = new CreatePerson("小风儿", "boy");    p1.showName();</script>

4.给数组添加方法

<script type="text/javascript">    //var ary1 = new Array(1, 2, 3);    //数组是系统对象    //扩展系统对象的属性和方法    var ary1 = [1, 2, 3];    var ary2 = [4, 5, 6];    ary1.sum = function(){        var s = 0;        for(var i = 0; i < this.length; i++){            s += this[i];        }        return s;    }    alert(ary1.sum());    ary1.push(10);    alert(ary1.sum());</script>

5.prototype

<script type="text/javascript">    //给Array原型加方法    Array.prototype.sum = function(){        var s = 0;        //this 代表实例化的对象  ary1        for(var i = 0; i < this.length; i++){            s += this[i];        }        console.log(this);        return s;    }    var ary1 = [1, 2, 3];    var ary2 = [4, 5, 6];    alert(ary1.sum());    alert(ary2.sum());    alert(ary1.sum == ary2.sum);</script>

6.混合法

<script type="text/javascript">    //混合法创建对象    function CreatePerson(name, sex) {        //构造函数里添加属性        this.name = name;        this.sex = sex;    }    //原型上添加方法    CreatePerson.prototype.showName = function() {        alert(this.name);    };    CreatePerson.prototype.showSex = function() {        alert(this.sex);    }    var p1 = new CreatePerson("小风儿", "boy");    var p2 = new CreatePerson("小风", "boy");    p1.showName();    p2.showName();    alert(p1.showName == p2.showName)</script>

7.原型的优先级

<script type="text/javascript">    function Person(name, sex){        this.name = name;        this.sex = sex;        this.age = 18;    }    Person.prototype.showName = function(){        alert(this.name);    }    var p1 = new Person("小风儿", "boy");    p1.age = 20;    alert(p1.age);</script>

8.Json

<script type="text/javascript">    //Json    //好处：1.结构件单，比较清晰    //坏处：2.无法批量创建对象    var person = {};    person.name = "";    person.sex = "";    person.showName = function(){        alert(this.name);    }    var person1 = person;    person1.name = "aaa";    var person2 = person;    person2.name = "zzz";    person1.showName();//zzz    person2.showName();//zzz    //变量之间传 数值     //对象之间传 地址; 数组是对象</script>

9.Json 命名空间：

<script type="text/javascript">    var Baidu = {};    Baidu.news = {        name : "zzz",        showName : function(){            return this.name;        }    };    Baidu.news.age = {    }    Baidu.news.showName = function(){    }    Baidu.vedio = {        name : "jjj",        showName : function(){            return this.name;        }    };</script>

10.面向对象的拖拽

<style type="text/css">    #box_1 {        width: 100px;        height: 100px;        background: red;        position: absolute;        left: 0;        top: 0;    }    #box_2 {        width: 100px;        height: 100px;        background: green;        position: absolute;        left: 200px;        top: 0;    }</style></head><body><div id="box_1"></div><div id="box_2"></div><script type="text/javascript">    //构造函数首字母大写    function Drag(id){        var _this = this; //Drag的实例化对象        //添加属性        //鼠标位置        this.mX = 0;        this.mY = 0;        //元素位置        this.bX = 0;        this.bY = 0;        //获取元素        this.oBox = document.getElementById(id);        //绑定鼠标事件        this.oBox.onmousedown = function(e){            var e = e || window.event;            _this.fnDown(e);        }    }    Drag.prototype.fnDown = function(e){        var _this = this;  //Drag的实例化对象        //获取鼠标初始位置        this.mX = e.clientX;        this.mY = e.clientY;        //获取元素的初始位置        this.bX = this.oBox.offsetLeft;        this.bY = this.oBox.offsetTop;        document.onmousemove = function(e){            var e = e || window.event;            _this.fnMove(e);        }        this.oBox.onmouseup = function(){            _this.fnUp();        }    }    Drag.prototype.fnMove = function(e){        //获取当前的鼠标位置        var nowmX = e.clientX;        var nowmY = e.clientY;        //计算差值        var lessX = nowmX - this.mX;        var lessY = nowmY - this.mY;        //更新元素的偏移量        this.oBox.style.left = this.bX + lessX + "px";        this.oBox.style.top = this.bY + lessY + "px";    }    Drag.prototype.fnUp = function(){        document.onmousemove = null;    }    new Drag('box_1');    new Drag('box_2');</script></body>