Web前端最全javaScript（二十二）面向对象(1)，大厂前端面试总结+详细解答

js基础

1)对js的理解？
2)请说出以下代码输出的值？
3)把以下代码，改写成依次输出0-9
4)如何区分数组对象，普通对象，函数对象
5)面向对象、面向过程
6)面向对象的三大基本特性
7)XML和JSON的区别？
8)Web Worker 和webSocket？
9)Javascript垃圾回收方法？
10)new操作符具体干了什么呢？
11)js延迟加载的方式有哪些？
12)WEB应用从服务器主动推送Data到客户端有那些方式？

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

let co1={

name:“co1”,

base:function(){return ‘hh’}

}

let co2={

name:“co2”,

base:function(){return ‘hh2’}

}

为了简化重复代码，首先演变了一种叫做“工厂模式”

function Co(name,age) {

return {

name:name,

age:age,

sayName:function(){

console.log(this.name);

}

}

}

var aa=Co(‘aa’,16),

ab=Co(‘ab’,2);

这种模式的优点是，大大简化了重复代码，但是有一个问题，这个是不是对象实例**，出现了对象识别问题；**

因此继续演变成“构造函数”模式，通过new来实例化对象

function Co1(name,age) {

this.name=name;

this.age=age;

this.sayName=function(){console.log(this.name);}

}

var aa=new Co1(‘aac’,16),

ab=new Co1(‘abc’,2);

构造函数模式的优点是：实例化的对象都是指向的构造函数，而且继承自Object，可以调用Object的方法

但是这个构造函数模式有一个问题，如下

console.log(aa.sayName===ab.sayName); //false

同样的实例化，但是不同实例的同名函数不同

因此，继续演变，成了**“原型模式”，**

function Co2() {}

Co2.prototype.name=“asd”;

Co2.prototype.age=12;

Co2.prototype.sayName=function(){console.log(this.name)}

var ac=new Co2(),

ad=new Co2();

console.log(ac.sayName===ad.sayName);

这边的不同函数，就解决了不同实例的同名函数问题；

这种模式的优点：除了简化代码，实例对象之外，每个实例化对象不仅可以拥有自身的属性，还可以去追溯原型上的属性，假如有就用自己的，假如没有，就用原型的

function Co2() {}

Co2.prototype.name=“asd”;

Co2.prototype.age=12;

Co2.prototype.sayName=function(){console.log(this.name)}

var ac=new Co2(),

ad=new Co2();

console.log(ac.sayName===ad.sayName);

ac.name=“asdff” //这时的name属性就是asdff了

delete ac.name; //删除name属性后，name属性又会去取原型上的name属性

进一步简化：将大量prototype写在一个对象里

function Co3() {}

Co3.prototype={

name:123,

age:123,

sayName:function(){console.log(this.name)}

}

var ac=new Co3();

console.log(ac.constructor === Co3); //fasle

console.log(ac.constructor === Object); //true

但是这个又出现了一个新的问题，简化后的写法指向的不是构造函数，而直接是顶层对象Obejct，也可以说没有指向父级，直接指向了爷爷级

那么修改：

function Co3() {}

Co3.prototype={

constructor:Co3, //设置constructor为当前构造函数

name:123,

age:123,

sayName:function(){console.log(this.name)}

}

var ac=new Co3();

console.log(ac.constructor === Co3); //fasle

console.log(ac.constructor === Object); //true

那么所有的原型模式都存在一个缺点：传址类型字段都会相互修改，如下例

传址：不是原始值类型，是对象类型的都是传址的

function Co3() {}

Co3.prototype={

constructor:Co3,

name:123,

age:123,

book:[],

sayName:function(){console.log(this.name)}

}

let ad=new Co3(),

ae=new Co3();

ad.book.push(123);

console.log(ad.book); //[123]

console.log(ae.book); //[123]

我们没有对ae进行修改，但是因为ad的push修改，导致了原型被修改，原型一旦被修改，那么所有以原型为实例化的对象都遭到了修改

因此（重点）

取各方的优势，将构造函数写法和原型模式写法组合

function Co4(name,age){

this.name=name;

this.age=age;

this.book=[]

}

Co4.prototype={

constructor:Co4,

sayName:function(){

console.log(this.book)

}

}

let af=new Co4(‘qqq’,20),

ag=new Co4()

af.book.push(999)

console.log(af.book); //[999]

console.log(ag.book); //[]

将所有传值类型的参数的全部放到构造函数中，解决了相互影响，将所有方法放在原型也就是prototype中

文末

我一直觉得技术面试不是考试，考前背背题，发给你一张考卷，答完交卷等通知。

首先，技术面试是一个 认识自己 的过程，知道自己和外面世界的差距。

更重要的是，技术面试是一个双向了解的过程，要让对方发现你的闪光点，同时也要 试图去找到对方的闪光点，因为他以后可能就是你的同事或者领导，所以，面试官问你有什么问题的时候，不要说没有了，要去试图了解他的工作内容、了解这个团队的氛围。

前端面试题汇总

JavaScript

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

性能

linux

前端资料汇总

性能

linux

前端资料汇总