美文网首页
面向对象

面向对象

作者: 进击的前端_风笑影 | 来源:发表于2017-11-02 17:43 被阅读0次

    1: OOP 指什么?有哪些特性

    • 面向对象程序设计(英语:Object-oriented programming,缩写:OOP)是种具有对象概念的程序编程范型,同时也是一种程序开发的抽象方针。它可能包含数据、属性、代码与方法。对象则指的是类的实例。它将对象作为程序的基本单元,将程序和数据封装其中,以提高软件的重用性、灵活性和扩展性,对象里的程序可以访问及经常修改对象相关连的数据。在面向对象程序编程里,计算机程序会被设计成彼此相关的对象。

    • 原则

    对于扩展是开发的(open for extension),当应用的需求改变时,我们可以对模块进行扩展,使其满足新的需求
    对于修改是封闭的(closed for modification),对模块行为进行扩展时,不必改动模块源代码或者二进制代码
    面向对象具有封装性,继承,多态等特性:

    • 封装:将相同属性、方法、逻辑关系的模块放在一起,通过限制只有特定类的对象可以访问这一特定类,通常利用接口实现消息的传入传出
    • 继承:在某种情况下,一个类会有“子类”。子类比原本的类(称为父类)要更加具体化,子类会继承父类的属性和行为,并且也可包含它们自己的。
    • 多态:是指由继承而产生的相关的不同的类,其对象对同一消息会做出不同的响应

    2: 如何通过构造函数的方式创建一个拥有属性和方法的对象?

    function Person(name,age){
      this.name = name;
      this.age = age;
    }
    Person.prototype.showName = function (){
      console.log(this.name)
    }
    var p1 = new Person;
    

    new一个对象发生了什么

    创建了一个空对象 作为this
    this.proto指向构造函数的prototype
    运行构造函数
    返回this(若构造函数没有return)

    3: prototype 是什么?有什么特性

    • 我们创建的每个函数都有一个prototype属性,这个属性是一个指针,指向一个对象,而这个对象的用途是包含所有实例共享的属性和方法。
    • prototype就是通过调用构造函数而创建的那个对象实例的原型对象。通常我们可以将实例对象的公共属性和方法放在prototype对象中。好处是节省空间,当有很多对象时,不用每次有一个对象就去重复创建一份方法。

    特性:

    • 每个函数都有一个prototype属性,指向一个对象,叫做原型对象
    • 所有对象都有proto
    • 对象.proto=== 构造函数.prototype
    • 访问一个对象的属性时,如果对象有这个属性,就获取到了,如果没有这个属性,则从proto里面去找,如果还是没有找到,则从原型对象prototype里的proto中去寻找。

    4:画出如下代码的原型图

    function People (name){
      this.name = name;
      this.sayName = function(){
        console.log('my name is:' + this.name);
      }
    }
    
    People.prototype.walk = function(){
      console.log(this.name + ' is walking');  
    }
    
    var p1 = new People('饥人谷');
    var p2 = new People('前端');
    
    Paste_Image.png

    问题5: 创建一个 Car 对象,拥有属性name、color、status;拥有方法run,stop,getStatus

    function Car (name, color, status){
            this.name = name;
            this.color = color;
            this.status = status;
        }
    
    
        Car.prototype.run = function() {
            this.status = "running";
            console.log(this.status);
        }
    
        Car.prototype.stop = function() {
            this.status = "stop";
            console.log(this.status);
        }
    
        Car.prototype.getStatus = function() {
            console.log(this.status);
        }
    
    
        var p1 = new Car("宝马","black","run");
        p1.run();
        p1.stop();
        p1.getStatus();
    
    

    6: 使用木桶布局实现一个图片墙

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>木桶布局</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
    
        #img-preview {
            width: 1000px;
            margin: 0 auto;
        }
    
        .img-row:after {
            content: "";
            display: block;
            clear: both;
        }
    
        .img-box {
            float: left;
        }
    
        .img-line .img-box:first-child {
            padding-left: 0;
        }
    </style>
    <script type="text/javascript" src="js/index2.js" ></script>
    <script>
    window.onload = function (){
    
        function Barrels(wrap){
            this.wrap = wrap;
            this.baseHeight = 100;
            this.loadImg();
            this.rowImg = [];
            this.wrapWidth = parseInt(getStyle(wrap, 'width'));
        }
    
        Barrels.prototype = {
            //加载图片
            loadImg: function (){
    
                //得到链接数组
                var aUrls = this.getImgUrls(100);
    
                for(var i=0; i<aUrls.length; i++){
                    var _this = this;
    
                    //想要得到图片的宽高,就要用new预加载
                    var oImg = new Image();
    
                    //图片对象加url
                    oImg.src = aUrls[i];
    
                    //图片加载完成后才能对它的宽和高进行操作
                    oImg.onload = function (){
                        var ratio = this.width/this.height
                        var imgInfo = {
                            target: this,
                            //new对象有width和height属性
                            width: this.width/this.height* _this.baseHeight,
                            height:  _this.baseHeight,
                            ratio: ratio
                        };
    
                     //计算每一行容纳的imgInfo的个数
                    _this.render(imgInfo) ;
                    };
    
                }
            },
            render: function (imgInfo){
                console.log(imgInfo);
                var rowWidth = 0;
                var rowHeight = 0;
                this.rowImg.push(imgInfo);
                for(var i=0; i<this.rowImg.length; i++){
                    rowWidth = rowWidth + this.rowImg[i].width;
                }
                if(rowWidth > this.wrapWidth ){
                    console.log(rowWidth);
                    var lastImg = this.rowImg.pop();
                    rowWidth = rowWidth - lastImg.width;
                     console.log(rowWidth);
                    rowHeight = this.wrapWidth * this.baseHeight / rowWidth;
    
                    this.layout(rowHeight);
                    this.rowImg = [];
                    this.rowImg.push(lastImg);
    
                }
            },
            layout: function (rowNewHeight){
                console.log(rowNewHeight);
                var imgRow = document.createElement('div');
                imgRow.className = 'img-row';
                console.log(this.rowImg);
                this.rowImg.forEach(function (imgInfo, idx){
                    var imgCt = document.createElement('div');
                    imgCt.className = 'img-box';
                    var oImg = imgInfo.target;
                  
                    oImg.style.height = rowNewHeight + 'px';
                    imgCt.appendChild(oImg);
                    imgRow.appendChild(imgCt);
                });
                this.wrap.appendChild(imgRow);
            },
            //获取图片的url
            getImgUrls:  function getImgUrls(num){
                         var imgColor, imgWidth, imgHeight, urls = [];
                         for(var i=0; i<num; i++){
                             //颜色色值转化为16进制
                             imgColor = Math.random().toString().substring(2,8);
    
                             //设置随机的宽度
                             imgWidth = Math.floor(Math.random()*150 + 50);
    
                             //设置随机的高度
                             imgHeight = Math.floor(Math.random()*30 + 50);
    
                             //将颜色宽高放入数组
                             urls.push('http://placehold.it/' + imgWidth + 'x' + imgHeight + '/' + imgColor + '/fff')
    
                         }
                         return urls;
            }
        }
    
        var oWrap = document.getElementById('img-preview');
        var barrels = new Barrels(oWrap);
    
    
    
        //封装一个获取样式的函数
        function getStyle(obj,attr){
            if(obj.currentStyle){
                return obj.currentStyle[attr];
            }else{
                //非ie
                return window.getComputedStyle(obj,false)[attr];
            }
        }
    }  
    </script>
    </head>
    <body>
        <div id="img-preview"></div>
    </body>
    </html>
    

    相关文章

      网友评论

          本文标题:面向对象

          本文链接:https://www.haomeiwen.com/subject/arrapxtx.html