美文网首页
高级1 OOP及木桶布局

高级1 OOP及木桶布局

作者: 饥人谷_zhangfan | 来源:发表于2017-07-16 12:59 被阅读0次

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

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

    原则

    • 对于扩展是开发的(open for extension),当应用的需求改变时,我们可以对模块进行扩展,使其满足新的需求
    • 对于修改是封闭的(closed for modification),对模块行为进行扩展时,不必改动模块源代码或者二进制代码

    面向对象具有封装性继承多态等特性:

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

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

    代码如下:

    var Person= function ()  {
     this.name:  "Scofield"
     this.age: 23
    }
    NPC.prototype.say = function() {
    console.log('hello')
    
    var  NPC = new Person()
    

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

    prototype表示原型对象。原型的属性,在它所创建的对象实例中共享,当JS程序读取对象中属性时,首先读取的是对象中定义的属性,如果属性不存在,则到对象的原型中搜索,这也体现JS的继承扩展特性

    问题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('前端');
    

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

        var Car = function(name,color,status) {
            this.name = name
            this.color = color
            this.status = status
        }
        Car.prototype.run = function () {
                console.log('I am runing')
            }
        Car.prototype.stop = function() {
                console.log('I am stop')
            }
        Car.prototype.getStatus = function() {
                console.log(this.status)
            }
        var car = new Car("auto","red","stop")
    </script>
    

    问题6: 创建一个 GoTop 对象,当 new 一个 GotTop 对象则会在页面上创建一个回到顶部的元素,点击页面滚动到顶部。拥有以下属性和方法

    代码

    木桶布局效果预览

    相关文章

      网友评论

          本文标题:高级1 OOP及木桶布局

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