JS
1.call() 和 apply():
作用:扩充函数赖以运行的作用域;
这两个函数都是在特定的作用域中调用函数,实际上等于设置函数体内this对象的值;
apply()接收两个参数:一个是在其中运行函数的作用域,另一个是参数数组,第二个参数可以是Array实例,也可以是arguments对象;
function sum(num1,num2){
return num1 + num2;
}
function callSum1(num1,num2){
return sum.apply(this,arguments); //传入arguments对象
}
function callSum2(num1,num2){
return sum.apply(this,[num1,num2]); //传入数组
}
call()和apply()方法的作用相同,接收参数的方式不同,传递给函数的参数必须逐个列举出来;
function sum(num1,num2){
return num1 + num2;
}
function callsum(num1,num2){
return sum.call(this,num1,num2); //注意所有参数都是直接传递给函数
}
扩充函数运行的作用域:
window.color = "red";
var o = {color: "blue"}
function sayColor(){
alert(this.color);
}
sayColor(); //red
sayColor.call(this); //red
sayColor.call(window); //red
sayColor.call(o); //blue
上述的例子中先将sayColor()放在了对象o中,然后通过o来调用sayColor()函数;
其他的扩展作用域的方法:
ES5中bind()方法,创建一个函数的实例,this值会被绑定到传给bind()函数的值;
window.color = "red";
var o = {color: "blue"}
function sayColor(){
alert(this.color);
}
var objectSayColor = sayColor.bind(o); //sayColor()里的this表示对象o,
objectColor(); //blue
sayColor()函数调用bind()并传入对象o,创建objectSayColor()函数,此时this代表对象o,即使是在全局变量下,函数
2.$(document).ready的原理:不是使用轮询法,使用window.onload
DOMContentLoaded,直接绑定在Document下,页面文档完全加载并解析完毕之后,会触发DOMContentLoaded事件，HTML文档不会等待样式文件,图片文件,子框架页面的加载(load事件可以用来检测HTML页面是否完全加载完毕(fully-loaded))。
但是IE下不支持这个属性,使用轮询法;
兼容不支持该事件的浏览器
在IE8中,可以使用readystatechange事件来检测DOM文档是否加载完毕.在更早的IE版本中,可以通过每隔一段时间执行一次document.documentElement.doScroll("left")来检测这一状态，因为这条代码在DOM加载完毕之前执行时会抛出错误(throw an error)。
3.事件委托,事件冒泡,事件捕获:
(1)事件委托:针对"事件处理程序过多"的问题的解决方案
利用事件冒泡,只指定一个事件处理程序,可以管理某一类型的所有事件;
百度一面
1.<!Doctype html>
告诉浏览器文档渲染的类型;
2.[ ]==false; //true [ ] === false; //true ({}) == false; //false
0==[]; //ture 0 == " "; //true
NaN == NaN; //false
undefined == null; // true
undefined === null; //false
3.IE下如何触发标准盒子模型;
IE在怪异模式下显示为IE盒子模型,标准模式下为W3C标准盒子模型;
其他浏览器都是标准盒子模型
例如，如下会触发quirks模式：
文件类型描述缺失或不完整时；
遇到一个HTML 3或者更早的文档时；
使用HTML 4.0 Transitional或Frameset的文件类型描述且系统标识符（URI）不存在时；
在DOCTYPE声明之前出现SGML注释或者其它无法识别的内容时；
文档任何地方有错误时；
注释符相遇时出现末尾文字重复；
Internet Explorer 6也会在DOCTYPE声明之前出现XML声明时使用quirks模式。
各种解决方法已被制定以迫使Internet Explorer 5以及更早版本使用W3C盒模型显示网页。这些解决方法一般是利用Internet Explorer的CSS选择器作用的无关的缺陷以从浏览器中隐藏某些规则。这些解决方法中，最为熟知的是由Tantek Çelik，一个工作于IE for Mac时发现这个主意的前微软员工，开发的“盒模型hack”。它涉及到为IE for Windows指定一个宽度声明，随后使用另一个为CSS-兼容的浏览器指定的宽度重写它。第二条声明通过利用IE for Windows解析CSS规则的其它缺陷而从该浏览器中隐藏。
3.vertical-align设置元素的垂直对齐方式;
baseline 默认。元素放置在父元素的基线上。
sub 垂直对齐文本的下标。
super 垂直对齐文本的上标
top 把元素的顶端与行中最高元素的顶端对齐
text-top 把元素的顶端与父元素字体的顶端对齐
middle 把此元素放置在父元素的中部。
bottom 把元素的顶端与行中最低的元素的顶端对齐。
text-bottom 把元素的底端与父元素字体的底端对齐。
length
4.实现水平垂直居中:
html:
<div class="one"></div>
css:
.one{
display: flex;
align-item: center;
content-justfiy: center;
}
常规的做法:
<div class="main">
<div class="div">123</div>
</div>
.main{
display: table;
}
.div{
display:table-cell;
vertical-align: middle;
text-align:center;
}
BFC布局:
5.svg和canvas的区别;
6.输入一串英文句子,把每个单词的首字母大写并输出;
正则匹配:
function replaceFirstUpper(str){
str.toLowerCase();
str.replace(/\b(\w)|\s(\w)/g,function(m){
return m.toUpperCase();
});
}
携程电面:
1.null 和 undefined 的区别;
2.NaN;
3.怎样找出一个父元素是否包含子元素
nodeName和tagName;
4.jQuery中如何选择类选择器和ID选择器
5.将多维数组转化成一个一维数组;
var mult_arr = [1,23,[1,3],[1,3[1[2,4]]]];
function forEachArr(arr){
var result = [ ];
for(var i = 0,len = arr.length; i < len;i++){
if(arr[i] instanceof Array){
arguments.callee(forEachArr);
}else{
result.push(arr[i]);
}
return result;
}
}
console.log(forEachArr(arr));
7.什么是Ajax和JSON，它们的优缺点。
Ajax是异步JavaScript和XML，用于在Web页面中实现异步数据交互。
优点：
可以使得页面不重载全部内容的情况下加载局部内容，降低数据传输量
避免用户不断刷新或者跳转页面，提高用户体验
缺点：
对搜索引擎不友好（
要实现ajax下的前后退功能成本较大
可能造成请求数的增加
跨域问题限制
JSON是一种轻量级的数据交换格式，ECMA的一个子集
优点：轻量级、易于人的阅读和编写，便于机器（JavaScript）解析，支持复合数据类型（数组、对象、字符串、数字）
8.vertical-align 属性设置元素的垂直对齐方式,对应的值
baseline 默认。元素放置在父元素的基线上。
sub 垂直对齐文本的下标。
super 垂直对齐文本的上标
top 把元素的顶端与行中最高元素的顶端对齐
text-top 把元素的顶端与父元素字体的顶端对齐
middle 把此元素放置在父元素的中部。
bottom 把元素的顶端与行中最低的元素的顶端对齐。
text-bottom 把元素的底端与父元素字体的底端对齐。
length
% 使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。
inherit 规定应该从父元素继承 vertical-align 属性的值。
8.对CSS3的理解:
CSS3是层叠样式表语言的最新发展，旨在扩展CSS2.1。它带来了很多期待已久的新事物，比如圆角，阴影，渐变，跳变或动画，以及新的布局，如多列，灵活的框或网格布局。
对HTML5的理解:
语义化的标签,新应用程序接口(API):
实时二维绘图
Canvas API：有关动态产出与渲染图形、图表、图像和动画的API[24]
定时媒体播放[25]
HTML5音频与视频：HTML5里新增的元素，它们为开发者提供了一套通用的、集成的、脚本式的处理音频与视频的API，而无需安装任何插件
离线存储数据库（离线网络应用程序）[26]
编辑[27]
拖放[28]
跨文档通信[29]
通讯／网络
Communication APIs：构建实时和跨源（cross-origin）通讯的两大基础： 跨文档通讯（Cross Document Messaging）与XMLHttpRequest Level 2。
浏览历史管理[30]
MIME和协议进程时表头登记[31][32]
微数据[33]
网页存储[34]
HTML5语义化的好处:
1.去掉或样式丢失的时候能让页面呈现清晰的结构：
2.屏幕阅读器（如果访客有视障）会完全根据你的标记来“读”你的网页.
3.使用标签语义化可以使PDA、手机等设备可能无法像普通电脑的浏览器一样来渲染网页（通常是因为这些设备对CSS的支持较弱）.
4.搜索引擎的爬虫也依赖于标记.
HTTP状态码:
1XX:请求已被接受,需要继续处理,临时响应
2XX:请求已被服务器成功接收,理解,接受;
3XX:客户端采取进一步操作才能完成请求;
4XX:客户端的错误
403forbidden:服务器已经理解请求,但是拒绝执行;
404not found请求失败,希望请求的资源未在服务器上发现
5XX:服务器在处理请求时发生异常;
505服务器不支持或者拒绝支持在请求中使用的http版本;
5.跨域:由于同源策略的影响.a.com域名下的文件无法访问b.com或者是c.a.com下的域名下的对象
解决跨域的方法:
(1)document.domain+iframe;必须是主域名相同的时候才可以
(2)动态创建script标签
(3)利用iframe和location.hash
(4)window.name实现跨域数据传输
(5)HTML5中的postMessage
(6)利用flash
6.GET和POST请求的区别:
GET - 从指定的资源请求数据。
POST - 向指定的资源提交要被处理的数据
GET 方法
请注意，查询字符串（名称/值对）是在 GET 请求的 URL 中发送的：
/test/demo_form.asp?name1=value1&name2=value2
POST 方法
请注意，查询字符串（名称/值对）是在 POST 请求的 HTTP 消息主体中发送的：
POST /test/demo_form.asp HTTP/1.1
Host: w3schools.com
name1=value1&name2=value2
有关 GET 请求的其他一些注释： 有关 POST 请求的其他一些注释：
GET 请求可被缓存 POST 请求不会被缓存
GET 请求保留在浏览器历史记录中 POST 请求不会保留在浏览器历史记录中
GET 请求可被收藏为书签 POST 不能被收藏为书签
GET 请求不应在处理敏感数据时使用
GET 请求有长度限制 POST 请求对数据长度没有要求
GET 请求只应当用于取回数据
1.this的用法
来自阮一峰:
(1)作为单纯的函数调用的时候,代表全局变量;
(2)作为方法调用的时候代表上级对象;
(3)作为构造函数调用的时候,代表新对象;
(4)apply,call()调用,作用是改变函数的调用对象,第一个参数表示改变后的调用这个函数的对象,this指的就是这第一个参数
(1)Global context;
console.log(this.document === document); // true
// In web browsers, the window object is also the global object:
console.log(this === window); // true
this.a = 37;
console.log(window.a); // 37
(2)Function context;//取决于函数是如何被调用的
Inside a function, the value of this depends on how the function is called.
Simple call
function f1(){
return this;
}
f1() === window; // global object
(3)As an object method
When a function is called as a method of an object, its this is set to the object the method is called on.
3.CSS优先级
优先级顺序
内联样式 > ID 选择器 > 伪类 > 属性选择器 > 类选择器 > 元素(类型)选择器 > 通用选择器（*）
4.XML和JSON
3.XML和JSON的优缺点对比
(1).可读性方面。
JSON和XML的数据可读性基本相同，JSON和XML的可读性可谓不相上下，一边是建议的语法，一边是规范的标签形式，XML可读性较好些。
(2).可扩展性方面。
XML天生有很好的扩展性，JSON当然也有，没有什么是XML能扩展，JSON不能的。
(3).编码难度方面。
XML有丰富的编码工具，比如Dom4j、JDom等，JSON也有json.org提供的工具，但是JSON的编码明显比XML容易许多，即使不借助工具也能写出JSON的代码，可是要写好XML就不太容易了。
(4).解码难度方面。
XML的解析得考虑子节点父节点，让人头昏眼花，而JSON的解析难度几乎为0。这一点XML输的真是没话说。
(5).流行度方面。
XML已经被业界广泛的使用，而JSON才刚刚开始，但是在Ajax这个特定的领域，未来的发展一定是XML让位于JSON。到时Ajax应该变成Ajaj(Asynchronous Javascript and JSON)了。
(6).解析手段方面。
JSON和XML同样拥有丰富的解析手段。
(7).数据体积方面。
JSON相对于XML来讲，数据的体积小，传递的速度更快些。
(8).数据交互方面。
JSON与JavaScript的交互更加方便，更容易解析处理，更好的数据交互。
(9).数据描述方面。
JSON对数据的描述性比XML较差。
(10).传输速度方面。
JSON的速度要远远快于XML。
4.闭包:
闭包就是嵌套在函数里面的内部函数，并且该内部函数可以访问外部函数中声明的所有局部变量、参数和其他内部函数。当该内部函数在外部函数外被调用，就生成了闭包。（实际上任何函数都是全局作用域的内部函数，都能访问全局变量，所以都是window的闭包）
;()();可以立即执行,避免变量污染,但是要是闭包内引用类型的数据在闭包外被使用的话,那么这个闭包就无法释放,一直占用内存,前面的语句加分号的理由:为什么在前面加一个分号，其原因就是防止前面的语句忘记加分号;
6.SVG和canvas的区别:
手写冒泡排序:
网友评论