2020年基础面试题
1. 浏览器
1.1. 常用哪几种浏览器测试？主流浏览器的内核有哪些？
Q1：IE、Safari、Chrome、Mozilla Firefox、Opera
Q2:
1）Trident内核
代表产品为Internet Explorer，又称其为IE内核。Trident（又称为MSHTML），是微软开发的一种排版引擎 。
2）Gecko内核
代表作品为Mozilla Firefox。Gecko是一套开放源代码的、以C++编写的网页排版引擎，是最流行的排版引擎之一，仅次于Trident。使用它的最著名浏览器有Firefox。
3）WebKit内核
代表作品有Safari、Chrome。WebKit是一个开源项目，主要用于Mac OS系统，它的特点在于源码结构清晰、渲染速度极快。缺点是对网页代码的兼容性不高，导致一些编写不标准的网页无法正常显示。
4）Presto内核
代表作品Opera。Presto是由Opera Software开发的浏览器排版引擎，供Opera 7.0及以上使用。
1.2.说说你对浏览器内核的理解？
浏览器内核主要包括以下三个技术分支：排版渲染引擎、 JavaScript引擎，以及其他。
排版渲染引擎：主要负责取得网页的内容(HTML、XML、图像等)、整理信息，以及计算网页的显示方式，然后输出至显示器
JavaScript引擎：是用来渲染JavaScript的，JavaScript的渲染速度越快，动态网页的展示也越快
1.3.一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？
1.浏览器根据请求的URL交给DNS域名解析，找到真实IP；
2.浏览器根据 IP 地址向服务器发起 TCP 连接，与浏览器建立 TCP 三次握手
a.客户端向服务器发送一个建立连接的请求
b.服务器接到请求后发送同意连接的信号
c.客户端接到同意连接的信号后，再次向服务器发送了确认信号，然后客户端与服务器的连接建立成功
3.浏览器发送HTTP请求
浏览器根据 URL 内容生成 HTTP 请求，请求中包含请求文件的位置、请求文件的方式等等；
4.服务器处理请求并返回HTTP报文（HTTP响应报文也是由三部分组成: 状态码, 响应报头和响应报文。）：
a…服务器接到请求后，会根据 HTTP 请求中的内容来决定如何获取相应的 HTML 文件；
b.服务器将得到的 HTML 文件发送给浏览器；
c.在浏览器还没有完全接收 HTML 文件时便开始渲染、显示网页；
d在执行 HTML 中代码时，根据需要，浏览器会继续请求图片、CSS、JavsScript等文件，过程同请求 HTML 。
5.断开连接
1.4.浏览器缓存
1.sessionStorage
优点：可以临时存储，关闭页面标签自动回收，不支持跨页面交互
缺点：只能作为临时存储，不能存储持久化
2.localStorage
优点：用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去删除。
缺点：存在大小限制，IE8以上的IE版本才支持这个属性；目前所有的浏览器中都会把localStorage的值类型限定为string类型，这个在对我们日常比较常见的JSON对象类型需要一些转换
3.cookie
优点：兼容性最好，几乎所有的浏览器都支持
缺点：大小有限制，而且每次发送请求，请求头里会带着cookie一起发过去，现在基本大多数登录的合法性验证都是用cookie验证的
4.userData
优点：出现的时间比sessionStorage要早
缺点：IE专门的存储方式，存储大小有限，单个文件的大小限制是128KB，一个域名下总共可以保存1024KB的文件，文件个数应该没有限制。在受限站点里这两个值分别是64KB和640KB
1.5.你都用过那种性能优化的方法？
1.尽可能的减少http请求
使用CSS Sprites；JS、CSS源码压缩；图片大小控制合适；启用Gzip压缩，CDN托管，data缓存；图片服务器
2.避免在CSS中使用 Expression
Expression（css表达式)又称Dynamic properties(动态属性)
3.添加expire/Cache-Control头
4.少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。
5.图片预加载，将样式表放在顶部，将脚本放在底部，加上时间戳。
6.当需要设置的样式很多时设置className而不是直接操作style。
7.用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。
8.前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数
2. css
2.1. css水平、垂直居中的写法
方案1：position 元素已知宽度
父元素设置为：position: relative;
子元素设置为：position: absolute;
距上50%，据左50%，然后减去元素自身宽度的距离就可以实现
方案2：position transform 元素未知宽度
如果元素未知宽度，只需将上面例子中的margin: -50px 0 0 -50px;替换为：transform: translate(-50%,-50%);
方案3：flex布局
方案4：table-cell布局
示例 ：
因为table-cell相当与表格的td，td为行内元素，无法设置宽和高，所以嵌套一层，嵌套一层必须设置display: inline-block;td的背景覆盖了橘黄色，不推荐使用
<div class="box">
<div class="content">
<div class="inner">
</div>
</div>
</div>
.box {
background-color: #FF8C00;//橘黄色
width: 300px;
height: 300px;
display: table;
}
.content {
background-color: #F00;//红色
display: table-cell;
vertical-align: middle;//使子元素垂直居中
text-align: center;//使子元素水平居中
}
.inner {
background-color: #000;//黑色
display: inline-block;
width: 20%;
height: 20%;
}
2.2.CSS优先级
不同级别：总结排序：!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
1.属性后面加!import 会覆盖页面内任何位置定义的元素样式
2.作为style属性写在元素内的样式
3.id选择器
4.类选择器
5.标签选择器
6.通配符选择器（*）
7.浏览器自定义或继承
同一级别：后写的会覆盖先写的
2.3.css3的新特性
transtion transition-property 规定设置过渡效果的 CSS 属性的名称。
transition-duration 规定完成过渡效果需要多少秒或毫秒。
transition-timing-function 规定速度效果的速度曲线。
transition-delay 定义过渡效果何时开始。
animation属性可以像Flash制作动画一样，通过控制关键帧来控制动画的每一步，实现更为复杂的动画效果。
ainimation实现动画效果主要由两部分组成：
通过类似Flash动画中的帧来声明一个动画；
在animation属性中调用关键帧声明的动画。
translate 3D建模效果
2.4.用纯CSS创建一个三角形
<style>
div {
width: 0;
height: 0;
border-top: 40px solid transparent;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-bottom: 40px solid #ff0000;
}
</style>
</head>
<body>
<div></div>
</body>
2.5.CSS的盒子模型
标准盒子模型：宽度=内容的宽度（content）
低版本IE盒子模型：宽度=内容宽度（content+border+padding)
2.6.清除浮动
clear清除浮动（添加空div法）在浮动元素下方添加空div,并给该元素写css样式 {clear:both;height:0;overflow:hidden;}
给浮动元素父级设置高度
父级同时浮动（需要给父级同级元素添加浮动）
父级设置成inline-block，其margin: 0 auto居中方式失效
给父级添加overflow:hidden 清除浮动方法
万能清除法 after伪类 清浮动（现在主流方法，推荐使用）
2.7.css3实现三栏布局，左右固定，中间自适应
<style>
* {
margin: 0;
padding: 0;
}
.middle,
.left,
.right {
position: relative;
float: left;
min-height: 130px;
}
.container {
padding: 0 220px 0 200px;
overflow: hidden;
}
.left {
margin-left: -100%;
left: -200px;
width: 200px;
background: red;
}
.right {
margin-left: -220px;
right: -220px;
width: 220px;
background: green;
}
.middle {
width: 100%;
background: blue;
word-break: break-all;
}
</style>
</head>
<body>
<div class='container'>
<div class='middle'></div>
<div class='left'></div>
<div class='right'></div>
</div>
</body>
2.8.display:none 和 visibility: hidden的区别
display:none 隐藏对应的元素，在文档布局中不再给它分配空间，它各边的元素会合拢，就当他从来不存在。
visibility:hidden 隐藏对应的元素，但是在文档布局中仍保留原来的空间。
2.9.CSS的继承属性（部分）
font-size：设置字体的尺寸
text-indent：文本缩进
text-align：文本水平对齐
text-shadow：设置文本阴影
line-height：行高
元素可见性：visibility
光标属性：cursor
2.10.sass和less
css预编译，用js的写法写css
相同之处：
Less和Sass在语法上有些共性，比如下面这些：
1、混入(Mixins)——class中的class；
2、参数混入——可以传递参数的class，就像函数一样；
3、嵌套规则——Class中嵌套class，从而减少重复的代码；
4、运算——CSS中用上数学；
5、颜色功能——可以编辑颜色；
6、名字空间(namespace)——分组样式，从而可以被调用；
7、作用域——局部修改样式；
8、JavaScript 赋值——在CSS中使用JavaScript表达式赋值。
不同之处：
3.js
3.1.JavaScript基本类型及其判断
boolean
string
number
null
undefined
symbol
object
function getType(obj) {
const str = Object.prototype.toString.call(obj);
const map = {
'[object Boolean]': 'boolean',
'[object Number]': 'number',
'[object String]': 'string',
'[object Function]': 'function',
'[object Array]': 'array',
'[object Date]': 'date',
'[object RegExp]': 'regExp',
'[object Undefined]': 'undefined',
'[object Null]': 'null',
'[object Object]': 'object'
};
return map[str];
}
3.2…谈一谈深克隆和浅克隆？
B复制了A，A改变，B是否会随之改变
主要针对引用类型数据而言。引用类型数据的名存放在栈内存中，值存放在堆内存中，栈内存通过指针指向堆内存。
浅克隆 只是复制了指针，指针仍然指向原来的内存地址。A改变，内存地址中的内容改变，B会改变
深克隆不仅复制了指针，还复制了指针指向的内容，不再指向原来的内存地址。B不会改变，
浅克隆: 只是拷贝了基本类型的数据，而引用类型数据，复制后也是会发生引用，我们把这种拷贝叫做“（浅复制）浅拷贝”，换句话说，浅复制仅仅是指向被复制的内存地址，如果原地址中对象被改变了，那么浅复制出来的对象也会相应改变。
深克隆： 创建一个新对象，属性中引用的其他对象也会被克隆，不再指向原有对象地址。
JSON.parse、JSON.stringify()
浅克隆：
var obj1={a:1,b:2,c:{d:3,e:4}};
var obj2=[];
for(let i in obj1){
obj2[i]=obj1[i]
}
obj1.b=9;
obj1.c.e=33;
obj1 //{a:1,b:9,c:{d:3,e:33}}
obj2 //{a:1,b:2,c:{d:3,e:4}}
深克隆：
1）采用递归去拷贝所有层级属性
function deep(obj){
var obj2=[];
if(obj && typeof obj==="object"){
for(key in obj){
if(obj.hasOwnProperty(key)){
if(obj[key]&&typeof obj[key]==="object"){obj2[key]=deep(obj[key])}else{obj2[key]=obj[key]}
}
}
}
return obj2;
}
let a={a:1,b:{c:2,d:3}}
let b=deep(a);
a.a=8;
a.b.c=0;
a //{a:8,b:{c:0,d:3}}
b //{a:1,b:{c:2,d:3}}
2）通过JSON对象来实现深拷贝
function deep(obj){
var obj2=JSON.parse(JSON.stringify(obj))
return obj2;
}
let a={a:1,b:{c:4,d:6}}
let b=deep(a)
a.b.d=8;
a //{a:1,b:{c:4,d:8}}
b //{a:1,b:{c:4,d:6}}
3.3.es6的新特性都有哪些？
1）let定义块级作用域变量 没有变量的提升，必须先声明后使用 let声明的变量，不能与前面的let，var，conset声明的变量重名
const 定义只读变量 const声明变量的同时必须赋值，const声明的变量必须初始化，一旦初始化完毕就不允许修改 const声明变量也是一个块级作用域变量 const声明的变量没有“变量的提升”，必须先声明后使用 const声明的变量不能与前面的let， var ， const声明的变量重 const定义的对象\数组中的属性值可以修改,基础数据类型不可以
2）ES6可以给形参函数设置默认值
3）在数组之前加上三个点（…）展开运算符
4）数组的解构赋值、对象的解构赋值
5）箭头函数的特点：箭头函数相当于匿名函数，是不能作为构造函数的，不能被new； 箭头函数没有arguments实参集合,取而代之用…剩余运算符解决； 箭头函数没有自己的this。他的this是继承当前上下文中的this ；箭头函数没有函数原型； 箭头函数不能当做Generator函数，不能使用yield关键字； 不能使用call、apply、bind改变箭头函数中this指向； Set数据结构，数组去重
3.4.闭包
闭包就是在函数里面声明函数，本质上说就是在函数内部和函数外部搭建起一座桥梁，使得子函数可以访问父函数中所有的局部变量，但是反之不可以，这只是闭包的作用之一，另一个作用，则是保护变量不受外界污染，使其一直存在内存中，在工作中我们还是少使用闭包的好，因为闭包太消耗内存，不到万不得已的时候尽量不使用。
3.5.原型和原型链
原型的概念：每一个javascript对象(除null外)创建的时候，就会与之关联另一个对象，这个对象就是我们所说的原型，每一个对象都会从原型中“继承”属性。在JavaScript中，每个函数都有一个prototype属性，这个属性指向函数的原型对象。
proto：这是每个对象(除null外)都会有的属性，叫做__proto__，这个属性会指向该对象的原型。
每个原型都有一个constructor属性，指向该关联的构造函数。
其实原型对象就是通过 Object 构造函数生成的，结合之前所讲，实例的 proto 指向构造函数的 prototype ，所以我们再更新下关系图：
原型链的基本概念：每个构造函数都有一个原型对象，原型对象都包含一个指向构造函数的指针，而实例都包含一个指向原型对象的内部指针。那么假如我们让原型对象等于另一个类型的实例，结果会怎样？显然，此时的原型对象将包含一个指向另一个原型的指针，相应地，另一个原型中也包含着一个指向另一个构造函数的指针。假如另一个原型又是另一个类型的实例，那么上述关系依然成立。如此层层递进，就构成了实例与原型的链条。这就是所谓的原型链的基本概念。
每个对象都可以有一个原型_proto_，这个原型还可以有它自己的原型，以此类推，形成一个原型链。查找特定属性的时候，我们先去这个对象里去找，如果没有的话就去它的原型对象里面去，如果还是没有的话再去向原型对象的原型对象里去寻找… 这个操作被委托在整个原型链上，这个就是我们说的原型链了。
每个实例对象（ object ）都有一个私有属性（称之为 proto ）指向它的构造函数的原型对象（prototype ）。该原型对象也有一个自己的原型对象( proto ) ，层层向上直到一个对象的原型对象为 null。根据定义，null 没有原型，并作为这个原型链中的最后一个环节。
所有对象都有__proto__属性，函数这个特殊对象除了具有__proto__属性，还有特有的原型属性prototype。prototype对象默认有两个属性，constructor属性和__proto__属性。prototype属性可以给函数和对象添加可共享（继承）的方法、属性，而__proto__是查找某函数或对象的原型链方式。constructor，这个属性包含了一个指针，指回原构造函数。
当读取实例的属性时，如果找不到，就会查找与对象关联的原型中的属性，如果还查不到，就去找原型的原型，一直找到最顶层为止。
把所有的对象共用的属性全部放在堆内存的一个对象（共用属性组成的对象），然后让每一个对象的 __proto__存储这个「共用属性组成的对象」的地址。而这个共用属性就是原型，原型出现的目的就是为了减少不必要的内存消耗。而原型链就是对象通过__proto__向当前实例所属类的原型上查找属性或方法的机制，如果找到Object的原型上还是没有找到想要的属性或者是方法则查找结束，最终会返回undefined
3.6.session、cookie、localStorage的区别
相同点 都是保存在浏览器端，且同源的。
不同点
cookie数据始终在同源的http请求中携带，即cookie在浏览器和服务器间来回传递。
而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。
cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。 存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据。
sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。 数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；
localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；
cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。 作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；
localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。
3.7.数组方法和字符串方法
1）数组方法:
push()、 pop()、shift() 、unshift()、sort() 、reverse()、concat() 、slice()、splice()、 join()、
indexOf() 、lastIndexOf()、forEach()、 map()、filter() 、every()、some() 、reduce()、reduceRight()
push(): 把元素逐个添加到数组末尾，可接收任意数量的参数并返回修改后数组的长度。
pop()：数组末尾移除最后一项，减少数组的 length 值，然后返回移除的项。
shift()：删除原数组第一项，并返回删除元素的值；如果数组为空则返回undefined 。
unshift():将参数添加到原数组开头，并返回数组的长度 。
sort()：按升序排列数组项，即最小的值位于最前面，最大的值排在最后面。
reverse()：反转数组项的顺序。
join()：默认用逗号为分隔符，参数是分隔符。
concat() ：将参数添加到原数组中。该方法会先创建当前数组一个副本，然后将接收到的参数添加到这个副本的末尾，最后返回新构建的数组。若没有给concat()方法传递参数，默认情况下复制当前数组并返回，不会改变原数组。
slice()：返回从原数组中指定开始下标到结束下标之间的项组成的新数组。slice()方法可以接受一或两个参数，即要返回项的起始和结束位置。在只有一个参数的情况下， slice()方法返回从该参数指定位置开始到当前数组末尾的所有项。如果有两个参数，该方法返回起始和结束位置之间的项，但不包括结束位置的项。
splice()：数组中最强大的方法，可以实现多种操作。
1）添加：向数组中添加项，参数：起始位置、 0（要删除的项数）和要插入的项。例如，splice(2,0,1,1)会从当前数组的位置 2 开始插入1和1。
2）删除：删除数组中的项，参数：要删除的第一项的位置和要删除的项数。例如， splice(0,2)会删除数组中的前两项。
3）修改：向数组中添加项，且同时支持删除数组中的项，参数：起始位置、要删除的项数和要插入的项。例如，splice (2,1,1,1)会删除当前数组位置 2 的项，然后再从位置 2 开始插入1和1。
splice()方法返回一个数组，该数组中包含从原始数组中删除的项，如果没有删除任何项，则返回一个空数组。
indexOf()：接收两个参数：要查找的项和（可选的）表示查找起点位置的索引。其中， 从数组的开头（位置 0）开始向后查找。
lastIndexOf()：接收两个参数：要查找的项和（可选的）表示查找起点位置的索引。其中， 从数组的末尾开始向前查找。
若没有查找到则返回-1。
forEach()：对数组进行遍历循环，对数组中的每一项运行给定函数。这个方法没有返回值。参数都是function类型，默认有参数，参数分别为：遍历的数组内容；对应的数组索引，数组本身。
map()：对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组。
filter()：对数组中的每一项运行给定函数，返回满足过滤条件组成的数组。
every()：判断数组中每一项都是否满足条件，只有所有项都满足条件，才会返回true。
some()：判断数组中是否存在满足条件的项，只要有一项满足条件，就会返回true。
reduce()、reduceRight()：这两个方法都会实现迭代数组的所有项，然后构建一个最终返回的值。
reduce()方法从数组的第一项开始，依次遍历到最后。而 reduceRight()则从数组的最后一项开始，依次向前遍历到第一项。方法接收两个参数：一个在每一项上调用的函数和基础的初始值。
reduce()和 reduceRight()的函数接收 4 个参数：前一个值（pre）、当前值（cur）、项的索引（index）和数组对象（array）。这个函数返回的任何值都会作为第一个参数自动传给下一项。第一次迭代发生在数组的第二项上，因此第一个参数是数组的第一项，第二个参数就是数组的第二项。
总结：
1.改变原数组：
push()、 pop()、shift()、 unshift()、sort()、 reverse()、splice()
2.原数组不变：
concat()、 join()、slice()、 map()、indexOf() 、lastIndexOf()、filter() 、every()、some()、 reduce()、reduceRight()
2）字符串方法
一、有length 长度
二、字符方法： charAr()、 charCodeAt(); []
都接受一个参数，即基于0字符位置，charAt() 返回的指定单个字符，而charCodeAt() 返回的是指定的单个字符的编码， ES5 规定也可以通过 [] 来访问字符。.
三、字符串操作方法：concat()、slice() 、substr()、substring();
concat() 合并字符串，可以有多个参数；
slice()、 substr() 、 substing() 都是截取bind创建新的字符串；都接收两个参数。第一个参数都是开始位置
slice()、 substing()的第二个参数是结束的位置但不包含该位置，substr() 的第二个参数是截取的长度；他们三个并不会修改原字符串的值
在第二个参数为负数时，他们也都不相同
四、字符串位置方法： indexOf()、lastIndexOf()
都接收两个参数，第一个是要找的字符，第二个是开始找的下标，返回值是找的字符的下标，没找到返回-1，和数组的该方法们几乎一样
五、trim() 方法
该方法会创建一个字符串的副本，并删除前后的空格，对原来的字符没有影响
六、大小写转化方法 toLoweCase()、toUpperCase()、 toLocaleLoweCase() toLocaleUpperCase()
toLocaleLoweCase()、toLocaleUpperCase() 会根据地区的不同进行转换
七、字符串的模式匹配方法： mach()、search()
mach() 和exec() 方法相同， 自接受一个参数，要么是一个正则表达式，要么是一个RegExp对象
3.8.操作节点API总结
元素节点、属性节点、文本节点
1）查找节点
document.getElementById ：根据ID查找元素，大小写敏感，如果有多个结果，只返回第一个
document.getElementsByClassName ：根据类名查找元素，多个类名用空格分隔，返回一个 HTMLCollection 。
document.getElementsByTagName ：根据标签查找元素， * 表示查询所有标签，返回一个 HTMLCollection 。
document.getElementsByName ：根据元素的name属性查找，返回一个 NodeList 。
document.querySelector ：返回单个Node，如果匹配到多个结果，只返回第一个。
document.querySelectorAll ：返回一个 NodeList。
document.forms ：获取当前页面所有form，返回一个 HTMLCollection ；
2）创建节点
createElement：创建元素
createTextNode：创建文本节点
cloneNode ：克隆一个节点
createDocumentFragment ：创建文档碎片，主要是用来存储临时节点，大量操作DOM时用它可以大大提升性能
3）修改节点
appendChild
insertBefore
removeChild
replaceChild
3.9.创建对象的多种方式以及优缺点
- 工厂模式
function createPerson(name) {
var o = new Object();
o.name = name;
o.getName = function () {
console.log(this.name);
};
return o;
}
var person1 = createPerson('kevin');
缺点：对象无法识别，因为所有的实例都指向一个原型
2. 构造函数模式
function Person(name) {
this.name = name;
this.getName = function () {
console.log(this.name);
};
}
var person1 = new Person('kevin');
优点：实例可以识别为一个特定的类型
缺点：每次创建实例时，每个方法都要被创建一次
3. 原型模式
function Person(name) {
}
Person.prototype.name = 'keivn';
Person.prototype.getName = function () {
console.log(this.name);
};
var person1 = new Person();
优点：方法不会重新创建
缺点：1. 所有的属性和方法都共享 2. 不能初始化参数
4. 组合模式
构造函数模式与原型模式双剑合璧。
function Person(name) {
this.name = name;
}
Person.prototype = {
constructor: Person,
getName: function () {
console.log(this.name);
}
};
var person1 = new Person();
优点：该共享的共享，该私有的私有，使用最广泛的方式
缺点：有的人就是希望全部都写在一起，即更好的封装性
5. 寄生构造函数模式
6. 稳妥构造函数模式
3.10.this指向
在执行函数时，如果函数中的this是被上一级的对象所调用，那么this指向的就是上一级的对象；否则指向全局环境。
1）在全局环境下的this，非严格模式下指向window，严格模式下是undefined；
2）上下文对象调用中的 this，
const person = {
name: 'Lucas',
brother: {
name: 'Mike',
fn: function() {
return this.name
}
}
}
console.log(person.brother.fn())
在这种嵌套的关系中，this指向最后调用它的对象，因此输出将会是：Mike
3）bind/call/apply 改变 this 指向
const foo = {
name: ‘lucas’,
logName: function() {
console.log(this.name)
}
}
const bar = {
name: ‘mike’
}
console.log(foo.logName.call(bar))
将会输出mike，这不难理解。但是对 call/apply/bind 的高级考察往往会结合构造函数以及组合式实现继承。实现继承的话题，我们会单独讲到。构造函数的使用案例，我们结合下面的场景进行分析。
4）构造函数和 this
如果构造函数中显式返回一个值，且返回的是一个对象，那么 this 就指向这个返回的对象；如果返回的不是一个对象，那么 this 仍然指向实例。
5）箭头函数中的 this 指向
箭头函数使用this不适用以上标准规则，而是根据外层（函数或者全局）上下文作用域来决定。
3.11. js数据类型
简单数据类型：string、number、Boolean、undefined、null、symbol
复杂数据类型：object、array
symbol是ES6新出现的一种数据类型，有两个特点：
1）它声明的变量具有唯一性
2）不能使用new关键字
数组的原型是Array(0)，Array(0)的原型是Object 对象
3.12 includes()
includes() 方法用来判断一个数组或字符串是否包含一个指定的值，如果是返回 true，否则false。
3.13. 用js在控制台输出一个三角形
1）直角三角形
第一种情况：
for(var i= 1;i<12;i++){
for(var j=1;j<=i;j++){
var c=(i==11||j==i||j==1)? ' *' : '  ';
document.write(c);
}
document.write('<br/>');
}
第二种情况：
for(var i=1;i<=8;i++){
for(var j=1;j<=i;j++){//j 指的是*的个数
document.write("*");
}
document.write('<br>');
}
2）等腰三角形
不公整情况：
function isoscelesTriangle(bottom,height){
for(var i=0;i<height;i++){
for(var j=0;j<bottom;j++){
if(i===bottom || (i<bottom && j===parseInt(bottom/2-bottom*i/(height*2))) || (i<bottom && j===parseInt(bottom/2+bottom*i/(height*2)))){document.write("*")}
else{document.write(" ")}
}
document.write("<br/>")
}
}
isoscelesTriangle(10,12)
4.基础
4.1.script标签的位置
通常，我们会把带有外部文件的的标签（包括CSS文件，JavaScript文件）的引用放在相同的位置，一般是在标签里面。但是在解析过程中一旦遇到多个JavaScript外部文件，就要等到所有的外部文件加载完成后，页面才能完全显示，所以通常我们会把它放在标签里的底部。
4.2.Web 存储
HTML5 提供了两种在客户端存储数据的新方法：
localStorage - 本地存储：没有时间限制的数据存储。容量大小约为20M左右, 存储的数据不会随着用户浏览时会话过期而过期，但会应用户的请求而删除。
sessionStorage - 会话存储：针对一个 session 的数据存储。容量大小约为5M左右,该方式的生命周期为关闭浏览器窗口为止
之前，这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。在 HTML5 中，数据不是由每个服务器请求传递的，而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。对于不同的网站，数据存储于不同的区域，并且一个网站只能访问其自身的数据。HTML5 使用 JavaScript 来存储和访问数据。
4.3.meta元素的用途
1）向浏览器传递网页的一些信息，浏览器根据这些信息规定的方式解析和显示网页。或者说，meta元素规定了浏览器解析和显示网页的方式。
2）向搜索引擎传递网页的一些信息，引导搜索引擎工作。
4.4.超链接访问后hover样式不出现的问题解决办法
关于a标签的四种状态排序问题，有个简单好记的原则，叫做love hate原则，即l（link）ov（visited）e h（hover）a（active）te。
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
