2018前端面试总结js部分【中】

定义函数的方法

1.
        语法：function 函数名(参数1[,参数2]……){
        	函数体;
        	[return];   //返回值
        }
        function fx() {
            
        }
        
        function () {
            
        }  //匿名函数

2.字面量 
        var fn=function(){
        
        }
        
3.通过函数对象方式

        var x=new function () {
                
        }
复制代码

函数的调用

• 这里的this指向window

//1、函数名();
     function getSum() {
        console.log(this) //window
     }
     getSum()
     
//2、自调用(function(){})()
           
     (function() {
        console.log(this) //window
     })();
     
//3、变量名()     
     var getSum=function() {
        console.log(this) //window
     };
     getSum()
复制代码

创建实例的方法

//1.json方法
    
    let obj={
        name:"张山",
        age:"11",
        call:function(){
            alert(1)
        }
    };
    obj.call();
    
//2.构造函数方法

    function Obj(){
    		this.name = "张三",
    		this.sex = "男",
    		this.phone = 17603514842,
    		this.call = function(){
    			alert(1);
    		}
    	}
    	let obj = new Obj();
    	obj.call();    
    	
//3.object方法

    	var obj = new Object();
    	obj.name = "张三";
    	obj.sex = "男";
    	obj.call = function(){
    		alert(this.name);
    	};
    	obj.call();
复制代码

JavaScript的数据类型

• string number boolean null underfind object typeof (7种)

什么是闭包，闭包有什么缺点 什么情况下用闭包

• 闭包就是函数嵌套函数，可以理解为定义在函数内部的函数，本质上闭包是函数内部和外部连接的桥梁，但如果父函数定义的变量没有被子函数引用就不叫闭包
• 闭包让函数的变量都保存在内存中，内存消耗变大。使用不当会造成内存泄漏。
• 用途：读取函数内部变量 让变量保存到内存中 设置私有变量和方法

函数重载 以及解析顺序

        var m= 1, j = k = 0; 
        function add(n) { 
            return n = n+1; 
      } ;
        y = add(m); 
        function add(n) { 
            return n = n + 3; 
        } ;
    z = add(m); 
复制代码

• 以上代码都会输出4，js中没有函数重载的概念，由于定义了连个相同的函数，所以后面的会覆盖前面的
  所以调用add结果都是一样的因此真正到执行代码的时候，也就是第一次调用add(),输出的当然是4,第二次执行add()同样输出4.

js函数调用时加括号和不加括号的区别.不加括号相当于把函数代码赋给等号左边,加括号是把函数返回值赋给等号左边

    var color='green';
    var text={
        color:'blue',
        getColor:function() {
          var color='red';
          alert(this.color)
        }
    };
    var getColor=text.getColor;
    getColor();
    text.getColor();
    //结果为 green blue
复制代码

关于this指针

• 直接调用的话 this指向window对象（这里如果在函数内部声明一个name也指向的window对象）

    
   var name='张三';
   function sayname() {
     console.log(this.name)
   };
   sayname();
复制代码

• 对象函数调用 this指向对象本身

    var name='Bob';
    function sayName(){
        console.log(this.name);
    };
    var object={'name':'vicky'};
    object.sayName=sayName;          //sayName没有写成sayName(),表示不是执行函数，而是将sayName的指针赋值给object.sayName
    object.sayName();               //由于对象函数调用方法，this指向对象本身，所以输出:'vicky'
    sayName();                     //由于全局环境调用sayName()等同于window.sayName();输出:'Bob'
复制代码

• 构造函数调用 this指针指向新创建的对象

    function object(name){
        this.name=name;
        console.log(this);      //由于this指向新创建的对象本身，输出：Object { name: "vikcy" }
        console.log(this.name);  //输出:"vicky"
    }
    var myObject=new Object('vicky');  //由于this指向新创建的对象本身
复制代码

JavaScript原型 原型链

• 每个对象都会在其内部初始化一个属性，就是prototype(原型)，当我们访问一个对象的属性时，
  如果这个对象内部不存在这个属性，那么他就会去prototype里找这个属性，这个prototype又会有自己的prototype，
  于是就这样一直找下去，也就是我们平时所说的原型链的概念。

JavaScript有几种类型的值？

• 栈：原始数据类型（Undefined，Null，Boolean，Number、String）
• 堆：引用数据类型（对象、数组和函数） 两种类型的区别是：存储位置不同； 原始数据类型直接存储在栈(stack)中的简单数据段，占据空间小、大小固定，属于被频繁使用数据，所以放入栈中存储； 引用数据类型存储在堆(heap)中的对象,占据空间大、大小不固定。如果存储在栈中，将会影响程序运行的性能；引用数
  据类型在栈中存储了指针，该指针指向堆中该实体的起始地址。当解释器寻找引用值时，会首先检索其在栈中的地址，取
  得地址后从堆中获得实体

任何对象转为布尔值，都为得到 true（切记！在JS中，只有 0，-0，NaN，""，null，undefined 这六个值转布尔值时，结果为 false）

    
   var x = new Boolean(false);
   if (x) {
     alert('hi');
   }
   var y = Boolean(0);
   if (y) {
     alert('hello'); 
   }
   
   //结果只会显示 hi

复制代码

变量提升

• 在某作用域，声明变量语句会默认解析为在该作用域的最开始就声明了。

    var a=5;
    function foo() {
      a=2;
      console.log(a);
      var a;
    }
    foo();
    //结果会输出2
复制代码

• 我们可以看到，var a;语句并没有刷新a的值，因为解析编译的时候，’var a;’被提前了.所以我们看的a是内部变量a而不是外面已赋值的5。

  var a=5;
  function foo() {
    console.log(a);
    var a=1;
  }
  foo();
  //结果输出underfind
复制代码

• 由于变量提升的原因a已经声明，所以没有输出我们再外部声明的5，但是a=1;并没有被提前执行.所以变量提升这个概念，只适用于声明变量的
  语句，而变量赋值的语句并不能被提前

    foo();
    function foo(){
        console.log(1);
    }
    //TypeError: foo is not a function
复制代码

• 这里的foo被提升了，所以这里并没有发生ReferenceError，但是这个时候foo并没有被赋值，所以发生了TypeError。这段代码经过提升后是这样的：

    var foo;
    foo();
    foo=function fooo() {
      console.log(1)
    }
复制代码

• 我们习惯将‘var a=5’看做一条声明。其实这里两条语句的简写，‘var a’和‘a = 3’,并且其实这两条语句是两个不同类型的语句，是由两个不同
  的组件完成的。前一句是在编译阶段执行，后一句是在运行阶段执行。所以，不管’var a’写在哪里，都会在代码本身被执行之前处理。这一过程很像
  是代码的一个移动过程，所以被大家称为“变量提升”。

浏览器从输入url到加载完成 都发生了什么

1、浏览器地址栏输入url

2、浏览器会先查看浏览器缓存--系统缓存--路由缓存，如有存在缓存，就直接显示。如果没有，接着第三步

3、域名解析（DNS）获取相应的ip

4、浏览器向服务器发起tcp连接，与浏览器建立tcp三次握手

5、握手成功，浏览器向服务器发送http请求，请求数据包

6、服务器请求数据，将数据返回到浏览器

7、浏览器接收响应，读取页面内容，解析html源码，生成DOM树

8、解析css样式、浏览器渲染，js交互

常见的浏览器内核

谷歌：-webkit- 火狐：-moz- ie：-ms- 欧鹏：-o- qq浏览器：双内核 -webkit- -ms-

节点操作

• 创建节点
  createDocumentFragment() //创建一个DOM片段
  createElement() //创建一个具体的元素
  createTextNode() //创建一个文本节点

• 添加、移除、替换、插入
  appendChild() //添加
  removeChild() //移除
  replaceChild() //替换
  insertBefore() //插入

• 查找
  getElementsByTagName() //通过标签名称
  getElementsByName() //通过元素的Name属性的值
  getElementById() //通过元素Id，唯一性

作用域

• 每个函数都有一个作用域，比如我们创建了一个函数，函数里面又包含了一个函数，那么现在就有三个作用域，这样就形参了一个作用域链
• 特点： 先在自己的变量范围中查找，如果找不到，就会沿着作用域链网上找。