面向对象
- 备份指针
// this在事件指令中指向事件源
// that称为备份指针
var that = this;
面向对象三大特性
封装
继承
多态
面向对象的使用
- 容错处理
var option = option || {};
闭包
- 当一个内部函数被其外部函数之外的变量引用时，就形成了一个闭包。
function A(){
function B(){
console.log("Hello XMG!");
}
return B;
}
var b = A();
b();//Hello XMG!
技法最大目的: 全局变量私有化
闭包的最大用处有两个：
可以读取函数内部的变量
让这些变量的值始终保持在内存中。
所有的全局变量都是Windows属性. 所以可以文件各个地方拿到
!!!在函数内部的变量前面没有var用来声明就代表是全局变量
函数嵌套的变量取值采用就近原则 :
变量的查找过程(查找过程只能从内部向外)
先在现作用域中查找(遍历)
去父级-> 祖父级作用域查找
直到找到全局变量(Window属性)后还木有找到就报错
缺点: 类似于递归, 浪费性能. 所以建议尽量不要使用全局变量
引入闭包 : 用于保存局部变量. 但是不能乱用, 过多容易导致内存泄漏.
闭包的技术优点：
不污染全局空间！
内部所有的临时变量执行完毕都会释放不占内存。
可以保存全局数据。
更新复杂变量。
闭包写法
(function(){})();
;(function(){})(); //标准写法
+(function(){})();
-(function(){})();
？(function(){})();
itin 快捷键 for in循环
作用域链条
封闭作用域
- 目的 : 全局变量私有化
高级排他--- 闭包写法
// 记录选中的元素
var seleNode = null;
for(var i = 0; i<list.length; i++){
var li = list[i];
if(i == 0){
seleNode = li;
}
li.onmouseover = function () {
// 排他
// 清空上一次的选中
seleNode.className = '';
// 2.设置当前
this.className = 'current';
// 3.记录当前选中
seleNode = this;
}
}
})(document,window);
高级函数节流
低级: 定时器(降低某个函数调用的频率)
使用了闭包, 具有扩展性
闭包传参. 封装后可以直接调用.
function fn(callback,del) {
var timer = null;
//降低这个函数调用的频率(使用了闭包).
return function () {
clearTimeout(timer);
timer = setTimeout(function () {
if(callback) callback();
},del);
}
}
//只要onresize或者onscroll时调用即可.
window.onresize = fn(function () {
console.log(1);
},200);
window.onscroll = fn(function () {
console.log(2);
},300);
闭包传参
- 实现功能, 点击图片使其每次移动5px
var imgs = document.getElementsByTagName('img');
imgs[0].onclick = fn(-5);
function fn(speed) {
var num = 0;
return function () {
num += speed;
this.style.left = num + 'px';
}
}
imgs[1].onclick = fn(5);
构造函数
所有的构造函数有一个特点：首字母大写
在js中我们可以理解为只要执行以后能够返回新的对象的函数就是构造函数
构造函数技巧的最大目的：创造完全独立的对象，互相之间不影响
关键词new
将一个函数变成对象并返回, 在这个函数的内部将this指向函数本身
只有在和构造函数配合的时候才有用
相当于可以化简构造函数自己创造对象和返回对象的步骤。
原型属性prototype
- 有能力给对象添加属性和方法
- 不太明白用法...
