js学习总结----设计模式

        var person1 = {
            name:‘张三‘,
            age:18
        }

        var person2 = {
            name:"李四",
            age:34
        }            

　　　　 var utils = {
            select:function(){

            }
        }
        var searchRender = {
            change:function(){
                utils.select();//调用外部的方法
                this.clickEven();
            },
            clickEven:function(){
                
            }
        }

　　　　function createJsPerson(name,age){
            var obj = {};
            obj.name = name;
            obj.age = age;
            obj.writeJs = function(){
                console.log(‘ok‘)
            }
            return obj;
        }
        var p1 = createJsPerson("小王",12);

　　　　　function sum(num){
            if(typeof num === "undefined"){
                return 0
            }
            return num
        }
        sum(100);
        sum()

　　　　function CreateJsPerson(name,age){
　　　　　　　//浏览器默认创建的对象就是我们的实例p1 -> this
            this.name = name;
            this.age = age;
            this.writeJs = function(){
                console.log(‘ok‘)
            }
        }
　　　　var p1 = new CreateJsPerson(‘张三‘,12);

　　　　var p2 = new CreateJsPerson(‘李四‘,13);
　　　　
　　　　var res = CreateJsPerson("类似",7);//这样写不是构造函数模式执行而是普通的函数执行 由于没有写return 所以res = undefined
　　　　并且CreateJsPerson这个方法中的this是window

function Fn(){
            var num = 10;
            this.x = 100;
            this.getX = function(){
                //this->需要看getX执行的时候才知道
                console.log(this.x)
            }
        }
        var f1 = new Fn;
        var f2 = new Fn;
        f1.getX();// this 是f1 ->100
        var ss = f1.getX;
        ss()//this 代表window ->undefined
        console.log(f1.num)//undefined
        /*
        1、在构造函数模式中new Fn()执行,如果Fn不需要传递参数的话,后面的小括号可以省略
        2、this的问题:在类中出现的this.xxx = xxx中的this都是当前类的实例，而某一个属性值(方法),方法中的this需要看方法执行的时候，前面是否有".",才知道this是谁
        3、类有普通函数的一面，当函数执行的时候，var num其实只是当前形成的私有作用域的私有变量而已，它和我们的f1这个实例没有任何的关系，只有this.xxx = xxx 才相当于给f1这个实例增加私有的属性和方法，才和我们的f1有关系...
        4、在构造函数模式中，浏览器会默认的把我们的实例返回（返回的是一个对象数据类型的值）;如果我们自己手动写了return 返回：
            返回的是一个基本数据类型的值，当前实例是不变的，例如：return 100。我们的f1还是当前Fn的实例
            返回的是一个引用数据类型的值，当前的实例会被自己返回的值替换掉，例如:return{name:‘李四‘}我们的f1就不在是Fn的实例了，而是对象{name:‘李四‘}
        5、检测某一个实例是否属于这个类->instanceof
            console.log(f1 instanceof Fn)//true
            console.log(f1 instanceof Array)//false
            console.log(f1 instanceof Object)//true 因为所有的实例都是对象数据类型的，而每一个对象数据类型都是Object这个内置类的一个实例，所以f1也是它的一个实例
            对于检测数据类型来说，typeof有自己的局限性，不能细分object下的对象、数组、正则...
        6、f1和f2都是Fn这个类的一个实例，都拥有x和getX两个属性，但是这两个属性是各自私有的属性，所以：
        console.log(f1.getX===f2.getX);//false
        7、in:检测某一个属性是否属于这个对象 attr in object ,不管是私有的属性还是公有的属性，只要存在，用in来检测都是true
           console.log(‘getX‘ in f1)// true
           hasOwnProperty:用来检测某一个属性是否为这个对象的"私有"属性，这个方法只能检测私有的属性
           console.log(f1.hasOwnProperty(‘getX‘))// true
　　　　 8、isPrototypeOf:函数用于指示对象是否存在于另一个对象的原型链中。如果存在，返回true，否则返回false
        思考:检测某一个属性是否为该对象的"公有属性"

            function hasPubProperty(obj,attr){
                return (attr in obj) && !obj.hasOwnProperty(attr)
            }
        

        */

　　　　　function Fn(){
            this.x = 100
　　　　　　　this.sum = function(){
　　　　　　　}

        }
        Fn.prototype.getX = function(){
            console.log(this.x);
        }
　　　　 Fn.prototype.sum = function(){}
        var f1 = new Fn;
        var f2 = new Fn;
        console.log(Fn.prototype.constructor===Fn)// true

/*
        在原型模式中,this常用的有两种情况
        在类中this.xxx = xxx;this->当前类的实例
        某一个方法中的this->看执行的时候"."前面是谁this就是谁
            1、需要先确定this的指向(this是谁)
            2、把this替换成对应的代码
            3、按照原型链查找，得出结果
        */
        function Fn(){
            this.x = 100;
            this.y = 200;
            this.getY = function(){
                console.log(this.y)
            }
        }
        Fn.prototype = {
            constructor:Fn,
            y:300,
            getX:function(){
                console.log(this.x)
            },
            getY:function(){
                console.log(this.y)
            }
        }

        var f = new Fn
        f.getX();//100
        f.__proto__.getX();//undefined  console.log(f.__proto__.x)
        //在内置类的原型上扩展我们的方法: 数组去重
        Array.prototype.myUnique = function(){
            //this->ary
            var obj = {}
            for(var i = 0;ithis.length;i++){
                var cur = this[i];
                if(obj[cur] == cur){
                    this[i] = this[this.length-1];
                    this.length--;
                    continue
                }
                obj[cur] = cur;
            }
            obj = null;
            return this;//目的为了实现链式写法
        }
        //链式写法:执行完成数组的一个方法可以紧接着执行下一个方法
        //原理:ary为什么可以使用sort方法：因为sort是Array.prototype上的公有的方法，而数组ary是Array的一个实例，所以ary可以使用sort方法->数组才能使用我们Array原型上定义的属性和方法。
        //sort执行完成的返回值是一个排序后的"数组",可以执行reverse
        //reverse执行完成的返回值是一个排序后的"数组"，可以执行pop
        //pop执行完成的返回值是删除的数据，不是一个数组了
        ary.sort(function(a,b){
            return a - b;
        }).reverse().pop();

//1、起一个别名
        function Fn(){
            this.x = 100;
        }
        var pro = Fn.prototype;//把原来原型指向的地址赋值给pro,现在他们操作的是同一个内存空间
        pro.getX = function(){

        }
        pro.getY = function(){
            
        }
        pro.getZ = function(){
            
        }
        //2、重构原型对象的方法->自己新开辟一个堆内存，存储我们公有的属性和方法，把浏览器原来给Fn.prototype开辟的那个替换掉
        function Fn(){
            this.x = 100;
        }
        Fn.prototype = {
            constructor:Fn,
            a:function(){

            },
            b:function(){

            }
        }
        var f = new Fn()
        //1、只有浏览器天生给Fn.prototype开辟的堆内存里面才有constructor,而我们自己开辟的这个堆内存没有这个属性,这样constructor指向就不在是Fn而是Object了
        console.log(f.constructor)//没做任何处理之前
        //为了和原来的保持一致，我们需要手动的增加constructor的指向
        //2、用这种方式给内置类增加公有的属性
        //给内置类Array增加数组去重的方法
        Array.prototype.unique = function(){

        }
        Array.prototype = {
            constructor:Array,
            unique:function(){

            }
        }
        console.log(Array.prototype);
        //我们这种方式会把之前已经存在于原型上的属性和方法给替换掉，所以我们用这种方式修改内置类的话，浏览器会给屏蔽掉的
        //但是我们可以一个个的修改内置的方法，当我们通过下述方式在数组的原型上增加方法，如果方法名和原来内置的重复，会把内置的修改掉-->我们以后再内置类的原型上增加方法，命名都需要加特殊的前缀
        Array.prototype.sort = function(){
            console.log(‘ok‘)
        }