面试不会问题总结

Posted by Daisydan on March 4, 2017

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/