尽量不要暴露全局变量

关于对象

一个对象就是一系列属性的集合，一个属性包含
一个名字和一个值。一个属性的值可以是函数，这
种情况下属性也被称为方法

var obj  = {
    a: 1,
    b: 'ffem',
    sayName: function(){
        console.log(this.a)
        console.log('hello')
    }
}
obj.sayName()

//使用字面量来构造一个对象
//麻烦，如果要个性化只能手工赋值
//使用者必须了解对象

var obj1 = {
    nick: 'Byron',
    age: 20,
    printName: function(){
        console.log(obj1.nick);
    }
}

var obj2 = {
    nick: 'Casper',
    age: 25,
    printName: function(){
        console.log(obj2.nick);
    }
}

//工厂方法
//通过创建一个函数来实现自动创建对象的过程，
//对于个性化通过参数实现，开发者不必关注细节
//只需要传入指定参数即可
//但是构造出来的对象都是Object 没有识别度

function createObj(nick, age){
    var obj = {
        nick: nick,
        age: age,
        printName: function(){
            console.log(this.nick);
        }
    };
    return obj;
}

var obj3 = createObj('Byron', 30);
obj3.printName();

instanceof是一个操作符，可以判断对象是否为某个类型的实例

p1 instanceof Person;  //true
p1 instanceof Object;   //true

instanceof判断的是对象

1 instanceof Number;   //false

function People(name){
    this.name = name
    this.sayName = function(){
        console.log(this.name)
    }
}
//undefined
People.prototype
//Object {}
People.prototype.a = 1
//1
People.prototype
//Object {a: 1}
p = new People()
//People {name: undefined}
p.__proto__
//Object {a: 1}

//p.__proto__ = People.prototype
//实例可以通过__proto__访问到其类型的prototype属性
//这就意味着类的prototype对象可以作为一个公共容器，供所有实例访问

//面向对象的方法写tab切换
function Tab(tabNode){
    
    this.init = function(tabNode){
        this.tabs = tabNode.querySelectorAll('.tab-ct .header>li')
        this.panels = tabNode.querySelectorAll('.tab-ct .content>li')
        this.tabHeader = tabNode.querySelector('.tab-ct .header')
    }
    this.bind = function(){
        var self = this

    this.tabHeader.onclick = function(e){
            //console.log(this)
            
    if(e.target.tagName.toLowerCase() === 'li') {
        self.tabs.forEach(function(node){
            node.classList.remove('.active')
        })
        var index = [].indexOf.call(self.tabs, e.target)
            self.panels.forEach(function(node){
             node.classList.remove('active') 
            })
                self.panels[index].classList.add('active')
            }
        }
    }

    this.init(tabNode)
    this.bind()
}

var tabNode1 = document.querySelectorAll()[0]
var tabNode2 = document.querySelectorAll()[1]

new Tab(tabNode1)
new Tab(tabNode2)

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

OOP是指面向对象编程。
特性：封装 继承 多态

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

//构造函数首字母一般大写以示区分
function People(name){
    this.name = name  
    this.sayName = function(){
        console.log(this.name)
    }
    //这里一般不return
}

var p1 = new People('lem')
var p2 = new People('fem')

//p1 = {}   空对象
//p1.name = 'lem'
//p1.sayName = function(){}
//return p1

p1.name
p1.sayName

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

//任何函数使用new表达式就是构造函数
每个函数都自动添加一个名为prototype属性，这是一个对象
每个对象都有一个内部属性__proto__(规范中没有指定这个
名称，但是浏览器都这样实现的)指向其类型的prototype属性，类的实例
也是对象，其__proto__属性指向"类"的prototype 

所有的实例都会通过原型链引用到prototype
prototype相当于特定类型所有实例都可以访问到的一个公共容器
重复的东西移动到公共容器里放一份就可以了

题目4：画出如下代码的原型图

题目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(){ console.log('run') },
    stop : function(){ console.log('stop') },
    getStatus : function(){ console.log('getStatus') }
}

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

function GoTop(ct) {
    this.ct = ct
    this.target = $('<div class="go-top"></div>')
    this.createNode();
    this.bindEvent();
}

Gotop.prototype = {
    createNode : function() {
        this.target.css({
            position: 'fixed',
            bottom: '0px',
            right: '0px'
        })
        this.target.appendTo(this.ct)
    },

    bindEvent: function(){
        var _this = this
            $(window).scroll(function(){
                 scrollTop = $(window).scrollTop()
                 if (scrollTop > 500) {
                     _this.target.fadeIn(500)  
                 } else {
                     _this,target,fadeOut(500)
                 }    
            })
            _this.target.click(function(){
               $(window).scrollTop(0)  
           })
    }
}

var gotop = new Gotop('body')

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