JS高级语法

谁践踏了优雅 2024-04-19 16:23 64阅读 0赞

我的网站：[欢迎大家访问][Link 1]  
![format_png][]

## JS高级 ##

### 对象 ###

在JS中一切皆对象

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

#### JS中true和false的判断 ####

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

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

#### 创建对象 ####

在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.动态调用：对象\[“字段变量”\] 对象\[“方法名”\] (参数)

#### 方法的遍历 ####

使用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_`的原型是共享的

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

### 匿名函数 ###

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

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>

### 闭包 ###

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

[Link 1]: https://www.ifueen.com
[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9zMi5heDF4LmNvbS8yMDE5LzA5LzE4L25IMTNqUy5wbmc?x-oss-process=image/format,png