06.27 2018前端面试总结js部分

定义函数的方法

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

}

function () {

} //匿名函数
2.字面量
var fn=function(){

}

3.通过函数对象方式
var x=new function () {

}

函数的调用

//1、函数名();
function getSum() {
console.log(this) //window
}
getSum()

//2、自调用(function(){})()

(function() {
console.log(this) //window
})();

//3、变量名()
var getSum=function() {

创建实例的方法

//1.json方法

let obj={
name:"张山",
age:"11",
call:function(){
alert(1)
}
};
obj.call();

//2.构造函数方法
function Obj(){
\t\tthis.name = "张三",
\t\tthis.sex = "男",
\t\tthis.phone = 17603514842,
\t\tthis.call = function(){
\t\t\talert(1);
\t\t}
\t}
\tlet obj = new Obj();
\tobj.call();
\t
//3.object方法
\tvar obj = new Object();
\tobj.name = "张三";
\tobj.sex = "男";
\tobj.call = function(){
\t\talert(this.name);
\t};
\tobj.call();

JavaScript的数据类型

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

想要学习或者了解web前端编程的小伙伴,可以私信小编【学习】即可免费领取一套系统web前端学习教程！

函数重载 以及解析顺序

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指针

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" }

JavaScript原型 原型链

JavaScript有几种类型的值？

任何对象转为布尔值，都为得到 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-

节点操作

作用域