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>