高级1

问题1： OOP 指什么？有哪些特性

面向对象编程
特性: 把某个功能看成一个整体(对象)，通过调用对象的某个方法来启动
功能。在用的时候不去考虑这个对象内部的实现细节，在去实现这个对象细节的时候不用管谁在调用。
面向对象的写法不仅更简洁，而且更可控。

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

举列说明

// 第一种方法
function Person(nick, age) {
    this.nick = nick;
    this.age = age;
    this.sayName = function() {
        console.log(this.nick);
    }
}
var p1 = new Person('Byron', 25);
// 第二种方法
function Person(nick, age){
    this.nick = nick;
    this.age = age;
}
Person.prototype.sayName = function(){
    console.log(this.nick);
}

var p1 = new Person();
p1.sayName();
// 1、创建类的实列，即p1={},这步是把一个空的对象的proto属性设置为F.prototype
// 2、初始化实列。函数F被传入参数并调用，关键字this被设定为该实列
// 3、返回实列

问题3： prototype 是什么？有什么特性

因为任何类的prototype属性本质上都是个类Object的实例。
我们通过函数定义了类，类（函数）自动获得属性prototype，
每个类的实例都会有一个内部属性__proto__，指向类的prototype属性。 特性：
实列可以通过prop 访问到其类型的prototype属性,这就意味着类的prototype对象可以作为一个公共容器，供所有实列访问。
能够抽象重复的理由：
所有实列都会通过原型链引用到类型prototype
prototype相当于特定类型所有实列都可以访问到的一个公共容器
重复的东西移动到公共容器里放一份就可以了

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

原型图.png

问题5： 创建一个 Car 对象，拥有属性name、color、status；拥有方法run，stop，getStatus.

    // 创建一个Car对象

        function Car() {
            this.name = name;
            this.color = color;
            this.status = status;
        }
        Car.prototype = {
            run: function() {
                    console.log('is running');
            }
            stop: function() {
                console.log('is stoped');
            }
            getStatus: function() {
                console.log(this.status);
            }
        }

        var car1 = new Car('宝马', 'red', 'good');

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

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

// 创建一个GoTop对象

        function GoTop($ct, $target) {
            this.$ct = $ct;
            this.$target = $target;
            this.bindEvent();
        }
        GoTop.prototype = {
            bindEvent: function() {
                this.createNode();
                this.$ct.on('click', function() {
                    // this.scrollTop(0);
                    // console.log($(this).scrollTop());
                    $(window).scrollTop(0);
                })
            },
            createNode: function() {
                this.$target.css({
                    padding: 10,
                    background: 'red',
                    outline: 'none',
                    border: 'none',
                })
                this.$ct.append(this.$target);
                $('body').append(this.$ct);
            }
        }

        var $ct = $('<div class="wrap"></div>');
        var $target = $('<button class="btn">GoTop</button>');

        new GoTop($ct, $target);

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

效果
代码