zoukankan      html  css  js  c++  java
  • JS面向对象

    这就是面向对象,很简单的

    var box = new Object();
    box.name='le';
    box.age = 10;
    box.run=function(){
        return this.name+this.age+'running';
    };
    var box2 = new Object();
    box2.name='me';
    box2.age = 20;
    box2.run=function(){
        return this.name+this.age+'running';
    };
    alert(box.run());
    alert(box2.run());

    但如果要创建千百个对象呢,一个一个写吗,你写吧 反正我是不写,于是工厂模式就诞生了

    function createObject(name,age){
        var obj = new Object();
        obj.name = name;
        obj.age = age;
        obj.run = function(){
            return this.name+this.age+'running';
        }
        return obj;
    }
    var box1 = createObject('le',10);
    var box2 = createObject('me',20);
    alert(box1.run());
    alert(box2.run());
    alert(typeof box1);
    alert(typeof box2);
    alert(box1 instanceof Object);//true
    alert(box2 instanceof Object);//true

    这样就分不清谁是谁的对象,所以构造函数就诞生了

    function Box(name,age){
        // 系统帮你搞定 var obj = new Object();
        this.name = name;
        this.age = age;
        this.run = function(){
            return this.name + this.age+'running';
        };
        // 系统自动 return obj;
    };
    var box1 = new Box('le',10);
    var box2 = new Box('me',20);
    
    alert(box1.run());
    alert(box2.run());

    有没有感觉开始接近面向对象的思想了,

    function Box(name,age){
        // 系统帮你搞定 var obj = new Object();
        this.name = name;
        this.age = age;
        this.run = function(){
            return this.name + this.age+'running';
        };
        // 系统自动 return obj;
    };
    function Desk(name,age){
        // 系统帮你搞定 var obj = new Object();
        this.name = name;
        this.age = age;
        this.run = function(){
            return this.name + this.age+'running';
        };
        // 系统自动 return obj;
    };
    var box1 = new Box('le',10);
    var box2 = new Box('me',20);
    var box3 = new Desk('js',30);
    alert(box1.run()); //true
    alert(box3.run()); //false
    alert(box3 instanceof Desk) //true;

    构造函数是个好东西,构造函数要用new来调用。你也可以直接调用,但是没效果,知道为何吗,其实构造函数也是函数,为何调用没反应呢,你仔细对比发现没,是不是少了东西,少了个return对吧。函数没返回,怎么拿的到对象呢,有人又想,不是系统自动发挥吗,对,系统是自动返回的,但也是new了之后系统才会自动返回,你都没用new去调它,当然系统也就啥也不干。

    为了后面插叙一个对象冒充:

    function Box(name,age){
        this.name = name;
        this.age = age;
        this.run = function(){
            return this.name +this.age+'running';
        }
    }
    
    var bob=new Object();
    Box.call(bob,'hi',22);
    alert(bob.run());
    function Box(name,age){
        this.name = name;
        this.age = age;
        this.run = function(){
            return this.name +this.age+'running';
        }
    }
    
    var box1 = new Box('le',10);
    var box2 = new Box('me',20);
    alert(box1.run == box2.run); //false
    使用new同一个构造函数,对象的地址不一样
    function Box(name,age){
        this.name = name;  //实例属性
        this.age = age;
        this.run = run;
    };
    function run(){
        return this.name +this.age+'running';
    };
    
    var box1 = new Box('le',10);
    var box2 = new Box('me',20);
    
    alert(box1.run()==box2.run()); //false
    alert(box1.run == box2.run);    //true

    function Box(){};     
    Box.prototype.name = 'le';  //原型属性
    Box.prototype.age = 10;
    
    Box.prototype.run = function (){
        return this.name +this.age+'running';
    };
    var box1 = new Box();
    var box2 = new Box();
    alert(box1.prototype);  //undefined
    
    alert(box1.__proto__);  //Object
    alert(box1.constructor);  //function Box(){};alert(Box.prototype.isPrototypeOf(box1)); //true
    function Box(){
        this.name = 'ja';
    };     
    Box.prototype.name = 'le';  
    Box.prototype.age = 10;
    
    Box.prototype.run = function (){
        return this.name +this.age+'running';
    };
    var box1 = new Box();
    var box2 = new Box();
    
    alert(box1.name);  //ja
    先到构造函数里查找,找不到就到原型里找。
    function Box(){    //this.name = 'ja';}; 
    Box.prototype.name = 'le';
    Box.prototype.age = 10; Box.prototype.run = function (){
    return this.name +this.age+'running';
    };
    var box1 = new Box();var box2 = new Box(); alert(box1.name); //le
    function Box(){
    this.name = 'ja'; //实例属性
    };
    Box.prototype.name = 'le'; //原型属性
    Box.prototype.age = 10;
    
    Box.prototype.run = function (){
    return this.name +this.age+'running';
    };
    var box1 = new Box();
    
    //alert(box1.hasOwnProperty('name')); //true//判断function Box(){}中有没有有就true,
    
    alert('name' in box1); //实例属性跟原型属性都没有 false,任意一个有为true
    function isProperty(obj,property){
        return !obj.hasOwnProperty(property) && (property in obj);
    }        //判断只有原型中有属性
    
    function Box(){            
         
    };    
    Box.prototype.name = 'le';    //原型属性
    Box.prototype.age = 10;
    
    Box.prototype.run = function (){
        return this.name +this.age+'running';
    };
    var box1 = new Box();
    box1.name = 'li';
    alert(isProperty(box1,'name')); //true
    function Box(){};
    var box = new Box();
    alert(box.prototype); //undefined //使用实例无法访问到prototype
    alert(box.__proto__); //Object    //__proto__是prototype的指针
    alert(Box.prototype);//Object     //使用构造函数名(对象名)访问到prototype

    原型字面量的方式:

    function Box(){};
    Box.prototype = {
        //constructor: Box, //强制指向BOX
        name: 'le',
        age: 10,
        run: function(){
            return this.name+this.age+'running';
        }
    };
    var box = new Box();
    alert(box.constructor== Box); //false
    alert(box.constructor==Object); //true

     原型的有点是共享,同时也是缺点:

    //原型的缺点
    function Box(){};
    Box.prototype = {
        constructor: Box,
        name: 'le',
        age: 10,
        family: ['哥哥','姐姐'],
        run: function(){
            return this.name+this.age+'running';
        }
    };
    
    var box1 = new Box();
    box1.family.push('弟弟');
    alert(box1.family); 
    
    var box2 = new Box();
    alert(box2.family);     // ['哥哥','姐姐','弟弟'] //共享了box1添加的,没有独立

    所以就出现了构造函数+原型模式:

    function Box(name,age){
        this.name = name;
        this.age = age;
        this.family = ['哥哥','姐姐'];
    };
    Box.prototype.run=function(){
        return this.name +this.age+'running';
    };
    
    var box1 = new Box('le',10);
    box1.family.push('弟弟');
    alert(box1.family);     //['哥哥','姐姐','弟弟']
    var box2 = new Box('li',20);
    alert(box2.family);      //['哥哥','姐姐']

    寄生构造函数=工厂模式+原型模式

    function Box(name,age){
        var obj = new Object();
        obj.name = name;
        obj.age = age;
        obj.run = function(){
            return this.name+this.age+'running';
        }
        return obj;
    };
    var box1 = new Box('le',10);
    alert(box1.run());

    稳妥构造函数:

    function Box(name,age){
        var obj = new Object();
        obj.name = name;
        obj.age = age;
        obj.run = function(){
            return this.name+this.age+'running';
        }
        return obj;
    };
    var box1 = Box('le',10);
    alert(box1.run());

    跟寄生相比就是少了个new;有什么区别,为什么不用new也可以,以后再深究,

    继承

    function Box(name,age){
        this.name = name;
        this.age = age;
    };
    Box.prototype.family = 'fsm';
    
    function Desk(name ,age){
        Box.call(this,name,age);
    }
    var desk = new Desk('le',10);
    alert(desk.name);
    alert(desk.family);  //undefined //对象冒充只能继承构造里的信息

    掌握下面这一种就够了:

    //组合继承 = 原型链+构造函数
    
     function Box(name,age){
        this.name = name;
        this.age = age;
    };
    function Desk(name,age) {
        Box.call(this,name,age);   //对象冒充
    };
    Box.prototype.run = function(){
        return this.name+this.age+'running';
    };
    Desk.prototype = new Box();    //原型链继承
    var desk = new Desk('le',10);
    alert(desk.run());

    组合继承 这种模式很不错 ,必须掌握

    //中转函数
    function obj(obj){
        function F(){};
        F.prototype = obj;
        return new F();
    }   
    //寄生函数
    function create(box,desk){
        var f = obj(box.prototype);
        //f.constructor = desk;
        desk.prototype = f;
    }         
    function Box(name,age){
        this.name = name;
        this.age = age;
    }
    Box.prototype.run = function(){
        return this.name+this.age+'running';
    }
    function Desk(name,age){
        Box.call(this,name,age);
    }
    
    create(Box,Desk);
    var desk = new Desk('li',10);
    alert(desk.run());
    alert(desk.constructor);   //Box

    完结!

  • 相关阅读:
    XML to Excel
    C# 位域[flags]
    使用windows7的System帐户
    VS.NET 控件命名规范
    Microsoft Robotics Studio到底能做什么?
    SQLServer系统表及其应用(转)
    利用xslt、xml,ajax实现了一个无限级树型导航
    利用xslt实现一个树形导航
    网页信息抓取如何获取延迟加载的网页数据
    站长盈利盈利方式面面观
  • 原文地址:https://www.cnblogs.com/pfybk/p/13546688.html
Copyright © 2011-2022 走看看