JS高级

JS高级

对象

在JS中一切皆对象

基本数据也是对象,而且函数也是对

JS中true和false的判断

在JS中,对象只要存在便为true

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script>
var f = false;
if(f){
alert('能输出我把屎吃下去');
}else{
alert('我们心有猛虎')
}

var s = new Boolean(false); //这是对象,在js中对象是默认存在,所以为true
if(s){
alert('肯定可以输出');
}

</script>

创建对象

在js中创建对象有六种方式

作为后端程序员,只要熟悉常用的三种即可

1.js通过function定义构造方法,创建对象(function创建对象)

1
2
3
var num = new Number(156);	//js自带Number对象
function Person(){} //自建一个构造方法
var p = new Person();//创建Person对象

2.js特殊function Object(){} (用Object创建对象)

1
2
3
var s = new Object();	//js自身提供了Object对象
s.name = '尼采';
alert(s);

3.js 通过字面量(json对象)去创建,最好掌握

1
2
3
4
var j = {
"name":"萨特",
"age":"18"
};

属性和方法的调用

1.普通调用:对象.调用

2.动态调用:对象[“字段变量”] 对象[“方法名”] (参数)

1
2
3
4
5
6
7
8
9
<script>
function Fk(){}
var f = new Fk();
f.name = '李志';
alert(f.name);

//动态调用
alert(f["name"]);
</script>

方法的遍历

使用for(var 变量名 in 对象)

判断方法和字段

typeof p == “function”

如果为true就是方法

如果为false就是字段

JSON对象和JSON字符串

把JSON字符串 转换成JSON对象

第一种方式:eval

1
2
jsonString = '[{"id":1,"name":"冲冲冲"},{"id":2,"name":"冲不动了"}]'; 
var jsonObject = window.eval(jsonString);

第二种方式:JSON.parse() 比较常用

1
2
jsonString = '[{"id":1,"name":"冲冲冲"},{"id":2,"name":"冲不动了"}]'; 
var jsonObject = JSON.parse(jsonString);

JS中的this

this代表当前对象,特指:谁调用就指向谁

prototype原型

在js中每一个对象都有一个prototype属性(_proto_),这个属性是一个引用,这个医用指向对象的原型

js中_proto_的原型是共享的

可以通过它来设置公共的模板

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script>
function Person(name,age){
this.name = name;
this.age = age;
alert('你叫什么:'+this.name+' 年龄:'+this.age);
}
var p1 = new Person('古力果',20);
var p2 = new Person('具岛直子',20);
console.debug(p1.__proto__);
console.debug(p2.__proto__);
alert(p1._proto_ === p2.__proto__);
p1.__proto__.name = '小丑';
console.debug(p1.__proto__.name);
console.debug(p2.__proto__.name);
</script>

匿名函数

如名字一般,匿名函数就是没有定义名字的函数

1
2
3
4
5
6
7
function (){
console.debug("王家卫");
}
//自调用:自己调用自己
(function (){
console.debug("自调用");
})()

使用场景一:

在回调方法中使用匿名函数

回调方法:定义一个方法先不执行,当某些条件满足后再执行

使用场景二:解决域污染问题

jQuery的Ajax

jQuery的Ajax对象语法如下:

$.get(‘请求路径’,’发送的参数’,function(){回调函数},’接收的数据格式’)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>回调函数</title>
<script src="js/jquery-3.2.1.js"></script>
<script>// 回调方法
$(function() {
$("button").on("click", function() {
alert("执行回调...");
// ajax 请求使用的也是回调函数
$.get("index.html", function(data) {
// 服务器响应了数据后 执行的方法
console.debug(data);
alert("ajax 请求回调");
});
});

});</script>
</head>
<body>
<button value="点我">点我</button>
</body>
</html>

闭包

1
2
3
4
5
6
7
8
9
<script>
function come(){
var a = 10
console.debug(a);
}
come();
a = 53;
come();
</script>

jQuery事件委派机制

绑定,对象自己,绑定事件,执行

委派,对象的事件,交给它的父元素,进行监听,通过父元素操作对象

实现:给动态添加的对象,绑定的事件

语法:父元素对象.on(“事件名”,”动态对象的选择器字符串”,回调方法function(){})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery委派机制</title>
<script src="js/jquery-3.2.1.js"></script>
<script>
$(function(){
//点击添加
$("#btn").on("click",function(){
$("body").append("<h2>会沉寂吗</h2>");
});

//点击删除
$("body").on("click","h2",function(){
$(this).hide();
});

});

</script>
</head>
<body>
<button id="btn">添加</button>
<h2>我正在远航</h2>
<h2>我正在远航</h2>
<h2>我正在远航</h2>
<h2>我正在远航</h2>
</body>
</html>
❤赏点钱让我买杯快乐水8❤