2018前端必考面试题总结10

JS定义类或对象

//1.原始方式
var oCar=new Object;
oCar.color="blue";
oCar.doors=4;
oCar.showColor=function(){
	alert(this.color);
};

//2.工厂方式
function Car(){
	var ocar=new Object;
	ocar.color="blue";
	ocar.doors=4;
	ocar.showColor=function(){
		document.write(this.color)
	};
	return ocar;
}
var car1=Car();
var car2=Car();
/*调用此函数时将创建对象，并赋予它所有的属性和方法。使用
 * 此函数可以创建2个属性完全相同的对象，当然我们也可以通
 * 过给他传递参数来来改变属性
 */
function Car(color,door){
	var ocar=new Object;
	ocar.color=color;
	ocar.doors=door;
	ocar.showColor=function(){
		document.write(this.color)
	};
	return ocar;
}

var car3=Car("red",4);
var car4=Car("blue",4);
car3.showColor();
car4.showColor();

//3.构造函数方式
function Car(color,door){
	this.color=color;
	this.doors=door;
	this.showColor=function(){
		alert(this.color);
	};
}
var car5=new Car("red",4);
var car6=new Car("blue",4);
/*可以看到构造函数方式在函数内部没有创建对象，是用this关键字。
 * 因为在调用构造函数时已经创建了对象，而在函数内部只能用this来访问对象属性。
 */


//4.原型方式
function Car(){}

Car.prototype.color="red";
Car.prototype.doors=4;
Car.prototype.showColor=function(){
	alert(this.color);
}
var car7=new Car();
var car8=new Car();
/*首先定义了一个空函数，然后通过prototype属性来定义对象的属性。
 * 调用该函数时，原型的所有属性都会立即赋予要创建的对象，所有该函数的对象
 * 存放的都是指向showColor()的指针。
 * 原型方式有个很严重的问题就是当属性指向的是数组时，创建的所有对象都指向同一个数组
 */


//5.混合的构造函数/原型方式
function Car(color,door){
	this.color=color;
	this.doors=door;
	this.arr=new Array("aa","bb");	
}
Car.prototype.showColor=function(){
	alert(this.color);
}
var car9=new Car("red",4);
var car10=new Car("blue",4);
car9.arr.push("cc");
alert(car9.arr);
alert(car10.arr);

//6.动态原型方式
function Car(color,door){
	this.color=color;
	this.doors=door;
	this.arr=new Array("aa","bb");
	if(typeof Car._initialized=="undefined"){
		Car.prototype.showColor=function(){
			alert(this.color);
		};
		car._initialized=true;//使用该变量来判断是否已经给原型赋予了方法，这样可以保证该方法只创建了一次
	}
}

//7.混合工厂方式
function Car(){
	var ocar=new Object();
	ocar.color="red";
	ocar.doors=4;
	ocar.showColor=function(){
		alert(this.color);
	};
	return ocar;
}

this关键字的指向

在函数执行时，this总是指向调用该函数的对象，有调用对象则指向该对象，无调用对象则指向全局对象window。

//1.有对象就指向调用对象
var myObj1={value:1};
myObj1.getValue=function(){
	console.log(this.value);//输出1
	console.log(this);//输出该object
};
myObj1.getValue();

//2.没有对象就指向全局对象window
var myObj2={value:2};
myObj2.getValue=function(){
	var foo=function(){
		console.log(this.value);//输出undefined
		console.log(this);//输出window对象
		//foo虽然定义在getValue函数内，但并没有绑定在任何对象上，故在调用时，指向全局对象window
	}
	foo();
	return this.value;
}
console.log(myObj2.getValue());//输出1

//3.用new构造函数，指向新对象
var Person=function(){
	this.age=10;
}
var person1=new Person();
console.log(person1.age);//输出10

//4.通过apply或call或bind来改变this的指向
var myObj3={value:100};
var foo=function(){
	console.log(this);
};
foo();//输出window对象
foo.apply(myObj3);//输出myObj3对象
foo.call(myObj3);//输出myObj3对象
var newFoo=foo.bind(myObj3);
newFoo();//输出myObj3对象

异步ajax的优缺点都有什么？

优点：
（1）最大的优点就是页面无刷新，用户的体验非常好。
（2）使用异步方式与服务器通信，具有更加迅速的响应。
（3）可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力，减轻服务器和带宽的负担，节约空间和带宽租用成本。ajax的原则是“按需取数据”，可以最大程度的减少冗余请求，和响应对服务器造成的负担。
（4）基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。
缺点：
（1）ajax不支持浏览器back按钮
（2）安全问题，ajax暴露了与服务器交互的细节。
（3）对搜索引擎的支持比较弱
（4）多个请求同时触发时，由于回调时间不确定，会造成混乱，避免这种混乱需要复杂的判断机制。
（5）不容易调试

JavaScript如何实现继承？

大多OO语言都支持两种继承方式：接口继承和实现继承，而JS中无法实现接口继承，只支持实现继承，而且其实现继承主要是依靠原型链来实现。

//1.原型链：利用原型让一个引用类型继承另外一个引用类型的属性和方法。
function SuperType(){
	this.property=true;
}
SuperType.prototype.getSuperValue=function(){
	return this.property;
}
function subType(){
	this.property=false;
}
subType.prototype=new SuperType();//继承SuperType
subType.prototype.getSubValue=function(){
	return this.property;
}
var instance=new subType();
console.log(instance.getSuperValue());//false


//2.借用构造函数
function SuperType(){
	this.colors=["red","blue","green"];
}
function subType(){
	SuperType.call(this);//继承SuperType
}
var instance1=new subType();
instance1.colors.push("black");
console.log(instance1.colors);//(4) ["red", "blue", "green", "black"]
var instance2=new subType();
console.log(instance2.colors);//(3) ["red", "blue", "green"]

//3.组合继承
function SuperType(name){
	this.name=name;
	this.colors=['red','blue','green'];
}
SuperType.prototype.sayName=function(){
	console.log(this.name);
}
function subType(name,age){
	SuperType.call(this,name);
	this.age=age;
}
subType.prototype=new SuperType();//继承方法
subType.prototype.constructor=subType;
subType.prototype.sayAge=function(){
	console.log(this.age);
}
var instance3=new subType("zhangsan",18);
instance3.colors.push("black");
console.log(instance3.colors);//(4) ["red", "blue", "green", "black"]
instance3.sayName();//zhangsan
instance3.sayAge();//18
var instance4=new subType("lisi",20);
console.log(instance4.colors);//(3) ["red", "blue", "green"]
instance4.sayName();//lisi
instance4.sayAge();//20

//4.原型式继承
var person={
	name:"zhangsan",
	friends:['lisi','wangwu','zhaoliu']
};
var anotherPerson=Object.create(person);
anotherPerson.name="lilei";
anotherPerson.friends.push("Rob");
var yetAnotherPerson=Object.create(person);
yetAnotherPerson.name="Linda";
yetAnotherPerson.friends.push("Amy");
console.log(person.friends);//(5) ["lisi", "wangwu", "zhaoliu", "Rob", "Amy"]

//5.寄生式继承
function createAnother(o){
	var clone=Object(o);
	clone.sayHi=function(){
		alert("hi");
	};
	return clone;
}
var person={
	name:"zhangsan",
	friends:['lilei','hanmeimei','xiaoming']
};
var anotherPerson=createAnother(person);
anotherPerson.sayHi();

//6.寄生组合式继承
function inheritProperty(subtype,supertype){
	var prototype=Object(supertype.prototype);
	prototype.constructor=subtype;
	subtype.prototype=prototype;
}
function SuperType(name){
	this.name=name;
	this.colors=['red','blue','green'];
}
SuperType.prototype.sayName=function(){
	alert(this.name);
};
function subType(name,age){
	SuperType.call(this,name);
	this.age=age;
}
inheritProperty(subType,SuperType);
subType.prototype.sayAge=function(){
	alert(this.age);
}

对JSON的理解

json是一种数据交换的文本格式，而不是一种编程语言，用于读取结构化数据。目的是取代繁琐笨重的XML格式。
json有两种结构：对象和数组
（1）对象：对象在JS中表示为“{}”括起来的内容。
（2）数组：数组在JS 中是中括号“[]”括起来的内容。
在数据传输流程中，json是以文本，即字符串的形式传递的，而JS操作的是json对象，所以，json对象和json字符串之间的相互转换是关键。

var str='{"name":"zs","sex":"man"}';//json字符串
var obj={"name":"zs","sex":"man"};//json对象

var obj1=eval('('+str+')');//由json字符串转化为json对象
console.log(obj1);
var obj2=JSON.parse(str);//由json字符串转化为json对象
console.log(obj1);

var last=JSON.stringify(obj);//将JSON对象转化为JSON字符串
console.log(last);