OOP.txt

组合式继承：
// 组合式继承
			/*
			var o1 = { num: 123 };
			var o2 = { num2: 456 };
			// o2 继承自 o1
			o2.extend = function ( obj ) {
				for ( var k in obj ) {
					this[ k ] = obj[ k ];
				}
			};
			
			o2.extend( o1 );
			*/
			
			
			function Fn() {}
			
			// 组合式实现 原型继承 原型继承修改的是对象的原型对象 函数的原型属性
			// ??? 
			Fn.fn = Fn.prototype;
			Fn.fn = function ( obj ) {
				for ( var k in obj ) {
					this[ k ] = obj[ k ];   //这里的this指的是Fn.prototype的
				}
			};
			
			Fn.fn.extend( {} );
			
			
			
			$( '<p>ppp</p>' ).appendTo( ? )
			$( '<p>ppp</p>' ).appendTo( document.body )
			$( '<p>ppp</p>' ).appendTo( 'body' )
			$( '<p>ppp</p>' ).appendTo( $( 'body' ) )
			
			
			
			
			/*
			 * 直接继承与间接继承来源于 模拟 Java 等语言啊概念
			 * 
			 * 在 js 中 一个构造函数 Person 创建的对象, 上面继承自他的原型 Person.prototype
			 * 而 Person.prototype 是继承自 Object.prototype 所以
			 * 我们称 Person 的实例 直接继承自 Object.prototype, 因为中间没有切入其它对象
			 * 
			 * 
			 * 间接继承就是说 Person 的实例与 Object.prototye 中间隔了一层到多层对象
			 * 
			 * function Animal() {}
			 * var am = new Animal();
			 * 
			 * function Person() {};
			 * Person.prototype = am;
			 * 
			 * var p = new Person();
			 * 
			 * p 间接的继承自 Object.prototype
			 * 
			 * 
			 */

构造函数：
// 什么是构造函数
			// 构造: 他就是设计, 组合, 将没有的东西概念实现
			// 构造函数: 它是函数( 任何函数都可以作为构造函数来使用 ), 它的作用是初始化对象
			
			// new 是什么?
			// new 就是在创建对象, 从无到有, 可以理解为一个没有穿衣服的新生儿
			
			// 比喻
			// new 好比 有了一个新对象, 但是没有任何成员. 好比代码
			// var obj = {}; ---不知道具体是什么对象 不知道是什么类型
			函数用new来调用 就是构造函数
			// 构造函数就是在为它初始化, 简单说就是给他添加属性和方法( 成员 )
			// 好比
			// obj.name = 'jim';
			// obj.age = 10;
			// obj.gender = '男';
			
			// 构造方法的意义: 复用
			// 将四局代码简化得到
			// var obj = new Person( 'jim', 10, '男' );
			// 构造函数如何初始化, 就看 this
			// 如果没有构造函数如何给对象添加成员:  对象.成员 = 值
			// 构造对象的整个过程:
			// 1, new 申请内存, 创建对象
			// 2, 调用构造函数, 构造函数有一个隐式参数, 即 this
			// 3, 刚创建出来的对象的引用 赋值给 this, 由函数处理
			// 4, 在构造函数中利用 this.成员 = 值 来给对象添加成员
			
			使用构造函数---他有原型 是独立的原型-- 只影响到当前对象的原型 有独立的类型名了		
			A. 使用构造函数 他有独立的原型对象存在 
			B. 他的对象创建出来是有类型名的

// prototype 与 __proto__
			// 
			// 相同点?
			// 1, 这两个都是属性, 简单说就是存储引用的变量
			// 2, 同一个构造函数, 与构造函数的实例对象. 这两个属性的引用对象是同一个对象
			
			// 不同点?
			// 1, 在不同的角度使用这两个属性
			//		prototype 使用在构造函数后面
			//		__proto__ 使用在对象后面
			// 2, 描述也不相同
			//		prototype 叫做	构造函数的原型属性
			//		__proto__ 叫做	对象的原型对象
			// 3, __proto__ 是非标准属性
			//		所以我们在描述对象的时候是说 对象会连接到原型对象上
			
			// 作用
			// 在实现继承的时候, 一般都是使用 构造函数的 prototype 属性
			// 在分析结构与验证对象等测试与调试中, 会用到 __proto__



3, 有函数 Fn, 对象 fobj. 获得原型的语法有: Fn.prototype, 和 fobj.__proto__
4, 给对象添加方法可以怎么写: 
	obj.fn = function(){};
	obj.extend({function(){}})
5, 继承的语法有几种, 分别是什么?
	原型式继承
		Fn.prototype.fn = function(){}
		Fn.prototype = {
			constructor: Fn,
			fn:function(){}
		}
		Fn.prototype.extend({fn:function(){}})
	组合式继承
		fObj.extend({...})
6, 简单描述一下 __proto__ 与 prototype 的区别
7, 代码
	function Func() {
	}
	var f1 = new Func();
	Func.prototype = {
		name: 'jim'
	};
	var f2 = new Func();
	console.log( f1.name ); undefined--->
	console.log( f2.name ); jim
	
	执行的结果是什么, 为什么?
	function Func() {
	}
	var f1 = new Func();
	Func.prototype.name="jim";
	var f2 = new Func();
	console.log( f1.name ); jim
	console.log( f2.name ); jim
8, 简单描述一下
 	function F(){}
 	F.prototype.name = 'jim'
 	var obj = new F();
	
	obj.name 与 obj.__proto__.name 的区别
    obj.name--->当前对象找  当前对象没有去原型对象里面找
    obj.__proto__.name 直接去原型对象里面去找


			// var car = { name: 'BMW' };
			// var o1 = { name: 'jim', car: car };
			// o1 与 o1.car 的关系
		
			function Person() {} 这个只是定义了一个函数 这里只能说是定义了一个函数
			// Person 与 Person.prototype 的关系是什么?
			
			只要前面加new就是构造函数
			对象只有__proto__属性
			但是函数有prototyoe 和 __proto__属性

			// 结论
			// 1, 定义函数, 函数有一个属性叫 prototype
			// 2, 函数的属性 prototype 是一个对象类型
			//    类似 var o = { name: {} };
			
			// 3, 属性 prototype 是一个含有 constructor 与 __proto__ 属性的对象
			//		这个对象就是 Person.prototype
			
			// 4, constructor 属性就是当前函数
			Person === Person.prototype.constructor (把Person.prototype看成一个整体)
			//	推论: 函数的 prototype 属性的 constructor 就是当前函数
			
			// 5, 所有的函数的 prototype 属性所表示的对象都继承自 Object.prototype
			//	即: 函数.prototype.__proto__ 就是 Object.prototype
			有一个例外---Object.prototype.__proto__ === Object.prototype ---> false
					     Array.prototype.__proto__ === Object.prototype  ---> true



Obecjt对象和原型对象的关系
			function Person() {
				// this.name = 'jim';
			}
			
			var p = new Person();
			
			// 1, p 是函数 Person 的实例
			// 2, p 就继承自 Person.prototype
			//		p.__proto__ 就是 Person.prototype
			
			
			// 浏览器分析的结论
			// 1, 由于构造函数中什么都没有写, 因此 p 中也是什么都没有
			// 2, 对象 p 的原型对象 就是 构造函数 Person 的原型属性
			//   即: p.__proto__ 就是 Person.prototype
			
			// 经典的 "对象原型和函数三角形" 就出现了
			
			var o = new Object();
			
		</script>

Object 中的成员：
// Object 原型中的常用方法
			// 1, 带有下划线的除了 __proto__ 其他可以不考虑
			// 2, constructor 是构造函数的引用, 就是构造函数
			/*
			var Person = function () {
				this.name = 'jim';
			};
			var p1 = new Person();
			var p2 = new Person.prototype.constructor();
			将函数赋给变量使用
			Person.prototype.init = Person;
			// initial 初始化的
			var p3 = new Person.prototype.init();
			*/
			
			
			// 3, hasOwnProperty
			// 	has	有
			//	own	自己的
			// 	property 属性
			// 有自己的属性, 检查属性是否是自己原生提供的, 如果是被继承的 则返回 false
			// 语法
			// boolean 对象.hasOwnProperty( 属性名字 )
			
			/*
			var o = { name: 'jim' };
			function Person() {
				this.name = 'tom';
			}
			Person.prototype = o;
			
			var p = new Person();
			
			console.log( p.name );
			
			var isTrue = p.hasOwnProperty( 'name' );
			console.log( isTrue );
			*/
			
			
			// 4, isPrototypeOf
			// of 的
			// 语法:
			// boolean 对象1.isPrototypeOf( 对象2 );
			// 判断 对象1 是否为 对象2 的原型对象, 如果是返回 true, 否则返回 false
			
			// var Person = function () {};
			// var p = new Person();
			
			/*
			console.log( p.isPrototypeOf( Person ) );
			console.log( p.isPrototypeOf( Person.prototype ) );
			
			console.log( Person.prototype.isPrototypeOf( p ) );
			
			console.log( Person.prototype.isPrototypeOf( Person ) );
			*/
			
			/*
			var o = {};
			// Person.prototype = o;
			var p = new Person();
			Person.prototype = o;
			alert( o.isPrototypeOf( p ) );
			*/
			
			
			// 5, propertyIsEnumerable
			// -able	表示可能性的后缀
			// enum		枚举, 一个一个的展示出来
			// 属性是否可以枚举, 属性是否可以被 for-in 遍历到
			// var o = {};
			// in
			// alert( 'hasOwnProperty' in o );  // o.hasOwnProperty
			// for ( var k in o ) {
			//	console.log( k );
			// }
			
			// 这个方法判断属性是否可以被枚举, 同时判断属性是否是自己提供的
			// 因此该方法表示判断属性必须是 自己提供的, 同时可以被枚举的, 那么就返回 true, 否则返回 false
			// 在 ES3 的基础上, 该方法没有任何意义, 是对 hsOwnProperty 的一个升级版
			// 在 ES5 中引入了 对象特性( attribute )的概念, 才会使得该方法有点作用
			
			// 语法:
			// boolean 对象.propertyIsEnumberable( 属性名字 );
			/*
			var o = { name: 'jim' };
			o.__proto__.age = 10;
			console.log( o.age );
			console.log( o.propertyIsEnumerable( 'name' ) );
			console.log( o.propertyIsEnumerable( 'age' ) );
			*/
			
			
			// 6, toString, toLocaleString, valueOf
			/*
			var d = new Date();
			console.log( d.toString() );
			console.log( d.toLocaleString() );
			*/
			
			function Person() {
				/*
				this.toString = function () {
					return 'toString 字符串';
				}
				this.toLocaleString = function () {
					return '本地字符串';
				}
				*/
			}
			var d = new Person();
			
			console.log( d.toString() );
			console.log( d.toLocaleString() );
			
			
			// console.log( (new Number(1)).toString() );
			// console.log( (new Number(1)).toLocaleString() );
			
			
			// 借用方法
			// console.log( Object.prototype.toString.call( 1 ) );
			// console.log( toLocaleString.call( 1 ) );
			
			
			// console.log( Object.prototype.toString.call( new Date() ) );
			
			/*
			var o = {};
			if ( !!o ) {
				console.log( 1 );
			}
			*/
			
			// var a = [ 1, 2, 3 ];
			// alert( a.valueOf() );
		</script>

instanceof:
// instanceof
			// instance	实例
			// of		的
			
			// 用法
			// boolean 对象 instanceof 构造函数
			
			// console.log( [] instanceof Array );
			// console.log( [] instanceof Object );
			
			// instanceof 的运算规则?
			
			function Fn() {}
			function Foo() {}
			
			// var o = new Fn();
			
			// console.log( o instanceof Foo );
			
			Fn.prototype = new Foo();
			
			var o = new Fn();
			
			console.log( o instanceof Foo );
			
			// 规律
			// 任意的一个对象都有一条原型链
			// 那么 只要是 在该链上的构造函数, 这个判断都是 true
			
			// 或
			
			// 如果直接判断的是构造函数, 那么也是 true
			

创建函数：
// 创建函数
			// 1, 声明式
			
			// 2, 表达式
			
			// 3, new Function
			
			// 结论: 任意函数都是 Function 的实例
			/*
			console.log( Array instanceof Function );
			function PeSoN() {}
			console.log( PeSoN instanceof Function );
			console.log( Date instanceof Function );
			console.log( Object instanceof Function );
			
			// Function 也是函数
			console.log( Function instanceof Function );
			*/

			// new Function 的语法规则
			// 语法
			// var 函数名 = new Function( arg1, arg2, arg3, ..., argN, body );
			// 解释
			// 	Function 构造函数所有的参数都是字符串类型的
			//	除了最后一个参数, 所有的参数都作为生成函数的参数. 这里可以没有参数
			//	最后一个参数也是字符串, 表示的是生成函数的函数体
			
			/*
			function max( a, b )  {
				return a > b ? a : b;
			}
			
			var fnMax = new Function( 'a', 'b', 'return a > b ? a : b;' );
			
			var res = fnMax( 1, 2 );
			*/
			
			// 写一个函数, 求传入数字的和
			// 1, 有两个参数的时候
			/*
			function sum( a, b ) {
				return a + b;
			}
			var fnSum = new Function( 'a', 'b', 'return a + b;' );
			
			var res = fnSum( 123, 456 );
			alert( res );
			*/
			
			// 2, 多个参数的时候
			/*
			function sum() {
				var total = 0, 
					args = arguments, 
					len = args.length;
				for ( var i = 0; i < len; i++ ) {
					total += args[ i ];
				}
				return total;
			}
			
			var res = sum( 1, 2, 3, 4, 5 );
			alert( res );
			*/
			
			// new Function
			/*
			var fnSum = new Function( 'var total = 0, args = arguments, len = args.length;for ( var i = 0; i < len; i++ ) {total += args[ i ];}return total;' );
			
			var res = fnSum( -1, 1,1,1,1,1,1 );
			alert ( res );
			*/
			
			// 解决这个问题比较晦涩, 代码难以维护
			// 给出两个解决方案
			// 1, 传统
			// 将字符串进行换行分割
			var fnSum = new Function(
				'var total = 0, ' +
				'	args = arguments, ' + 
				'	len = args.length; ' +
				'for ( var i = 0; i < len; i++ ) { ' +
				'	total += args[ i ]; ' +
				'} ' +
				'return total; '
			);
			var res = fnSum( 1,1,1,1,1,1 );
			alert ( res );
			
			
			// 2, 吸收了 MVC 的思想( 不做要求 )
			
			// 练习
			// 1, 求两个数字中最大的数字
			// 2, 求任意个数字中最大的数字
			
			
			
			
			// Object instanceof Function
			// Function instanceof Object						
		****求和函数
		<script id="engin">
			/*
			 
		 		var total = 0, 
					args = arguments, 
					len = args.length;
				for ( var i = 0; i < len; i++ ) {
					total += args[ i ];
				}
				return total;
		 	
		 	
		 	*/
		</script>
		<script>
		
			var getBody = function ( id ) {
				var script = document.getElementById( id );
				var body = script.innerHTML.replace('/*', '').replace('*/', '');
				script.parentNode.removeChild( script );
				return body;
			}
		
			
			onload = function () {
				
				
				var fnSum = new Function( getBody( 'engin' ) );
				
				var res = fnSum( 1, 2, 3 );
				
				alert( res );
				
			};			
		</script>

求最大值：
<script id="abc">
		/*
		 		
		 		var m, args = arguments, len = args.length;
				m = args[ 0 ]; // 1 号同学到前面来
				
				// 从 2 号同学依次上来比较, 留下较高的同学
				for ( var i = 1; i < len; i++ ) {
					if ( m < args[ i ] ) {
						m = args[ i ];
					}
				}
				return m;
		 		
		 		
		 		
		 */
		</script>
		<script src="angular.js"></script>
		<script>
			
			/*
			function max() {
				var m, args = arguments, len = args.length;
				m = args[ 0 ]; // 1 号同学到前面来
				
				// 从 2 号同学依次上来比较, 留下较高的同学
				for ( var i = 1; i < len; i++ ) {
					if ( m < args[ i ] ) {
						m = args[ i ];
					}
				}
				return m;
			}
			
			var res = max( -1, 2, -3, 4, -7, 9, 1, 2, 3, 4, 5 );
			alert( res );
			*/
			
			var getBody = function ( id ) {
				var script = document.getElementById( id );
				var body = script.innerHTML.replace('/*', '').replace('*/', '');
				script.parentNode.removeChild( script );
				return body;
			};
			
			var body = getBody( 'abc' );
			
			var fnMax = new Function( body );
			
			var res = fnMax( -1, 2, -3, 4, -7, 9, 1, 2, 3, 4, 5 );
			// alert( res );
			
			
			var r = Math.max(1,2,3,4);
			// alert( r );
			
			
			var s = '12\
3';
			
			alert( s );
			
		</script>

结论--eval函数：
		<script>
			// 使用 Function 和 使用 eval
			// 他们都有一个共同 的特点, 可以将字符串作为 js 代码来执行
			
			// eval 函数的语法
			// eval( 字符串 )
			// 这个函数在调用的时候会将字符串作为 js 代码来执行
			
			// var a = 10;
			// eval( 'var a = 10;' );
			
			// console.log( a );
			
			
			// 应用方向比较的广泛, 可以利用该方法实现动态操作
			// 1, ajax
			//	服务器与浏览器交互, 服务器发给浏览器的数据是一个字符串
			//	那么要执行这个代码, 就需要将字符串作为 代码执行, 这个就要用到 eval
			
			var str = '{ name: "jim", age: 19, gender: "男" }';
			// '[{{}},{{},[]}]'
			// 当从服务器拿到字符串以后, 理论上应该将其作为数据对象使用
			// 解析字符串
			// 传统的做法
			/*
			str = str.replace('{', "").replace("}", "");
			// ' name: "jim", age: 19, gender: "男" '
			var arr = str.split( ',' );
			// [ ' name: "jim"', ' age: 19', ' gender: "男" ' ]
			
			var o = {};
			for ( var k in arr ) {
				var tempArr = arr[ k ].split( ':' );
				
				// 去空格
				var key = tempArr[ 0 ].trim();
				var value = tempArr[ 1 ].trim();
				
				o[ key ] = value;
				
			}
			
			
			console.log( o.name );
			console.log( o.age );
			console.log( o.gender );
			*/
			
			var o1 = {  };
			
			// var o2 = eval( "(" + str + ")" );
			
			var o2 = eval(  str );
			
			console.log( o2.name );
			console.log( o2.age );
			console.log( o2.gender );
			
			
			// 2, 所见即所得的案例( 难度 )
			
		</script>


eval简单案例：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.c {
				width: 800px;
				height: 300px;
				border: 1px solid red;
				padding: 10px;
			}
		</style>
	</head>
	<body>
		<div id="dv" class="c">
		</div>
		<textarea class="c">
			
		</textarea>
	</body>
	<script type="text/javascript">
		
		// 理论上用户输入一个字符就做相应的处理, 才可以实现实时的效果
		var txt = document.getElementsByClassName( 'c' )[ 1 ];
		// 绑定事件
		txt.onkeyup = function () {
			// console.log( this.value );
			// 
			// 每次执行代码的时候都将 div 中的所有元素都去掉
			document.getElementsByClassName( 'c' )[ 0 ].innerHTML = "";
			
			try {
				eval( this.value );
			} catch ( e ) {
				
			}
			
		};
		
	</script>
</html>


代码块--eval
		<script type="text/javascript">
			/*
			
			if ( 0 ) {
				alert( 123 ); alert( 456 );
			}// 逻辑上, 代码块就是一条语句
			
			// : 语法用在哪里?
			// case :
			// 键值对
			var o = { name: 'jim' };
			
			// {} 有两重意思: 1, 代码块, 2, 对象
			
			if ( 1 ) {
				// :
			}
			
			*/
			// doc
			
			
			var str = '{ name: "jim" }';
			
			// eval( 'var o = ' + str );
			
			var o = eval( '(' + str + ')' ); 
			
		</script>

eval-Function 函数使用注意				
<script>
			// Function 和 eval 都可以实现字符串执行代码
			// 在实际开发中, 如果考虑效率可以直接使用 eval
			// 但是考虑安全性则建议使用 Function
			
			// eval( 'var a = 10;' );  // eval 会污染全局变量
			
			// eval 等价与
			// 直接实行 var a = 10;
			
			
			// (new Function( 'var a = 10; alert( 123 );' ))();
			// new Fucntion 等价于
			// 定义一个函数, 在函数内部, 执行
			// var a = 10;
			
			// console.log( a );
			
			
			var str = '{ name: "tom" }';
			var o = (new Function( 'return ' + str ))();
//			var o = (new Function( str ))(); 报错，name is not defined，因为无返回值
			alert( o.name );
		</script>

函数的原型链：
// 总结一下基本结论
			// 1, 对象都有原型对象, 对象默认继承自原型对象
			// 2, 函数被定义后, 默认就有原型属性, 原型属性也是对象
			// 3, 函数的原型属性默认继承自 Object.prototype
			// 4, 原型对象中 constructor 指向对应的构造函数
			// 5, 所有的函数都是 Function 的实例
			// 6, 函数也是对象
			
			// 基本的概念
			// prototype 是函数的原型属性, 是该函数创建的对象的原型对象
			// __proto__ 是对象的原型对象, 是创建该对象的构造函数的 原型属性
			
			
			function Foo() {} 
			
			// Foo 有 prototype 属性
			// 讨论 __proto__
			// 函数 Foo 是 Function 的实例
			// 即 Function 是 Foo 的构造函数
			// 类比
			//	 Person		p
			// => p.__proto__ 就是 Person.prototype
			// => Person.prototype.__proto__ 就是 Object.prototype
			
			// 替换
			// => Foo.__proto__ 就是 Function.prototype
			// => Function.prototype.__proto__ 就是 Object.prototype
			
			
			// 原型对象就是构造函数的原型属性
			
			// 所以, Foo.__proto__ 就是 构造函数的原型属性, 即 Function.prototype
			
			// 默认函数的原型属性继承自 Object.prototype
			// Function 是函数, Function.prototype 是函数的原型属性
			// Function.prototype 继承自 Object.prototype
			
			
			// 这里与之前唯一不同的是将 函数当做对象来看
			
			
			
			// 根据结论: Function, 和 函数, 和 Function.prototype 之间的关系, 可以得到
			// Array 是 Function 的实例, 继承自 Fucntion.prototype
			// Date 是 Function 的实例, 继承自 Fucntion.prototype
			// Object 是 Function 的实例, 继承自 Fucntion.prototype
			// ...
			// Fucntion 是 Function 的实例, 继承自 Fucntion.prototype
			// 	结论 Function.__proto__ 就是 Function.prototype

结论案例：
var o = {};
			o.name = 'jim';
			o.sayHello = function () {};
			
			// 属性与方法有一个特点是和当前对象息息相关的
			
			// 这些与当前对象息息相关的属性与方法就称为实例属性与实例方法
			
			
			// 那么再函数中, 也可以添加属性与方法
			// function Foo() {}
			// Foo.name = 'tom';
			
			// 这个属性对于 Foo 的实例来说是全局的, 和个体对象没有关系
			// 称这样的属性与方法为 静态属性与静态方法
			
			
			// 这两组概念在实际使用, 实例成员与对象息息相关, 而静态成员一般
			// 作为通用的工具性的成员使用
			
			// $('p').each( function ... );
			// $.each()
			// jQuery.each( this, fn )
			
		</script>

疑问：
// 训练代码分析的能力
			// 1, 分析当前执行行上下游那些局部变量, 那些全局变量, 并且值为多少
			// 2, 单步运行代码. 然后分析每一句话是干什么用的. 并且执行完该语句后
			//		对全局变量与局部变量有什么影响
			
			// 疑点
			function Fn() {} 
			function Foo() {} 
			var o = new Fn(); 
			console.log(o instanceof Fn); 	//true 
			Fn.prototype = new Foo(); 
			Fn.prototype.constructor = Fn;
			console.log(o instanceof Fn); 	// false 
			console.log(o instanceof Foo);  // false 
			
			
			
			function Fn() {} 
			function Foo() {}
			var f = new Fn();
			// f -> Fn.prototype -> Object.prototype -> null
			// 覆盖
			var o;
			Fn.prototype = o = new Foo();
			var f = new Fn();
			// f -> o -> Foo.prototype -> Object.prototype -> null
			
			
			
			// 传统的 C++ 系列的编程语言 (C++, Java, C#, Swift)
			// 变量是强类型
			// int n = 123;
			// string s = 'abc';
			// n = s;   // 报错
			
			// 什么是多态
			// 给父类调用方法, 由绑定在父类的子类实现
			// 动物 anim = new 子类(); // 猫, 狗, 猪, ...
			// anim.叫();
			// 这种用法来源于, anim 只能被赋值为 动物类型 以及 它的子类的类型
			
			var a = ...;
			
			if ( typeof a.fn === 'function' )  a.fn();
	
	function Fn(){}
	function Foo(){}
	var o = new Fn()
	console.log(o instanceOf Fn) -- true
	//o-->Fn.prototype(原来的)
	//Fn.prototype是否在o的原型链上

	Fn.prototype = new Foo();
	console.log(o instanceOf Fn) -- fasle	
	// new Foo() 是否在o的原型链上
	console.log(o instanceOf Foo) -- fasle	

实例成员和静态成员：
// 术语:
			// 对象
			// 实例: 一般在描述实例这个概念的时候, 也是指对象. 但是实例一般是用来描述一个由某个构造函数创建的对象
			//		一般称作为 xxx 构造函数的实例
			// 构造函数
		
		
			// 实例成员就是 由构造函数创建的对象的成员
			// 静态成员就是 构造函数的成员
			
			// 一般在使用的时候, 将通用的方法 由 静态成员提供, 实例成员如果要实现该功能, 调用静态成员来实现
			
			// 
			/*
			function Person() {
				this.sayHello = function () { alert(' Hello JavaScript '); };
			}
			*/
			// Person.name						静态成员, 静态属性
			// new Person().sayHello();			实例成员, 实例方法
			
			
			// alert( Person.name );
			// ( new Person ).sayHello();
			
			
			// 在 商品案例中
			// 当页面向下滚动的时候动态的加载更多商品
			// 当动态加载商品的时候, 应该考虑如果商品已经在页面中有了, 就不再加载该商品
			
			// 所以
			// 一把来说, 展示一个商品, 就是展示商品的信息与链接
			
			// 就在在判断一个对象的所有属性相等, 则为同一件商品
			
			var data = '[{name:"神器js", price:100, img:"1234567800.jpg"},{name:"神器js", price:100, img:"12345678900.jpg"}]';
			var o = eval( "(" + data + ")" );
//			var o1 = o[ 0 ];
//			var o2 = o[ 1 ];
			
			// alert( o1 == o2 );
			
			// 对象都有一个构造函数的东西  --对象的复制
			var Goods = function ( o ) {
				// ...
				for ( var k in o ) {
					this[ k ] = o[ k ];
				}
			}
			
			var o1 = new Goods( o[ 0 ] );
			var o2 = new Goods( o[ 1 ] );
			
			// 要判断是否相同, 就判断每一个属性是否相同
//			var compare = function ( s1, s2 ) {
//				return s1.name === s2.name &&
//						s1.price === s2.price &&
//						s1.img === s2.img;
//			};
			
			// alert( compare( o1, o2 ) );
			
			
			// 在项目中, 这种类似的判断可能会很多, 为了便于管理, 该判断是和商品息息相关的. 
			// 因此应该将该方法与该类型绑定在一起, 以便使用与维护
			// 函数也是对象, 也可以利用动态添加成员的办法添加成员
			
			Goods.compare = function ( s1, s2 ) {
				return s1.name === s2.name &&
						s1.price === s2.price &&
						s1.img === s2.img;
			};
			
			
			// alert( Goods.compare( o1, o2 ) );
			
			
			// 为了方便调用, 我应该同时保留 静态方法与实例方法
			// 复用  isEqualTo--> 实例方法
					 Goods.compare---静态方法
			Goods.prototype.isEqualsTo = function ( o ) {
				// 比较 this 与 o 是否相等
				return Goods.compare( this, o );
			}
			
			alert( o1.isEqualsTo( o2 ) );

函数的属性与方法：
// 1, 函数名.name
			// 2, 函数名.length
			//		形参的数量
			//		与 arguments.length 进行区分
			
			// function Foo( a, b, c ) {}
			
			// alert( Foo.length ); // 与函数定义的时候 参数定义的个数
			
			// 如何判断传入的参数与定义的参数个数一样?
			// 就是 函数名.length === arguments.length
			
			
			// 3, 函数名.caller		// 已被废除
			// 	获得调用函数的函数
			//  调用者		主动	
			//	被调用者		被动
			
			// 如何函数 f 调用了函数 foo
			// f 就是 主动 就是 调用者
			// foo 就是被动的 被调用者
			
			/*
			function foo () {
				console.log( foo.caller );
			}
			foo();
			
			function f () {
				foo();
			}
			f();
			*/
			
			
			// 4, arguments.callee
			// -ee 表示被动的后缀
			// 当前函数的引用
			// 如果函数 foo, 那么函数中 的 arguments.callee 就是表示
			// foo 的引用. 一般在使用的时候就是描述匿名函数的递归表示
			
			(function () {
				
				// 实现递归, 自己调用自己
				
			})();
			
			
			// 5, 补充
			// arguments 是伪数组, 不是数组
			
		</script>

递归：
// 递归
			// 什么叫递归: 自己调用自己
			/*
			function foo() {
				foo();
			}
			foo();
			*/
			// 死递归
			
			
			// 学会如何写递归, 以及如何跳出递归
			// 所以学习递归有两个重要的点:
			// 1, 什么时候递归, 即什么时候调用自己
			// 2, 什么时候跳出
			
			// 1> 什么时候递归
			// 1. 兔子数列( fibonacci 数列 )
			// 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, ...
			// 如果要计算第 n 项, 就是 在计算 第 n-1 项 + 第 n-2 项
			
			// 假设有一个函数 fib, 这个函数调用 fib(n) 就是在计算 兔子数列的 第 n 项
			// var n1 = fib( 3 );	// 计算第 3 项
			// var n2 = fib(2) + fib(1); // 等价
			// 即写 fib(3) 就相当于写 fib(2) + fib(1)
			// 即 调用函数 fib(3) 就是返回 fib(2) + fib(1)
			// 即得到递归的结构
			
			/*
			function fib( n ) {
				return fib( n - 1 ) + fib( n - 2 );
			}
			*/
			
			// 利用这个分析方法, 分析 求 n 的 阶乘, 
			// 所谓 n 的阶乘就是 从 1 累成到 n. 1! = 1, 2! = 1*2, 3! = 1*2*3, ...
			// 假定 f(n) 就是计算 f(n-1) * n
			/*
			function f( n ) {
				return f( n - 1 ) * n;
			}
			*/
			
			
			// 2> 考虑跳出就是在考虑给出条件的临界点
			// fibonacci 数列
			// 0	1	2	3	4	5	...
			// 1	1	2	3	5	8	...
			// 临界条件就是结束递归的条件, 那么如果需要递归就是调用自己
			// 如果要结束递归, 就是考虑结束函数, 或返回结果
			/*
			function fib( n ) {
				if ( n < 0 ) throw new Error( ' 数字不允许小于 0 ' );
				if ( n === 0 || n === 1 ) return 1;
				return fib( n - 1 ) + fib( n - 2 );
			}
			
			for ( var i = 0; i <= 10; i++ ) {
				console.log( fib( i ) );
			}
			*/
			
			
			
			// 同样的方法分析阶乘
			function f( n ) {
				if ( n === 1 ) return 1;
				return f( n - 1 ) * n;
			}
			
			// 循环的版本
			function f2( n ) {
				var sum = 1;
				for ( var i = 1; i <= n; i++ ) {
					sum *= i;
				}
				return sum;
			}
			
			
			for ( var i = 1; i <= 10; i++ ) {
				
				console.log( f( i ) + "------" + f2( i ) );
				
			}
			
			
			
			// 利用递归分析化归的思想计算求 n 的 m 次方
			// power(n, m)

求n的m次方：
// 1, 假定已经实现 函数名为 pw( n, m )
			// 2, 如果要计算 n^m 次方
			// 3, 例如将其转换为 n^(m-1) * n
			//		n^k * n^(m-k)
			// 		2^2 = 2^1 * 2^1
			// 4, 所以化归就可以得到
			//		pw( n, m - 1 ) * n
			
			/*
			function pw( n, m ) {
				return pw( n, m - 1 ) * n;
			}
			*/
			
			// 5, 临界条件
			// 假定 m >= 0
			// if ( m == 0 ) return 1;
			
			
			// 6, 整合
			function pw( n, m ) {
				if ( m == 0 ) return 1;
				return pw( n, m - 1 ) * n;
			}
			
			for (var i = 0; i < 10; i++ ) {
				console.log( Math.pow( 2, i ) + ", " + pw( 2, i ) );	
			}
			
			
			// 求等差数列的前 n 项和
			// 1, 3, 5, 7, 9, ...
			// s(1)
			// s(2)
			// s(3)
			// ...
			// s(n)

递归获得元素下的所有后代元素：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div {
				border : 1px dotted deeppink;
				margin: 0;
				padding: 5px;
				height: 100px;
			}
			p {
				border : 1px dotted green;
				margin: 0;
				padding: 5px;
				height: 10px;
			}
		</style>
	</head>
	<body>
		<div>
			<p></p>
			<p><span>哈哈哈</span></p>
			<p></p>
		</div>
		<div>
			<p></p>
			<p></p>
		</div>
		<div>
			<p></p>
		</div>
	</body>
	<script>
		// 目标, 将 body 中所有的后代标签都获取到
		// $( 'body *' )
		// 需要一个函数, 调用该函数, 返回 body 下的所有后代标签
		
		var nodes = document.body.getElementsByTagName( '*' );
		
//		for (var i = 0; i < nodes.length; i++) {
//			nodes[ i ].style.borderColor = 'red';
//		}
		
		
		// .text()
		// .find()
		
		// 1, 首先要有一个函数 find
		// 2, 调用的时候 就是在执行 var nodes = find();
		/*
		function find() {
			var arr = [];
			
			// 获得元素
			
			return arr;
		}
		*/
		// 3, 要获得的是 body 下的元素. 但是 元素的层级是不确定的
		// 4, 通过归纳得到的结论是, 需要一个方法, 返回某一个元素的子元素
		// 	简单的做法: getChildren( node, list )
		//		将 node 的子元素加到 list 中
		//  复杂的做法: Array getChildren( node );
		
		var getChildren = function ( node, list ) {
			// 要将 node 中所有的子元素 放到 list 中( 只要元素 )
			for ( var i = 0; i < node.childNodes.length; i++ ) {   // 遍历node的子节点
				var subNode = node.childNodes[ i ];	// 就是子节点
				// 判断是否为 元素标签
				if ( subNode.nodeType === 1 ) {
					// 如果是元素节点就存到 list 中
					list.push( subNode );
				}
			}
		}
		function find() {
			var arr = [];
			// 获得元素
			getChildren( document.body, arr );
			return arr;
		}
		
		var nodes = find();
		for (var i= 0; i < nodes.length; i++) {
			nodes[ i ].style.border = "3px solid red"; 
		}
		
	</script>
</html>

--->简单方法：
<script>
		
		// 获得 node 的子节点
		// 化归一下, 已经完成获得节点的子节点, 那么子节点的子节点也或得到, 如此下去就是所有的后代的节点
		var getChildren = function ( node, list ) {
			// 要将 node 中所有的子元素 放到 list 中( 只要元素 )
			for ( var i = 0; i < node.childNodes.length; i++ ) {   // 遍历node的子节点
				var subNode = node.childNodes[ i ];	// 就是子节点
				// 判断是否为 元素标签
				if ( subNode.nodeType === 1 ) {
					// 如果是元素节点就存到 list 中
					list.push( subNode );
					
					getChildren( subNode, list );
				}
			}
		}
		function find() {
			var arr = [];
			// 获得元素
			getChildren( document.body, arr );
			return arr;
		}
		
		var nodes = find();
		for (var i= 0; i < nodes.length; i++) {
			nodes[ i ].style.border = "3px solid red"; 
		}		
		// 
		// 写一个方法, 返回某一个节点下所有满足某个条件的后代节点
		// 条件放宽一点要求, 只判断标签的名字
		// 标签名, 属性名的条件, class 样式的条件, 内容的条件		
	</script>
复杂方式：
<script>
			
			var find = function ( node ) {
				
				var arr = [];
				for ( var i = 0; i < node.childNodes.length; i++ ) {
					if ( node.childNodes[ i ].nodeType === 1 ) {
						arr.push( node.childNodes[ i ] );
						
						// 获得子节点的子节点
						arr = arr.concat( find( node.childNodes[ i ] ) );
						
					}
				}
				
				return arr;
			}
			
			
			onload = function () {
				var nodes = find( document.body );
			
				for ( var i = 0; i < nodes.length; i++ ) {
					nodes[i].style.border = "2px solid black";
				}
				
			};
			
 			
		</script>

词法作用域：
// 词法作用域
			// 在 开发语言中 常见的作用域规则就是: 块级作用域 和 词法作用域
			// 
			
			// 什么叫作用域?
			// 起作用的区域
			// 定义变量后, 可以在哪一个范围内使用该变量
			
			// 块级作用域
			// 所谓的块级作用域就是 用一个块 结构分割变量的访问区域
			// 所谓的块就是 {}
			// 代表语言: C 语言( C 系 )
			
			
			// 词法作用域
			// 就是变量的作用范围, 在书写代码的时候就已经决定, 与运行时无关
			// 分割作用域的只有函数

			// 词法作用域 解释

			// 只和代码的书写，定义时的顺序有关，和运行时候的顺序无关
			// 函数内部可访问外部的变量，反之则不允许
			
			// 面试题
			
			/*
			if ( 'a' in window ) {
				var a = 10; // 一个是声明, 一个是赋值 对a的声明提升了 告诉我们前面有一个a定义了	              然后判断'a' in window 为真
			}  
			alert( a );
			*/
			// 10
			// undefined
			// err
			// null
			
			
			// 变式
			/*
			if ( 'b' in window ) {
				var a = 10; // 一个是声明, 一个是赋值
			}  
			alert( a );   undefined
			*/
面试题：
if ( true ) {
				
				function f() {    函数的声明 会提升
					console.log( 'true' );
				}
				
			} else {
				
				function f() {   函数的声明 会提升 告诉我们的浏览器 已经又一个函数f()了 所以
									后面的会把前面的来给覆盖掉
					
					console.log( 'false' );
				}
			}
			
			
			f();     提升后被覆盖掉了
			*/
			
			
			// 变式
			/*
			if ( true ) {
				
				var f = function () {    告诉浏览器 我们有一个变量f 但是不知道f后面是什么
											需要执行以后才能知道
					console.log( 'true' );
				};
				
			} else {
				
				var f = function () {
					
					console.log( 'false' );
				};
			}
			*/
			
			// 简化
			var f;
			if ( true ) {
				
				f = function () {
					console.log( 'true' );
				};
				
			} else {
				
				f = function () {
					
					console.log( 'false' );
				};
			}
			
			
			
			f();
			
			
			// 概念
			// 什么是变量名提升--》告诉解释器 已经定义变量了 这个变量可以用了
			// 什么是函数名提升--》 告诉解释器 现在已经定义了一个函数了 现在马上就可以用了
			
			// js 执行分两步: 
			// 1, 预解析(不是在执行代码). 将所有的声明都加载到内存中
			//		告诉解释器有什么东西了
			// 2, 一步一步的执行代码, 从上往下, 从左至右
		</script>

一个变式
			if ( true ) {
				(function f() {
					console.log( 'true' );
				})();
			} else {
				(function f() {
					
					console.log( 'false' );
				})();
			}
			
			f();
			函数不允许出现在语句的位置 ----》 
			// 函数的声明式, 允许函数表达式带有名字
			// 但是该名字只允许在函数内部使用
			// var f = function ffff () {};
			// IE8 那都可以用


变量作用域琏的绘制：
// 结论
			// 1, 声明会提升
			// 2, 只有函数才会限定作用域
			
			
			// 规则
			// 1> 将全部的 script 标签看做一个整体. 是一个 0 级别的链
			// 		链中所有的全局范围内的变量, 函数, 对象... 都是链中的成员
			//		由于声明会提升, 因此在绘制链之前将代码可以进行调整, 在开始的时候
			//		将声明都写在前面, 绘图的时候按照顺序绘制, 较为简单.
			//
			// 2> 由于只有函数才可以限定作用域. 因此在函数上引出一条新链, 级别为 n + 1
			// 		在函数内部, 又是一个完整, 独立的作用域结构
			//		因此在函数内部定义的任何成员也按照 1> 中的规则在该链上展开
			//
			// 3> 如果有函数, 继续绘制下去 
			
			
			
			// 变量搜索原则
			// 在代码的运行过程中, 如果访问某一个变量
			// 那么首先在当前链上找 ( 无序 ), 如果没有, 在 n-1 级上找
			// ( 在函数内部允许访问定义在函数外部的变量 )
			// 如此往复, 直到 0 级链, 如果还没有 抛出异常
			// 如果找到, 则结束寻找, 直接获得该链上变量的数据
			
			
			/*
			var a = 123;
			var f = function() {
				
				var n = 456;
				var o = {};
				var arr = [];
				var f = function() {};
				
			};
			var arr = [];
			var o = {};
			*/
			
		</script>
问题：
//问题总汇
//网上找的结论：
//        var a;
//        console.log(a);
//        a = function (){ alert(123); };
//        console.log(a);   
//1.函数声明会覆盖变量声明(a不赋值的情况)
	  
//	  // var a;
//    function a() { alert('Hello world'); }
//    var a;	// 覆盖. 覆盖成什么? 重复的 var 无效 
//    
//    // a = 1;
//    console.log(a);

//2.如果在变量声明的同时，对变量进行初始化，情况会有所不同。
// 对同一个变量名，声明变量同时初始化变量优先级高于函数声明。

//var a;
//function a() {alert(2);}
////a = function a() {alert(1)};
//
//console.log(a);


//为什么？还有就是覆盖了的变量或者函数是否存在？




//这两句话
//    var getName = function(){ alert(4); }; 提升了名字
//    function getName(){ alert(5); }		 提升了函数

// 1, 函数覆盖名字
//var  getName;
//function getName() {}

// 2, 
//function getName() {}
//var getName; 这个声明无效了  假如有数值 那就是有效的 var getName = 7;

var f = function f() {}; 表达式
function f() {}  声明 这两个不是一回事



var a;   意思就是有一个a存在了 a是什么呢 现在不知道 下面凡是看到a的时候不报错
function a(){alert(2);}  这个两个a是一个东西  赋值不是一回事
	代表这是一个函数 下面在用a的时候调用这个函数 这两句代码是不执行的
	 这两个是不是一个东西 代表他们分配的内存是不是一样的
	 这两个东西在声明阶段不占内存 告诉我们的解释器 有这两个东西存在了--》编译原理
	 声明不占内存 执行的时候才会分配内存 

var a;
function a(){} 这个把第一个声明覆盖了	 
a = function(){} 同一个作用域 不允许有两个同名的但是不同的数据 如下： 只要有了一个声明 后面的都无效
		<script>
			
//			var a;
//			var a;
//			var a;
//			
//			var a = 1;
//			var a = 2;
//			var a = 'a';
//			
			
		</script>







var f = function f(){};  表达式
function f(){} 这两个不是一回事 声明


//首先他两都提升了，那么谁覆盖了谁？ 按照在下面网上的总结应该是getName变量覆盖了getName
//那就是用变量getName存了赋值函数的的引用（这个函数和function getName没什么关系吧，如果没关系，那么function getName哪去了？）？
// 那昨天老师你的那个图里的getName其实是变量存着函数的引用？
//    getName();

			
			
		</script>




<script>
		// 源代码
//		var a = 1;
//		   
//		function a(){
//			a = 1
//		}
//		a()
//		console.log(a)

分析

		
		var a;
		function a(){
			a = 1
		}
		
		a = 1;
		
		// a()  a is not a function
		console.log(a) -->1 



		</script>



var a;
function a(){}
console.log(a == a.name) false
a.name--是一个字符串
a-------是一个函数 类型都不一样


面试题：
		<script type="text/javascript">
			
			var num = 123;
			function f1() {
				console.log( num );
			}
			
			function f2() {
				var num = 456;
				f1();
			}
			
			f2();  //123
			
		</script>

num f1 f2 在一条作用域链上 0 号
f1() 扩展出 log(num)       1 号
f2() 扩展出 num 456 f1()   2 号

执行f2() 的时候 调用f1() 当前f2扩展出来的没有f1 就去0号链
上去找 有f1() -- 执行log(num) 1 号上面没有num 就去0号
上面去找 0 号上面num = 123 所以打印出来的就是123


变式：
		<script type="text/javascript">
			
			var num = 123;
			function f1( num ) {
				console.log( num );
			}
			
			function f2() {
				var num = 456;
				f1( num );
			}
			
			f2();  //456  传递的参数就是456 
			
		</script>
变式2：
		<script type="text/javascript">
			
			var num = 123;
			
			function f1(  ) {
				console.log( num );
			}
			
			function f2() {
				num = 456;
				f1(  );
			}
			
			f2();
			console.log( num ); 456
			
		</script>

面试题：
0级链上又一个匿名函数 函数内部是一个完整的生态系统
//	(function (a) {
//      console.log(a);
//      var a = 10;
//      function a(){}
//  }( 100 ));

--->进而改进 把函数声明和变量声明 提到前面去
	既有函数声明 又有自变量声明 自变量声明就不用考虑了

	(function (a) {
		function a(){}   
		
		
        console.log(a + '');  打印出来的是函数体
        a = 10;
        
    }( 100 ));


闭包:
// 在函数内部允许访问外部的变量, 但是反之不允许

// 什么是闭包
// 闭包从字面上看就是封闭和包裹, 在函数中定义的变量
// 在函数外部无法访问, 因此这个函数就构成闭包

// 要解决闭包的什么问题
// 就是要想办法访问到它的数据

访问函数内 变量:
function foo() {
		var num = Math.random();
		//var num = 123;
		return num;
	}
	
	var res = foo();	// 取出 num 的值
	// 不允许访问函数内部的数据, 那么就不能直接操作变量 num
	// 只可以间接的访问 return
	// alert(res);
	
	// 
	var r1 = foo();
	var r2 = foo();
	// 问 r1 和 r2 是访问的同一个数据吗?
	alert( r1 + "\n" + r2 );
	// 如果使用 return 返回函数内的数据, 理论上讲不是在访问同一个数据
	// 因为函数运行会分配内存空间, 那么数据也会再次创建
	
	// 出现这个原因是因为函数在调用的时候 数据会被 新创建一次
	// 要解决这个问题, 只需要保证, 函数 foo 只调用一次即可
	// 如果要获得多次数据, 怎么办?
</script>
--> 解决办法：

function foo() {
	var num = Math.random();
	// return num;
	return function () {
		return num;
	}
}

var fn = foo();
var r1 = fn();
var r2 = fn();
// fn 是一个在函数内定义的函数, 那么在执行的时候可以访问到上一级作用域中的 num
// 因此在最外面, 就可以间接的访问 num 了
alert( r1 + '\n' + r2 );


疑问：
/*
			function f() {
				return function () {};
			}
			*/
			
			// 函数的本质是什么? 
			// Function 的实例, 或叫对象
			
			// 写一个函数, 让函数返回对象
			//function Foo() {
			//	var o = {num:123};
			//	return o;
			//}
			//var obj = Foo();
			// 调用函数, 在函数内部创建一个对象( 对象反正在内存中 )
			// o 中存储的只是对象的引用, return 是将 o 中的数据拷贝一份再返回
			// 返回的结果被 obj 接收. 此时 obj 存储的是对象的引用
			// 利用 obj 就可以访问到对象
			
			// alert( obj.num );
			
			
			// 扩展, 当对象是 Function 的实例时
			/*
			function Foo() {
				var o = new Function('alert(123)');
				return o;
			}
			
			var fn = Foo();
			
			fn();
			*/
			// Foo 返回的是在内部创建的 o 这个对象
			// 所以本质上就相当于
			// fn = new Function...
			// 相当于
			// var fn = new Function('alert(123)');
			
			// 类比
			/*
			var node = document.getElementById('id');
			var node = id('id');
			function id(idName) {
				return document.getElementById(idName);
			}
			*/
			
			
			
			// 在函数内部是可以创建对象, 再返回对象的
			// 但是函数其实就是一个对象
			/*
			function Foo () {
				var o = function () { alert('123'); };
				return o;
			}*/
			function Foo () {
				alert('调用了');
				return function () { alert('123'); };
			}
			// 这个函数 Foo 是一个函数, 如果函数不调用, 什么事儿也没有
			// 但是函数 Foo 调用, 他会返回一个函数
			// 接收这个函数, 可以调用它
			
			var fn = Foo();
			
			fn();
			
		</script>
闭包sample:
		<script type="text/javascript">
			
			function foo() {
				var num = Math.random();
				
				return function () {
					return num;
				};
			}
			
			var fn = foo();
			
			var r1 = fn();
			var r2 = fn();
			
			
			// 不考虑闭包
			/*var num = 123;
			function fn() { return num; };
			var r1 = fn();
			var r2 = fn();*/
			
			
			
			// 练习
			
//			function func() {
//				var arr = [ 1, 2, 3 ];
//				return arr;
//			}
//			// 在外面将 func 中 arr 中所有的数据遍历出来
//			var a = func();
//			for ( var i in a ) {
//				console.log( a[ i ] );
//			}
			
			
			
			/*
			function func() {
				var n = Math.random();
				var m = Math.random();
			}
			*/
		</script>



数组和对象的比较：
<script>
			function func() {
				var n = Math.random();
				var m = Math.random();
				
				/*return [ 
					function () { return n; },
					function () { return m; }
				];*/
				return { 
					get_N: function () { return n; },
					get_M: function () { return m; }
				};
			}
			
			// 使用数组实现
			// 获得 n 和 m
			/*
			var fns = func();
			
			var n1 = fns[ 0 ]();
			var m1 = fns[ 1 ]();
			console.log( n1 + ", " + m1 );
			
			var n2 = fns[ 0 ]();
			var m2 = fns[ 1 ]();
			console.log( n2 + ", " + m2 );
			
			var n3 = fns[ 0 ]();
			var m3 = fns[ 1 ]();
			console.log( n3 + ", " + m3 );
			*/
			
			
			// 使用对象实现
			var o = func();
			
			var n = o.get_N();
			var m = o.get_M();
			
			
			// 我希望在函数中定义一个变量
			function Foo() {
				var num;
			}
			// 在调用 Foo 后, 提供两个方法, 分别对
			// num 进行读取, 和 赋值
// 我希望在函数中定义一个变量
//			function Foo() {
//				var num;
//			}
			// 在调用 Foo 后, 提供两个方法, 分别对
			// num 进行读取, 和 赋值
			
			
			function Foo() {
				var num;
				return {
					get_Num: function () {
						return num;
					},
					set_Num: function ( v ) {
						num = v;
					}
				};
			}
			
			var o = Foo();
			
			console.log( o.get_Num() );
			
			o.set_Num( 123 );
			
			console.log( o.get_Num() );
			
问题分析：
<script type="text/javascript">
			/*
			function Foo() {
				var num;
				return {
					__num__: num,
					set_Num: function ( v ) {
						num = v;
					}
				};
			}
			*/
			
			// 分析
			function Foo() {
				var num;
				var tempO = {};
				tempO.__num__ = num;
				tempO.set_Num = function ( v ) {
					num = v;
				};
				tempO.get_Num = function () {
					return num;
				};
				return tempO;
			}
			
			var o = Foo();
			
			console.log( o.__num__ );
			
			o.set_Num( 1 );
			
			console.log(o.__num__);  // 取不出数据
			console.log(o.get_Num());
			
			
			
		</script>

闭包的应用：
<script>
			// 闭包的应用有两个模型
			// 1, 实现私有数据
			// 2, 实现缓存数据
			
			
			// 1> 带有缓存功能函数
			// var count = 0;
//			var fib = function ( n ) {
//				count++;
//				// 面试求兔子数列, 要求使用 callee
//				if ( n < 0 ) throw new Error( '数字不允许是负数' );
//				if ( n === 0 || n === 1 ) return 1;
//				return arguments.callee( n - 1 ) + 
//						arguments.callee( n - 2 );
//			};
//			
//			var count = 0;
//			for ( var i= 0; i <= 10; i++ ) {
//				count = 0;
//				console.log( fib( i )  + ", " + count + ' 次');
//			}
			
			/*
			for ( var i= 0; i <= 10; i++ ) {
				console.log( fib( i ) );
			}
			*/
			// fib( 21 );
			// 1, 3, 5, 9, 15, 25
			// 41, 67
			// console.log( count );
			
			
			var fib = (function () {
				var arr = [];
				return function ( n ) {
					// count++;
					// 面试求兔子数列, 要求使用 callee
					if ( n < 0 ) throw new Error( '数字不允许是负数' );
					
					var res = arr[ n ];   // 先到数组中取
					if ( res !== undefined ) {
						// 数组中有数据
						return res;
					} else {
						// 如果是 1 或 0 则将 1 返回给 res
						// 否则递归结果交给 res;
						
						if ( n === 0 || n === 1 ) {
							res =  1;
						} else {
							res = arguments.callee( n - 1 ) + 
									arguments.callee( n - 2 );
						}
						
						arr[ n ] = res;  // 将计算的结果放到数组中, 那么下一次再计算的
										 // 时候可以直接拿来用, 就不用计算量
						return res;
					}
				};
			})();
			
			fib( 5 );
			
			// 首先计算 第 n 项
			// 在计算的时候首先看缓存中是否有该数据
			// 那么如果缓存里面没有数据, 就递归, 并将计算的结果放到对应的缓存位置上
			// 那么如果缓存中有数据, 则直接返回
			
			
			
//			var count = 0;
//			for ( var i= 0; i <= 10; i++ ) {
//				count = 0;
//				console.log( fib( i )  + ", " + count + ' 次');
//			}
			
			// fib( 100 );
			// 1, 3, 5, 9, 15, 25
			// 41, 67
			// console.log( count );
			
			
		</script>		

函数名存储数据：
		// createCache
			var fib = function ( n ) {
				var res = fib[ n ];   // 先到函数名中取
				if ( res !== undefined ) {
					// 函数中有数据
					return res;
				} else {
					// 如果是 1 或 0 则将 1 返回给 res
					// 否则递归结果交给 res;
					
					if ( n === 0 || n === 1 ) {
						res =  1;
					} else {
						res = arguments.callee( n - 1 ) + 
								arguments.callee( n - 2 );
					}
					
					fib[ n ] = res;  // 将计算的结果放到数组中, 那么下一次再计算的
									 // 时候可以直接拿来用, 就不用计算量
					fib.len++;
					
					return res;
				}
			};
			
			fib.len = 0;
			
			fib( 5 );


简单习题：
1.创建对象的方法
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			div {
				border: 1px dashed red;
				width: 300px;
				height: 50px;
				margin: 10px 0;
			}
		</style>
		<script type="text/javascript">
			// 1, 创建对象的方法
			//	-> 1, 字面量 或  var o = {};
			//  -> 2, 构造函数 或 代码
			//  -> 3, Object.create()
			//  -> 4, copy
			/*
			var copy = function ( obj ) {
				var o = {};
				for ( var k in obj ) {
					o[ k ] = obj[ k ];
				}
				return o;
			};
			*/
			// 参考 js 高程 3 中的第 6 章
			
			
			// 2, 系统 ES5 中提供了一个 JSON.parse 的方法
			// 该方法将 json 格式的字符串转换成 对象. 但是要求字符串必须
			// 满足 json 协议( 键必须带引号 )
			
			var o1 = {
				name:"jim",
				age:13,
				gender:'nan'
			}
			var o1 = {
				"name":"jim",
				"age":13,
				"gender":"nan"
			}
			// 3, undefined
			/*
			var	Person	=	function	()	{
				name	=	"jim";  这三个变量变成全局变量了
				age	=	19;			当前作用域里面没有 	
				gender	=	"男";	所以就是undefined
			};
			var	p	=	new	Person();
			console.log( p.name );
			console.log( name );
			console.log( age );
			console.log( gender );
			*/
			
			
			// 4,
			/*
			var Student = function ( name, age, gender ) {
				this.name = name;
				this.age = age;
				this.gender = gender;
			};
			var s = new Student('jim', 19, '男');
			*/
			/*
			var Student = function() {};
			var s = new Student();
			s.name = ...
			s.age = ...
			...
			*/
			
			
			// 5, 
			// o.name, o.sayHello();
			// 加分
			// o[ 'name' ] 和 o[ 'sayHello' ]();
			
			
			// 6, 
			// I = U / R
			/*
			var getI = function ( u, r ) {
				return u / r;
			};*/
			
			
			// 7, 
			// 第一判断参数是字符串:	typeof s === 'string'
			// 第二获得第一个字符是什么: s.slice( 0, 1 ) // s.charAt(0) // s[0]
			// 第三注意, 获得元素的时候, 是要截取字符串的
			var get = function ( selector ) {
				if ( typeof selector !== 'string' ) throw new Error( '参数不是字符串' );
				
				// 正式的判断参数的格式
				var firstChar = selector.slice( 0, 1 );
				
				if ( firstChar === '#' ) {
					return [ document.getElementById( selector.slice( 1 ) ) ]; 
				} else if ( firstChar === '.' ) {
					return document.getElementsByClassName( selector.slice( 1 ) );
				} else {
					return document.getElementsByTagName( selector );
				}
				
			};
			
			
		</script>
	</head>
	<body>
		<div class="c1"></div>
		<div id="dv"></div>
		<div class="c1"></div>
		<div class="c1"></div>
	</body>
	<script>
	/*
		var node = get( '#dv' );
		node.style.backgroundColor = 'pink';
	*/
	
	/*
		var list = get( '.c1' );
		for ( var i = 0; i < list.length; i++ ) {
			list[ i ].style.backgroundColor = 'yellow';
		}
	*/	
	
	var list = get( 'div' );
	for ( var i = 0; i < list.length; i++ ) {
		list[ i ].style.backgroundColor = 'yellow';
	}
		
	</script>
</html>


原型练习：
			// 1, 如何验证写在构造函数中的方法是都占内存的？  
			/*
			var fn = function () {
				this.sayHello = function () {};
			};
			var p1 = new fn();
			var p2 = new fn();
			console.log( p1.sayHello === p2.sayHello );
			*/
			
			// 2, 
			// p.__proto__
			// Person.prototype
			
			// 3, 给对象添加属性的办法
			// 1> 利用动态特性 o.xxx = xxx
			// 2> 构造函数中 this.xxx = xxx
			// 3> 原型中添加 xxx.prototype.xxx = xxx
			// 4> 字面量   
			// 5> extend  
			// 6> 关联数组 o[ 'xxx' ] = xxx
			
			// 4, 
			var Person = function () {
				this.name = "zhangsan";
			};
			var p1 = new Person();
			p1.name = "lisi";
			var p2 = new Person();
			console.log(p2.name);  Name不是共享的  p1对Name的修改对p2没有关系
			张三
			
			// 5, 同 3
			
			// 6,  使用继承 让Student 对象有name age gender 属性 以及study 方法
			/*
			var o = { name: 'jim', age: 19, gender: '男' };
			var Student = function() {};
			Student.prototype = o;
			Student.prototype.study = function () { alert('学习'); };
			var s = new Student();
			*/
			// var obj = Object.create( o );
			// obj.study = ...
			
			// 7, tom
			/* 
			var	Person	=	function	()	{
				this.name	=	"tom";
			};
			Person.prototype.name	=	"jim";
			var	p	=	new	Person();
			console.log(	p.name	);
			*/
			
			// 8, 如何兼容的获得对象的类型名
			/*
			var getType = function ( obj ) {
				if ( obj.constructor.name ) {
					return obj.constructor.name;
				} else {
					return /function (.+?)\(/.exec( obj.constructor + '' )[ 1 ];
				}
			}
			*/
			
			// 9, 
	var	Car	=	function(	name	)	{
				this.carName	=	name;
			};
			
			var	Person	=	function(	pName,	cName	)	{
							this.name	=	pName;
							this.car	=	new	Car(	cName	);
			};
			
			var	extend	=	function(	obj	)	{
				var	o	=	{};
				for	(	var	k	in	obj	)	{
								o[	k	]	=	obj[	k	];
				}
				return	o;
			}
			// 浅拷贝, 浅度拷贝			shallowcopy
			// 如果有浅拷贝就有深拷贝
			// 深拷贝需要使用递归计算		deepcopy
			当一个对象中全部的都是值类型的话  那么深拷贝和浅拷贝没有任何的区别
			当一个对象中有引用的话 浅拷贝只拷贝这个 对象本身属性的引用 并没有把
			属性所指向的对象也拷贝一份
			
			var	p1	=	new	Person(	"jim",	"BMW"	);
			var	p2	=	p1;
			var	p3	=	extend(	p1	);
			
			console.log(	p1.name	+	",	"	+	p1.car.carName	); // jim, bmw
			console.log(	p2.name	+	",	"	+	p2.car.carName	); // jim, bmw
			console.log(	p3.name	+	",	"	+	p3.car.carName	); // jim, bmw
			p2.name	=	"tom";
			p2.car.carName	=	"奥迪";
			console.log(	p1.name	+	",	"	+	p1.car.carName	); // tom, 奥迪
			console.log(	p2.name	+	",	"	+	p2.car.carName	); // tom, 奥迪
			console.log(	p3.name	+	",	"	+	p3.car.carName	); // jim, bmw

			// 10,如何判断属性或者方法是被继承的 而不是被自己实现的
			严谨的话 使用递归判断实现
			var Fn = function () { this.age = 1; };
			Fn.prototype.name = 'jim';
			// Fn.prototype.age = undefined;
			var f = new Fn();
			// hasOwnProperty
			// 如何判断属性是被继承的??? 
			f.hasOwnProperty('age') 只能说明这个属性或者方法是f提供的
			f.age 保证有这个属性
			console.log( f.age && !f.hasOwnProperty( 'age' ) );
			有age这个属性 并且不是自己提供的
			console.log( 'age' in f && !f.hasOwnProperty( 'age' ) );
			// age 可能存在原型链上, 也可能不存在
			
			// 如果属性值就是 null 或 undefined, 那么此时 f.age 就无法判断了
			
		// 11,  如何将一个Json 字符串转为对象
		eval, new Function, JSON.parse, 基本的字符串操作
		//12 需要实现继承 有几种实现方法
		// 13 原型继承   --- 实现共用  但是会有很多层级 原型链太长 搜索时间也长
			  组合式继承 --- 
			// 1> 要求每一个对象都有 inherit, 给 Object.prototype 添加即可
			// 2> 继承自 p, 在方法中 p 用什么表示, 即 this
			// 3> 继承自参数 obj
			
			Object.prototype.inherit = function ( obj ) {
				var o = {};
				for ( var k in this ) {
					o[ k ] = this[ k ];
				}
				for ( var k in obj ) {
					o[ k ] = obj[ k ];
				}
				
				return o;
			};
			
			
			
			// 14, 函数有方法, Function.prototype
			//	       返回的对象继承自 函数.prototype
			// 1> 题目中的做法
			/*
			Function.prototype.inherit = function () {
				return Object.create( this.prototype );
			};
			*/
			// 2> 原意
			/*
			Function.prototype.inherit = function ( obj ) {
				var o = Object.create( this.prototype );
				for ( var k in obj ) {
					o[ k ] = obj[ k ];
				}
				return o;
			};
			*/
			函数的原型属性利用 函数.prototype 来获得. 表示由该函数创建的对象继承自 该函数的 prototype
			
			函数的原型对象利用 函数.__proto__ 来获得, 或 Function.prototype 来获得. 表示 该函数 继承自
				Function.prototype 或 函数.__proto__


原型链的习题：
			// 1,
			// 原型继承: 每一个对象都可以找到一条由对象构成的, 一直到 Object.prototype 的链式结构
			// 			每一个在链上的对象所提供的方法或属性, 当前对象都可以访问. 这个就是原型继承.
			//			
			//			所以原型继承就是修改原型链上的对象, 以使得当前对象具有某个属性或方法
			
			// 2, 
			// 优点: 共享方法与节约内存
			// 缺点: 增加链式搜索的负担
			
			
			// 3, 
			// 首先在当前对象中找, 如果没有在原型链上往上找. 
			// 一直到 Object.prototype, 如果没有返回 undefined
			
			// 4, 
//			var	Person	=	function	()	{
//				this.name	=	"jim";
//			};
//			Person.prototype.name	=	"tom"; 
//			var	p	=	new	Person();
//			p.name	=	"jack";   修改的是当前对象里面的 凡是做修改操作 首先做的是 当前对象里面的
//			delete	p.name;       删除当前对象里面的属性
//			console.log(	p.name	); 得到原型中的Name
//			
			
			// 变式
			var	Person	=	function	()	{
				this.name	=	"jim";
			};
			Person.prototype.name	=	"tom";
			var	p	=	new	Person();
			
			delete	p.name;
			p.name	=	"jack";
			delete	p.name;
			delete	p.name;  判断的是当前对象有没有 name
			
			console.log(	p.name	); ----> tom
			
			// 5, 原型对象的作用 
			原型对象允许复用属性与方法
			// 例如: jQuery 中采用的是原型组合混合式继承
			// 有一个典型的引用, 就是 length 属性
			// $()
			
			<script src="js/jquery-1.12.1.js"></script>
			<script type="text/javascript">
				
				// var node = $('body');
				alert($().length);
			</script>


			// 6,函数原型对象 
			Function.prototype
			
			// 7,Object (这是一个函数)继承自 
			Function.prototype  如果是对象的话 就继承自Object.prototype
			
			// 8, function fn() {} 继承自 
			Function.prototype
			
			// 9,
			//	Foo -> Function.prototype -> Object.prototype -> null
			//  Func -> Function.prototype -> Object.prototype -> null
			//  p -> Fun.prototype|new Foo() -> Foo.prototype -> Object.prototype -> null

			//10,
					<script type="text/javascript">
			
					//function	Foo1()	{}
					//function	Foo2()	{}
					//Foo1.prototype	=	new	Foo2();
					//var	o	=	new	Foo1();
					//console.log(	o	instanceof	Foo1	); true
								
								
			//11,					
					function	Foo1()	{}
					function	Foo2()	{}
					var	o	=	new	Foo1();
					Foo1.prototype	=	new	Foo2();
					console.log(	o	instanceof	Foo1	); false


							</script>
			// 1,什么是词法作用域
			// 	1> 词法作用域与代码的编写有关 与执行无关--->  找个例子  展开说
			// 	2> 函数内部允许访问函数外部的变量       ---> 原型链绘制规则展开说
			

			// 2,
			var num = 123;
			function fuc(){
				num = 456;
			} 
			console.log(num);
			//	123
			
			// 3,
			var num = 123;
			function num(){
			console.log(num);
			}
			console.log(num);
			//  123
			
			// 4, 
			var num = 123;
			var func = function (){
				console.log(num)   undefined
				var num = 123;  变量提升了
				console.log(num);  123
			}
			func();
			undefined 和 123
			
			// 5, 
			var num = 123;
			function foo1() {
				console.log(num);
			}
			function foo2(){
				var num = 456;
				foo1();
			}
			foo2();
			123
			
			
		</script>

闭包汇总：
// 1,  什么是闭包
	函数内部定义的变量 函数外部无法访问
		// 2, 
//function	Foo()	{
//				var	o	=	{	name:	"jim"	};
//				return	{
//								o:	o,
//								set_Name:	function	(	name	)	{
//												o.name	=	name;
//								}
//				};
//}
//var	o	=	Foo(); 
//console.log(	o.name	);   undefined
//console.log(	o.o.name	); jim
//o.set_Name(	"tom"	);   
//console.log(	o.o.name	); tom


			// 3, 报错
			var arr = [{name:'aa'},{name:'de'},{name:'dd'},{name:'cc'}];
			for(var i = 0; i < arr.length;i++){
				arr[i].sayHello = function() {
					console.log(arr[i].name)   函数限制作用域  
									当前函数当中 没有i 所以会访问上面的i
									这个方法下面才会调用
				};
			}

			代码离开花括号以后i--->4  跳出循环

			for(var k in arr) {
				arr[k].sayHello();
			}
			以上运行结果是报错

			//4, 写一个函数 返回一个有姓名 性别 和年龄的对象  要求对象的参数由函数参数
			调用传递得到 并且要去对象的数据不允许被修改 -- 私有数据的典型应用 只能读取 不能修改 
			可以保护我们的数据
			var createPerson = function ( name, age, gender ) {
				// ???
				return {
					get_Name: function () {
						return name;
					},
					get_Age: function () {
						return age;
					},
					get_Gender: function () {
						return gender;
					}
				};
			};
			var p = createPerson( 'jim', 19, '男' );



Object.create --- 返回一个新对象 该对象继承自参数描述的对象
var o = Object.create(p);
o的原型链结构就变成了 o -- > p --> p.__proto__ -->.... --> Object.prototype---> null

递归实现深层复制
var copy = function (o1,o2) {
	//将o2的属性拷贝到o1上
	for ( var k in o2 ) {
						// 判断 o2[ k ] 是不是对象, 如果是对象
						// 表示 o1[ k ] 和 o2[ k ] 都是对象
						// 也就是说 需要将 o2[ k ] 这个对象中的属性拷贝到 o1[ k ] 上
						if ( typeof( o2[ k ] ) === 'object' ) {
							o1[ k ] = {};
							copy( o1[ k ], o2[ k ] );
						} else {
							o1[ k ] = o2[ k ];
						}
					}

};

var deepClone = function(obj) {
	var o = {};
	copy(o.obj);
	return o;
};

//常如下组织代码：
<script>
			var deepClone = function ( obj ) {
				var o = {};
				copy( o, obj );
				return o;
				
				function copy ( o1, o2 ) {
					// 将 o2 的属性拷贝到 o1 上
					for ( var k in o2 ) {
						// 判断 o2[ k ] 是不是对象, 如果是对象
						// 表示 o1[ k ] 和 o2[ k ] 都是对象
						// 也就是说 需要将 o2[ k ] 这个对象中的属性拷贝到 o1[ k ] 上
						if ( typeof( o2[ k ] ) === 'object' ) {
							o1[ k ] = {};
							copy( o1[ k ], o2[ k ] );
						} else {
							o1[ k ] = o2[ k ];
						}
					}
				}
			};
			
			
			var c = { carName: 'BMW' };
			var p = { name:"张三", car: c };
			
			
			console.log( p.name );
			console.log( p.car.carName );
			
			var p2 = deepClone( p );
			
			console.log( p2.name );
			console.log( p2.car.carName );
			
			
			p.car.carName = '奥迪';
			
			console.log( '========================' );
			console.log( p.name );
			console.log( p.car.carName );
			console.log( p2.name );
			console.log( p2.car.carName );
		</script>


题目：
function setN( obj ){ 	// 走到函数内部有一个结论: 有两个变量, 
						// 一个是 obj    obj也指向了pre所指向的那块区域
						// 一个是 per 都指向 一个什么都没有的对象
	obj.name = '屌丝';	// 让 obj 来找到对象, 给其添加 name 
	
	obj = new Object(); // 创建了一个新的对象, 然后让 obj 指向它 不在指向原来的空间了 
	obj.name = '腐女';	// 利用 obj 找到新创建的对象, 给其添加 name   执行完毕后 这块obj空间销毁  
							只留下pre的指向
	
};

var per = new Object();  // 对象上什么数据都没有
setN( per ); // 将其传入, 传入的东西是什么? 对象的引用 
alert( per.name );  
//


闭包的案例:
// 假定不考虑闭包
			// 是否可以定义一个数组来存储 fib 数列? 
			// var fibs = [ 1, 1, 2, 3, 5, 8, 13, 21, 34, 55 ];
			// 如果有了这个数组, 求 fib 数列的前 3 项, 4 项 或 5 项? 
			// 会怎样?
			// 可以发现不用计算, 直接从数组中取即可
			
			// 问题 数组中第 10 项 是多少?
			// 所以说明数组中不可能包含所有的项
			// 因此采用一种策略, 如果数组中有直接取出来
			// 如果没有则计算, 同时将计算的结果放入数组, 以便使用
			/*
			var fibs = [];
			
			var fib = function ( n ) {
				// 如果数组中有则直接取出来
				if ( fibs[ n ] ) {  // 有
					return fibs[ n ];
				} else { // 需要计算
					var temp;
					// 递归计算
					if ( n == 1 || n == 0 ) {
						temp = 1;
					} else {
						temp = fib( n-1 ) + fib( n-2 );
					}
					// 传统的递归计算直接结束, 没有办法将数据存储到数组中
					
					// 将得到的结果存储到 数组中 第 n 项
					fibs[ n ] = temp;
					
					return temp;
				}
			};
			*/
			
			
//			var fib = (function () {
//				var fibs = [];
//				return function ( n ) {
//					if ( fibs[ n ] ) {  // 有
//						return fibs[ n ];
//					} else { // 需要计算
//						var temp;
//						// 递归计算
//						if ( n == 1 || n == 0 ) {
//							temp = 1;
//						} else {
//							temp = fib( n-1 ) + fib( n-2 );
//						}
//						fibs[ n ] = temp;
//						
//						return temp;
//					}
//				};
//			})();


		var fib = (function () {
			var fibs = [];
			return function (n) {
				if (fibs[n]) {
					return fibs[n];
				} else{
					var temp;
					if(n == 0 || n == 1){
						return temp = 1;
					}else {
						temp = fib(n-1) + fib(n-2);
					}
					fibs[n] = temp;
					return temp;
				}
			};
		})();
			
		</script>


分析jq缓存的案例：
// 缓存缓存, 存的是什么???
			// 键值对结构, 恶意存储数据
			// 最简单的缓存结构就是
			// var cache = {};
			// 要求写一个函数(方法), 用户提供键与值, 将其存储到缓存中
//			var fn = function( k, v ) {
//			 	cache[ k ] = v;
//			};
			
			// 如果所将提供键来访问数据
			// 1> 直接访问 cache[ k ]
			// 2> 实现函数返回
			// var foo = function( k ) { return cache[ k ]; }; 
			
			
			// 在实际开发中 缓存是常常被使用的手段
			// 缓存的尺寸一定要在一个范围之内, 例如 50 条
			var cache = (function(){
				length = 0;
				internalCache = {};
				
				return function ( k, v ) {
					// 如果传入了 v 表示存储数据, 如果只有一个 k 则读取数据
					if ( v ) {
						if ( !internalCache[ k ] ) {  //如果数据不存在的时候才加
							length++;
						}
						internalCache[ k ] = v;
						
					} else {
						return internalCache[ k ];
					}
				};
			})();
			
			console.log( cache( 'name' ) + ", " + length );
			
			cache( 'name', 'jim' );
			
			console.log( cache( 'name' ) + ", " + length );
			
			
			cache( 'name', 'tom' );
			
			console.log( cache( 'name' ) + ", " + length );
			
			
			for ( var i = 0; i < 100; i++) {
				
				cache( i + '', i );
			}
			
			console.log( length );
			
		</script>

进一步：
			// 在实际开发中 缓存是常常被使用的手段
			// 缓存的尺寸一定要在一个范围之内, 例如 50 条
			var cache = (function(){
				length = 0;
				internalCache = {};
				arr = [];
				
				return function ( k, v ) {
					// 如果传入了 v 表示存储数据, 如果只有一个 k 则读取数据
					if ( v ) {
						if ( !internalCache[ k ] ) {
							length++;
							arr.push( k ); // 缓存中没有数据的时候才会加进去
						}
						internalCache[ k ] = v;
						
					} else {
						return internalCache[ k ];
					}
				};
			})();
			
			// 要保证缓存最大是 50 条数据, 那么久在加入数据的时候判断一下
			// 超过 50 就删除一条
			
			// 要删除数据就是删除最早加入的数据, 那么只需要
			// 使用数组即可存储加入数据的顺序
			// 删除的时候使用 shift 即可
			
			cache('name', 'jim');
			cache('name', 'tom');
			cache('age', 10 );
			cache('gender', 'nan');
			
			
			// 每次加数据的时候, 判断一下, 是否长度超过 50, 如果是删一条
			// 如果不是则不管

存储50条数据：
// 在实际开发中 缓存是常常被使用的手段
			// 缓存的尺寸一定要在一个范围之内, 例如 50 条
			var cache = (function(){
				
				internalCache = {};
				arr = [];
				
				return function ( k, v ) {
					// 如果传入了 v 表示存储数据, 如果只有一个 k 则读取数据
					if ( v ) {
						if ( !internalCache[ k ] ) {
							
							// 如果是新加键值对, 实际上是放在这个里面
							if ( arr.length >= 3 ) {
								// 删除
								var deleteKey = arr.shift();
								delete internalCache[ deleteKey ];
							}
							
							arr.push( k ); // 缓存中没有数据的时候才会加进去
						}
						internalCache[ k ] = v;
						
					} else {
						return internalCache[ k ];
					}
				};
			})();
			
			
			
			// 每次加数据的时候, 判断一下, 是否长度超过 50, 如果是删一条
			// 如果不是则不管
			
			// 判断长度改用数组的长度, 因此删去 length 变量
			cache('name', 'jim');
			cache('name', 'tom');
			cache('age', 10 );
			cache('gender', 'nan');
			cache('math', 100 );
			cache('english', 99);
			cache('chinese', 120);
			
			
			/*
			$( 'div' ).nextAll()
			$( 'div' ).nextAll( 'p' )
			prev, prevAll, find, children, siblings, ...
			*/
			// 判断元素是否符合某个选择器
			// $( 'div .c[a=b]>*' )  分解
			// div			判断函数
			// .c			判断函数
			// [a=b]		判断函数
			// *			判断函数  
			每一个选择器都配一个判断函数
			凡是用到选择器的时候 第一次用的时候JQ都会把他们缓存起来
			多了的话 就会把第一个删除 在重新存储一个
			
		/*	
			var cache = function () {
				var internalCache = {};
				var arr = [];
				return function (k,v) {
					if (v) {
						if( !internalCache[k] ){
							if (arr.length >= 3) {
								delete internalCache[arr.shift()];
							}
							arr.push(k);
						}
						internalCache[k] = v;
					} else{
						return internalCache[k];
					}
				};
			}
			*/
		</script>

代码优化：

		<script type="text/javascript">
		
			// 在实际开发中 缓存是常常被使用的手段
			// 缓存的尺寸一定要在一个范围之内, 例如 50 条
			var createCache = function(){
				var internalCache = {};
				var arr = [];
				return function ( k, v ) {
					if ( v ) {
						if ( !internalCache[ k ] ) {
							if ( arr.length >= 3 ) {
								// 删除
								var deleteKey = arr.shift();
								delete internalCache[ deleteKey ];
							}
							arr.push( k ); // 缓存中没有数据的时候才会加进去
						}
						internalCache[ k ] = v;
					} else {
						return internalCache[ k ];
					}
				};
			};
			
			var type2Cache = createCache();
			var selectorCache = createCache();		
		</script>

沙箱模式：  凡是在使用对象的地方 如果不使用对象了 将变量赋值为null p=null
<script>
			// 沙箱模式, 沙盒模式, 隔离模式
			// 
			// 在 js 中讨论隔离, 要隔离的是什么?
			// 在 js 中, 只有函数可以限定变量的作用域
			// 自然只有函数可以实现隔离
			
			// js 中包含 变量 和 代码
			
			// js 中沙盒模式就是
			
			(function () {
				
				// 代码
				// var ....
				
				
			})();
			
			// 问题
			// 1, 为什么一定是自调用函数? 要执行, 不污染, 隔离
			//	基于这个特点有一个非常重要的应用, 模拟块级作用域
			// 2, 隔离的效果是什么?
			
			// 使用沙箱后, 在内部定义的代码, 访问数据, 在沙箱内部是一个完整的生态链
			// 也就是说只要保证变量有 var 那么内部和外部就完全隔离开了
			// 如果要声明多个数据在沙箱中 也不会出现污染全局的问题
		</script>

模拟块级作用域:
		<script>
			
			// for (var i = 0; i < 10; i++) ;
			// console.log( i );
			
			var arr, i;
			
			
			arr = [
				{ name: 'jim' },
				{ name: 'tom' }, 
				{ name: 'jack' }, 
				{ name: 'clark' }
			];
			
			
			for ( i = 0; i < arr.length; i++) { 
				arr[i].sayHello = function() { 
					// console.log(arr[this.index].name); 
					console.log(this.name); 
					console.log(arr[i].name)
				}; 
			}
			
			
			
			for ( i in arr) { 
				arr[i].sayHello(); 
			}
			
			
			// 等价于
			/*
			i = 0;
			arr[0].sayHello();
			i = 1;
			arr[1].sayHello();
			i = 2;
			arr[2].sayHello(); 
			i = 3;
			arr[3].sayHello(); 
			*/
		</script>


利用沙箱隔离：
<script>
			
			/*
			var id = function ( idName ) {
				return document.getElementById( idName );
			};
			var cName = function ( cName ) {
				return document.getElementsByClassName( cName );
			};
			*/
			// 污染多
			
			
			// 引入少的污染
			
			var o = {
				id: function ( idName ) {
					return document.getElementById( idName );
				},
				cName: function ( cName ) {
					return document.getElementsByClassName( cName );
				},
				elem: null
			};
			
			// 查找 .c 的dom元素, 将其加到 #dv 的里面
			// 如何获得 o 的一个深拷贝
			
			
			// 无法复用
			
			// 如果封装构造函数, 无意又会引起多个污染
			
			(function (){
				
				function itcast() {};
				
				itcast.prototype.extend = function (){};
				// ...
				
				// ...
				
				
				window.I = window.itcast = itcast;
				
			})();

			外部可以使用 I 或者 itcast 进行调用
			// 完全将代码隔离开, 在沙箱内部是一个独立的结构, 允许根据需要
			// 使用各种各样的代码, 然后将需要对外公开的代码返回出来
			
		</script>

什么是复用：
<script>
			
			var o = { name: 'jim', age: 19 };
			
			// 复用
			// 1> 对象 -> 得到一个新对象
			// 2> 函数 -> 创建新对象, 反复调用
			(function (w) {
				
				var f = function ( name, age ) {
					this.name = name;
					this.age = age;
				};
				
				// f.prototype.sayHello = function() {}
				f.prototype = new Foo();
				
				function Foo() {}
				
				w.f = f;
				
			})(window);
			window 是一个全局变量
			
			var o1 = new f('jim', 19);
			var o2 = new f( 'tom', 20);
			
		</script>
关于变量 与全局对象的关系：

<script type="text/javascript">
			
			// 就 js 语言本身是不存在全局对象
			// 但是 js 中有这个概念
			
			// 全局对象相当于 全局变量的一个宿主 对象
			// 也就是说 全局变量 好比全局对象的属性
</script>


优化自定义的缓存方法：
<script type="text/javascript">
			/*
			var createCache = function(){
				var internalCache = {};
				var arr = [];
				return function ( k, v ) {
					if ( v ) {
						if ( !internalCache[ k ] ) {
							if ( arr.length >= 3 ) {
								// 删除
								var deleteKey = arr.shift();
								delete internalCache[ deleteKey ];
							}
							arr.push( k ); // 缓存中没有数据的时候才会加进去
						}
						internalCache[ k ] = v;
					} else {
						return internalCache[ k ];
					}
				};
			};
			*/
			
			// 如果存储的数据是一个键值对, 除了使用数组或对象以外, 还可以
			// 直接将数据存储到函数名上. 
			// 优点: 少一个变量
			// 缺点: 数据暴露在外面了
			
			// 1> 将键值对模型从闭包中提取出来, 放到函数名上
			var createCache = function(){
				var arr = [];
				var cache = function ( k, v ) {
					if ( v ) {
						if ( !cache[ k ] ) {
							if ( arr.length >= 3 ) {
								// 删除
								var deleteKey = arr.shift();
								delete cache[ deleteKey ];
							}
							arr.push( k ); // 缓存中没有数据的时候才会加进去
						}
						cache[ k ] = v;
					} else {
						return cache[ k ];
					}
				};
				return cache;
			};
			
			var c = createCache();         //工厂模式      缺点就是有一些属性不可设置，比如name
			c('name1', 'jim');
			console.log( c['age'] ); undefined
			console.log( c['name1'] ); jim
			
			// 2> 既然键值对存储在函数名上, 那么表示直接用 函数名[ key ] 就可以访问数据了
			// 表明函数体可简化. 
			// 简化后, 如果调用函数就是在往缓存中存储数据, 如果使用
			// 函数名[ .. ] 就是在获取缓存中的数据
			
		</script>


优化自定义缓存方法：
<script type="text/javascript">
			// 1> 将键值对模型从闭包中提取出来, 放到函数名上
			
			// 2> 既然键值对存储在函数名上, 那么表示直接用 函数名[ key ] 就可以访问数据了
			// 表明函数体可简化. 
			// 简化后, 如果调用函数就是在往缓存中存储数据, 如果使用
			// 函数名[ .. ] 就是在获取缓存中的数据
			
			var createCache = function(){
				var arr = [];
				var cache = function ( k, v ) {
					// 在 jq 中目标很明确, 调用函数就是在加数据
					// 并没有修改数据的意思, 所以不需要判断是否有该键存在
					if ( arr.length >= 3 ) {
						// 删除
						delete cache[ arr.shift() ];
					}
					arr.push( k ); // 缓存中没有数据的时候才会加进去
					
					cache[ k ] = v;
					
				};
				return cache;
			};
			
			var c = createCache();
			c('name1', 'jim');
			var v = c[ 'name1' ];
			console.log( c['age'] );
			console.log( c['name1'] );
			
			
			var v = c( 'k', 'v' );
			
			
			// jq 的优势
			var data = cache[ key ] || cache( key, value );
			// 我们的框架
			var data;
			if ( cache[ key ] ) {
				date = cache[ key ];
			} else {
				cache( key, value );
				data = value;
			}
			// 使用
			
			
			// 
			cache( key, value )
			cache[ key ]
			cache.update( key, value )
		</script>


函数四种调用模式：
<script>
			// 函数的四种调用模式
			// 1> 函数模式
			// 2> 方法模式
			// 3> 构造器模式
			// 4> 上下文模式
			
			// 这里不同的东西就是 this
			
			// 凡是函数有一个默认的参数, 就是 this
			
			// 定义:
			// 定义一个函数, 如果单独的将其调用, 不将其与任何东西关联, 那么就是函数调用模式
			function foo1() {}
			foo1();
			
			// 定义一个函数, 如果将函数赋值给一个对象的成员, 那么利用对象调用它就是方法模式
			function foo2() {}
			var o = {};
			o.f = foo2;		// o[ 'f' ] = foo2; 
							// o[ 0 ] = foo2;
			new o.f();	
			// o[0]()
			
			// 定义一个函数, 使用 new 来调用创建对象就是构造器( constructor )模式
			// function foo3() {}
			// new foo3();
			var Person = function (name) {
				this.name = name;
			}	
			var p = new Person("jim");



			// foo3();
			// o.foo3();
			
			
			// 区别:
			// 函数模式 this 就是全局对象( window )
			// 方法模式 this 就是当前调用方法的对象
			/*
			Function.prototype.inherit = function() {
				this    -->  这个this代表谁 我们现在不知道
			};
			function foo() {}
			foo.inherit();   这时候this 就代表foo
			Object.inherit	 这时候this 就代表object
			*/
			// 构造器模式 this 就是 new 出来的新的对象
		    	var itcast = function (selector) {
					return new itcast.prototype.init(selector);
				}
				itcast.fn = itcast.prototype = {
					constructor:1,
					selector:2,
					init:function () {};
				};

				var p = new itcast.prototype.init(selector);

				
				var  o = {
					Person:function () {};
				};
				o.Person();
				new o.Person();			
		</script>


面试1：
<script>
		
		// 美团面试
		var length=10;
		function fn(){
		    console.log(this.length);
		}
		var obj = {
		    length:5,
		    method: function (fn) {
		
		        fn(); // 10  函数调用模式 没有绑定任何方法
		        				this 代表window 相当于全局变量的length
		        
		        arguments[0](); // --> 1 方法调用 this 代表调用者
		        		this 代表arguments ，this.length 代表实参的个数	
		        // 访问 arguments 对象的 键为 0 的数据
		        // 就是调用 fn 但是 fn 现在在 arguments 中



		    }
		};
		obj.method(fn);
		obj.method(fn, 123); 扩展 -- arguments[0](); --- >　2			
		</script>
面试题2：
	<script>
				
		//李威 14:10:50
		
		var scope='global';
		
		function log(){
		    var args=Array.prototype.join.call(arguments,', ');
		    console.log(this.scope+':'+args);
		}
		
		var dog={
		    scope:'dog',
		    yelp: function () {
		        var scope = 'dog.yelp';
		        log('wow');
		    }
		};
		
		dog.yelp();						// g : wow
		dog.yelp.apply(dog);			// g : wow	
		log.call(dog, 'created');	// d : created
		// log.apply(dog, ['created']);	
		</script>

构造函数模式：
		<script>
			
			// 构造函数模式有两点不同
			// 1> this
			// 2> return
			
			// 在构造函数 如果没有 return 默认就是返回当前对象, 即 this
			// 如果有 return
			// 1> 如果 return 后面是基本数据类型, 忽略, 和没写一样
			// 2> 如果 return 后面是一个有效的引用类型, 那么无论构造函数中写什么内容
			//		都返回 return 后面的对象 return true/null/undefined 都没有用 不起作用
											如果是[] 是可以的  只要返回的是引用类型就可以
			
			
			var Person = function () {
				this.name = 'jim';
				return [];
			};
			var p = new Person();
			
		</script>
构造函数：
<script>
			
			// 私有数据的 构造函数返回一个对象 
			//缺点--- 继承没了/new出来的对象丢了 因为返回了新的对象
			var createPerson = function ( name ) {
				return {
					get_name: function () {
						return name;
					}
				};
			};
			
			var p0 = createPerson( 'jim' );		// 工厂模式创建对象
			var p1 = new createPerson();		// 寄生模式创建对象 我们现在是创建了对象 但是 最后return
												//回来的是另一个对象 这就叫寄生 一般对外公开的时候用这个 
												//内部使用还是使用上面的方式			 
		</script>

上下文调用模式：		
<script>
			// 上下文  ---> 
			// 在函数调用模式中 函数模式, 方法模式 与 构造器模式 this 
			// 都是固定的, 在上下文调用模式中, this 由上下文决定
			
			function foo() {
				console.log( this );
			}
			
			/*
			foo();							// 函数模式   --window
			var o = {fn:foo, name:'xp'};	
			o.fn();							// 方法模式   -- Object {name:'xp'}
			new foo();						// 构造器模式 -- foo 指的就是foo的对象
			*/
			
			// 上下文模式 表示可以在调用的时候指定 this 的值是多少
			// 有两种调用方法
			// 1> 函数名.apply( ... );
			// 2> 函数名.call( ... );
			
			// 上下文模式由于可以指定 this 那么他可以模仿的调用有几种? 2种（方法、函数）
			foo.apply();       ---- 输出 window
			foo.apply( null ); ---- 输出 window
			// 以上两种代表函数调用
			
			方法调用模式--->
			var o = { name: 'xpp' };
			foo.apply( o );  // 传入什么就相当于用什么对象调用该方法. 借用方法调用
			把这个函数借给那个对象给调用用一下

			
			// apply 的参数, 第一个参数表示指定的 this 对象, 第二个参数要求是数组
			// 表示函数的参数
			
			// 作业: 自己写一个函数, 带有参数与返回值, 利用上下文调用, 让多个对象调用该方法
			// f.apply( o, [ ... ] );
			
</script>


借用函数调用案例：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			p, div, img, span, a {
				display: block;
				width: 300px;
				height: 50px;
				border: 1px dashed red;
				margin: 10px 0;
			}
		</style>
		
	</head>
	<body>
		<a href=""></a>
		<div>div</div>
		<img src="" alt="" />
		<div>div</div>
		<p>p</p>
		<span>123</span>
	</body>
	<script type="text/javascript">
	/*
		// 给页面上所有的 div 和 p 标签添加背景色
		var divs = document.getElementsByTagName('div');
		var ps = document.getElementsByTagName('p');
		
		// yellow
		// dom.style.backgoundColor = 'yellow';
		
		
		for ( var i = 0; i < divs.length; i++ ) {
			divs[ i ].style.backgroundColor = 'yellow';
		}
		for ( var i = 0; i < ps.length; i++ ) {
			ps[ i ].style.backgroundColor = 'yellow';
		}
	*/
	
	
		// 给页面上所有的 div 和 p 标签添加背景色
//		var divs = document.getElementsByTagName('div');
//		var ps = document.getElementsByTagName('p');
		// divs 与 ps 都是伪数组, 但是需要执行数组的方法 push 这个时候就需要借用来调
		
		/*
		var list = [];
		// list.push( divs );  这里面存的是 HTMLCollection 对象 没有起到push作用
		//我没有push的方法 我的未数组借用一下你的push 方法 使用apply
		list.push.apply( list, divs );  div里面每一个元素放到list里面
									第一个参数还是list 和上面没有区别 重点是第二个参数 为数组
		list.push.apply( list, ps );
		
		// 如果函数调用 func( 1, 2, 3 )
		// 那么使用 apply 模式 就使用 func.apply( o, [ 1, 2, 3 ] );
		// 等价
		*/
		//[].push.apply(divs,ps);  这个意思是把ps里面的每一个元素 当做一个个元素
								放到divs里面 ，把divs当做数组来调用 push方法
								这个push是借过来用的 数据全放在divs里面了 因为数据是可读的
								所以不可以使用push 可以使用concat

		concat 代表把数组连起来 不能是伪数组 所以变成真数组 contact 返回的是新数组
		push 返回的数组长度
//		var list = [].concat.apply( [].slice.apply( ps ), divs );
//		
//		for ( var i = 0; i < list.length; i++ ) {
//			list[ i ].style.backgroundColor = 'yellow';
//		}
		
		
/*		var tag = function ( tag, results ) {
			results = results || [];  // 传进来的是否为数组 不是就创建数组
			
			results.push.apply( results, document.getElementsByTagName( tag ) );
			
			return results;
		};
		var list = tag( 'div' );  牛逼啊 会新建一个数组  返回
 		list = tag( 'p', list );  
		
		for ( var i = 0; i < list.length; i++ ) {
			list[ i ].style.backgroundColor = 'yellow';
		}*/
		
		
		
		var tag = function (tag,res){
			res = res || [];
			res.push.apply(res,document.getElementsByTagName(tag));
			return res;
		};
		
		var list = tag("div");
		list = tag("p",list);
		
	for (var i=0; i<list.length; i++) {
		list[i].style.backgroundColor = "red";
	}
		
	</script>
</html>


验证数组方法：
<script type="text/javascript">
		var arr = [ 'a' ];
		var length = arr.push( 'b', 'c', 'd' );
</script>

问题：
<script>
		/*
			var a = 2;
			var o = {a: 3, foo: foo};
			var p = {a: 4};
			
			o.foo();  // 3
			
			(p.foo = o.foo)();   // 2  赋值运算符 a=b=c=1 
			记住 --》 取得是右边的值  赋值操作的时候 和对象无关 
			// 编译原理 相当于吧o.foo里面存的那个函数赋给了p.foo
			所以可以理解为foo = o.foo 取出来的是函数
			// 词法分析以后, 留下来的不是 o.foo 而是 o.foo 里面存储的值
			里面存的就是一个函数
			function foo() {
			    console.log(this.a);
			}
						
			(p.foo)();			// 4
			p.foo();			// 4
		*/
		
			var o = { num: 123, fn: function() { alert( this.num ); } };
			var num = 456;
			var foo = o.fn;  o.fn赋值给变量foo， 如果这个变量接收的是函数的话 此时
								是把里面存的值取出来赋值
								o不参与赋值 通过o找到里面的fn 赋给foo
								fn指向了一个函数  将函数赋给了foo
								foo 就是函数本身 foo调用的时候本身没有任何对象
								函数调用模式 this就代表全局window  
			
			foo();  //456 
		</script>

object.getName();
(object.getName)();
(object.getName = object.getName)(); //The window 非严格模式下
这个赋值表达式的值是函数本身 所以this的值不能得到维持 结果就返回了the window

2.
<script>
	// 1, 新的js版本有类似的方法但是旧版本没有, 所有模拟一下
	// 2, 在其他编程语有类似的功能, 但是 js 没有, 而现在的开发者习惯于 该语言特性, 所以模拟一个
	//表示所有的函数都有construct方法
	//这段代码是借用构造函数创建新对象 但是新对象与原构造函数创建的对象有相同的原型链
	Function.prototype.c = function(aArgs) {
	    var fConstructor = this,    //this代表 谁调用这个方法 就指谁
	    							//fConstructor 就代表当前调用的函数
	       fNewConstr = function() {
	        fConstructor.apply(this, aArgs);  相当于this.fConstrucntor(aArgs)
	       };
	                   
	    fNewConstr.prototype = fConstructor.prototype;  //新的函数也含有原型属性
	    												//改变原型属性 
	    												// 让我自己写的函数 和当前函数this fConstructor 有相同的原型链
	  //  fConstructor.prototype = fConstructor.prototype;
	    return new fNewConstr();					//相当于在调用当前的函数 new出来的对象有相同的原型链结构

	    						有了fConstructor.apply(this, aArgs); 之后代表 this 代表创建出来的对象 传进来的对象
	    															利用原来的进行初始化 借用构造函数创建对象
	    															具有相同的原型链
	};
	
	var f = function() {
	};
	
	var o1 = new f();
	var o2 = f.c();
</script>

2.

<script type="text/javascript">
			function fn(a){
				var result = [];
				for(var i = 0,n = a.length;i < n;i++){
					result[i] = function(){
						// console.log( i );
						return a[i];
					};
				}
				return result;
			}
			
			var o = fn([10,20,30]); // i = 3
			var f = o[0];
			console.log(f());  会报错 undefined  访问a[3]项 
			console.log(f()());  这样的话就会报错 访问这个函数
</script>

四种模式练习：
<script>
			
			// 要求写一个方法, 让多个对象来调用
			
			// 1, 简单的实现
			/*
			function Foo1 () {
				console.log( 'Foo1 被调用了' );
			}
			// 函数模式
			Foo1();
			// 方法
			var o1 = { name: 'jim' };
			var o2 = { age: 19 };
			Foo1.apply( o1 );
			Foo1.apply( o2 );
			*/
			
			// 2, 传参
			/*
			function Foo2 ( a, b, c ) {
				console.log( 'Foo2 被调用了, 参数是 ' + a + ", " + b + ", " + c );
			}
			// 函数式
			Foo2(1, 2, 3);
			// 方法模式
			var o1 = { name: 'jim' };
			var o2 = { age: 19 };
			Foo2.apply( o1, [ 1, 2, 3 ] );
			Foo2.apply( o2, [ 1, 2, 3 ] );
			*/
			
			
			// 3, 加入 this
			/*
			function Foo3() {
				console.log( this );
			}
			// 函数模式
			Foo3();	// window
			// 方法模式
			var o1 = { name: 'jim' };
			var o2 = { age: 19 };
			Foo3.apply( o1 ); 
			Foo3.apply( o2 );
			*/
			
			
			// 4, 加入 this, 和 参数
			/*
			function Foo4( a, b, c ) {
				console.log( this );
				console.log( [].join.apply( arguments, [', ']) );
				//arguments伪数组 apply调用apply 需要使用数组作为参数
				//元素连接 形成字符串 arguments 连接起来  用逗号分隔
 			}
			// 函数
			Foo4( 1, 2, 3 ) ;  object window  -- 1,2,3
			// 方法 
			var o1 = { name: 'jim' };
			var o2 = { age: 19 };
			
			Foo4.apply( o1, [ 1, 2, 3, 4 ]);  object{name:'jim'}  1,2,3,4
			
			Foo4.apply( o2, [ 1, 2, 3, 4 ]);
			*/
		</script>


伪数组join方法:
<script>
			
			var arr = [ 1, 2, 3 ];
			console.log( arr.join( '-' ) );
			
			
			var o = { length: 0 };
			// o[ 0 ] = 1;
			// o[ 1 ] = 2;
			/*
			o[ o.length ++ ] = 1;
			o[ o.length ++ ] = 2;
			*/
			
			// 数组有 push
			[].push.apply( o, [ 1 ] );
			[].push.apply( o, [ 2 ] ); length会自动增加
			
			// 数组的 join 方法将其链接起来
			console.log( [].join.apply( o, [ ', ' ] ) );
			
			// slice
			// splice
			// ...
			
			// call 方法
			// call 方法与 apply 方法完全一样, 只是在调用参数的时候不需要使用数组
			
			var objArr = { length: 0 };
			[].push.call( objArr, 1 );
			[].push.call( objArr, 2 );
			
			
			// 加多个参数
			var arr1 = [];
			arr1.push(1, 2, 3, 4, 5);
			var o1 = { length: 0 };
			var o2 = { length: 0 };
			
			[].push.apply( o1, [ 1, 2, 3, 4, 5, 6 ] );
			[].push.call( o2, 1, 2, 3, 4, 5, 6, 7 );
			
			
			// 
			var list = document.getElementsTagName( 'div' ); 
				//得到是一个伪数组 
			// var newArr = [].slice()  得到新的数组 所有项返回 
			// push
			[].push( 1, 2, 3, 4 )
			[].push.call( [], list ); 如果这样的话 就把我们的list
					当成一个元素加到方括号里去了 所以需要使用apply
					应该当成整体来看
			[].push.apply( [], list );			
			
		</script>

借用构造方法继承：
<script>
			
			// 1, 什么是继承( 原型式, 组合式 ), 自己没有, 别人有, 然后自己就有了
			// 2, 今早的问题
			
			//构造函数本质是 利用对象的动态对象 给刚刚new出来的对象加成员
			var Person = function( name, age ) {
				this.name = name;
				this.age = age;
			};
			//二者的原型链不一样
			var p = new Person('jim', 19); // p -> P.p -> O.p -> null
			
			var o = {};
			Person.call( o, 'tom', 20 );   // o -> O.p -> null	
			
			//
			var nop = function () {};
			nop.prototype = Person.prototype;
			// obj原型就和上面的一样了
			var obj = new nop();
			Person.call( obj, 'tom', 20 );
			
			
			// 借用构造函数继承模型
			/*
			var Student = function ( name, age, gender ) {
				
				Person.call( this, name, age );
				
				this.gender = gender;
			};
			*/
			</script>


ES5内容： 
1.
<script>
			// ecmascript - v262  规范
			// v3
			// v5
			// v6
			
			// v5
			// 1, 严格模式  'use strict'
			//		只要在代码的开头写上 'use strict'
			// 'use strict'
			/* 参考权威指南、MDN 
			var i = 1;
				a = 2;
			*/
			
			// 2, getter 与 setter 语法糖
			// 给开发者友好的语法格式, 但是本质没变
			/*
			var Person = function ( name ) {
				return {
					name: function () {
						return name;
					}
				};
			};
			var p = new Person( 'tom' );
			console.log( p.name() );

			var Person = function ( name ) {
				return {
					get_name: function () {
						return name;
					},
					set_name: function ( v ) {
						name = v;
					}
				};
			};
			
			var p = new Person( 'tom' );
			console.log( p.name() );
			// 每次使用需要圆括号, 不是很友好
			// 如果可以像直接操作属性名一样, 就简单了
			console.log( p.name );
			p.name = 'jack';	// p.name( 'jack' );
			*/
			以下进行改善：		
			
			// 语法: get 是一个关键字
			/* 尽量使名字和参数名字一致 以防歧义
			get 名字() {
				方法体
			}
			set 名字(参数名) {
				方法体
			}
			*/
			
			var Person = function ( name ) {
				return {
					get name () {			// getter 读写器
						return name;
					},
					/*set name ( v ) {			// setter 读写器
						name = v;
					}*/
				};
			};
			var p = new Person( 'jim' );
			
			console.log( p.name );
			
			p.name = 'rose';
			
			console.log( p.name );
			
			// 1, 允许只读属性存在, 如果给其赋值, 不报错的错误(赋值无效)
			假如把set 注释掉 
			p.name = 'rose'; 这样会给p提供一个属性值 会给p对象加一个属性  name rose --> get name123
			p.name = 'rose'; 这样赋值会失败 认为你是要赋值 所以让这句话 其赋值无效 没有这个name rose --- >  get name ()
			
			
			
		</script>
2.
<script>
			
			// 1 数组方法
			// foreach
			// map
			// reduce
			// indexOf
			// ...
			
			var arr = [ 'a', 'b', 'c' ];
			
			// arr.forEach( 函数 );
			// $.each
			/* forEach 参数 第二个参数是一个对象 函数当中this的指向
			arr.forEach(function ( v, k ) {
				// console.log( k + ", " + v );
				console.log( this );  函数调用模式  this 指向后面第二个参数对象
			}, { name: 'tom'} );
			*/
			
			
			// map 映射 把一个东西变成另一个东西 
			// y = x^2  x -- 映射成y map 里面传的也是一个函数
			i 代表下标  
			var list = arr.map( function ( v, i ) {
				// console.log( i + ", " + v );
				// return i; 返回 的是 0 1 2
				if ( v != 'b' ) return v; 得到a undefined c 
			} ); 
			把一个数组 变成另一个数组
			map 返回什么 我的list里面就有什么

		</script>


正则表达式：
<script type="text/javascript">
			
			// 目标
			// 1, 为什么要学这个?
			//	提高效率
			// 2, 正则表达式是什么?
			//	普通	是一个字符串
			//  js	是一个 用来匹配的 并 包含元字符或匹配字符的 字符串对象
			// 3, 可以怎么用?
			//	1> 匹配
			//  2> 提取
			//  3> 替换
			
			// 正则表达式 Regular Expressions
			
			// "123"
			// "abc"
			
			// 元字符, 是用来快速匹配的一些通配符或格式控制符
			// 
</script>

创建正则表达式对象：
<script>
			
			// 1, 在 js 中使用 RegExp 来创建正则表达式对象
			// 2, 语法
			// var r = new RegExp( "正则表达式" );
			
			// 3, 如何使用
			// 案例: 在 abcdefg 中找出 e 来
			/*
			var str = "abcdefg";
			var search = "e";
			for ( var i= 0; i < str.length; i++ ) {
				if( str.charAt( i ) === search ) {
					break;
				}
			}
			console.log( i );
			*/
			
			// 使用正则表达式对象
			// 对象提供了一个 exec 的方法, 用来将符合正则表达式在字符串提取出来(包含其他信息)
			// 语法
			// var 对象 = 正则表达式对象.exec( 要处理的字符串 );
			var str = "abcdefg";
			// 1, 创建正则表达式对象
			var r = new RegExp( "f" );
			// 2, 调用方法
			var o = r.exec( str );
			// 3, 得结果
			// index 属性, 表示找到的结果在给定字符串中的位置
			console.log( o.index );
			
			
			// 练习, 在 字符串 "abcdefghijklmn" 找出 "efg" 的位置
			
			
		</script>
查找字符串：
<script>
		
//			var r = new RegExp( "efg" );
//			var obj = r.exec( "abcdefghtjklmn" );
//			console.log( obj.index );
			
			var str = "abcdefghtjklmn";
			var search = "fgh";
			for ( var i = 0; i < str.length - search.length + 1; i++ ) {
				if ( str.slice( i, i + search.length ) == search )
					break;
			}
			console.log( i );
 查找的东西：
 <script type="text/javascript">
			
			var str = "abcdefg";
			// 1, 创建正则表达式对象
			var r = new RegExp( "f" );
			// 2, 调用方法
			var o = r.exec( str );
			o是一个数组
			// 这个对象是查找的结果, 常常命名为 match 或 m
			
 </script>

循环查找：
		<script>
			//	     0123456789012345678901
			// var s = "abcdefgefgefghijefglmn";
			// 将里面所有的 e 找出来? 位置分别是多少?
			
			// 传统
			/*
			var arr = [];
			for ( var i = 0; i < s.length; i++ ) {
				if ( s.charAt( i ) === 'e' ) {
					arr.push( i );
				}
			}
			console.log( arr );
			*/
			
			
			// indexOf
			// var i1 = s.indexOf( "z", 4 + 1 ); 第一个参数要找的字符 第二个从第几个开始找 
												假如第二个参数不传 代表默认从第一个开始找
			// alert( i1 );
			
			// 部分同学这么做  会有重复
			/*
			var arr1 = [];
			for ( var i= 0; i < s.length; i++) {
				var index = s.indexOf( 'e', i );
				if ( index != -1 ) {
					arr1.push( index );
				} else {
					break;
				}
			}
			*/
			
			//	     0123456789012345678901
			var s = "abcdefgefgefghijefglmn";
			var i = -1, arr = [];
			do {
				i = s.indexOf( 'e', i + 1);
				if ( i != -1 ) {
					arr.push( i );
				}
			} while ( i != -1 );
			
		</script>

循环查找：
<script>
			//	     0123456789012345678901
			var s = "abcdefgefgefghijefglmn";
			var r = new RegExp( "e", "g" ); 如果把一个字符串所以字符找出来
										第二个参数需要是'g'
										有了g代表从刚刚找过的下一个元素开始找
			var arr = [];
			var m;
			// 在 exec 的方法中有一个规定, 如果同一个正则表达式对象 如果开启了全局模式
			// 每调用一次 exec 方法就会查找下一个字符串, 直到最后找不到 返回 null
			while ( ( m = r.exec( s ) ) != null ) {
				arr.push( m.index );
			}
			
			// 练习, 在字符串 abcabcabc 中找出所有的 bc 的位置
			
			
			// 错误的  因为不是同一个正则表达式对象 会造成死循环 
//			while ( ( m = (new RegExp( "e", "g" )).exec( s ) ) != null ) {
//				arr.push( m.index );
//			}
		</script>


练习：
<script type="text/javascript">
			// 练习, 在字符串 abcabcabc 中找出所有的 bc 的位置
			//         0123456789
			var str = "abcabcabc";   // 1 4 7
			var r = new RegExp( "bc", "g" );
			var m;
			var arr = [];
			while ( m = r.exec( str ) ) {
				arr.push( m.index );
			}
			alert( arr );
			
			
			// 正则表达式的字面量写在一对 双斜线中
			/bc/		new RegExp( "bc" )
			/bc/g		new RegExp( "bc", "g" )
		</script>

组匹配：
		<script type="text/javascript">
			
			// 利用正则表达式匹配提取的结果是一个数字类型的对象
			// 其中 第 0 项 就是匹配的结果
			// 第 1 项 或 第 n 项是什么呢?
			
			// 在完成一次匹配的时候, 可以捕获匹配到的字符串内部的结构
			// var str = "jim@itcast.cn, tom@126.com, jack@163.com";
			/*
			// [^,]+ 
			var r = /[^,]+/g;
			var m, arr = [];
			while ( m = r.exec( str ) ) {
				arr.push( m[ 0 ] );
			}
			*/
			
			// 但是有些时候我们希望可以对匹配到的结果进行解析
			// 传统分析邮箱的步骤
			// 1> 获取邮箱的全名( 传统, 正则 )
			// 2> 循环解析
			/*
			for ( i -> n ) {  伪代码
				var temp = v.split( '@' )
				arr.push( { name: temp[0], location: temp[1] } )
			}
			*/
			// 3> 存储
			
			// 正则表达式在匹配的过程中就可以给你解析完成 元字符
			// .	任意除了换行以外的任意字符
			// ()	分组 一次匹配当中 一部分内容
			// +	代表紧挨的字符或字符组出现 1 次到多次 ( 默认匹配最多 )
			// ?	1> 0次或1次, 2> 放在次数限定元字符后表示尽可能少匹配
			// .+@.+  	 最左边的.+ 代表匹配最多 jim@itcast.cn, tom@126.com, jack
			//			 最右边的.+代表匹配最少  163.com
			// + 默认匹配最多 123@12@34@ 如果是.+@ 这个默认匹配的是最后一个@
			var str = "jim@itcast.cn, tom@126.com, jack@163.com";
			
			//var r = /.+@.+/; 之后m[0]会打出全部的字符  不知道 @前后是哪个
			m: Array[1]
				0:"jim@itcast.cn, tom@126.com, jack@163.com"
				index:0
				input:"jim@itcast.cn, tom@126.com, jack@163.com"
				length:1

			//var r = /(.+)@(.+)/; 分组
			0:"jim@itcast.cn, tom@126.com, jack@163.com"
			1:"jim@itcast.cn, tom@126.com, jack"  把@前面的全部找出来了
			2:"163.com"							  只把最少的@后面的找出来了				
			index:0
			input:"jim@itcast.cn, tom@126.com, jack@163.com"
			length:3			
			

			//var r = /(.+?)@(.+)/; 分组

			0:"jim@itcast.cn, tom@126.com, jack@163.com"
			1:"jim"  (.+?) 前面这尽可能少的匹配  分组
			2:"itcast.cn, tom@126.com, jack@163.com" 后面(.+) 尽可能多的匹配 分组
			index:0
			input:"jim@itcast.cn, tom@126.com, jack@163.com"
			length:3


			var r = /(.+?)@(.+?)/; 分组
			0:"jim@i"
			1:"jim"	(.+?)  
			2:"i"   (.+?) 尽量少匹配
			index:0
			input:"jim@itcast.cn, tom@126.com, jack@163.com"
			length:3



			var m = r.exec( str );
			
			// 术语
			// 范围匹配在正则中都是默认的贪婪模式
			// 添加 ? 表示取消贪婪模式 
			
			
			// 分组的技巧
			// 允许在正则表达式中使用 多个圆括号对结果分组, 分组后匹配到的结果可以直接获取对应的部分
			// 但是复杂分组难以分析, 有一个技巧
			// 1, 从左往右数 (
			// 2, 从 1 开始给 ( 编号
			// 那么匹配的结果 对应的 下标就是该圆括号分的的内容
			
			// 练习: "(a(b(c)))" 分别给出每一组的序号
			
		</script>

分组：
<script>
			// 1, 从左往右数 (
			// 2, 从 1 开始给 ( 编号

			// 练习: "(a(b(c)))" 分别给出每一组的序号
			
			//       1 2 3
//			var r = /(a(b(c)))/;
//			
//			var m = r.exec( "abc" );
			0:"abc"  -   0 代表匹配到的内容
			1:"abc"
			2:"bc"
			3:"c"
			index:0
			input:"abc"
			length:4
			
			// 练习: "a((b)(c)d)"
			// 1: bcd
			// 2: b
			// 3: c
			
			
			// 补充: 如果希望分组不捕获
			// 在分组的圆括号前面里面的前面加上 ?:
			
			//		 1     2
			var r = /(a(?:b(c)))/;
			
			var m = r.exec( "abc" );

元字符：
<script type="text/javascript">
			
			// 元字符 []
			// 含义:
			// 1, 匹配一个出现在 [] 中的字符   
			//		[abc] 匹配a 或者 b 或者 c
			/*      代表的是只匹配一个字符
			var r = /[abc]/g;
			var m = r.exec( "abcdefg" ); a
				m = r.exec( "abcdefg" ); b
				m = r.exec( "abcdefg" ); c
			*/
			
			/*
			var r = /[bac]+/;
			var m = r.exec( "abcdefg" );  --->abc   连着出现abc任意一个就可以

			var r = /([bac])+/;
			var m = r.exec( "abcdefg" );  --- c 括号里面匹配的是最后一组
										先匹配a - b - c 最后c 得到的是最后一个

			var r = /(?:[bac])+/;
			var m = r.exec( "abcdefg" );  --- abc 不捕获abc了


			var r = /([bac]+)/;
			var m = r.exec( "abcdefg" );  --- abc

			*/
			
			// 1.1 使用 [] 表示多个字符常常写成
			// [a-z]
			// [A-Z]
			// [0-9]
			// [小编码-大编码]
			// 
			
			// 2, 匹配否定含义
			// [^abc] 匹配一个不是 a 并且 b 并且 c 的一个字符
			
</script>

获取邮箱数据：
<script>
			
			var str = "jim@itcast.cn   ,   tom@126.com   ,      jack@163.com";
			// 将用户的名字 与 邮箱的域名都截取出来
			// 1, 最传统而简单的做法
			var arr1 = str.split(', ');
			var arr2 = [];
			for ( var i in arr1 ) {
				var temp = arr1[ i ].split( '@' );
				arr2.push( { user: temp[ 0 ], loc: temp[ 1 ] } );
			}
			
			
			// 2, 正则的处理办法
			var arr3 = [];
			var r = /([a-zA-Z0-9]+)@([\.a-zA-Z0-9]+)/g;
			var m;
			while ( m = r.exec( str ) ) {
				arr3.push( { user: m[ 1 ], loc: m[ 2 ] } );
			}

转义字符：
<script>
			
			// 
			// 在 正则中有很多的元字符, 如果要匹配元字符的时候需要使用转义字符
			// \[ \]
			// \(\)
			// \.
			// \\
			// \/  因为这个/代表 转移字符的斜线
			
			// 一个反斜线字符用字符串如何表示?
			// "ab\"c"
			// "ab\\c"
			
			// 如果要表示 C:\windows\123.txt
			// var path = "c:\\windows\\123.txt";
			
			// alert( path );
			
			// 在正则表达式中表示斜线转义
			// 1>
			var r1 = /\./;
			// 2>
			var r2 = new RegExp( "\\." );
		</script>



以下两种方式不会报错： 因为有括号  所以是表达式
他会返回最后一个表达式的值
    var a = (1, 2, 4,alert);
    a(7777);
    console.log(a); 打印出来的是777 

    var a = (1, 2, 4);
    console.log(a); 打印出来的是4


var fn = function () {
	this.name = "jk";
	return {
		age:12
	}
}

var p = new fn();   p返回的是{} 里面没有name属性
所以结果就是undefined
console.log(p.name); 
 





<<!DOCTYPE html>
<html>
<head>
	<title>AA</title>
<style type="text/css">
	div {
		width: 500px;
		height: 50px;
		margin: 10px 0;
		border: 1px solid red;
	}
</style>
<script type="text/javascript">
	var get = function(str) {
		if(typeof str !== 'string') 
			throw new Error('error');
		var r1 = /#(.+)/;
		var r2 = /\.(.+)/;		
		var m;
		if(m = r1.exec(str)) {

			return [document.getElementById(m[1])]; 特别注意这里是[] 因为他返回的是数组 需要转换为数组
		} else if(m = r2.exec(str)) {
			return document.getElementsByClassName(m[1]);
		} else {
			return document.getElementsByTagName(str);
		}
	}

</script>		
</head>
<body>
<div class="c"></div>
<div id="dv"></div>
<div class="c"></div>
<div class="c"></div>	
</body>
<script type="text/javascript">
	var list = get('#dv') 

	for(var i = 0; i < list.length; i++) {
			list[ i ].style.backgroundColor = 'yellow';
	}
</script>
</html>

// 在正则中有一个运算符 | 表示或者的含义
			// 注意: 优先级最低
			
			var r1 = /a|b/; // 等价于 [ab]
			var r2 = /abcdefg|hijklmn/;
			
			// 案例
			// 我想查找一个单词, 叫 foo t? d?
			var r3 = /foo(?:t|d)/;
			//			   1				   2	
			var r4 = /^#([a-zA-Z0-9\-_]+)|\.([a-zA-Z0-9\-_]+)$/; 里面有^ | $ ,在这里竖线的优先级最低 
																	意思是严格匹配id开头的 或者严格匹配类结尾的字符串
			所以我们可以加上括号 并且取消了捕获
							1                  2
 			var r4 = /^(?:#([a-zA-Z0-9\-_]+)|\.([a-zA-Z0-9\-_]+))$/;

用的最多的是 . + | ^ $ ()

简写形式的元字符：
			// 
			// \w	文字		\W	代表的是非文字		word 文字		默认表示英文和下划线
			// \d	数字		\D	代表的是非数字		digit 数字
			// \s	空白		\S	代表的是非空白		spcae 空白
			
			. 代表除了换行符以外的任何字符
			// 有些开发者使用 [\s\S] 表示增强的 .  ---> [\s\S] 代表任意的一个字符
			
			
			var get = function ( str ) {
				
				// 		      1                   2                 3
				var r = /^(?:#([\w\-]+)|\.([\w\-]+)|([\w\-]+))$/;
//				var r = /^(?:#([\w-]+)|\.([\w-]+)|([\w-]+)|(\*)+)$/;
				var m = r.exec( str );
				
				if ( m[ 1 ]  ) {
					return [ document.getElementById( m[ 1 ] ) ];
				} else if ( m[ 2 ] ) {
					return document.getElementsByClassName( m[ 2 ] );
				} else if ( m[ 3 ] ){
					return document.getElementsByTagName( m[ 3 ] );
				}
				
			};

// 分组
// 1> 基本元字符
// .	[]	()	|    
. 代表任意的非 换行字符
[] 
() 代表分组 和 提高优先级 ， 如果仅仅是为了提高优先级 不捕获的话 ， 需要使用(?:) 取消捕获
|  代表二者中的一个 

// 2> 限定元字符
// +		前面紧跟的字符或组至少 1 个			{1,}
// *		前面紧跟的字符或组至少 0 个			{0,}
// ?		前面紧跟的字符或组出现0次或1次; 如果跟在其他限定符后面表示取消贪婪模式
// 			{0,1}
// {n}		前面紧跟的字符或组 n 个
// {n,}		前面紧跟的字符或组至少 n 个
// {n,m}	前面紧跟的字符或组 n 到 m 个

// 3> 首尾元字符
//	^			hat   字符串里表示以什么什么开头 方括号里面表示以什么开头 
//	$			字符串以什么结尾 引导符 

// 4> 简写元字符
// \w	\W
// \s	\S
// \d	\D


正则替换：
<script>
			var str = "#dv,       .c1         .c2,     div    ";
			// 将空格去掉
			
			
			var firstSpace = function ( str ) {
				 var i;
				 for ( i = 0; i < str.length; i++ ) {
				 	if ( str.charAt( i ) !== ' ' ) {
				 		return i;
				 	}
				 }
				 return -1;
			};
			var lastSpace = function ( str ) {
				var i;
				 for ( i = str.length - 1; i >= 0; i-- ) {
				 	if ( str.charAt( i ) !== ' ' ) {
				 		return i;
				 	}
				 }
				 return -1;
			};
			
			var trim = function ( str ) {
				// 思路: 找到第一个非空格, 和最后一个非空格
				// 注意不允许为 -1
				return str.slice( firstSpace( str ), lastSpace( str ) + 1 );
			};
			
			var temps = str.split( ',' );
			for	( var i = 0; i < temps.length; i++ ) {
				// 说白了将两边的空格去掉, 中间的空格变成一个空格
				temps[ i ] = trim( temps[ i ] );
			}
			
			alert("|" + temps.join("|")  +"|");
		</script>

方法：		
		<script>
			var str = "#dv,       .c1         .c2,     div    ";
			
			
			// replace( str, str );
			// replace( regexp, str ); 只要是这个正则表达式匹配到的  就用这个str替换
			
			// trim
			var trim = function ( str ) {
				return str.replace( /^\s+|\s+$/g, "" );
			};
			
			// var s = "             123           ";
			// alert( "|" + trim( s ) + "|" );
			
			// 将所有的中间的空格替换成一个单个的空格
			str = trim( str ).replace( /\s+/g, " " ).replace( /,\s+/g, "," );
			alert( "|" + str + "|" );
			
		</script>


正则替换 组引用
		<script type="text/javascript">
		
			var s = '今天是 1991-1-2, 天气很好. 明天是 2001-3-4, 天气怎样';
			
			// 1/2/1991
			// 1991年1月2日	
			// 2/1/1991
							1      2      3         1 2 3 代表捕获到的组 去对应的位置去找		
													$ 加上数字 组合表示 取前面组合里面的对应部分
			s = s.replace( /(\d+)\-(\d+)\-(\d+)/g, "$1年$2月$3日" );
			
			// s = s.replace( /(\d+)\-(\d+)\-(\d+)/g, "$2/$3/$1" );
			
			alert( s );
			
			// 
			// var s = '今天是 1991-1-2 1:1:1, 天气很好. 明天是 2001-3-4, 天气怎样';
		</script>


练习：
		<script type="text/javascript">
			// alert( new Date );
		
			/g 表示匹配全局 匹配完这一个 继续匹配后面的 全部找完
			// 
			// var s = '今天是 1991-1-2 1:1:1, 天气很好. 明天是 2001-3-4 12:13:14, 天气怎样';
			
			//       1      2       3     4      5     6
			// var r = /(\d+)\-(\d+)\-(\d+)\s(\d+):(\d+):(\d+)/g
			
			// s = s.replace( r, "$1年$2月$3日 $4时$5分$6秒");
			
			
			
			// alert( s );
			
			
			// 返回的是字符串
			// format:
			// 	yyyy-MM-dd		显示的是 1990-1-1
			//  yy-MM-dd		显示 90-1-1
			//  hh:mm:ss		显示 12:11:10
			//  ...
			//  yyyy年MM月dd日 hh时mm分ss秒
			// y	年
			// M	月
			// d	日
			// h	小时
			// m	分
			// s	秒
			var formatdate = function ( date, format ) {
				// yyyy
				var y = date.getFullYear();
				return format.replace( /y{4}/g, y + '' );
			}; 
			
			
			alert( formatdate( new Date(), '今天是 yyyy年MM月dd日, 天气真好, 到处柳絮飘!' ) );
		</script>



框架设计:
// 思路 
// 1> 选择引擎(*****)   ----> 怎么把元素取出来
// 2> dom操作模块(增删) 
// 3> 事件模块 click, on, ...  on代表一个总得方法 click 类似一个快捷方法
// 4> 属性模块 attr, text, html, val, ... 
// 5> 样式模块 css, hasClass, ...
// 6> 动画模块(****)
// 7> 整合

JQ能力检测：
		<script>
			// document.getElementsByClassName = 123;
		
		
			var support = {};
			
			// support.getElementsByClassName = !!document.getElementsByClassName;
			// 在 jq 中不仅判断他是否存在, 还要判断其能力是否符合要求
			
			support.getElementsByClassName = (function () {
				
				var isExist = !!document.getElementsByClassName;
				
				if ( isExist && typeof document.getElementsByClassName == 'function' ) {
					// 自己创建一些元素, 并且加上 class 属性, 看是否可以获得到加上的所有元素
					var div = document.createElement( 'div' ),
						divWithClass = document.createElement( 'div' );
					
					divWithClass.className = 'c';
					div.appendChild( divWithClass );
					return div.getElementsByClassName( 'c' )[ 0 ] === divWithClass;
				
				}
				
				return false;
			})();
			
			
			if ( support.getElementsByClassName ) {
				// return node.getElementsByClassName( className );
				alert( '支持 class' );
			} else {
				// 自己实现( className );
				alert( '不支持 class' );
			}
			
		</script>



正则表达式疑问：
			// var str = "12345";
			// \d  
			/* 代表通过正则表达式 返回匹配成功的结果
			// \d 这个正则表达式代表 一个数字 匹配的话首先
				匹配到的是数字1	 返回的是把这个1 包装以后的对象
				所以这个数组里的第0项就是1
			m: Array[1]
			0:"1"
			index:0
			input:"12345"
			length:1				
			var m = /\d/.exec( str );

			m = /\d/.exec( str ); 再次执行===-> 匹配结果还是1

			var m = /\d/g.exec(str);	
			m = /\d/g.exec(str);  exec每次在处理的时候 每次只处理一个
			加上全局的/g 匹配结果还是1  因为他们用的是两个不同的正则表达式对象 所以总是从第一个
			开始查找 这里使用的是正则表达的字面量方式
			类似于 console.log( {} == {} ) 返回的就是false


如果 要把里面的数字都匹配出来---
			// var r = /\d/g; 使用同一个正则表达式 多次调用就可以
			
			
			// 如果使用 exec 将一个字符串中所有符合要求的内容找出来
			// 应该如何处理???
			
			// 1> 正则对象需要是一个
			// 2> 全局匹配
			// 3> 多次 exec 即可 直到返回为空为止
			
			
			
			// replace
			var s = '123';
			
			var str = s.replace( /\d/g, 'a' );  全局匹配 找见就替换
												 有/g 替换所有匹配结果
			
			console.log( str ); aaa
			var str = s.replace( /\d+/, 'a' ); 返回的是a 代表匹配连续的很多的数字

实现ByclassName的方法：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div {
				width: 400px;
				height: 50px;
				margin: 10px 0;
			}
			.c {
				border: 1px solid red;
			}
			.c1 { border: 1px solid green; }
			.c2 { border: 1px solid blue; }
		</style>
		<script type="text/javascript">
			
			//为了解决浏览器兼容问题
			//我们有一个处理原则就是
			//类似Object.create() 
			//为了实现浏览器的兼容 我们有两种处理方法
			//1. 在原生对象里面给他加这个成员 
			//2. 提供方法  在方法里添加判断的操作 --可以避免污染原生对象
			var getClass = function ( className, results ) {
				results = results || [];
				
				var tempArr, i;
				
				// 首先判断系统所提供的方法是否可以实现该功能 这里可以用我们前面写的那个support方法
				if ( document.getElementsByClassName ) {
					// 系统可以实现
					results.push.apply( results, document.getElementsByClassName( className ) );
				} else {
					// 自定义实现
					// 思路: 首先获得所有元素, 然后在元素中搜索符合要求的, 再加入到数组中
					tempArr = document.getElementsByTagName( '*' );
					// for 循环, 判断是否符合要求
					for ( i = 0; i < tempArr.length; i++ ) {
						//一种是处理多种样式的情况 class="c1 c3 c2" 	
						// tempArr[ i ].className === className	// 多个样式

						// tempArr[ i ].className.indexOf( className ) != -1  // 例如查找 ' c ' 类样式
																			// 这个是肯定是可以找见c的
																			//但是是不正确的 所以可以在c
																			//两端加空格但是如果 
																			//class="c c1 c2" 这样的话第一个查找还是失败的
																			//所以在找的字符串和被找的字符串两端都加空格
						//所以下面这是一个很牛逼的写法
						// 需要考虑一下兼容: className 或 getAttribute
//						if ( ( ' ' + tempArr[ i ].className + ' ' )
//									.indexOf( ' ' + className + ' ' ) != -1 ) {
//							results.push( tempArr[ i ] );
//						}



						// 使用传统的处理方法
						// tempArr[ i ] 就是 一个元素, 判断该元素的 className 中是否包含 传入的参数
						// className
						
						// 比如元素 <div class="c1 c2 c3"></div>
						// "c"
						// 注意 className 属性需要验证非空
						var list = tempArr[ i ].className.split( ' ' );
						for ( var j = 0; j < list.length; j++ ) {
							if ( list[ j ] === className ) {
								results.push( tempArr[ i ] );
								break;
							}
						}

					}
				}
				return results;
			};
			
			
		</script>
	</head>
	<body>
		<div class="c1"></div>
		<div class="c2"></div>
		<div class="c"></div>
		<div class="c1"></div>
	</body>
	<script>
		var list = getClass( 'c2' );
		// list[ 0 ].style.backgroundColor = 'yellow';
		for ( var k in list ) {
			list[ k ].style.backgroundColor = 'pink';
		}
	</script>
</html>
 

以下代码会报错 因为IE8不支持伪数组
results.push.apply( results, document.getElementsByTagName( tag ) );

以下是我们JQ里面的源代码：
// Optimize for push.apply( _, NodeList )
try {
	push.apply(
	//这也就是在做能力检测
	//childNodes 是一个dom对象 这里一个伪数组， call操作 这里伪数组转为了真数组
		(arr = slice.call( preferredDoc.childNodes )),
		preferredDoc.childNodes
	);
	// Support: Android<4.0
	// Detect silently failing push.apply
	arr[ preferredDoc.childNodes.length ].nodeType;
} catch ( e ) {

	push = { apply: arr.length ?

		// Leverage slice if possible
		function( target, els ) {
			push_native.apply( target, slice.call(els) );
		} :

		// Support: IE<9
		// Otherwise append directly
		function( target, els ) {
			var j = target.length,
				i = 0;
			// Can't trust NodeList.length
			while ( (target[j++] = els[i++]) ) {} 这是一个空循环 里面是一个赋值操作
			target.length = j - 1;
		}
	};
}



解决IE的push 兼容性：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			div, p {
				width: 100px; height:30px; border:1px solid red; margin: 10px 0;
			}
		</style>
		<script>
			var myPush = function( target, els ) {
				var j = target.length,
					i = 0;
				// Can't trust NodeList.length
				while ( (target[j++] = els[i++]) ) {}
				target.length = j - 1;
			};
			
		</script>
	</head>
	<body>
		<div></div>
		<div></div>
		<p></p>
		<p></p>
	</body>
	<script>
		
		
		

		// 如果利用 get 方法获得多个元素的话, 就会得到多个数组
		// 为了简化开发, 可以考虑将其合并到一个数组中
		// 调用多次 get 方法, 如果想要多个数组就可以使用多个数组
		// 想要一个数组, 就得到一个数组
		//缺点--- 这里try catch的性能会有损失 出一次错误报一次错误
		//JQ是把这个try放到外面 以后再调用getTag的时候 直接调用push方法即可
		以下是优化Push方法的思路:
		// 伪代码  把try放在外面， 以后使用getTag方法的时候 直接使用push方法就可以了
		这里的push就是一个方法
		var push = [].push;  要么用的是原来的可用的方法 要么用的是自己提供的方法这里的错误只会出现一次
		后面用的时候直接用我们自己定义的push方法就可以了，不需要做其余的判断了
		try {
			push 可用
		} catch ( e ) {
			push = {...};
		}

		var getTag = function ( tag, results ) {
			results = results || [];
			push.apply( results, document.getElementsByTagName( tag ) );
			return results;
		};
		这样不会每次都会出现错误了， 而是在框架加载的时候出现一次错误



		//这里的try写在里面 IE只要调用一次这个方法就会出一次错误 出一次错误捕获一次
		//这样写的话 try catch的性能会有所损耗 
		var getTag = function ( tag, results ) {
			results = results || [];
			try {
				results.push.apply( results, document.getElementsByTagName( tag ) );
			} catch ( e ) {
				myPush( results, document.getElementsByTagName( tag ) );
			}
			
			return results;
		};
		
		var each = function ( arr, fn ) {
			for ( var i = 0; i < arr.length; i++ ) {
				if ( fn.call( arr[ i ], i, arr[ i ] ) === false ) {
					break;
				}
			}
		};
		
		/*
		var list1 = getTag( 'div' );
		var list2 = getTag( 'p' );
		
		each( list1, function () {
			this.style.backgroundColor = 'orange';
		});
		each( list2, function () {
			this.style.backgroundColor = 'orange';
		});		
		*/
		
		
		each( getTag( 'p', getTag( 'div' ) ), function () {
			this.style.backgroundColor = 'red';
		});
		
		
		
		
		
	</script>
</html>


整合封装JS函数 --- common.js
 选择器的另一个问题：
 <!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.rect {
				width: 400px;
				height: 50px;
				margin: 10px 0;
			}
			.c {
				border: 1px solid red;
			}
			.c1 { border: 1px solid green; }
			.c2 { border: 1px solid blue; }
		</style>
		<script type="text/javascript">
			// get( '选择器', 父元素 )

			// 如果要实现这个功能, 那么应该先做什么?
			// 1, 首先假定 父元素就是 dom 对象
			// 首先应该考虑修改查找元素的三个 get 方法, 然后再修改通用的 get 方法
			
			// 2, 假定它是一个 dom 数组
			
		</script>
		<script src="common.js"></script>
	</head>
	<body>
		<div class="c3">
			<div class="c1 rect"></div>
			<div class="c2 rect"></div>
			<div class="c rect"></div>
			<div class="c1 rect"></div>
		</div>
		<hr />
		<div>
			<div class="c1 rect"></div>
			<div class="c2 rect"></div>
			<div class="c rect"></div>
			<div class="c1 rect"></div>
		</div>
	</body>
	<script type="text/javascript">
		// get( '.c3' )[ 0 ].style.border = '1px solid red';
		get( '.c', get( '.c3' )[ 0 ] )[ 0 ]
			.style.backgroundColor = 'pink';
		
	</script>
</html>



伪代码分析选择器框架实现：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.rect {
				width: 400px;
				height: 50px;
				margin: 10px 0;
			}
			.c {
				border: 1px solid red;
			}
			.c1 { border: 1px solid green; }
			.c2 { border: 1px solid blue; }
		</style>
		<script src="common.js"></script>
		<script type="text/javascript">
			// 要实现的功能
			// 1, 传入一个基本选择器( id, class, tag, * ), 获得元素数组( rquickExpr )
			// 因为id选择出来的是单个元素 class tag 选择出来的可能是多个元素 是数组
			//所以使用一个通用方法 将获得的元素转为数组来使用  首先判断有没有逗号 因为逗号优先级最低
			// 2, 传入一个组合选择器, 将结果数组返回
			//		多次调用基本选择器函数, 在将结果合并
			//		result.push.apply( result, get( ... ) );
			//      result = get( ..., results );
			// 3, 传入有一个 后代元素选择器, 返回符合要求的结果
			//		得到前面的选择结果, 在使用后面的选择器过滤
			//		'.dv .c'
			//      '#dv>.c' 
			//		'#dv+p'  相邻的P找出来
			//			
			//    getSub( selector, context )
			//    getPrivious
			//	  getNext
			//    ...
			
			
			
			// 要实现的代码 可以实现以下形式 实现这些功能 从简到繁
//			var list1 = select( '#dv' );
//			var list2 = select( '.dv' );
//			var list3 = select( 'div' );
//			var list4 = select( '#dv, .c, p' );
//			var list5 = select( '#dv .c, p .c, div' );
			
			// 最简单的做法
			// 我们已经知道里面可以有组合, 可能有后代, 但是最终是转换成基本
			var select = function ( selector ) {
				var selectors = selector.split( ',' );
				var results = [];
				for ( var i = 0; i < selectors.length; i++ ) {
					var singleSelector = selectors[ i ];   // 可能包含后代的
					
					var subSelectors = singleSelector.split( ' ' );
					// 在 subSelectors[ j ] 中找后代元素
					// subSelectors 是 '.dv .c'
					var res;
					for ( var j = 0; j < subSelectors.length; j++ ) {
						var s = subSelectors[ j ];
						// 首先在 全部标签中找 s, 然后在结果中找 s
						res = get( s, res );
					}
					
					results.push.apply( results, res );
				}
				return results;
			};
			
		</script>
	</head>
	<body>
		<div class="c3">
			<div class="c1 rect">
				<div class="c" style="border: 1px dashed green;">123</div>
			</div>
			<div class="c2 rect"></div>
			<div class="c rect"></div>
			<div class="c1 rect"></div>
		</div>
		<hr />
		<div>
			<div class="c rect"></div>
			<div class="c1 rect"></div>
		</div>
		<hr />
		<div class="c3">
			<div class="c rect"></div>
		</div>
	</body>
	<script>
		var list = select( '.c3 .c,.c1' );
		
		// list = select( '.c3' );
		// list = select( '.c', list );
		// list = select( '.c1', null, list );
		
		for ( var i = 0; i < list.length; i++ ) {
			list[ i ].style.backgroundColor = 'pink';
		}
	</script>
</html>



选择器引擎总结：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			// var i = 123;
			// i.test = 456;
			// console.log( i.test );
			// console.log( i.toString() );
			
			/*
			console.log( typeof 123 );
			console.log( typeof new Number(123) );
			
			console.log( 123 );
			console.log( new Number(123) );
			*/
			
			
			
			
		</script>
	</head>
	<body>
		1, 一开始我们写了一个
			getId( 'id' )
			getTag( 'tag' )
			getClass( 'class' )
		2, 在操作 dom 元素的时候, 可能需要获得多个元素, 做一个相同的操作
			getId( 'id', results )
			getTag( 'tag', results )
			getClass( 'class', results )
		3, 循环使用的非常频繁
			为了减少重复的的代码, 也为了避免遍历使用的变量 i 的局部特性
			each( 数组, function ( k, v ) {    } );
			
			fn.call( arr[ i ], i, arr[ i ] );  

			如果使用 call 和 apply 调用, 第一个参数一定要是对象 或 null
			如果参数是基本类型( number, boolean, string ), 那么会
			自动的转换为其包装类型( Number, Boolean, String )
		
		4, 封装 get 函数
			get( 'selector', results )
		
		5, 要求在上下文中完成筛选
			select( 'selector', context, results )
		
		6, 为了解决浏览器的兼容
			移除左右空格 myTrim
			IE 低版本的 myPush
			能力检测( 2 种 )   一种是我们判断这种方法存不存在就完事了
							   另一种就是判断有没有以外 还要判断你的功能能不能操作 使用 support. 减少原型链的搜索
	</body>
</html>


能力检测如下：
var support = {};
			
			// support.getElementsByClassName = !!document.getElementsByClassName;
			// 在 jq 中不仅判断他是否存在, 还要判断其能力是否符合要求
			
			support.getElementsByClassName = (function () {
				
				var isExist = !!document.getElementsByClassName;
				
				if ( isExist && typeof document.getElementsByClassName == 'function' ) {
					// 自己创建一些元素, 并且加上 class 属性, 看是否可以获得到加上的所有元素
					var div = document.createElement( 'div' ),
						divWithClass = document.createElement( 'div' );
					
					divWithClass.className = 'c';
					div.appendChild( divWithClass );
					return div.getElementsByClassName( 'c' )[ 0 ] === divWithClass;
				
				}
				
				return false;
			})();
			
			
			if ( support.getElementsByClassName ) {
				// return node.getElementsByClassName( className );
				alert( '支持 class' );
			} else {
				// 自己实现( className );
				alert( '不支持 class' );
			}


push函数的疑问： IE不支持push的功能 所以在这里我们自己实现一下
<script>
			
			// push
			// push.apply 的形式进行调用
			// 功能 push.apply( 伪数组1, 伪数组2 );
			var push = {
				//			   [ 1, 2 ]  [ 3, 4, 5]
				apply: function ( arr1, arr2 ) {
					// 将 arr2 里面的每一个元素都一个个加到 arr1 中
					
					// 如果 arr1 是真数组
					/*
					for ( var i = 0; i < arr2.length; i++ ) {
						arr1.push( arr2[ i ] );
						arr1[ arr1.length++ ] = arr2[ i ];
					}
					*/
					//伪数组的length是不变的
					var l = arr1.length;
					for ( var i = 0; i < arr2.length; i++ ) {
						arr1[ l + i ] = arr2[ i ];
					}
					// 如果 arr1 是真数组, 没有问题, 如果是伪数组, 那么 length
					// 不会自动增加, 所以, 需要手动的赋值
					arr1.length = l + i;
					
					
					// jq 中使用的是 while
					var l = arr1.length;
					var i = 0;
					while( arr1[ l++ ] = arr2[ i++ ] ) ;   //当访问不到的时候 就会跳出
					arr1.length = l - 1;
				}
			};
			
			
		</script>


DOM操作的属性与方法：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!-- 标签 -->
		<script>
			// DOM 元素的属性与方法
			// 1, 为什么使用 DOM?
			// <div><p><span/></p></div>
			// node : { children: [ p:{ children:[ span: {} ] } ] }
			
			
			// 2, DOM 将 HTML 页面中所有的元素都看做成一个对象树
			
			// 3, 属性
			// 	nodeType	用来描述 DOM 对象的类型: 1 元素 2 属性 3 文本
			//  nodeValue	用来获得该 DOM 对象的值: 只用在 文本 标签中
			//  nodeName	用来获得 DOM 对象的标签名: 值用在元素标签上
			//				如果是标签, 返回的是全大写的名字字符串
			
			// 关系
			//	子元素关系
			//	firstChild
			//  lastChild
			//  childNodes
			
			// 兄弟关系
			//  nextSibling
			//  previousSibling
			
			// 父元素
			//  parentNode
			
			// 内容属性
			// innerHTML  
			// innerText 
			
			
			// 方法
			// 增删改查
			// appendChild
			// insertBefore
			// removeChild
			// innerHTML
			
			// 事件
			// on...
		</script>
	</head>
	<body>
		<p align="center">你好<span>吗</span>?</p> 
			p一共有三个子元素 你好--文本元素 span-- 标签元素 ？--文本元素 
	</body> body有三个子元素 两个空白 一个p IE8/9 忽略了这些空格
	<script>
		var p = document.getElementsByTagName( 'p' )[ 0 ];
		/*
		// console.log( p.firstChild.nodeValue );
		console.log( p.nodeType );
		console.log( p.firstChild.nodeType );
		
		var node = p.getAttributeNode( 'align' );  // 属性节点
		console.log( node );
		console.log( node.nodeType );
		console.log( node.nodeValue );
		
		p.removeAttributeNode(node);
		*/
		
		// console.log( p.firstChild.nodeName ); #text
		//console.log(p.nodeName)  P
		// console.log( p.childNodes[ 1 ].nodeName.toLocaleLowerCase() );
		
		/*
		console.log( document.body.childNodelengths. );
		for ( var k in document.body.childNodes ) {
			console.log( document.body.childNodes[ k ] );
		}
		*/
		
	</script>
</html>


push的完善：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			div, p {
				width: 400px; height: 50px; margin: 10px 0; padding: 0; border: 1px dashed red;
			} 
		</style>
		<script type="text/javascript">
			
			var push = [].push;
			
			try {
		 		var c = document.createElement( 'div' );
		 		c.appendChild( document.createElement( 'div' ) );
		 		var list = c.getElementsByTagName( '*' );
		 		push.apply([], list);
				
			} catch(e) {
				push = {
					apply: function(target, eles) {
						var j = target.length,
							i = 0;
						while ( target[j++] = eles[i++] );
						target.length = j-1;
					}
				};
			} finally {
				c = list = null;
			}
			
		</script>
	</head>
	<body>
		<div>div</div>
		<div>div</div>
		<div>div</div>
		<p>p</p>
		<p>p</p>
	</body>
	<script>
		var tag = function ( tag, results ) {
			results = results || [];
			push.apply( results, document.getElementsByTagName( tag ) );
			return results;
		}
		
		var list = tag( 'div' );
		list = tag( 'p', list );
		
		for ( var i= 0; i < list.length; i++) {
			list[ i ].style.backgroundColor = 'yellow';
		}
	</script>
</html>




DOM 设置属性
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.c {
				border: 1px solid red;
				width: 400px;
				height: 150px;
			}
		</style>
		<script type="text/javascript">
			
			// 2, 在页面中创建 3 个 div, 要求 设置其边框与颜色以及大小
			// 1> 直接设置 style 属性
			// 2> 使用 类样式
			// -> setAttribute
			// -> .语法
			
//			onload = function () {
//				var i, node;
//				for ( i = 0; i < 3; i++ ) {
//					node = document.createElement( 'div' );
//					// node.setAttribute( 'class', 'c' );
//					node.className = 'c';
//					document.body.appendChild( node );
//				}
//			};
			
			
			// 1, 方法比较多, 练习的过程的中每一个做法都要熟练
			// 2, 由于每次循环都使用 document.body.appenChild 因此
			//		会导致每次 for 都要刷新页面结构. 应该采用一个临时的数据
			//		存储这些 dom 对象, 在 全部创建完成以后, 再一并加入
					
					
			// 只有创建一个 节点标签, 才可以不影响 整个页面布局, 同时允许存储其他标签
//			onload = function () {
//				var i, node, container = document.createElement( 'div' );
//				for ( i = 0; i < 3; i++ ) {
//					node = document.createElement( 'div' );
//					// node.setAttribute( 'class', 'c' );
//					node.className = 'c';
//					container.appendChild( node );
//				}
//				document.body.appendChild( container );
//			};

			// 用于缓存文档片段的 DOM 对象 DocumentFragment
			onload = function () {
				var i, node, 
					container = document.createDocumentFragment();
					
				for ( i = 0; i < 3; i++ ) {
					node = document.createElement( 'div' );
					// node.setAttribute( 'class', 'c' );
					node.className = 'c';
					container.appendChild( node );
				}
				document.body.appendChild( container );
			};
		</script>
	</head>
	<body>
	</body>
</html>

或者使用下面的innerHTML：
	<script type="text/javascript">
		onload = function () {
			var i,s = '';
			for (var i = 0; i < 10; i++) {
				s += '<div>' + i + '</div>';
			}
			document.body.innerHTML = s;
		}
	</script>

性能分析：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			
			// 在页面中添加 1000 个div
			
			var count = 50000;
			
			var test1 = function () {
				var start = +new Date(),
					i, end, node, docfrag;
				
				docfrag = document.createDocumentFragment();
				for ( i = 0; i < count; i++ ) {
					node = document.createElement( 'div' );
					docfrag.appendChild( node );
				}
				document.body.appendChild( docfrag );
				
				end = +new Date();
				
				console.log( 'test1 = ' + ( end - start ) );
			};
			
			
			var test2 = function () {
				var start = +new Date(),
					i, end, s;
				
				s = '';
				for ( i = 0; i < 1000; i++ ) {
					s += '<div></div>';
					// document.body.innerHTML += '<div></div>';
				}
				document.body.innerHTML = s;
				
				end = +new Date();
				
				console.log( 'test2 = ' + ( end - start ) );
			};
			
			
			onload = function() {
				// test1();
				test2()
			};
		</script>
	</head>
	<body>
	</body>
</html>

dom中创建代码：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
			// jq 中
			// $( '<div style=""></div>' );
			
			// itcast -> I
			// var dom = I( '<a href="http://www.baidu.com">一个链接</a>' )
			
			var cElem = function ( html ) {
				// 1, 在内部创建一个 docfrag
				var docfrag = document.createDocumentFragment();
				// 2, 创建真正的 div, 然后设置其 innerHTMl 为出入的字符串
				// 然后在遍历该子元素, 将内容加入到 docfrag 中
				var div = document.createElement( 'div' );
				// 3, 将字符串设置为 它的 innerHTML
				div.innerHTML = html;
				// 4, 遍历div的子元素, 加入 docfrag 下面为什么这么写呢
				// 因为在 DOM 元素中默认有一个特征, 即元素只允许有一个 父节点
				// 如果添加元素到另一个节点中, 该元素会自动的离开原来的父节点
				//最好不用for循环
				while( div.firstChild ) {
					docfrag.appendChild( div.firstChild );
				}
				// 5, 获得其子元素返回
				return docfrag;
			};
			
		</script>
	</head>
	<body>
	</body>
	<script>
		var dom = cElem( '<a href="http://www.baidu.com">一个链接</a><br />' + 
						 '<a href="http://www.itcast.cn">传智播客</a>'	);
						 
		document.body.appendChild( dom );
		
		// I( ... ).appendTo( 'body' );
	</script>
</html>


解析while 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
			var id = function ( id ) {
				return document.getElementById( id );
			};
			
			
			onload = function () {
				var d1 = id( 'dv1' );
				var d2 = id( 'dv2' );
				var list = d1.getElementsByTagName("p");
				var len;
				// dom 节点只能有一个父节点 你把这个节点append到了
				//另一个节点上 ，当前这个节点就少了一个节点
				//i继续累加 节点本身length也在减少 总在变化
				//所以这里让他固定不动就可以了
				//这种写法不太好
				//比较好使用while循环
//				for ( var i = 0, len = list.length; i < len; i++ ) {
//					
//					d2.appendChild( list[ 0 ] );
//					
//				}
				
//				while ( list[ 0 ] ) {
//					d2.appendChild( list[ 0 ] );
//				}
				
				while ( d1.firstChild ) {
					d2.appendChild( d1.firstChild );
				}
			};
			
		</script>
	</head>
	<body>
		<div id="dv1">
			<p>p1</p>
			<p>p2</p>
			<p>p3</p>
			<p>p4</p>
		</div>
		<div id="dv2">
			
		</div>
	</body>
</html>


抽离出一种方法， 分析：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
			// 将字符串转换成 DOM 对象
			var cElem = function ( html ) {
				var docfrag = document.createDocumentFragment();
				var div = document.createElement( 'div' );
				div.innerHTML = html;
				while( div.firstChild ) {
					docfrag.appendChild( div.firstChild );
				}
				return {
					element: docfrag,
					appendTo: function ( dom ) {
						dom.appendChild( this.element );
					}
				};
			};
			
			
			
			// cElem( '...' ).appendTo( document.body );
			// 函数返回 DOM 对象, 没有该方法
			// 但是现在需要该方法. 在原型中添加??? 在哪一个原型中添加呢?
			// 首先不确定 dom 对象的共有原型, 同时可能引起原型链搜索性能问题
			// 其次开发的原则是不影响内置对象成员
			
			// 因此不应该直接在 DOM 对象上添加成员
			
			// 给 DOM 对象提供一个包装对象
			// 可以考虑将 cELem 函数返回的对象做一个修改, 然后其是一个 自定义对象
			// 该对象中有 appendTo 方法
			
			
			onload = function () {
				
				cElem( '<div style="border: 1px solid red; width: 200px; height: 100px;"></div>' )
					.appendTo( document.body );
					
			};
		</script>
	</head>
	<body>
	</body>
</html>



DOM疑问：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			
			// jq 
			// $( '<div></div>' ).appendTo( 'body' );
			
			// createElement 可以创建 HTML 的 DOM 对象
			
			// <DOM 对象>.appendTo( ... )
			
			// 原则: 不要直接的修改原生的内置对象的成员
			
			// 也就是说 DOM 对象不应该提供 appendTo 方法
			
			// 谁添加该方法?
			// -> DOM对象		错误
			// -> 原型对象		jq 对象的原型对象; 包装对象( 自定义对象 )的原型对象
			// -> jq 对象
			
			// $( '...' ).appendTo( $( 'body' ) )
			// 框架的结构
//			var itcast = function ( selector ) {
//				return new F( selector );
//			};
//			var F = function ( selector ) {
//				
//			};
//			F.prototype = {
//				appendTo: function( selector ) {}
//			};
			
			// 缺点???
			// 首先在沙箱中 F 对外不可见, 无法实现扩展
			// 同时在描述中容易造成多个变量暴漏与全局中
			
			// 解决方案, 直接将 F 绑定到 itcast 的上面 有两种方法
			// -> 1. itcast.init = F  这个是放在了构造函数上 静态方法 作为工具来使用
			// -> 2. itcast.prototype.init = F 放在了原型对象上
			// 法1 --如果想要扩展
			// -> itcast.init.prototype.xx = xxx;
			
			// 由于在方法中提供的方法一般是静态方法, 作为工具使用
			// 但是 jq 中并不是如此操作
			// 同时根据代码的组织规范, 初始化方法放在原型中更加合理( 与实例相关 )
			
			//类似如下：
			var itcast = function ( selector ) {
				return new itcast.prototype.init( selector );
			};
			itcast.prototype = {
				appendTo: function( selector ) {}
			};
			itcast.prototype.init = function(selector) {}
			itcast.prototype.init.prototype = itcast.prototype;


			//继续优化
			var itcast = function ( selector ) {
				return new itcast.prototype.init( selector );
			};
			itcast.prototype = {
				appendTo: function( selector ) {},
				init: function ( selector ) {}
			};
			
			itcast.prototype.init.prototype = itcast.prototype;
			
		</script>
	</head>
	<body>
	</body>
</html>



双等号：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
			var itcast = function ( selector ) {
				return new itcast.prototype.init( selector );
			};
			itcast.prototype = {
				appendTo: function( selector ) {},
				init: function ( selector ) {}
			};
			
			itcast.prototype.init.prototype = itcast.prototype;
			
			//构造函数和原型都有这个方法
			itcast.extend = itcast.prototype.extend = function ( obj ) {}; 
			
			// 前面给大家描述过, 代码在逻辑上组织时候是需要按照特定功能分组的
			 
			// 工具型方法 并非是每个实例必须的方法  在原有方法的基础上功能增强
			// 例如要实现 nextSibling
			// jq 中就是 next()
			//	.next()					获得下一个元素
			//  .next( selector )		获得下一个元素,如果该元素是符合说选择器的取出来, 否则没有获得到元素
			
			// 如果要实现该方法
			// 实际上就是内部循环调用 获得下一个元素的方法
			// 就是一个 dom 数组, 获得每一个元素的下一个元素, 组成一个新数组
			// [ div1, div2 ]
			// [ div1.nextSibling, div2.nextSibling ]
			
			// 由于浏览器的不同, 该方法可能会获得空的文本节点, 这个不应该在元素上考虑
			// 需要一个通用的工具方法, 来获得某一个元素的下一个元素
			//缺点： 外界无法使用 因为已经在沙箱里了
			// 外界要使用它== 框架的扩展用 
//			var next = function ( dom ) {
//				var newDom = dom;
//				while( newDom = newDom.nextSibling ) {
//					if ( newDom.nodeType == 1 ) {
//						return newDom;
//					}
//				}
//			};
//			[ next( divs ), next( div2 ) ];
//			

			// 实际上该方法如果放到沙箱中, 外部是无法访问, 也就是说必须只能在沙箱内部使用
			// 而该方法如果在框架扩展的时候是需要使用该功能的, 那么就出现无法共享的问题
			// 因此为了共享应该将其作为静态方法存在
			// 那么在代码中如何添加该方法呢?
			
			// -> itcast.next = function () ...
			// -> itcast.extend({ next: function() {} });
			
			// 实例方法
			// -> itcast.prototype.next = function () {}
			// -> itcast.prototype.extend({ next: function() {} });
			
			
			
			// 将来在添加方法的时候
			
			// 1>
			itcast.prototype.css = function () {};
			itcast.prototype.hasClass = function () {};
			itcast.prototype.addClass = function () {};
			itcast.prototype.removeClass = function () {};
			itcast.prototype.toggleClass = function () {};
			
			
			// 2>
			itcast.prototype.extend({
				css: function () {
				},
				hasClass: function () {
				},
				addClass: function () {
				},
				removeClass: function () {
				},
				toggleClass: function () {
				}
			});
			
			
			// 工具型方法
			
			
			
		</script>
	</head>
	<body>
	</body>
</html>

双等号：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			
			// itcast
			// itcast.prototype
			
			// 是要给这两个对象添加 extend 方法
			// 怎么添加
			
//			itcast.extend = function ( obj ) {
//				for ( var k in obj ) {
//					this[ k ] = obj[ k ];  
//				}
//			};
//			
//			itcast.prototype.extend = function ( obj ) {
//				for ( var k in obj ) {
//					this[ k ] = obj[ k ];  
//				}
//			};
			
			
			// console.log( {} == {} );   false
			// alert( function () {} == function () {} );  false
			
			
			// 优化一下: 减少一个函数, 共享
//			var fn = function ( obj ) {
//				for ( var k in obj ) {
//					this[ k ] = obj[ k ];  
//				}
//			};
//			itcast.extend = fn;
//			itcast.prototype.extend = fn;
			
			// 浪费一个变量名
			
			/*  从右往左 先把123 赋给b  再把整个表达式值b=123 当成整体赋给a
			var a, b;
			a = b = 123;
			*/
			
			// 现将 123 赋值给 b, 然后整个赋值表达式的值就是 123, 接着讲 123 赋值给 a
			itcast.extend = itcast.prototype.extend = function ( obj ) {
				for ( var k in obj ) {
					this[ k ] = obj[ k ];  
				}
			};
		</script>
	</head>
	<body>
	</body>
</html>



循环克隆：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			// 将问题简化
			I( '<div></div><div></div>' ).appendTo( 'div' );
			
			// 将一个 div 数组( 2 个元素 ) 添加到 页面中的 div 中( 2 个 )
			// [ d1, d2 ]						[ div1, div2 ]
			// 将 d1 加到 div1 和 div2 中
			// 将 d2 加到 div1 和 div2 中
			
			// 单个元素要克隆几个由需要添加的元素个数决定, 刚刚是需要添加的个数 - 1
			
			// 再简化
			// 将 dv 加到 [ div1, div2, div3 ] 中
			/*
			div1.appendChild( dv.cloneNode( true ) );
			div2.appendChild( dv.cloneNode( true ) );
			div3.appendChild( dv );
			*/
			
			// 最后一个不克隆, 前面的所有都要克隆
			/*
			for ( var i = 0; i < list.length; i++ ) {
				list[ i ].appendChild( i === list.length - 1 ?
										dv : 
										dv.cloneNode( true ) );
			}
			*/
			
			
			
			// 接下来讨论两个循环
			// ds = [ d1, d2 ]						list = [ div1, div2, dv3 ]
			div1.appendChild( d1.cloneNode( true ) );
			div1.appendChild( d2.cloneNode( true ) );
			
			div2.appendChild( d1.cloneNode( true )  );
			div2.appendChild( d2.cloneNode( true )  );
			
			div3.appendChild( d1 );
			div3.appendChild( d2 );
			
			// 添加一层循环
			for ( var i = 0; i < ds.length; i++ ) {
				div1.appendChild( ds[ i ].cloneNode( true ) );
			}
			for ( var i = 0; i < ds.length; i++ ) {
				div2.appendChild( ds[ i ].cloneNode( true ) );
			}
			for ( var i = 0; i < ds.length; i++ ) {
				div3.appendChild( ds[ i ] );
			}
			// 合并
			for ( var j = 0; j < list.length; j++ ) {
				for ( var i = 0; i < ds.length; i++ ) {
					list[ j ].appendChild( j === list.length - 1 ? 
												ds[ i ] : 
												ds[ i ].cloneNode( true ) );
				}
			}
			
		</script>
	</head>
	<body>
	</body>
</html>




简单封装一下：
// by itcast
// xxxx-xx-xx
//这里使用window -- 减少变量作用域的搜索 提高性能, 
//这里使用undefined  --- 下面没有传参 所以我们这个值就是undefined 这是为了解决早期浏览器有的
//没有实现undefined 功能， 有的没有实现undefined功能， 如果没有实现undefined功能，在浏览器使用的时候，他会把undefined当做变量来用， 一旦把他当做变量来使用，就表明改变量未定义，报错，所以参数里面给一个undefined,但是不给他传参，所以表明这个变量就是undefined,他的值也就是undefined， 这里巧妙的用到了
值和名字是一样的情况，那么在代码里面使用undefined的话 就不会出现这种报错的情况
(function ( window, undefined ) {
	
	
// 构造函数
var itcast = function ( selector ) {
	return new itcast.fn.init( selector );
};
// 核心原型
itcast.fn = itcast.prototype = {
	constructor: itcast,
	selector: null,
	init: function ( selector ) {
		// 字符串: 选择器, html
		if ( typeof selector == 'string' ) {
			if ( selector.charAt( 0 ) === '<' ) {
				this.elements = parseHTML( selector );
			} else {
				this.elements = select( selector );
			}
		}
		this.selector = selector;
	}
};
itcast.fn.init.prototype = itcast.prototype;

// 可扩展
itcast.extend = itcast.fn.extend = function ( obj ) {
	// 将 obj 的成员加到 this 上
	var k;
	for ( k in obj ) {
		this[ k ] = obj[ k ];
	}
};

var select = function ( selector ) {
	var first = selector.charAt( 0 ), arr = [];
	if ( first === '#' ) {
		arr.push.call( arr, document.getElementById( selector.slice( 1 ) ) )
	} else if ( first === '.' ) {
		arr.push.apply( arr, document.getElementsByClassName( selector.slice( 1 ) ) )
	} else {
		arr.push.apply( arr, document.getElementsByTagName( selector ) );
	}
	return arr;
};

var parseHTML = function ( html ) {
	var div = document.createElement( 'div' ),
		arr = [], i;
	div.innerHTML = html;
	for ( i = 0; i < div.childNodes.length; i++ ) {
		arr.push( div.childNodes[ i ] );
	}
	return arr;
};

// 基本的工具方法
itcast.extend({
	each: function ( arr, fn ) {
		var i, l = arr.length, 
			isArray = itcast.isLikeArray( arr );
		if ( isArray ) {
			// 数组
			for ( i = 0; i < l; i++ ) {
				if ( fn.call( arr[ i ], i, arr[ i ] ) === false ) {
					break;
				}
			}
		} else {
			// 对象
			for ( i in arr ) {
				if ( fn.call( arr[ i ], i, arr[ i ] ) === false ) {
					break;
				}
			}
		}
		return arr;
	}
});

// 判断类型的方法
itcast.extend({
	isFunction: function ( obj ) {
		return typeof obj === 'function';
	},
	isString: function ( obj ) {
		return typeof obj === 'string';
	},
	isLikeArray: function ( obj ) {
		return obj && obj.length && obj.length >= 0;
	},
	isItcast: function ( obj ) {
		return !!obj.selector;
	},
	isDOM: function ( obj ) {
		return !!obj.nodeType;
	}
});


// 基本的 DOM 操作
itcast.fn.extend({
	appendTo: function ( selector ) {
		// var objs = itcast( selector ).elements,
		// 	i, j,
		// 	len1 = objs.length,
		// 	len2 = this.elements.length;
		// // 将 this.elements 加到 objs 中
		// for ( i = 0; i < len1; i++ ) {
		// 	for ( j = 0; j < len2; j++ ) {
		// 		objs[ i ].appendChild( i === len1 - 1 ? 
		// 								this.elements[ j ] :
		// 								this.elements[ j ].cloneNode( true ) );
		// 	}
		// }
		var objs = itcast(selector).elements, i,j,
				len1 = objs.length,
				len2 = this.elements.length;
		for( i = 0; i < len1; i++) {
			for( j = 0; j < len2; j++) {
				objs[i].appendChild(i === len1 - 1 ? 
								this.elements[j] 
								:this.elements[j].cloneNode(true));
			}
		}
	}
});




// 对外公开
window.I = window.itcast = itcast;
//这里使用window -- 减少变量作用域的搜索 提高性能
})( window );



关于appendTo中elements的思考：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
			// obj.elements
			// 特点就是数据都在 elements 中
			// 方法与它并列, 也就是说方法与数据分离了
			
			// 这样的组织方式管理非常方便
			// 但是在给予它的开发变得每次都要使用 elements, 很繁琐
			
			// jq 中将数据直接存储到 this 中, 也就是说将 jq 对象看成一个伪数组
			// 里面的每一个元素都是 dom 对象
			// 同时提供了很多的方法
			
			// jq -> DOM
			// $(...).get(0)
			// $(...)[ 0 ]
		</script>
		<script src="../../js/jquery-1.12.1.js"></script>
		<script>
			
			$(function () {
				var temp = $( 'div' );
				var temp = $();
			});
		</script>
	</head>
	<body>
		<div class="c1"></div>
		<div class="c2"></div>
		<div class="c3"></div>
	</body>
</html>

验证修改原型继承属性
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			var Person = function () {
				
			};
			Person.prototype.age = 10;
			
			var p = new Person();
			
			console.log( p.age );
//执行下面这句话之前  这个时候age是在他的原型里面的 
	p: Person
		__proto__:Object
		age:10
		constructor:()
		__proto__:Object

//执行下面这句话 	赋值以后 p里面有了age	 所以我们原型当中的age是不能修改的
			// p.age = 123; 
	p: Person
		age:123
		__proto__:Object
		age:10
		constructor:()
		__proto__:Object

			
			p.age += 123;
			// p.age = p.age + 123 注释了上面的p.age=123 执行这句话
								//代表的是用原型里面的数据加上123 在给P一个age 
			
			console.log( p.age );
			
			
			
		</script>
	</head>
	<body>
	</body>
</html>


什么是事件：
	事件不是一个名词 其实是一个过程 是人出发的一个行为 节点标签注册了一个
	事件处理程序 节点会调用事件处理程序， 如果他注册事件处理程序的这个名字和我们的
	这个行为刚好相同的话，那么我的dom对象就会调用我们的事件处理程序 这个过程称之为事件
	事件的内部在操作的时候， 比如现在又一个click事件，在我们点一下的时候 会执行click方法
	这就是在响应事件 ，这是内部去做的， 那么对于我们的onClick方法，当我们内部响应的时候，如果我们注册的事件处理程序，
	我们的系统就会 调用这样的方法， 执行我们的Onclick方法。如果里面什么都没有返回
	就把onclick执行了 同时把他的默认行为执行了，如果返回的是false, 代表的是取消他的默认
	行为， 那么就把onclik执行了， 默认行为不执行
click() {
	if onclick != null {
		if (onclick() !== false) {
			默认行为
		}
	}
}

以前用的添加事件

// addEventLisener   这种添加事件可以绑定多个事件 连续增加事件
// 	dom.addEventLisener( 事件名, fn ) 事件名--  这个地方 fn 函数里面的this代表dom对象
//	
IE里面的添加事件
// attachEvent
//  dom.attachEvent( 事件名, fn ) 这个地方fn函数里面的this代码window 

这种方式的事件的 新事件会把原来事件覆盖
div.onclick = function() {
	
}



// 什么是事件对象? 有什么用?
事件就是用户做了一件事情，然后他就可以给我一个响应
事件对象就是 用户在做这件事情的，有很多附带的信息 比如说
用户做的是什么事情  用户在哪个地方的事情 
// 如何访问事件对象????
// 1> IE
//		window.event
// 2> 火狐
//		事件处理函数的参数


事件移出：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="itcast.js"></script>
		<script>
			// 添加事件 addEventListener
			// 语法: addEventListener( 事件的类型, 事件处理函数, 冒泡还是捕获  )
			// 移除事件 removeEventListener
			// 语法: removeEventListener( 事件类型, 事件处理函数 )
			// 移除的只能是加入的函数
			onload = function () {
				
				
				// var btn = document.getElementById( 'btn' );
				
				var fn = function () {
					alert( '123' );
				}
				
				/*
				btn.addEventListener( 'click', fn );  // 这个函数无法移除
				
				btn.removeEventListener( 'click', fn );
				*/
				
				I( '#btn' ).on( 'click', fn ); 
				
				I( '#btn' ).off( 'click', fn );
			};
		</script>
	</head>
	<body>
		<input type="button" id="btn" value=" click " />
	</body>
</html>




<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			div {
				width: 100px; height: 20px; border: 1px solid red; margin: 10px 0;
			}
			.c1 {
				background-color: red;	/* #ff0000 */
			}
			.c2 {
				background-color: green; /* #00ff00 */
			}
			.c3 {
				background-color: blue; /* #0000ff */
			}
		</style>
		<script src="itcast.js"></script>
		<script>
			itcast.fn.extend({
				css: function ( cssName, cssValue ) {
					// 假设只有一个参数 cssName
					// this 是多个元素是一个 DOM 的数组, 但是获取数据的时候
					// 获得的是第 0 个元素的样式
					// return this[ 0 ].style[ cssName ];
					
					// 在 js 中, 利用 js 获得样式, 默认只能获得行内样式, 类样式与外部样式无法获得
					// 考虑使用 计算样式来获得第一次的结果
					// window.getComputedStyle
					// 如果是 低版本的 IE 浏览器, 需要使用 currentStyle
					
					var style = window.getComputedStyle( this[ 0 ] );
					
					return style[ cssName ];
				}
 			});
			
			I(function () {
				var res = I( 'div' ).css( 'background-color' );
				console.log(typeof res );
			});
		</script>
	</head>
	<body>
		<div class="c1"></div>
		<div class="c2"></div>
		<div class="c3"></div>
	</body>
</html>




<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			div {
				width: 100px; height: 20px; border: 1px solid red; margin: 10px 0;
			}
			.c1 {
				background-color: red;	/* #ff0000 */
			}
			.c2 {
				background-color: green; /* #00ff00 */
			}
			.c3 {
				background-color: blue; /* #0000ff */
			}
		</style>
		<script src="../js/jquery-1.12.1.js"></script>
		<script type="text/javascript">
			
			// .css( '名字' )
			// .css( '名字', '值' )
			// .css( {  } );
			
			// addClass()
			// removeClass()
			// hasClass()
			// toggleClass()
			
			$(function () {
				
				// var res = $( 'div' ).css( 'backgroundColor' );
				
				// console.log( res );
				
				alert( $('div').hasClass('c3') );
			});
			
		</script>
	</head>
	<body>
		<div class="c1"></div>
		<div class="c2"></div>
		<div class="c3"></div>
	</body>
</html>




正则单词边界：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			
			// 利用正则表达式是用来匹配数据的. 匹配字符串
			// 但是有些时候, 查找的东西可能比较复杂
			// 比如需要查询一个方法, 叫 a
			
			// append
			// appendTo
			// add
			// attach
			// addEvent...
			// ...
			
			// 因此需要规范, 我现在需要的是 a 的边界( 英文 )
			// 使用 \b 表示一个单词的边界, 比如: I have a dream
			
			var s = "I have a dream";
			var r = /\b\w\b/g;
			var m = r.exec( s );
			
			m = r.exec( s );
			
			m = r.exec( s );
			
		</script>
	</head>
	<body>
	</body>
</html>

去空格
str.replace(/^\s+/g,'').replace(/\s+$/g,'');
在很多其他编程语言当中有trim方法，但是很多语言支持函数重载
有一个规则 如果trim函数不带参数 则去掉左右空格
如果带有参数 表示取消左右指定的字符
'abc132'.trim('a') ---> bc132
/^a+|a+$/g

'abc132a'.trim('a','b') ---> c132
/^[ab]+ | (a|b)+$/g



兼容IE的currentStyle() 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div { width: 100px; height: 40px; border:1px solid red;}
		</style>
		<script>
			var support = {};
			// 浏览器检查
			
			onload = function () {
				var dv = document.getElementsByTagName('div')[ 0 ];
				
				var style1 = dv.style;
				var style2 = window.getComputedStyle( dv );
				var style3 = dv.currentStyle;
				
				var _ = 0;
			};
			
		</script>
	</head>
	<body>
		<div></div>
	</body>
</html>


移动前端：
标准viewport 操作： meta:vp  tab键
1. 流式布局
	流式布局  就是百分比布局，通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。
	这样的布局方式  就是移动web开发使用的常用布局方式
2. viewport
	有三层 一个是我们的浏览器 一个是我们的viewport 一个使我们的页面
	viewport是一个虚拟的窗口 他可能比浏览器窗口大  可能比浏览器窗口小
	是用来承载我们网页的 能设置缩放比例

总结： 用meta标签 把view-port宽度设置为device-width 同时initial-scale = 1
,user-scalable = 1 就构建了一个标准的移动web页面


非标准viewport

假如手机分辨率320 * 1000 ,  pc 端网页 640 * 1040px
那么手机上显示 淘宝的做法是缩小一半
例如我们的 m.taobao.com 
body　比例是　640*960
手机端配置显示是 如下 配置为了0.5
<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">

一些css的设置  reset css  、 common css