JavaScript高级加强

本章目的

这里在以前js基础语法上,进行升级介绍.
JavaScript：简称js，它是用来程序改进设计，比如验证表单，js它是脚本语言，无需编译，直接放到浏览器解析运行，js也是基于对象和事件驱动编程语言；

1.JS一切皆对象

js一切都是对象 ，比如基本类型，函数 引用类型都可以当成一个对象来使用
基本数据类型:number/boolean/string
引用数据类型:Object

	//基本数据类型中number.
	//(1)基本数据类型
	var num = 11.663;
	console.log(typeof num)	//number
	//保留小数,括号里面为位数
	console.log(num.toFixed(1))	//11.7
			
	//(2)引用数据类型
	var num1 = new Number(11.663)
	console.log(typeof num1)	//object
	console.log(num1.toFixed(1))	//11.7

2.js中true和false的判断

fasle 的表示方式:0,"",undefined,NaN,null
true  的表示方式:fasle之外其他值都为true.

	if ("") {
		alert("不能进入")
	}
			
	//特殊情况
	var flag = new Boolean(false);	//此时flag为对象,对应为true,所以可以进入
		if(flag){
		console.log('可以进入');
	}

3.JS对象使用

(1)创建对象

创建对象是2种方式
var obj2 = {};
var obj3 = new Person();

//js基本方式
	function Psrson(){}
	var obj1 = new Psrson();	//需先创建一个类
	var obj2 = new Object();  	//Object类已经存在于js中,所以不用先创建
//json方式
var obj3 = {"age":20}4.3.2添加属性/方法

(2)添加属性/方法

    obj.name = "张三";
    obj["age"] = 18;//使用[]，那么需要使用引号
    obj.say = function(){
          console.debug(this.name);
    } 

(3)删除属性

2种方式

  	 delete obj.name;
  	 delete obj["age"];

(4)迭代/遍历对象成员

for (var key in obj1) {		
	if (typeof obj1[key]  == 'function') {	//函数的情况
		obj1[key]();
	} else{	//普通属性的情况
		console.log(obj1[key]);
	}
}

4.JSON对象和JSON字符串

标准的json字符串格式：'{"key":"value","key":"value"}'
// key必须使用双引号，值如果不是数字和boolean类型的也必须双引号

JSON字符串 转为 JSON对象转换有三种方式：
(1)json对象  eval
(2)JSON.parse jsonStr必须是标准的格式
(3)jquery方式 底层还是使用JSON.parse方法进行转换，也就是字符串格式也必须要标准的

	//json字符串
			var jsonStr = '{"name":"张三","age":18}';
			
	//将字符串转换为json对象的三种方式
	//(1)json对象  eval
			var jsonObj1 = eval("("+jsonStr+")");
	//(2)JSON.parse jsonStr必须是标准的格式
			var jsonObj2 = JSON.parse(jsonStr)
	//(3)jquery方式 底层还是使用JSON.parse方法进行转换，也就是字符串格式也必须要标准的
			var jsonObj3 = $.parseJSON(jsonStr);

注意:使用JSON.parse方法或者$.parseJSON方法时候，如果不是标准的json字符串的错误：

5.Js类,定义和拷贝

(1)JS中定义类只需要定义这个类的构造函数即可，函数名使用首字母大写。

function Person(name,age){
	this.name = name ;
	this.age = age;
}
var p1 = new Person("张三",18);
var p2 = new Person("李四",28);

(2)对象属性/方法拷贝

有两种方式：
普通方式：一个个属性和方法一一赋值
通过遍历，一次性赋值。最好通过hasOwnProperty()来判断是否已经存在这个属性或者方法，避免原有的属性或者方法被覆盖
hasOwnProperty(key)	判断对象里面是否存在的属性,返回的是boolean值

//对象属性和方法的拷贝
//有两种方式：1、一个个属性和方法一一赋值  2、通过遍历，一次性赋值
var obj1 = {
"name" : "gg",
	"address" : "yyy",
	age :  "18",
	sex : "man"
};
			
var obj2 = {
	name : "mm",
	sex : "woman"
};
			
//把对象1的address和age属性拷贝到对象2里面
//obj2.address = obj1.address;//这种方式,如果已经存在的属性会被覆盖,应该要循环遍历
for(var key  in obj1){
	//判断对象里面是否存在的属性
	if(!obj2.hasOwnProperty(key)){
		obj2[key] = obj1[key];
	}
}

6.函数赋值和name属性

(1)对象赋值

注意:函数的name属性是只读属性，不能修改

		//函数的name
		var func1 = new Function("a","b","return a+b");
		func1.age = 19;
		func1.name = '杰哥';	//函数的name属性这样赋值没有效果

(2)window的name属性

name是一个特殊的，可以当成是关键字。直接使用name表示是使用的window.name属性。
默认window.name是空字符串。但是我们可以给这个name赋值。

	console.log(name);//这样默认打印的是window下面的name,打印为空
	window.name = 'xxxx';
	console.log(window.name);//xxxx
		    
	var name = 'yyyy';//默认name这个 挂着window上面的
	console.log(window.name);//yyyy

7.JS中的 this

(1)this指的当前对象，谁调用这个方法，this就指向谁。

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

(2)使用call apply方法去改变this指向

语法 : 方法.call(obj,arg1,arg2);
方法.apply(obj,[arg1,arg2])

function sayHello() {
	//arguments取到方法传递过来参数
	console.log(arguments);
	return this.name;//谁调用这个方法sayHello，this就代表是谁
}
			
//改变this指向
var obj2 = {"name":"结衣"};
var obj3 = {"name":"小鑫鑫"};
console.log(sayHello.call(obj3,"xxx","yyy"));		//小鑫鑫
console.log(sayHello.apply(obj2,["xxx","yyy"]));	//结衣小结

8.prototype原型

（1）理解：prototype，他是类或者对象里面的属性，通过他可以给对象添加属性和方法
  (2) 同一个类的每个对象原型是共享的
  (3)属性查找规则，先从自定义的属性上面找，没有找到，在从原型上面找

//定义一个类
	function User(name,age,sex){
			this.name = name;
			this.age = age;
			this.sex = sex;
			this.eat = function(){
				console.log('二傻子');
			}
	}
			
	var user1 = new User('小胡',18);
	console.dir(user1);
			
	var user2 = new User('小强',28);
	console.dir(user2);
			
	//对象里面原型属性 --这个原型属性也是一个对象
	console.log(user1.__proto__ === user2.__proto__);	//true
	//(1)同一个类的不同实例的原型是共享的;
	user1.__proto__.sex = 'man';
	//(2)对象属性查找规则，先从自定义的属性上面找，如果找到，就返回，如果没有，从原型上面去找
	console.log(user1);
	console.log(user2);

9.回调函数

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

//例如:平时 定时器
		setTimeout(doHandle,3000);
		function doHandle(){
			alert(1111);
		}
			
		alert(1);
			
//例如:ajax 回调  	
		//$.get(url,params,callback,type)

10.匿名函数

理解:没有名称的函数 
作用:
（1） 只想执行一次 可以使用，解决作用域污染问题(比如只想要结果，可以屏蔽不要的实现)
（2）作为一个参数来传递

匿名函数三种写法：
三种写法：
(function(){})//推荐写法
~function(){}
+function(){}

//匿名函数三种写法：

(function(){
		alert(1);
	})();
			
	~function(){
		alert(2);
	}();
			
	+function(){
		alert(3);
}();

//理解作用域污染问题
//普通写法:有作用域污染问题,打印window看效果
			var x = 10;
			var y = 20;
			
			var z = x*y;
			console.log(z);
			console.log(window);
			
//匿名函数的写法:没有作用域污染问题,打印window看效果
			(function(a,b){
				var result = a*b;
				console.log(result);
				window.result = result;
			})(10,50);
			
			console.log(window);

11.闭包

闭包，指的是语法。简单理解就是：函数中可以使用函数之外定义的变量。一种封装特性

1.第一种用法:函数中可以使用函数之外定义的变量。

	var msg = "呵呵";
	function sayMsg(){
		//函数中可以使用函数之外定义的变量。
		console.debug(msg);
	}
	sayMsg();

2.第二种用法:通过闭包实现只读属性

	(function(){
		var a = 0;
		window.getSum=function(){
			return a++;
		}
	})();
			
	console.log(getSum());//0
	a = 10;//window.a
	console.log(getSum());//1
	console.log(getSum());//2	

12.jQuery事件机制回顾和加强

(1)事件机制

JavaScript最重要的一个机制，事件驱动。
监听器listener
jQuery：(js优秀的框架)
监听的目标是什么（事件源）：
 	监听的操作是什么 (事件名称）：
 	触发监听时要做什么（事件响应函数）
    事件中所有信息封装成的对象(事件对象)：

(2)操作：事件注册

jQuery提供了多种事件注册的方式，常见的事件注册有三种方式
①$("#btn").click(function()//jQuery对象.事件名
②$("#btn").bind(‘click’，function()   // jQuery对象.bind unbind取消绑定
③$("#btn").on(‘click’，function()      // jQuery对象.on off取消绑定

1.简单方式

2.on方法注册事件

$(function(){
	//注册点击事件
	$("#btn").on("click",function(){
		console.debug("你点击了我。。。");
	});
	//移除点击事件
	$("#btn").off("click");
})

3.bind方法绑定事件

(3)事件委托

事件委托:就是绑定事件的元素，必须是在绑定的时候已知的、存在的。
		事件委托可以为还没有出现的元素绑定事件。
举例说明:有这么一个需求，已经存在一个添加附件的组件，现在因为需求原因，需要动态增加多个添加附件的组件，同时增加删除，查看等操作。如图：

代码演示:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="js/jquery-2.1.3.js" ></script>
		<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>")
			});
			
			//selector 事件委托写法
			$("#userForm").on('click','a.delete',function(){
				alert('111111111111');
			})
		})	
		</script>
	</head>
	<body>
		<a id="addFile" href="javascript:;">添加更多附件</a>
		<form id="userForm">
			<div>
				附件:<input type="file" name="file" />
			</div>
		</form>		
	</body>
</html>