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的原型；