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

7,984 阅读6分钟

定义函数的方法

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

作用域

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