1、提供一种方法同时检测基本类型与引用类型
functipn toType(value){
return ({}).toString.call(value).match(/\s[a-zA-Z]/)[1].toLowerCase();
}
toType('1111') //"string"
toType(['1','2']) //"array"
toType(new Date); //"date"
toType(function foo() {console.log("Test")}); // "function"
2、垃圾回收机制
两种策略来实现垃圾回收:标记清除 和 引用计数
*标记清除:运行时给所有变量添加上标记,结束时去掉;此后,如果变量再被标记则表示此变量准备被删除
*引用计数:跟踪记录每个值被引用的次数,当声明一个变量并将一个引用类型的值赋给该变量时,这个值的引用次数就是1,如果这个值再被赋值给另一个变量,则引用次数加1。相反,如果一个变量脱离了该值的引用,则该值引用次数减1,当次数为0时,就会等待垃圾收集器的回收。这个方式存在一个比较大的问题就是循环引用,就是说A对象包含一个指向B的指针,对象B也包含一个指向A的引用。 这就可能造成大量内存得不到回收(内存泄露),因为它们的引用次数永远不可能是 0 。
举个例子
//这段代码为什么会造成内存泄露?
window.onload = function(){
var el = document.getElementById("id");
// 执行这段代码的时候,将匿名函数对象赋值给el的onclick属性;然后匿名函数内部又引用了el对象,存在循环引用,所以不能被回收;
el.onclick = function(){
alert(el.id);
}
}
//解决方法:
window.onload = function(){
var el = document.getElementById("id");
var id = el.id; //解除循环引用
el.onclick = function(){
alert(id);
}
el = null; // 将闭包引用的外部函数中活动对象清除
}
3、bind与apply、call的比较
//改变this指向func
func.call (this , arg1, arg2 );
func.apply (this , [arg1 , arg2])
//也是可以改变函数体内 this 的指向
var foo = {
bar : 1,
eventBind: function(){
$('.someClass' ).on ('click' ,function (event ) {
/* Act on the event */
console. log( this. bar); //1
}.bind (this ));
}
}
*apply 、 call 、bind 三者都是用来改变函数的this对象的指向的;
*apply 、 call 、bind 三者第一个参数都是this要指向的对象,也就是想指定的上下文;
*apply 、 call 、bind 三者都可以利用后续参数传参;
*bind是返回对应函数,便于稍后调用(回调执行的时候);apply、call则是立即调用 。
4、hash、router
//hash
location.hash则可以用来获取或设置页面的标签值。比如http://domain/#admin的location.hash=”#admin”
//router
*hash形式,当url的hash发生改变时,触发hashchange注册的回调,回调中去进行不同的操作,进行不同的内容的展示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>router</title>
</head>
<body>
<ul>
<li><a href="#/">turn white</a></li>
<li><a href="#/blue">turn blue</a></li>
<li><a href="#/green">turn green</a></li>
</ul>
<script>
function Router() {
this.routes = {};
this.currentUrl = '';
}
Router.prototype.route = function(path, callback) {
this.routes[path] = callback || function(){};
};
Router.prototype.refresh = function() {
this.currentUrl = location.hash.slice(1) || '/';
this.routes[this.currentUrl]();
};
Router.prototype.init = function() {
window.addEventListener('load', this.refresh.bind(this), false);
window.addEventListener('hashchange', this.refresh.bind(this), false);
};
window.Router = new Router();
window.Router.init();
var content = document.querySelector('body');
// change Page anything
function changeBgColor(color) {
content.style.backgroundColor = color;
}
Router.route('/', function() {
changeBgColor('white');
});
Router.route('/blue', function() {
changeBgColor('blue');
});
Router.route('/green', function() {
changeBgColor('green');
});
</script>
</body>
</html>
*History API来处理。
链接:https://www.renfei.org/profile/
5、SPA
http://web.jobbole.com/86558/