高级任务一

2017-12-29  本文已影响0人  饥人谷_迪

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

主要特性

  1. 封装:将类的使用和实现分开,只保留部分接口和方法与外界联系

2.继承:子类自动继承父类中的属性和方法,并可以添加新的属性和方法或者对部分的属性和方法进行重写,增加代码的可重复性

3.多态: 子类继承来自祖父类的方法和属性,对其中一部分进行重写

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

        function Person(name, age) {
            this.name = name
            this.age = age
            this.printName = function() {
                console.log(this.name)
            }
        }
        var person1 = new Person('卉', 26)
        var person2 = new Person('慧', 24)

        person1.printName()
        person2.printName()

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

特性:

  1. 每一个函数都有一个 prototype 属性,指向一个原型对象
  2. prototype 一旦更改,将影响其所有的实例化对象的方法
  3. 所有对象都有__proto__
  4. 对象的 __proto__等于构造函数.prototype
  5. 访问一个对象属性时,如果对象有这个属性,就获取,就一直去上一层的__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('前端');

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

function Person(name, age) {
            this.name = name
            this.age = age
            this.printName = function() {
                console.log(this.name)
            }
        }
        var person1 = new Person('卉', 26)
        var person2 = new Person('慧', 24)
        person1.age
        person1.printName()
        person2.printName()

        function Car(name, color, status) {
            this.name = name
            this.color = color
            this.status = status
        }
        Car.prototype.run = function() {
            console.log('run')
        }
        Car.prototype.stop = function() {
            console.log('stop')
        }
        Car.prototype.getStatus = function() {
            console.log(this.status)
        }

        // Car.prototype = {
        //  run: function() {
        //      console.log('run')
        //  },
        //  stop: function() {
        //      console.log('stop')
        //  }, 
        //  getStatus: function() {
        //      console.log(this.status)
        //  }
        }

        var car1 = new Car('宝马', '红色', '行进')
        car1.run()
        car1.getStatus()

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

1.  `ct`属性,GoTop 对应的 DOM 元素的容器
2.  `target`属性, GoTop 对应的 DOM 元素
3.  `bindEvent` 方法, 用于绑定事件
4.  `createNode` 方法, 用于在容器内创建节点

代码

效果

问题7: 使用木桶布局实现一个图片墙

代码

效果

上一篇 下一篇

猜你喜欢

热点阅读