js前端面试题

1. 简述js面向对象编程
2. promise
3. async await
4. 闭包
5. ajax
6. 原型链
7. 简述TCP三次握手，四次挥手
8. git
9. 后续还会更新…

1.简述js面向对象编程

• 封装、继承、多态

封装

• 需要隐藏一些属性和方法时，就可以将这些属性方法封装起来，通过外部特定的接口（公共方法）进行调用。

function Person(name,age){
   	this.name = name;
   	var age =  age;
   	this.show = function(){
   			console.log(this.name,age);
   	}
}
const person = new Person('jack',20);
console.log(person.name); //jack
person.show(); //jack,20

继承

四种继承方法

• 准备一个父类

function Father(){
   this.name = 'jack';
   this.age = 20;
}
Father.prototype.fun1 = function(){
   console.log(this.name + '-' + this.age);
   }

• 1.原型继承

function Son(){
	this.sex = 'man';
}
Son.prototype = new Father(); //将子类的原型指向父类实例或者构造函数
const son = new Son();
son.fun1() // 结果为：undefined-undefined

无法继承到父类的属性

• 2.借用继承

function Son(){
	Father.call(this); //使用call/apply将父类指向子类
	}
	const son = new Son();

无法继承到父类prototype上的属性

• 3.组合继承

function Son(){
	this.sex = 'man';
	Father.call(this); //使用call/apply将父类指向子类
}
Son.prototype = new Father(); //将子类的原型指向父类实例或者构造函数
const son = new Son();
son.fun1() // 输出结果为：jack - 20

结合了两种方法，解决两种方法的缺点

• ES6继承 extends

class Father{
	constructor(){
		this.name = 'jack';
		this.age = 20;
	}
	fun1(){
	console.log(this.name + '-' + this.age);
	}
}
class Son extends Father{
	constructor(name,age){
		super(name,age); //继承父类的属性，使用super定义
	}
}

可以继承父类的所有属性方法

多态

不同的对象执行同一操作，返回不同结果。

function Person(name,age){
		this.name = name;
		var age =  age;
		this.show = function(){
				console.log(this.name+"-"+age);
		}
}
const xiaoming = new Person('小明',20);
const lihua = new Person('李华',18);
xiaoming.show(); //输出结果为：小明-20
lihua.show(); //输出结果为：李华-18

2.promise

promise的出现主要是解决回调地狱问题，比如 ajax 请求 你的 ajax 请求需要另外一个请求的结果作为参数来发送请求，这样就需要一层套一层，有了 promise 就无需嵌套。本质就是分离异步数据获取和业务逻辑。

const p1 = new Promise(function(resovle,reject){  //接收两个参数 resovle 执行成功 reject 执行失败
	if(异步执行成功){
		resolve('success');
	}else{
		reject('error');
	}
});
//当这个 promise 状态发生改变(执行了 resolve 或 reject)就会触发 then()响应处理函数处理后续步骤
// 执行失败则会出入到 catch 中
p1.then(res=>console.log(res)).
	catch(err=>console.log(err));

• Promise.all([p1,p2]).then() 所有promise都完成resovled 才算完成回调。只要有一个reject，回调失败，返回第一个失败的结果。
• Promise.any([p1,p2]) 只要其中的promise有一个完成，就返回那个已经完成的promise（所有都reject了），就返回一个拒绝的promise。
• Promise.race([p1,p2])返回最先执行完成的promise，无论是resovle还是reject。

3.async await

• async await 是对promise的优化

• async 声明函数和普通函数声明没有区别。
• await 等待 如果await 后的promise变为reject，整个async都会被中断。
• async 返回的promise，必须等待所有await后的promise执行完，才会发生状态改变，除非遇到return或是执行错误。
• async await无法捕获错误，使用try-catch捕获错误

async function(){
	try{
		const res1 = await fn()
		const res2 = await fn(res1)
		console.log(res2)
	}
	catch(err){
	console.log(err)
	}
}

4.闭包

• 让函数内部私有的变量可以被函数外部访问到
• 函数每次执行完毕，其中的变量会被全部释放，会被垃圾回收机制回收。闭包利用一个技巧让函数内部的变量在函数执行完毕后不会被回收。
  例子：
• 不使用闭包

function foo1(x){
	var tmp = 3;
	tmp += x;
	console.log(tmp)
}
foo1(2); // 输出结果：5
foo1(2); // 输出结果：5

• 使用闭包

function foo2(x){
	var tmp = 3;
	return function (x){
		tmp  += x;
		console.log(tmp);
	}
}
var bar = foo2(2);
bar(); //输出结果为：5
bar(); //输出结果为：7

5.ajax请求

get请求

var xhr = null;
//兼容IE处理
if(window.XMLHttpRequest){
	xhr = new XMLHttpRequest();
}else{
	xhr = new ActiveObject('Microsoft.XMLHTTP');
}
xhr.open('get',url,async);
xhr.send();
xhr.onload = function(){
	console.log(xhr.response);
}

post请求

var xhr = null;
if(window.XMLHttpRequest){
	xhr = new XMLHttpRequest();
}else{
	xhr = new ActiveObject('Microsoft.XMLHTTP');
}
xhr.open('post',url,async);
xhr.setRequestHeader("content-Type","application/x-www-form-urlencoded");
xhr.send(args); // 发送请求传递的参数
xhr.onload = function(){
	console.log(xhr.response);
}

6.原型与原型链

• 所有引用类型都有一个__proto__(隐式原型)属性，属性值是一个普通的对象
• 所有函数都有一个 prototype(原型)属性，属性值是一个普通对象
• 所有引用类型的__proto__属性指向它的构造函数的 prototype
  例：

var a = [1,2,3]
 a.__proto__ === Array.prototype;

原型链
当访问一个对象的某个属性时，会先对这个对象的本身属性上查找，如果没有，则会去它的__proto__隐式原型上找，即它的构造函数的 prototype，如果还没有找到，就会在构造函数的 prototype 的 proto 中查找，这样一层层向上查找就会形成一个链结构

7.TCP三次握手，四次挥手

三次握手
1.客户端向服务端发送一个数据包。
2.服务端收到后，回传一个数据包表示确认收到。
3.客户端收到回传一个数据包，握手结束，建立连接。
四次挥手
1.主动关闭放向被动关闭方发送一个数据包，告诉被动方，我要与你断开连接了，但我还可以接收数据。
2.被动关闭方收到后，回传一个数据包表示收到。
3.被动方发送一个包，告诉主动方我发送完就不会再发送数据了，但可以接收数据。
4.主动方收到后，发送一个确认收到

8.Git

git init  初始化本地仓库
git add. 将代码提交到暂存区
git commit -m 提交本地仓库
git remote add origin 仓库地址   将本地仓库提交到git
git clone 仓库地址  克隆远程仓库
git checkout -b child  创建子分支
git push origin child:child 将本地仓库推到远程子分支
git checkout child  切换子分支
git merge child 将本地子分支合并到主分支
git push origin master 推送到远程主分支
git pull origin master 将远程仓库拉取到本地