js常见的面试题

1.什么是工厂模式
简单工厂模式是由一个方法来决定到底要创建哪个类的实例, 而这些实例经常都拥有相同的接口. 这种模式主要用在所实例化的类型在编译期并不能确定, 而是在执行期决定的情况。 说的通俗点,就像公司茶水间的饮料机,要咖啡还是牛奶取决于你按哪个按钮。
工厂模式定义一个用于创建对象的接口,这个接口由子类决定实例化哪一个类。该模式使一个类的实例化延迟到了子类。而子类可以重写接口方法以便创建的时候指定自己的对象类型。 2.什么是面向对象, 面向对象有什么特点
面向对象是一种对现实世界理解和抽象的方法,是计算机编程技术发展到一定阶段后的产物。一种思维模式。
1. 抽象:抓住核心问题
2. 封装:即把能够实现功能的函数写成封装起来,在面向对象里叫做方法。简单来说就是把实现功能的函数写成方法。
3. 继承:继承的意思是,在实现同一种功能的前提下,新对象可以使用就对象的属性和方法。
4. 多态:一个变量在引用不同类型的情况下的不同状态。多态开发在开发组件和模块化开发的时候能节省很多资源。

3.构造函数有几种继承方式,分别是什么
1、原型链继承:

function Person(name,age,sex){ this.name = name; this.age = age; this.sex= sex; } Person.prototype.sleep = function(){} Person.prototype.play = function(){} Person.prototype.eat = function(){ console.log("1122") } var p1 = new Person() function Man(beard,larynx,name,age,sex){ Person.apply(this,[name,age,sex]) this.beard = beard; this.larynx = larynx; } /* 1、多了很多无用的属性---->直接使用原型链继承的时候可能把属性和方法都继承过来了 用原型链继承的时候可能把属性放在了prototype上面 2、少了一个constructor */ Man.prototype = new Person(); Man.prototype.work = function(){} //实例化 var chenliang = new Man(10,"很大","陈亮","40","男"); console.log(chenliang) console.log(p1)
2、混合继承 //人类 function Person(name,age,sex){ this.name = name; this.age = age; this.sex= sex; } Person.prototype.sleep = function(){} Person.prototype.play = function(){} Person.prototype.eat = function(){ console.log("1122") } var p1 = new Person() //p1.__proto__:原型对象 == Person.prototype 原型对象 function Man(beard,larynx,name,age,sex){ Person.apply(this,[name,age,sex]) this.beard = beard; this.larynx = larynx; } /* 1、多了很多无用的属性 2、少了一个constructor

3、寄生继承 //人类 function Person(name,age,sex){ this.name = name; this.age = age; this.sex= sex; } Person.prototype.sleep = function(){} Person.prototype.play = function(){} Person.prototype.eat = function(){ console.log("1122") } var p1 = new Person() function Man(beard,larynx,name,age,sex){ Person.apply(this,[name,age,sex]) this.beard = beard; this.larynx = larynx; } /* 1、多了很多无用的属性 2、少了一个constructor */ function fn(){} fn.prototype = Person.prototype; //原型链继承 Man.prototype = new fn(); Man.prototype.constructor = Man; Man.prototype.work = function(){} //实例化 varchenliang= newMan(10,"很大","陈亮","40","男"); console.log(chenliang) console.log(p1) 3.Es6中如何声明一个类, 如何实现继承 class Person{ constructor(name,age){ this.name = name; this.age = age; } eat(){ console.log('111') } show(){ console.log('222') } }
class Man extends Person{ constructor(beard,name,age){ super(name,age) this.beard = beard; } work(){} } var p2 = new Man(10,"陈亮",20); console.log(p2) 4.书写ajax的四步
第一步:创建一个ajax 函数 -> var xhr = XMLRequest;
第二步:open();三个参数,第一个参数为请求方式,一般为get或者post;第二个参数为请求地址;第三个参数为是否异步,默认true为异步;
第三步:send()->发送请求,默认为null;
第四步:监听是否请求成功
xhr.onreadystatechange = function(){
if(xhr.readystate==4&&xhr.status == 200){
var json = xhr.responsText;;
json = JSON.parse(json);
}
} 5.数据中存在student_score表,字段分别为id(自增长), student_name(学生姓名), score(分数), mark(备注),书写sql 1.查询表格所有数据
Selecte * from ·student_score· 2.把分数大于90分的学生,备注修改为优秀 3.插入一条学生的成绩,姓名:李楠,分数:68分,备注:良好 4.删除备注为退学或者分数为0分的数据 6.Php连接数据库分几步,每一步做什么?
第一步:连接数据库
var sql = new nyspli(localhost,root,’’,数据库名);
判断连接是否成功
if(sql = connect->error){
die(连接成功)
}
第二步:书写sql语句;
第三部:执行sql语句;
第四部:获取执行语句后返回的数据; 7.什么是静态网站? 什么是动态网站?
(1)静态页面指的是由html,css, js组成的静态页面,内容基本不会发生变化,渲染速度快,不用通过访问服务器。
(2.)动态页面:数据通过服务器,由数据库获取数据,每次dom树渲染数据时,须通过服务器获取数据再渲染到页面上,需要不断优化来提高用户的体验感,这样更加灵活,增加了,页面的多样性,使内容更加丰富。 什么是前后端分离? 什么是后台渲染页面?
1.前后端分离:前后端之间使用 JSON 来交流,前台和后台两个开发团队之间使用 API 作为契约进行交互。以便前后台选择各自的框架不相互影响。举个例子:当后台开发人员选择 Java 的时候,前台可以不用 JSP 来编写前端页面,可以继续使用前端框架Vue/React/Angular等框架进行开发,同样的前端选择React,也不影响后台使用什么样的框架。
2.后端渲染 前端请求,后端用后台模板引擎直接生成htm,前端接受到数据之后,直接插入页面。 好处:前端耗时少,即减少了首屏时间,模板统一在后端。前端(相对)省事,不占用客户端运算资源(解析模板) 坏处:占用服务器资源。 8.前后端分离有什么好处?
WEB 前后端分离三个最大的优点在于:1:最大的好处就是前端JS可以做很大部分的数据处理工作,对服务器的压力减小到最小2:后台错误不会直接反映到前台,错误接秒较为友好3:由于后台是很难去探知前台页面的分布情况,而这又是JS的强项,而JS又是无法独立和服务器进行通讯的。所以单单用后台去控制整体页面,又或者只靠JS完成效果,都会难度加大,前后台各尽其职可以最大程度的减少开发难度。 9.后端渲染有什么好处?
好处:前端耗时少,即减少了首屏时间,模板统一在后端。前端(相对)省事,不占用客户端运算资源(解析模板) 坏处:占用服务器资源。 11.状态码2xx开头的通常指什么意思?4xx的什么意思?5xx的什么意思?
1XX临时/信息响应
2XX成功
3XX重定向
4XX客户端/请求错误
5XX服务器错误 Get请求和Post请求的区别?
(1).get是从服务器上获取数据,post是向服务器传送数据。
(2).get是把参数数据队列加到提交表单的ACTION属性所指的URL中,值和表单内各个字段一一对应,在URL中可以看到。post是通过HTTP post机制,将表单内各个字段与其内容放置在HTML HEADER内一起传送到ACTION属性所指的URL地址。用户看不到这个过程。
(3). 对于get方式,服务器端用Request.QueryString获取变量的值,对于post方式,服务器端
(4).get传送的数据量较小,不能大于2KB。post传送的数据量较大,一般被默认为不受限制。但理论上,IIS4中最大量为80KB,IIS5中为100KB。
(5).get安全性非常低,post安全性较高。
(6).HTTP 定义了与服务器交互的不同方法,最基本的方法是 GET 和 POST。 9.用Request.Form获取提交的数据。
10.当你用ajax调用一个接口, 如何查看该接口返回的数据?如何查看该请求发送的数据? 11.获取dom元素的几种方式,哪种方式获取的是集合,哪种获取的是单个元素。哪些有兼容问题?
01.document.getElementById();//通过id获取获取元素id名,在实际开发中较少使用,选择器中多用class id一般只用在顶级层存在 不能太过依赖id
02. .document.getElementByTagName();//通过标签名获取元素(集合)通过class获取元素(集合)ie9失效
03.document.getElementByClassName();类名
04.document.getElementsByName();name属性值,一般不用
05.document.querySelector();//css选择符模式,返回与该模式匹配的第一个元素,结果为一个元素;如果没找到匹配的元素,则返回null;
06.document.querySelectorAll();//css选择符模式,返回与该模式匹配的所有元素,结果为一个类数组 12.检测数据类型的终极模式(用call的形式) 13.varname="ling"; functionsayName(){

vara={

name:"zhang", sayName:getName }; functiongetName(){ console.log(this.name); } getName();//this.name=?ling a.sayName();//this.name=?zhang getName.call(a);//this.name=?zhang }

sayName();

16.数组去重方式。(最少三种)
第一种: 最简单数组去重法 /* * 新建一新数组,遍历传入数组,值不在新数组就push进该新数组中 * IE8以下不支持数组的indexOf方法 * */ functionuniq(array){ vartemp = []; //一个新的临时数组 for(vari = 0; i < array.length; i++){ if(temp.indexOf(array[i]) == -1){ temp.push(array[i]); } } returntemp; } varaa = [1,2,2,4,9,6,7,5,2,3,5,6,5]; console.log(uniq(aa));
第二种去重: /* * 速度最快, 占空间最多(空间换时间) * * 该方法执行的速度比其他任何方法都快, 就是占用的内存大一些。 * 现思路:新建一js对象以及新数组,遍历传入数组时,判断值是否为js对象的键, * 不是的话给对象新增该键并放入新数组。 * 注意点:判断是否为js对象键时,会自动对传入的键执行“toString()”, * 不同的键可能会被误认为一样,例如n[val]-- n[1]、n["1"]; * 解决上述问题还是得调用“indexOf”。*/ functionuniq(array){ vartemp = {}, r = [], len = array.length, val, type; for(vari = 0; i < len; i++) { val = array[i]; type = typeofval; if(!temp[val]) { temp[val] = [type]; r.push(val); } elseif(temp[val].indexOf(type) < 0) { temp[val].push(type); r.push(val); } } returnr; } varaa = [1,2,"2",4,9,"a","a",2,3,5,6,5]; console.log(uniq(aa));
第三种去重 /* * 给传入数组排序,排序后相同值相邻, * 然后遍历时,新数组只加入不与前一值重复的值。 * 会打乱原来数组的顺序 * */ functionuniq(array){ array.sort(); vartemp=[array[0]]; for(vari = 1; i < array.length; i++){ if( array[i] !== temp[temp.length-1]){ temp.push(array[i]); } } returntemp; } varaa = [1,2,"2",4,9,"a","a",2,3,5,6,5]; console.log(uniq(aa)); 17. 简述jsonp的原理,为何可以实现跨域?
jsonp 是利用srcipt中src属性不受同源策略的影响,可以访问其他不同源的网页的数据;
第一步:创建一个srcipt标签;
第二步:srcipt的添加一个src属性;有一个callback的回调函数;
第三步:将srcipt标签插入页面上;
第四部:srcipt标签执行后删除;
原文地址:https://www.cnblogs.com/yunshangwuyou/p/9299859.html