JS高级语法

最新推荐文章于 2024-09-16 16:54:46 发布

fueen

最新推荐文章于 2024-09-16 16:54:46 发布

阅读量608

点赞数

分类专栏：其他随笔文章标签： javascript ajax

本文链接：https://blog.csdn.net/f2315895270/article/details/101036478

版权

其他随笔专栏收录该内容

25 篇文章 8 订阅

订阅专栏

我的网站：欢迎大家访问

JS高级

对象

在JS中一切皆对象

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

JS中true和false的判断

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

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

<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创建对象)

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

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

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

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

var j = {
	"name":"萨特",
	"age":"18"
};

属性和方法的调用

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

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

<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

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

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

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

JS中的this

this代表当前对象，特指：谁调用就指向谁

prototype原型

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

js中_proto_的原型是共享的

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

<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>

匿名函数

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

function (){
	console.debug("王家卫");
}
//自调用：自己调用自己
(function (){
	console.debug("自调用");
})()

使用场景一：

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

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

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

jQuery的Ajax

jQuery的Ajax对象语法如下：

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

<!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>

闭包

<script>
    function come(){
        var a = 10
        console.debug(a);
    }
    come();
    a = 53;
    come();
</script>

jQuery事件委派机制

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

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

实现：给动态添加的对象，绑定的事件

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

<!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>