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，唯一性

作用域

• 每个函数都有一个作用域，比如我们创建了一个函数，函数里面又包含了一个函数，那么现在就有三个作用域，这样就形参了一个作用域链

• 特点： 先在自己的变量范围中查找，如果找不到，就会沿着作用域链网上找。

作者：陇锦
链接：https://juejin.im/post/5b2f4eb9e51d4558cc35c289
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。