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