JsDesignMode第一篇

1.灵活的语言JS
    1.1验证表单

 function checkName(){
            //验证姓名
        }
        //创建了全局变量

    1.2函数的另一种形式

 var checkName = function(){
            //验证姓名
        }
        //别人定义相同的方法会覆盖掉原有的方法
        //放在一个变量中减少被覆盖的风险

    1.3用对象收编变量

 var CheckObject = {
            checkName:function(){
                //验证姓名
            }
        }
        //将函数作为一个对象的方法,使用点语法来进行访问

    1.4对象的另一种形式

var CheckObject = function(){};
        CheckObject.checkName = function(){
            //验证姓名
        }
        //别人想用你写的对象的方法就麻烦了,因为不能够复制一份

    1.5真假对象
       

var CheckObject = function(){
            return {
                checkName:function(){
                    //验证姓名
                }
            }
        }
        //将之前的对象返回出来,别人调用时都返回一个新对象,每个人在使用时互不影响

    1.6类也可以
       

 var CheckObject = function (){
            this.checkName = function(){
                //验证姓名
            }
        }
        //既然是一个类就需要使用关键字new来创建

    1.7检测类
      

  //新创建的对象会对类上的this属性进行复制,新创建的对象都拥有自己的一套方法
        var CheckObject = function(){};
        CheckObject.prototype.checkName = function(){
            //验证姓名
        }
        //这样创建出来的新对象所拥有的方法只有一个,因为都会依赖prototype原型进行寻找
        //最后找到的方法都是同一个,绑定在对象类的原型上

    1.8方法还可以这样使用
        this指向当前对象,我们在每次方法末尾将这个对象返回,就可以实现方法的链式调用
    1.9函数的祖先
      

  //给每一个函数添加方法
        Function.prototype.addMethod = function(name,fn){
            this.[name] = fn;
        }
        var methods = new Function();
        methods.addMethod('checkName', function(){
            //验证姓名
        })
        //同样可以链式添加使用

    1.10同理可以改写为类式调用
2.面向对象编程
    2.1面向过程与面向对象
        函数？对象？
        如果按照传统流程编写一个个函数来解决需求,不利于团队开发,这是一种面向过程的实现
        面向对象就是将你的需求抽象成为一个对象,对这个对象进行分析(属性和方法),称之为类
        一个重要的特点就是封装,将你需要的功能放在一个对象中
        比如你出门带上行李箱,将你所需都封装在了里面
        而JS是一种解释性的弱类型语言,没有经典语言的class,通过一些特性模仿实现
    2.2封装
        创建一个类很容易,编程习惯,类变量名首字母大写,然后通过this来添加属性和方法
      

  var Book = function(id, bookname, price){
            this.id = id;
            this.bookname = bookname;
            this.price = price;
        }

        也可以通过prototype来对原型添加属性和方法
        那么this和prototype有何区别
            1.this  
                在当前对象上添加
            2.prototype
                JS是一种基于原型prototype的语言,每创建一个对象,都有一个原型prototype
                用于指向所继承的属性、方法,并不是对象自己所拥有,需要通过prototype一级一级查找得到
                constructor拥有整个原型对象的函数或对象
        私有属性、私有方法、共有属性、共有方法、保护方法
        JS的函数级作用域,声明在函数内部的变量以及方法在函数外部是访问不到的
        而this创建的属性和方法,新创建对象每一个都拥有一份并且可以在外部访问到
        this创建的属性可以看作是对象共有属性和对象共有方法
        而且this方法可以访问到对象的共有属性与共有方法,还可以访问到自身的私有属性和私有方法
        被称为特权方法
     

   var Book = function(id, name, price){
            //私有属性
            var num = 1;
            //私有方法
            function checkId(){};
            //特权方法
            this.getName = function(){};
            //公有属性
            this.id = id;
            //公有方法
            this.copy = function(){};
            //构造器
            this.setName(name);
        }

        在类外面使用点语法添加的属性和方法没有执行到,新创建的对象无法获取他们,可以通过类来使用
        这被称为静态共有属性和静态共用方法
        通过prototype创建的属性或者方法可以通过this访问到
        称之为共有属性和共有方法
      

  //安全模式
        var 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);
            }
        }

    2.3继承
        1.类式继承
         

   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;
            };

            1.原理
                类的原型对象就是为类的原型添加共有方法,但是类不能直接访问这些属性和方法
                实例化一个父类,新创建的对象复制了父类的构造函数内的属性和方法
                并且将原型指向了父类的原型对象,可以直接访问父类原型上的属性和方法
                再赋值给子类的原型,那么子类的原型就可以访问到父类的原型的方法
            2.缺点
                父类中的共有属性要是引用类型,就会在子类中被所有实例共用
                一个子类的实例更改子类原型从父类构造函数继承来的共有属性就会直接影响其他子类
        2.构造函数继承
           

 function SuperClass(id){
                this.books = ['JS','html','css']
                this.id = id;
            }
            SuperClass.prototype.showBooks = function(){
                console.log(this.books);
            }
            function SubClass(id){
                SuperClass.call(this, id);
            }

            1.原理
                call可以更改函数的作用环境
                对父类调用此方法就是将子类中的变量在父类中执行一遍
                由于父类中是给this绑定属性的,子类也就继承父类共有属性
            2.缺点
                没有涉及原型
                父类原型方法不会被子类继承
                如果要被子类继承就得放在构造函数中,那么实例就会各自拥有一份
        3.组合继承
           

 function SuperClass(name){
                this.books = ['JS','html','css']
                this.name = name;
            }
            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);
            };

            缺点:
                父类构造函数调用了两遍
        4.原型式继承
           

 function inheritObject(o){
                function F(){
                    F.prototype = o;
                    return new F();
                }
            }

        5.寄生式继承
         

   var book = {
                name: "js book",
                alikebook: ["css book","html book"]
            };
            function createBook(obj){
                var o = new inheritObject(obj);
                o.getName = function(){
                    console.log(name);
                };
                return o;
            }

        6.寄生组合式继承
       

     function inheritPrototype(subClass, superClass){
                var p = inheritObject(superClass.prototype);
                p.constructor = subClass;
                subClass.prototype = p;
            }

            在构造函数继承已经调用了父类的构造函数,因此我们需要父类的原型对象的一个副本
            通过原型链继承便可以得到
            但是复制对象p中的constructor指向的不是subClass,因此再做一次增强
            将p赋值给子类的原型
            这样子类继承了父类的原型且没有执行父类的构造函数
        7.多继承
            单继承
           

 var extend = function(target, source){
                for(var property in source){
                    target[property] = source[property];
                }
                return target;
            };

            对对象属性的一个复制过程,只能复制值类型的属性
            多继承
           

 Object.prototype.mix = function(){
                var i = 0,
                    len = arguments.length,
                    arg;
                for(;i < len; i++){
                    arg = arguments[i];
                    for(var property in arg){
                        this[property] = arg[property];
                    }
                }
            }

        8.多态
            对传入的参数做判断以实现多种调用方式