js-day2

封装

创建一个类

let Book = function (id, bookname, price) {
    this.id = id;
    this.bookname = bookname;
    this.price = price
};
Book.prototype.dispaly = function () {};
// Book.prototype={
//     dispaly:function () {}
// };
let book = new Book(10, 'javascript', 50);
console.log(book.bookname);

属性与方法封装

let Book=function (id,name,price) {
    let num=1;
    function checkId() {}
    this.getName=function () {};
    this.getPrice=function () {};
    this.setName=function () {};
    this.setPrice=function () {};
    this.id=id;
    this.copy=function () {};
    this.setName(name);
    this.setPrice(price);
};
Book.isChinese = true;
Book.resetTime = function () {
    console.log('new Time');
};
Book.prototype = {
    isJSBook:false,
    display:function () {}
};
let b=new Book(11,'javascript',50);
console.log(b.num);
console.log(b.isJSBook);
console.log(b.id);
console.log(b.isChinese);
console.log(Book.isChinese);
Book.resetTime();

闭包实现

let Book=(function () {
    let bookNum=0;
    function checkBook(name) {}
    return function (newId,newName,newPrice) {
        let name,price;
        function checkId(id) {}
        this.getName=function () {};
        this.getPrice=function () {};
        this.setName=function () {};
        this.setPrice=function () {};
        this.id=newId;
        this.copy=function(){};
        bookNum++;
        if (bookNum>100)
            throw new Error('only 100');
        this.setName(name);
        this.setPrice(price);
    }
})();
Book.prototype={
    isJSBook:false,
    display:function(){},
};

将添加原型属性和方法部分整合到闭包内

let Book=(function () {
    let bookNum=0;
    function checkBook(name) {}
    function _book(newId,newName,newPrice) {
        let name,price;
        function checkId(id) {}
        this.getName=function () {};
        this.getPrice=function () {};
        this.setName=function () {};
        this.setPrice=function () {};
        this.id=newId;
        this.copy=function(){};
        bookNum++;
        if (bookNum>100)
            throw new Error('only 100');
        this.setName(name);
        this.setPrice(price);
    }
    _book.prototype={
        isJSBook:false,
        display:function(){},
    };
    return _book;
})();

忘记new

let Book = function (title,time,type) {
    this.title=title;
    this.time=time;
    this.type=type;
};
let book=Book('javascript','2014','js');
console.log(book);
console.log(window.title)
console.log(window.time)
console.log(window.type)

无须new的实现

let Book = function (title,time,type) {
    if (this instanceof Book){
        this.title=title;
        this.time=time;
        this.type=type;
    }else {
        return new Book(title,time,type)
    }
};
let book=Book('javascript','2014','js');
console.log(book);
console.log(book.title);
console.log(book.time);
console.log(book.type);
console.log(window.title);
console.log(window.time);
console.log(window.type);

继承

子类的原型对象----类式继承

function SuperClass() {
    this.superValue=true;
}
SuperClass.prototype.getSuperValue=function () {
    return this.superValue;
};
function SubClass() {
    this.subValue=false;
}
SubClass.prototype=new SuperClass();
SubClass.prototype.getSubValue=function () {
    return this.subValue;
};
let instance=new SubClass();
console.log(instance.getSuperValue());
console.log(instance.getSubValue());
console.log(instance instanceof SuperClass);
console.log(instance instanceof SubClass);
console.log(SubClass instanceof SuperClass);
console.log(SubClass.prototype instanceof SuperClass);
console.log(instance instanceof Object);

缺点:引用属性会被共用,且无法传递参数

function SuperClass() {
    this.books=['javascript','html','css'];
}
function SubClass() {}
SubClass.prototype = new SuperClass();
let instance1=new SubClass();
let instance2=new SubClass();
console.log(instance2.books);
instance1.books.push('design');
console.log(instance2.books);

创建即继承----构造函数继承(但无法继承父类原型中的方法)

function SuperClass(id) {
    this.books=['javascript','html','css'];
    this.id=id;
}
SuperClass.prototype.showBooks=function () {
    console.log(this.books);
};
function SubClass(id) {
    SuperClass.call(this,id);
}
let instance1=new SubClass(10);
let instance2=new SubClass(11);
instance1.books.push('design');
console.log(instance1.books);
console.log(instance1.id);
console.log(instance2.books);
console.log(instance2.id);
instance1.showBooks();

组合继承

function SuperClass(name) {
    this.name=name;
    this.books=['html','css','javascript'];
}
SuperClass.prototype.getName=function () {
    console.log(this.name);
};
function SubClass(name,time) {
    SuperClass.call(this,name);
    this.time=time;
}
SubClass.prototype=new SuperClass();
SubClass.prototype.getTime=function () {
    console.log(this.time);
};
let instance1=new SubClass('js book',2014);
instance1.books.push('desgin');
console.log(instance1.books);
instance1.getName();
instance1.getTime();
let instance2=new SubClass('css book',2013);
console.log(instance2.books);
instance2.getName();
instance2.getTime();

原型式继承

function inheritObject(o) {
    function F() {}
    F.prototype=o;
    return new F();
}
let book={
    name:'js book',
    alikeBook:['css book','html book']
};
let newBook=inheritObject(book);
newBook.name = 'ajax book';
newBook.alikeBook.push('xml book');
let otherBook=inheritObject(book);
otherBook.name='flash book';
otherBook.alikeBook.push('as book');
console.log(newBook.name);
console.log(newBook.alikeBook);
console.log(otherBook.name);
console.log(otherBook.alikeBook);
console.log(book.name);
console.log(book.alikeBook);

寄生式继承

function inheritObject(o) {
    function F() {}
    F.prototype=o;
    return new F();
}
let book={
    name:"js book",
    alikeBook:['css book','html']
};
function createBook(obj) {
    let o=new inheritObject(obj);
    o.getName=function () {
        console.log(name);
    };
    return o;
}

寄生组合式继承

function inheritObject(o) {
    function F() {}
    F.prototype=o;
    return new F();
}
function inhertPrototype(subClass,superClass) {
    let p=inheritObject(superClass.prototype);
    p.constructor = subClass;
    subClass.prototype=p;
}
function SuperClass(name) {
    this.name=name;
    this.colors=['red','blue','green'];
}
SuperClass.prototype.getName=function () {
    console.log(this.name);
};
function SubClass(name,time) {
    SuperClass.call(this,name);
    this.time=time;
}
inhertPrototype(SubClass,SuperClass);
SubClass.prototype.getTime=function () {
    console.log(this.time);
};
let instance1=new SubClass('js book',2014);
let instance2=new SubClass('css book',2013);
instance1.colors.push('black');
console.log(instance1.colors);
console.log(instance2.colors);
instance2.getName();
instance2.getTime();

多继承

单个对象属性复制

let extend = function (target, source) {
    for (let property in source){
        target[property]=source[property];
    }
    return target;
};
let book={
    name:'js',
    alike:['css','html','javascript']
};
let anotherBook={
    color:'blue'
};
extend(anotherBook,book);
console.log(anotherBook.name);
console.log(anotherBook.alike);
anotherBook.alike.push('ajax');
anotherBook.name='desgin';
console.log(anotherBook.name);
console.log(anotherBook.alike);
console.log(book.name);
console.log(book.alike);

多对象属性复制

let mix=function () {
    let i=1,
        len=arguments.length,
        target=arguments[0],
        arg;
    for (;i<len;i++){
        arg=arguments[i];
        for (let property in arg){
            target[property]=arg[property];
        }
    }
    return target;
};

绑定到原生Object

Object.prototype.mix=function () {
    let i=0,
        len=arguments.length,
        arg;
    for (;i<len;i++){
        arg=arguments[i];
        for (let property in arg){
            this[property]=arg[property];
        }
    }
};
otherBook={};
book1={
    name:'book1'
};
book2={
    color:'red'
};
otherBook.mix(book1,book2);
console.log(otherBook);

多态

function add() {
    let arg=arguments,
        len=arg.length;
    switch (len){
        case 0:
            return 10;
        case 1:
            return 10+arg[0];
        case 2:
            return arg[0]+arg[1];
    }
}
console.log(add());
console.log(add(5));
console.log(add(6,7));

封装到类中

function Add() {
    function zero() {
        return 10;
    }
    function one(num) {
        return 10+num;
    }
    function two(num1,num2) {
        return num1+num2;
    }
    this.add=function () {
        let arg=arguments,
            len=arg.length;
        switch (len){
            case 0:
                return zero();
            case 1:
                return one(arg[0]);
            case 2:
                return two(arg[0],arg[1]);
        }
    }
}
let A=new Add();
console.log(A.add());
console.log(A.add(5));
console.log(A.add(6,7));