面经练习（十二）

1.异步加载js的方法

1.defer
2.async
3.手动生成script标签

        function loadScript(url, callback) {
            var script = document.createElement('script');
            script.src = url;
            document.head.appendChild(script);
            //ie兼容
            if (script.readyState) {
                script.onreadystatechange = function() {
                    if (script.readyState == 'complete' || script.readyState == 'loaded') {
                        callback();
                    }
                }
            } else {
                script.onload = function() {
                    callback();
                }
            }
        }
        loadScript('./tool.js', function() {
            text();
        })

tool.js:

function text() {
    console.log('hello world');

}

2.Object.assign()方法

第一层对象为深拷贝，其它层为浅拷贝

3.Object.is()方法

4.css animation动画暂停

animation-play-state: paused;

5.JSON.stringify输出题

let foo={}
let obj = {}
foo[obj]='hello'

console.log(JSON.stringify(foo))

6.什么是单页面应用，优缺点是什么

单页面应用
为什么单页面对SEO不友好
可以使用SSR（服务端渲染）优化单页面的SEO

7.function prototype输出

    function Parent() {
      this.a = 'Parent'
    }
    
    function Child() {
      this.a = 'Child'
    }
    
    Function.prototype.print = function() {
      console.log(this.a)
    }
    
    Parent.print()//undefined
    //Parent本身没有print这个方法，会随着原型链寻找，
    //在Function的原型上找到了print方法，并执行
    //实际上，执行print方法的是Function 不是Parent
    //所以this.a指的是全局上的a 为undefined
    //下面同理
    
    Child.print()//undefined
    
    var p = new Parent()
    //找不到print 因为p的原型链上只有Object.prototype
    p.print()//报错

8. meta标签都有什么属性

meta标签的作用有：搜索引擎优化(SEO)，定义页面使用语言，自动刷新并指向新的页面，实现网页转换时的动态效果，控制页面缓冲，网页定级评价，控制网页显示的窗口等。

meta标签都有什么属性

charset name http-equiv

9.从输入url到页面加载的全过程

从输入url到页面加载的全过程

10.两道输入输出题：

var a = 1;
    var func = function(a) {
        a = 2;
        func2(a);
    }
    var func2 = function(a) {
        a = 3;
    }
    func(a);
    console.log(a); //1
     var obj = { val : 1 };
    var func3 = function(obj) {
        obj.val = 2;
        func4(obj.val);
    }
    var func4 = function(val) {
        val = 3;
    }
    func3(obj);
     console.log(obj);  //{val = 2}

这道题 func（a）传的是基本类型的值的复制，函数体内修改这个值，不影响全局变量a的值，所以输出为1

func3（obj）传的是obj的地址，所以在func3中 obj.val = 2修改的就是全局变量obj的val值，但是传入func4的是 obj.val的值而不是obj地址，所以func4对结果没有影响

    let a =5;
    class A{
        a=10;
        fn(){
            console.log(this.a);
        }
    }  
    const b = new A().fn;
    //这道题 执行顺序是 new A（） 然后执行 .fn（）
    //new A() 返回class A这个实例
    //new A() 表示 class A实例中的 fn方法
    b();                
    //表示执行 fn这个方法
    //由于执行fn方法，但是没有传递a参数 所以报错

11 vue中watch的高级用法（deep和immediate）

vue中watch的高级用法（deep和immediate）