js高级课堂笔记

js高级

什么是js

js它是一个基于对象和事件驱动的前端的编程语言，可以用来改进的设计，比如验证表单

JS代码就是JavaScript编写的脚本文件的代码。用单独文件保存，扩展名为.JS

js一切皆对象(掌握)

java对象：某一个事物的具体的实例

比如 Person new Person()

java基本类型：byte short int long char float double boolean

像js里面基本类型，引用类型 和 函数 都可以看成一个对象

比如：

			//基本数据类型中  number
			var num = 3.1415926;
			//保存小数点后两位
			console.debug(num.toFixed(2));//3.14
			//typeof 查看对象的数据类型
			console.debug(typeof num);//number
			
			//引用数据类型Number
			var num1=new Number(3.1415926);
			console.debug(num1.toFixed(2));//3.14
			console.debug(typeof num1);//object
			
			var fun = new Function("a","b","return a+b");
			console.debug(fun());//NaN
			console.debug(fun(1,2));//3
			
			//数据类的name为anonymous，不能被更改（名字不公开的; 匿名的）
			//fun.name = "赵日天"; 
			fun.age = 23;
			console.debug(fun)

true和false(掌握)

0,"",undefined,NaN,null,false 这几个值为false ，其他情况为true

			//js 中所有值的真假性:  0,"",undefined,NaN,null,false(基本数据类型的false)为false,其他值都为true.
			var b1=false;
			if(b1){
				console.debug("进不来，因为判断为false")
			}
			
			//此处是引用数据类型，判定为true，能输出
			var b2 = new Boolean(false);
			if(b2){
				console.debug("来来来")
			}
			
			//测试其它的值是否判定为 true
			var b3 = "我是不是true？"
			if(b3){
				console.debug("我是true的，哈哈哈");
			}else{
				console.debug("呜呜呜，我不是true")
			}

对象操作(掌握)

创建对象方式：

var obj = new Object();
var obj1 = {"age":23};
var obj2 =new function_name();

给对象添加属性

			obj.name="名字";	//直接赋值
			obj["age"]=18; 	//使用【】，那么就需要使用引号
			//添加say属性
			obj.say=function(){
				console.debug("我能不能输出呢！！！");//输出不了
			}
			obj.name = "改名字";//把上面额name属性覆盖了
			console.debug(obj);
			
			
			//使用属性和方法
			console.log(obj.name);
			console.log(obj["age"]);
			obj.say();
			//删除属性
			//delete obj.name;
			//console.debug(obj);

使用属性

			console.log(obj.name);
			console.log(obj["age"]);
			obj.say();

json的操作(掌握)

eval()

JSON.parse

$.parseJSON

用eval可以解析，并且会弹出对话框，而用JSON.parse()则解析不了

JSON.parse()解析的必须是json格式的字符串要不报错，而eval()则没有这么严格

js的其他内容(理解)

hasOwnProperty 判断对象里面是否有属性

函数name它是只读属性 --避免出现笔试题

window里面默认有name 默认值空字符串

this表示当前对象 可以通过apply和call方法去改变this的执向

##　prototype原型(掌握)

(1) 每个类有原型的属性 prototype，通过该属性给类添加属性和方法

User.prototype.eat = function(){
				console.log('这个static的吃能不能输出呢？好烦呀！');
			}

(2) 每个类的实例原型的属性是共享的–)如果一个类的在原型的属性上面添加方法和字段，当前类的其他的实例共享的

user1.__proto__.sex = 'man';

(3）每个类属性的查找，先从自定义的属性上面找，如果没有，在从原型上面找

##　回调函数和匿名函数

回调函数：等待一段时间有回来执行函数

​ 比如 setTimeout ajax回调

setTimeout(doHandle,3000);
			function doHandle(){
				alert(123);
			}
			alert(1);

匿名函数：没有名称的函数 （掌握）

写法：

(function(){})()

用途（掌握）：(1)如果执行一次 可以使用匿名函数

​ （2）作为参数来传递使用

​ (3)解决作用域污染问题

闭包(面试题)

闭包：函数内使用函数外的变量

闭包使用场景：

​ (1)实现一个只读的属性 --结合匿名函数实现只读

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

​ (2)函数里面使用函数外变量

jquery事件委托（掌握）

$("#userForm").on('click','a.delete',function(){
				alert('事件委托成功1');
})

事件命令空间(了解)

$(function(){
			
			//事件命名空间--了解
			$("#myBtn").on('click.btn1',function(){
				alert('111');
			});
			
			$("#myBtn").on('click.btn2',function(){
				alert('222');
			});
			
			$("#myBtn").off('click.btn2');
			
			
		})

jquery继承(掌握)

$(function(){
			
			/**
			 * java 继承：体现在子类和父类之间，子类可以继承父类里面的属性和方法
			 * 继承： jquery的继承：可以扩展功能
			 * jquery想实现继承：可以通过prototype
			 * 
			 * jQuery.fn == jQuery.prototype == $.fn
			 * 		
			 */
			//我给jquery这个框架扩展的方法
			$.fn.setHtml = function(content){
//				this -->dom 或者jquery
				//设值
				$(this).html(content);
			};
			
			$.fn.getHtml = function(){
				//获取值
				return $(this).html();
			}
			
			//$("#hello").setHtml('你好，师姐！);
			
			console.log($("#hello").getHtml());
		})

			<div id="hello">继承世界？？</div>