1.闭包
1.1 闭包简单来说就是能够读取其他函数内部变量的函数
1.2 闭包是指有权访问另一个函数作用域中变量的函数,创建闭包的最常见的方式就是在函数内创建另一个函数,通过另一个函数来访问这个函数的局部变量,总的来说就是利用闭包可以突破作用链域
1.3 闭包优缺点:使用闭包是为了设置私有的方法和变量,优点是可以避免全局变量的污染,缺点是会常驻内存,增大内存使用量,使用不当很容易造成内存泄漏。
1.4 在js中函数即闭包,只有函数才会产生作用域的概念,闭包的最大用处一个是可以读取函数内部变量,另一个就是这些变量始终保存在内存中,再一个就是封装对象的私有属性和私有方法。
闭包总结:闭包可以实现封装和缓存,但是内存消耗太大,使用不当会造成内存溢出的问题
实例:
function fn(){
var a = 10; // fn的活动对象之中;
return function(){ //匿名函数的活动对象;
alert(a);
}
}
var b = fn();
b(); //10
2.作用域链、JavaScript、原型链
2.1 作用域链的作用是保证执行环境有访问的变量和函数是有序的,
作用域链的变量只能向上访问,且访问到window对象时终止,向下访问变量是不被允许的。
2.2 每一个对象呢都会在内部初始化一个属性,就是prototype
(原型),当我们访问一个对象的属性时,如果这个对象内部不存在这个属性,那么就会去prototype
里寻找,这个prototype
又有自己的prototype
,就这样找下去,直到找到为止或者window
终止。这也就是原型链的概念
2.3 原型与原型链的关系:instance.constructor.prototype=instance.__proto__
3.事件代理
3.1 事件代理,又被称为事件委托。是js中常用绑定事件的技巧。
3.2 事件代理:就是把原有需要的事件委托给父元素,让父元素来监听,事件代理的原理是DOM元素的事件冒泡。
3.3 使用事件代理的好处:可以提高性能,可以大量节省内存占用,减少注册事件,例如在ul
上代理所有li
的click
事件就非常方便
4.js的继承
想要继承就必须要提供一个父类,(继承谁,提供继承的属性)
// 父类
function person(name){ //给构造函数添加参数
this.name=name;
this.sum=function(){
alert(this.name)
}
}
person.prototype.age=20 //给构造函数添加了原型属性
4.1 构造继承
// 借用构造函数继承
function con(){
person.call(this,'jie'); //重点
this.age=18;
}
var cons=new con()
console.log(cons.name); //jie
console.log(cons.age); //18
console.log(cons instanceof person) //false
4.2 原型链继承
// 原型链继承
function son(){
this.name='jie'
}
son.prototype=new person() //主要
var son1=new son()
console.log(son1.age) //20
/* instanceof 判断元素是否在另一个元素的原型链上
son1继承了person的属性,返回true*/
console.log(son1 instanceof person)
4.3 实例继承
// 实例继承
function Cat(name){
var ins=new person()
ins.name='tom'
return ins
}
var cat=new Cat()
console.log(cat.name) //tom
console.log(cat.age) //20
console.log(cat instanceof person) //true
console.log(cat instanceof Cat) //false
5.this的理解
this
总是指向函数的直接调用者(而非间接调用者);如果有new
关键字,this
指向new
出来的那个对象;在事件中,this
指向触发这个事件的对象,特殊的是IE
中,attachEvent
中this
总指向全局对象window
6.事件模型
w3c中定义事件发生经历的三个阶段:捕获阶段,目标阶段,冒泡阶段
6.1 冒泡事件:当你使用事件冒泡时,子级元素先触发,父级元素后触发
阻止冒泡:在w3c
中,使用stopPropagation()
方法;但在IE中设置cancelBubble=true
6.2 捕获事件:当你使用事件捕获时,父级元素先触发,子级元素后触发
阻止捕获:在w3c
中,使用preventDefault()
方法,在IE中设置window.event.returnValue=false
7.new操作符的理解
创建一个空对象,并且this
变量引用该对象,同时还继承了该函数的原型;属性和方法被加入到this
引用的对象中;新创建的对象由this
所引用,并且最后隐式返回this
8.Ajax原理
8.1 Ajax原理简单来说就额是在用户和服务器之间加了一个中间层(AJAX引擎),通过XmlHttpRequest对象来向服务器发送异步请求,从服务器获得数据,然后用JavaScript来操作DOM从而更新页面;使用户操作与服务器响应异步化。这其中最关键的一步就是从服务器获得请求数据。
8.2 Ajax的过程只涉及JavaScript、XMLHttpRequest和DOM。XMLHttpRequest是Ajax的核心机构
var xhr = new XMLHttpRequest() //创建链接
xhr.open('get','sanji.php?p_id=0') //链接到服务器
xhr.send() //发送请求
xhr.onload = function () { //接受请求
var data = JSON.parse(xhr.responseText)
// console.log(data)
var options='<option value="">--请选择--</option>'
// var options=''
for(var i=0;i<data.length;i++){
var option=`<option value="${data[i].id}">${data[i].title}</option>`
options+=option
}
document.querySelector('#province').innerHTML=options
}
8.3 Ajax优缺点 优点:通过异步模式,提升了用户体验,优化了浏览器与服务器之间的传输,减少了不必要的数据往返,减少宽带占用,ajax在客户端运行,承担了一部分本来由服务器承担的工作,减少了大量用户量的的服务器负载;ajax还可以实现动态不刷新(也就是局部刷新)
缺点:安全问题ajax暴露了与服务器交互的细节,对搜索引擎的支持较弱,不容易调试
9.解决跨域问题
在想解决跨域之前要先了解一下浏览器的同源政策。同源政策目的是为了保证用户信息的安全,防止恶意的网站窃取数据,那同源政策是什么?所谓同源是指"协议+域名+端口"三者相同,如果有一个不相同则非同源
9.1 使用ajax的json
页面
$(document).ready(function(){
var url='http://localhost:8080/WorkGroupManagment/open/getGroupById"
+"?id=1&callback=?';
$.ajax({
url:url,
dataType:'jsonp',
processData: false,
type:'get',
success:function(data){
alert(data.name);
},
error:function(XMLHttpRequest, textStatus, errorThrown) {
alert(XMLHttpRequest.status);
alert(XMLHttpRequest.readyState);
alert(textStatus);
}});
});
json格式
{
"message":"获取成功",
"state":"1",
"result":{"name":"工作组1","id":1,"description":"11"}
}
9.2 nginx代理解决跨域
要配置nginx来代理页面和后端的请求路径
结尾:总的来说就是书写一下加深自己的记忆,多看多写总会理清的。读书百遍其义自见,熟能生巧嘛