js继承模式、命名空间、对象枚举

继承模式

继承发展史

1、传统形式--原型链

• 过多的继承了没用的属性

2、借用构造函数

• 不能继承借用构造函数的原型
• 每次构造函数要多走一个函数

3、共享原型

• 不能添加自己原型的自定义属性，会把共享原型的对象的原型的属性也更改。

4、圣杯模式

  //1.原型链
    Grand.prototype.lastName = "li";
    function Grand(){
        
    }
    var grand = new Grand();

    Father.prototype = grand;
    function Father(){
        this.name = "kkk";
    }
    var father = new Father();
    Son.prototype = father;
    function Son(){

    }
    var son = new Son();

   //2、借用构造函数
   function Person(name,age,sex){
    this.name = name;
    this.age = age;
    this.sex= sex;
   }
   function Student(name,age,sex,grade){
    Person.call(this,name,age,sex);
    this.grade = grade;
   }
   var student = new Student();

   //3、共享原型
   Father.prototype.lastName = "chen";
   function Father(){

   }

   function Son(){

   }

   function inherit(target,origin){
    target.prototype = origin.prototype;
   }
   inherit(Son,Father);
   var father = new Father();
   var son = new Son();

   //4、圣杯模式 ！important
   Father.prototype.lastName = "chen";
   function Father(){

   }

   function Son(){

   }
   
   function inherit(target,origin){
    function F(){};
        //target.prototype = new F();//不能放在F.prototype = origin.prototype之前，因为这里用的是修改之前的F的原型，没有指向origin的原型。
        F.prototype = origin.prototype;
        target.prototype = new F();//target的原型是一个new的F对象，可以实现自定义的prototype的属性而不改变origin的原型。
        target.prototype.constructor = target;
        target.prototype.uber = Origin.prototype;//超类，知道它的原型真正继承自哪里。
   }
   inherit(Son,Father);
   var father = new Father();
   var son = new Son();

命名空间

//命名空间 -- 解决命名重复的问题
    var grade = {
        class1:{
            zhangsan:{

            },
            lisi:{

            }
        },
        class2:{
            chen:{

            },
            ying:{

            }
        }
    }
    var chen = grade.class2.chen;

现在解决命名重复的问题一般使用webpack打包工具

对象属性和方法的调用

1、连续调用

    //连续调用
    var methods = {
        name:"chen",
        age: 19,
        gender:"female",
        sayName:function (){
            console.log(this.name);
            return this;
        },
        sayAge:function(){
            console.log(this.age);
            return this;

        },
        sayGender:function(){
            console.log(this.gender);
            return this;
        }
    };
    methods.sayName().sayGender().sayAge();//chen female 19
    //函数最后返回的都是this对象，可以实现连续调用。

2、通过属性名访问对象属性
可实现通过参数调用想要的对象属性，从而减少代码量

//通过属性名访问对象属性
    var teachers = {
        teacher1:"chen",
        teacher2:"li",
        teacher3:"he",
        teacher4:"huang",
        sayTeacher:function(index){
            return this['teacher'+index];
        }
    };
    teachers.sayTeacher(1);//chen
    teachers.sayTeacher(2);//li

对象的枚举

for in循环

 //对象的枚举/遍历 enumeration
 //1.类比，数组的遍历
     var arr = [1,2,3,4,5];
     for (var i = 0;i < arr.length;i++){
        console.log(i);
     }
//2.对象属相的遍历
     var obj = {
        name:'chen',
        age:12,
        gender:'female',
        hight:174,
        prop:"ffa"

     }
     for (var prop in obj){//prop也可以换成其他名字
        console.log(obj[prop] + " "+ typeof(prop));
     }

1.hasOwnProperty属性
理论上，for in可以访问原型上的属性，所以加hasOwnProperty过滤

for (var prop in obj){//prop也可以换成其他名字
        if(obj.hasOwnProperty(prop)){//判断属性是都是属于这个对象自己的
            console.log(obj[prop] + " "+ typeof(prop));
         }
     }

2.in
3.instanceof

• A instance B;//A对象是不是B构造函数构造出来的；
• 看A对象的原型链上有没有B的原型；