JavaScript加强

1.JavaScript简介

JavaScript简称js,是一门用于前端开发的一门面向对象的脚本语言,动态响应,获取数据,而且无需编译,直接放浏览器运行.
Web前端有三层：
HTML：从语义的角度，描述页面结构
CSS：从审美的角度，描述样式（美化页面）
JavaScript：从交互的角度，描述行为（提升用户体验）

2.JavaScript面向对象

2.1.一切皆对象

JavaScript中一切皆对象，在JavaScript中我们可以把任何(基本数据)类型当成对象来使用。这点于Java中既然不同，Java中的基本数据类型是不能调用方法，只能通过包装类型。

(1)JavaScript中一切皆对象，在JavaScript中我们可以把任何(基本数据)类型当成对象来使用。
(2)基本数据类型:number/boolean/string/null(值:null)/undefined(undefined)
(3)引用数据类型:Object/Array/Regexp/Date/Number/Boolean/String…

		 //基本数据类型中number.
		var num1 = 3.14159;
		console.debug(num1.toFixed(2)); //一切皆对象
		console.debug(typeof num1);//number
		
		//引用数据类型Number
		var num2 = new Number(3.14159);
		console.debug(num2.toFixed(2));
		console.debug(typeof num2);//object

2.2.js中true和false的判断

js 中所有值的真假性: 0,"",undefined,NaN,null,false(基本数据类型的false)为false,其他值都为true.

	var b1 = false;
	if(b1){
		console.debug("看能不能 出来");
	}
	
	//js 中所有值的真假性:  0,"",undefined,NaN,null,false(基本数据类型的false)为false,其他值都为true.
	var b2 = new Boolean(false);// 这里是创建的一个对象添加值,对象肯定不为空
	if(b2){
		console.debug("哈哈哈");
	}

2.3 创建对象和操作

			//普通创建
			var obj = new Object();
			//添加元素
			obj.name = "妞妞";
			obj.age = 11;
			//添加方法
			obj.eat = function(){
				console.log("2222");
			};
			
			//josn创建
			var obj1 = {"age":20,"name":"花花"};
			obj1= {"sex":"女"};
			console.log(obj1.sex);
			
			//如果要创建一个引用数据类型对象, 需要先创建一个函数(构造方法)
			function Person(){}
			var person = new Person();
			person.name = "哈哈";
			person["sex"] = "女人";
			person.age = 22;
			
			//调用方法 就不用打印了
			obj.eat();
			
			//这两种都能调用,
			console.log(person.name);
			//这种适合在 for in 循环的时候取值
			console.log(person["name"]);

			//遍历方式
			var obj = {};
				obj.name = "huahua";
				obj.age = 22;
				obj.paly = function(){
					console.log("你要培训挨不过");
				}
				//遍历  for in
				for(var key in obj){
					//不能这样写  因为obj里面没有 key这个属性
					//console.log(obj.key);
					//这样写可以,但是方法不能直接打印出里面的属性
					//console.log(obj[key]);
					//所以遍历需要判断 看是不是方法
					if(typeof obj[key] == 'function'){
						obj[key]();
					}else{
						console.log(obj[key]);
					}
				}

2.4.JSON对象和JSON字符串

			//json 字符串
			var jsonStr = '{"name":"哈哈哈","age":18}';
			console.log(jsonStr);
			//json 字符串转成json对象  eval方式
			var jsonObj = eval("("+jsonStr+")");
			console.log(jsonObj);
			//JSON.parse 方式  但是jsonStr必须是标准的格式
			var jsonObj1 = JSON.parse(jsonStr);
			console.log(jsonObj1);
			//jquery也有方法转换 底层还是使用JSON.parse方法进行转换，也就是字符串格式也必须要标准的
			var jsonObj2 = $.parseJSON(jsonStr);
			console.log(jsonObj2);
			

2.5.Js类
JavaScript中没有为我们提供像Java中定义类的关键字class。JS中定义类只需要定义这个类的构造函数即可，函数名使用首字母大写。
(1)JavaScript中没有为我们提供像Java中定义类的关键字class。
(2)JS中定义类只需要定义这个类的"构造函数"即可； 构造函数与普通函数没区别.
(3)只要是类，类名就是首字母大写。

			//构造函数中this,就是实例对象		
			//如果要为对象添加属性,那么需要使用 "this.属性名 = 值;"
			function Person(name,age){
				this.name = name;
				this.age = age;
			}
			var p1 = new Person("花花",22); 
			var p2 = new Person("小子",33); 
			console.log(p1);
			console.log(p2);

2.6window的name属性
我们说过，变量要先定义才能使用。但是name是一个特殊的，可以当成java中关键字。直接使用name表示是使用的window.name属性。默认window.name是空字符串。但是我们可以给这个name赋值。

			//函数的name
			var fun1 = new Function("a","b","return a+b");
			fun1.name = "牛逼";
			fun1.age = 43;
			//函数里面name的值比较特殊 它是只读的 不可修改
			
			console.log(fun1);
			//window里面默认有个属性name 默认值的空字符串
			console.log(window.name);
			
			window.name = "湿哒哒所大";
			console.log(window.name);
			var name = "你是假的";
			console.log(window.name);

2.8.js中的this

	//this表示，谁调用这个方法，this就指向谁。
	var obj = {
		"name" : "康娜酱"
	};
	function sayHello() {
		return this.name;//谁调用这个方法sayHello，this就代表是谁
	}
	obj.say = sayHello;//赋值
	console.debug(obj.say());//康娜酱  sayHello是obj对象在调用，所以this指向了obj.
	console.debug(sayHello());//空字符串   直接调用sayHello，相当于是window.sayHello(),所以this指向window，默认的window的name是空字符

3.prototype原型

(1）什么是原型：prototype，他是类或者对象里面的属性，通过他可以给对象添加属性和方法, 在一个类中加上原型方法，它对应的所有对象都拥有了这个方法.
(2) 每个对象原型是共享的,多个对象只要类相同，它们的原型也是相同的
(3)属性查找规则，先从自定义的属性上面找，没有找到，在从原型上面找 (自定义->原型->原型的原型,…)

类.prototype.方法名 = function(){}

			/*prototype指原型的，每一个对象都有prototype的这个属性，我们可以通过该属性往
			对象上面添加属性和方法*/
			function User(name,age,sex){
				this.name = name;
				this.age = age;
				this.sex = sex;
				/*this.eat = function(){
					console.log('不知道啊啊,要不要死了');
				}*/
			}
			User.prototype.eat = function(){
				console.log('asdsadasdsa..');
			}
			
			var user1 = new User('小爱',18);
			console.dir(user1);
			var user2 = new User('小炮',28);
			console.dir(user2);
			//对象里面原型属性 --这个原型属性也是一个对象
			console.dir(user1.prototype === user2.prototype);
			console.dir(user1.__proto__ === user2.__proto__);
			//(1)同一个类的不同实例的原型是共享的;
			user1.__proto__.age = 22;
			//(2)对象属性查找规则，先从自定义的属性上面找，如果找到，就返回，如果没有，从原型上面去找
			
			console.log(user1);
			console.log(user2);
			
			console.log(user2.age);//undefined
			user1.eat();

3.1回调函数

回调函数就是一个通过函数(对象)引用调用的函数;
如果你把函数的引用（地址）作为参数传递给另一个函数，当这个引用被用来调用其所指向的函数时，我们就说这是回调函数。

	//回调函数：就是一个通过函数(对象)引用调用的函数;
			
			//这里设置定时器 调用的 时候不加扩号,加了就是立马执行
			setTimeout(Time,3322);
			function Time(){
				alert("222");
			}
			

3.2匿名函数

			//匿名函数：没有名称的函数 
			//匿名函数 有什么用：一次性执行 
			//推荐写法 一般用这个
			(function(){
				//alert(1111);
			})();
			/*
			~function(){
				alert(2222);
			}();*/
			
			/*+function(){
				alert(3333);
			}(); */
			
			/*匿名函数有什么用：
			（1） 只想执行一次 可以使用，解决作用域污染问题(比如只想要结果，可以屏蔽不要的实现)
			（2）作为一个参数来传递*/
			//解决作用域污染
			var x = 10;
			var y = 20;
			
			var z = x*y;
			//只要结果.但是z 跟y 都到作用域以后了
			console.log(z);
			console.log(window);

		//正确写法:使用()括起来：
	//    (function(name){
	// 		console.debug("请说出你的名字:" + name);
	// 	})//这样就表示申明了一个函数，只是说是一个匿名函数。但是还没有调用

	//直接调用匿名函数:函数的调用：函数名();
	(function(name) {
		console.debug("请说出你的名字:" + name);
	})();//现在是调用了，但是没有传参数
	(function(a, b) {
		var result = a * b;//用一个局部变量接收
		window.result = result;//赋值给window的一个全局变量
	})(10, 50);//传参调用
	console.debug(result);
	console.debug(window);
			

3.3闭包(面试题)

		//最简单的闭包，函数里面使用函数外面的变量
			var name = '哈哈哈';
			function get(){
				console.log(name);
			}
			get();
			
			var sum = 0;
			function add(){
				return sum++;
			}
			console.log(add());
			console.log(add());
			sum = 10;
			console.log(add());
			console.log(add());
			console.log(add());
			//打印结果0,1,10,11,12
			//闭包：实现只读的属性
			//闭包和匿名函数结合来使用 实现只读的属性
			(function(){
				var a = 0;
				//这里要用window 存到作用于才能被调用
				window.getsum = function(){
					return a++;
				}
			})()
			console.log(window.getsum());
			console.log(window.getsum());
			console.log(window.getsum());
			a = 22;
			console.log(window.getsum());
			console.log(window.getsum());
			//打印结果 0,1,2,3,4

3.4事件委托
前面的基本的事件绑定，在功能有一个局限。就是绑定事件的元素，必须是在绑定的时候已知的、存在的。对于以后出现的元素是不起作用，事件委托就可以处理这种情况。
下面是一个列子:
有这么一个需求，已经存在一个添加附件的组件，现在因为需求原因，需要动态增加多个添加附件的组件，同时增加删除，查看等操作。

	<script type="text/javascript">
			$(function(){
				$('#addFile').click(function(){
					$('#userForm').append("<div>附件:<input type='file' name='file'/><a href='javascript:void(0)' class='delete'>删除</a></div>")
				})
				/* 不行
				 * $(".delete").on('click',function(){
					alert('123');
				})*/
					//selector 事件委托写法
				$('#userForm').on('click','a.delete',function(){
					alert(111);
				})
			})
		</script>
	</head>
	<body>
		<a id="addFile" href="javascript:;">添加更多附件</a>
		<form id="userForm">
			<div>
				附件:<input type="file" name="file" />
			</div>
		</form>
	</body>