1、原型链继承
function Woman ( ) {
}
Woman. prototype= new People ( ) ;
Woman. prototype. name = 'haixia' ;
let womanObj = new Woman ( ) ;
优点：简单易实现
缺点：无法实现多继承
2、构造函数继承
function Woman ( name) {
People. call ( this ) ;
this . name = name || 'renbo'
}
let womanObj = new Woman ( ) ;
优点：可以实现多继承
缺点：方法无法复用，不能继承父类属性和方法，只能继承父类实例对象属性和方法
3、extends关键字继承
this指向问题：
1、普通函数中this指向 ---> window
2、事件函数中this指向 ---> 事件源
3、构造函数中this指向 ---> 实例对象
4、具体对象中this指向 ---> 当前对象
5、箭头函数的this指向 ---> 定义时所在的对象
修改函数this指向：
1、call: 函数.call(参数1，参数2，参数3)
第一个参数是所要指向的对象，其余参数为函数的实参
2、apply: 函数.apply(参数1，[参数2,参数3])
第一个参数是所要指向的对象，其余参数为函数的实参，用数组的方式呈现
3、bind: 函数.call(参数1，参数2，参数3)
不能直接被调用，返回的是一个新的函数
call和apply都可以直接调用函数，只是传递实参的方式不同
bind不可以直接调用函数，返回的是一个新的函数
const用来声明常量，一旦声明，其值就不能更改
1.const声明的常量不能改变，意味着const一旦声明常量，就必须同时初始化。不能先声明，后初始化，这样会报错
2.与let一样。const声明的常量也只在块级作用域内有效
3.与let一样，必须先声明，后使用
4.与let一样，在同一作用域，const不能重复声明同一常量
注：const声明的对象属性是可以修改的
英文字母：
字节数 : 1;编码：GB2312
字节数 : 1;编码：GBK
字节数 : 1;编码：GB18030
字节数 : 1;编码：ISO-8859-1
字节数 : 1;编码：UTF-8
字节数 : 4;编码：UTF-16
字节数 : 2;编码：UTF-16BE
字节数 : 2;编码：UTF-16LE
中文汉字：
字节数 : 2;编码：GB2312
字节数 : 2;编码：GBK
字节数 : 2;编码：GB18030
字节数 : 1;编码：ISO-8859-1
字节数 : 3;编码：UTF-8
字节数 : 4;编码：UTF-16
字节数 : 2;编码：UTF-16BE
字节数 : 2;编码：UTF-16LE
utf-8英文占一个字节，中文站3个字节
http的全称是Hypertext Transfer Protocol Vertion （超文本传输协议），说通俗点就是用网络链接传输文本信息的协议
HTTPS的全称是Secure Hypertext Transfer Protocol（安全超文本传输协议），是在http协议基础上增加了使用SSL加密传送信息的协议。
所以http和https之间的区别就在于其传输的内容是否加密和是否是开发性的内容。
1、https协议需要到ca申请证书，一般免费证书很少，需要交费。
2、http是超文本传输协议，信息是明文传输，https 则是具有安全性的ssl加密传输协议。
3、http和https使用的是完全不同的连接方式用的端口也不一样，前者是80，后者是443。
4、http的连接很简单，是无状态的。
5、 HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，要比http协议安全
HTTPS解决的问题：
1、信任主机的问题. 采用https 的server 必须从CA 申请一个用于证明服务器用途类型的证书. 改证书只有用于对应的server 的时候，客户度才信任次主机。所以目前所有的银行系统网站，关键部分应用都是https 的，客户通过信任该证书，从而信任了该主机，其实这样做效率很低，但是银行更侧重安全。这一点对我们没有任何意义，我们的server 采用的证书不管自己issue 还是从公众的地方issue，客户端都是自己人，所以我们也就肯定信任该server。
2、通讯过程中的数据的泄密和被窜改
详细请参考文案：https://blog.csdn.net/weixin_34128411/article/details/92399542
1、绘画canvas
2、用于媒介回放的 video和audio元素
3、本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失
4、sessionStorage的数据在浏览器关闭后自动删除
5、语意化更好的内容元素，比如article、footer、header、nav、section
6、表单控件，calendar、date、time、email、url、search
7、新的技术webworker、websocket、Geolocation
8、移除的元素：
9、纯表现的元素：basefont、big、center、font、s、strike、tt、u
10、对可用性产生负面影响的元素：frame、frameset、noframes
11、支持HTML5新标签
1、什么是Ajax和JSON，它们的优缺点
Ajax是全称是asynchronous JavaScript andXML，即异步JavaScript和xml，用于在Web页面中实现异步数据交互，实现页面局部刷新
优点：可以实现异步通信效果，页面局部刷新，带来更好的用户体验
JSON是一种轻量级的数据交换格式，看着像对象，本质是字符串
优点：轻量级、易于人的阅读和编写，便于js解析，支持复合数据类型
2、ajax的交互流程有哪几步？
1）创建ajax对象
xhr = new XMLHttpRequest
2）规定请求地址
xhr.open(method,url,async)
3）等待服务器相应
xhr.onload
4）向服务器发送请求
xhr.send()
5）监听事件
3、AJAX应用和传统Web应用有什么不同
在传统的Js中，如果想发送客户端信息到服务器，需要建立一个HTML 表单然后GET或者POST数据到服务器端
用户需要点击提交按钮来发送数据信息，然后等待服务器响应请求，页面重新加载
使用AJAX技术，就可以使Javascript通过XMLHttpRequest对象直接与服务器进行交互
4、XMLHttpRequest对象在IE和Firefox中创建方式有没有不同？
IE中通过new ActiveXObject()得到，Firefox中通过newXMLHttpRequest()得到
使用jquery封装好的ajax，会避免这些问题
5、ajax如何解决浏览器缓存问题
1）在ajax发送请求前加上 anyAjaxObj.setRequestHeader("If-Modified-Since","0")
2）在ajax发送请求前加上 anyAjaxObj.setRequestHeader("Cache-Control","no-cache")
3）在URL后面加上一个随机数： "fresh=" + Math.random();
4）在URL后面加上时间戳："nowtime=" + new Date().getTime()
5）在jq ajax下，使用 $.ajaxSetup({cache:false}) 这样就不会保存缓存记录
6、简述ajax的优缺点
优点：
1）无刷新更新数据（在不刷新整个页面的情况下维持与服务器通信）
2）异步与服务器通信（使用异步的方式与服务器通信，不打断用户的操作）
3）前端和后端负载均衡（将一些后端的工作交给前端，减少服务器与宽度的负担）
4）界面和应用相分离（ajax将界面和应用分离也就是数据与呈现相分离）
缺点：
1）ajax不支持浏览器back按钮
2）安全问题 Aajax暴露了与服务器交互的细节
3）对搜索引擎的支持比较弱
4）破坏了Back与History后退按钮的正常行为等浏览器机制
7、阐述一下异步加载JS
1）异步加载的方案： 动态插入 script 标签
2）通过 ajax 去获取 js 代码，然后通过 eval 执行
3）script 标签上添加 defer 或者 async 属性
4）创建并插入 iframe，让它异步执行 js
8、json字符串与对象如何相互转换
把JSON格式转成对象：JSON.parse()
把对象转成标准json：JSON.stringify()
使用eval能够把字符串尽量转成js运行的代码 eval('(' + jsonstr + ')')
eval是不安全的（可能会注入不必要的东西），通过new Function('','return'+json)();可以解决该问题
9、get与post的区别，什么时候使用post？
get和post在HTTP中都代表着请求数据，其中get请求相对来说更简单、快速，效率高些
get相对post安全性低
get有缓存，post没有
get体积小，post可以无限大
get的url参数可见，post不可见
get只接受ASCII字符的参数数据类型，post没有限制
get请求参数会保留历史记录，post中参数不会保留
get会被浏览器主动catch，post不会，需要手动设置
get在浏览器回退时无害，post会再次提交请求
post一般用于修改服务器上的资源，对所发送的信息没有限制。比如
1. 无法使用缓存文件（更新服务器上的文件或数据库）
2. 向服务器发送大量数据（POST 没有数据量限制）
3. 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠
10、介绍一下XMLHttpRequest对象，他有哪些常用方法和属性
XMLHttpRequest是ajax的核心，通过XMLHttpRequest对象，Web开发人员可以在页面加载以后进行页面的局部更新
常用的方法：
open(get/post,url,是否异步)创建http请求
send()发送请求给服务器
setRequestHeader()设置头信息（使用post才会用到，get并不需要调用该方法）
常用的属性：
onreadystatechange 用于监听ajax的工作状态（readyState变化时会调用此方法）
readyState 用来存放XMLHttpRequest的状态
status 服务器返回的状态码
responseText 服务器返回的文本内容
11、说下readyState属性是干嘛的，都有哪几个状态
readyState属性用来存放XMLHttpRequest的状态，监听从0-4发生不同的变化
0：请求未初始化（此时还没有调用open）
1：服务器连接已建立，已经发送请求开始监听
2：请求已接收，已经收到服务器返回的内容
3：请求处理中，解析服务器响应内容
4：请求已完成，且响应就绪
12、jquery ajax怎么实现,你认为他有什么不足之处
不足之处：
（1）针对MVC的编程,不符合现在前端MVVM的浪潮
（2）基于原生的XHR开发，XHR本身的架构不清晰，已经有了fetch的替代方案
13、说一下同步和异步的区别
同步会阻塞，异步不会阻塞
同步：程序运行从上而下，浏览器必须把这个任务执行完毕，才能继续执行下一个任务
异步：程序运行从上而下，浏览器任务没有执行完，但是可以继续执行下一行代码
14、解释一下 JavaScript的同源策略
同源策略是客户端脚本的安全度量标准，为了防止某个文档或脚本从多个不同源装载
同源策略是一种安全协议，指一段脚本只能读取来自同一来源的窗口和文档的属性
所谓同源就是同域名、同协议、同端口，只有同源的地址才能相互通过ajax方式请求
15、如何解决跨域问题？
跨域的概念：协议、域名、端口都相同才同域，否则都是跨域
解决跨域问题：
1）使用JSONP（json+padding）把数据内填充起来
2）CORS方式（跨域资源共享），在后端上配置可跨域
3）服务器代理，通过服务器的文件能访问第三方资源
16、解释jsonp的原理
ajax请求受同源策略影响，不允许进行跨域请求，而script标签src属性中的链接却可以访问跨域的js脚本，利用这个特性，服务端不再返回JSON格式的数据，
而是返回一段调用某个函数的js代码，在src中进行了调用，这样实现了跨域。
17、请问jsonp是不是ajax中实现跨域访问的技术
jsonp不是AJAX中实现跨域访问的技术
jsonp没有使用XMLHttpRequest对象
jsonp只是一种跨域的协议
jsonp只支持Get方式
18、页面编码和被请求的资源编码如果不一致如何处理？
对于ajax请求传递的参数，如果是get请求，参数传递中文，在有些浏览器会乱码
不同的浏览器对参数编码的处理方式不同，所以对于get请求的参数需要使用 encodeURIComponent函数对参数进行编码处理
19、AJAX请求总共有多少种CALLBACK
总共有八种Callback
onSuccess、onFailure、onUninitialized、onLoading
onLoaded、onInteractive、onComplete、onException
20、拿到数据怎么区分是ajax还是jsonp
ajax: {}
jsonp:fn({})
ajax的数据jsonp不能用，jsonp的数据ajax是可以用的
jsonp本质是通过URL的方式进行请求的，所以它是get方式请求，没有post
1、Array.isArray(arr) :
2、filter((item, index, array) => {}): 返回一个新数组, 其包含通过所提供函数实现的测试的所有元素，不改变原数组。
3、forEach( (item, index, array) => {}): 对数组的每个元素执行一次给定的函数。
4、indexOf(): 数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1;
5、 toString(): 返回一个字符串，用逗号隔开，表示指定的数组及其元素
6、toLocaleString() : 返回一个特定语言环境的字符串.
7、 shift() : 删除原数组第一项，并返回删除元素的值；如果数组为空则返回undefined （前删，返回值，改变原数组）
8、pop() :删除原数组最后一项，并返回删除元素的值；如果数组为空则返回undefined （后删，返回值，改变原数组）
9、 unshift() :将参数添加到原数组开头，并返回数组的长度 （前增，返回长度，改变原数组）
10、 push() :将参数添加到原数组末尾，并返回数组的长度 （后增，返回长度，改变原数组）
11、 concat(元素1，元素2) :返回一拼接新数组，是将参数添加到原数组中构成的
12、 splice(start,deleteCount,val1,val2,...) : 从start位置开始删除deleteCount项，并从该位置起插入val1,val2,...,（返回裁剪后的新数组，改变原数组）
13、 slice(start,end): 返回从原数组中指定开始下标到结束下标之间的项 组成的切割新数组
14、join(separator, mapFn可选): 将数组的元素组起一个分隔符拼接字符串，以separator为分隔符，省略的话则用默认用逗号为分隔符
15、reverse :将数组反序 ,返回反序后的数组（反序，改变原数组）
16、 sort(order function) :按指定的参数对数组进行排序
17、 reduce(function(accumulator, currentValue)): 累计器，迭代器。对数组中的每个元素执行一个由您提供的reducer函数(升序执行)，将其结果汇总为单个返回值, 即， 由reduce返回的值将是最后一次回调返回值
18、reduceRight: 接收一个函数作为累加器，和数组的每个值（从右到左）
19、some(function(ele,index可选,array可选)): 判断测试数组中，是不是至少有1个元素通过了被提供的函数测试, 返回布尔值Boolean.
20、 every(function(ele)) : 和some一起记忆。 判断测试数组中，是不是每个元素通过了被提供的函数测试, 返回布尔值Boolean.
21、Array.from(arryLike): 把一个类数组或者可迭代对象( Map和 Set )创建为一个新的浅拷贝的数组实例. 兼容性：不支持IE，支持edge.
22、 find : 返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。
23、findIndex:方法返回数组中满足提供的测试函数的第一个元素的索引。否则返回-1。
24、 fill（ele,startIndex,endIndex(可选)）：用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引的那一个，会改变原数组。
25、 flat() : 扁平化数组，按照一个可指定的深度depth（默认是1）递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。不改变原数组。
26、flatMap(function)：首先使用映射函数映射每个元素，然后将结果压缩成一个新数组。 flatMap 通常在合并成一种方法的效率稍微高一些
27、 entries（） ： 返回一个新的Array Iterator对象，该对象包含数组中每个索引的键/值对。
28、 keys() : 返回一个包含数组中每个索引键的Array Iterator对象。
29、values() ：方法返回一个新的 Array Iterator 对象，该对象包含数组每个索引的值
30、copyWithin(target, start = 0, end = this.length): 浅部分数组的一部分到同一数组中的另一个位置，并返回它，不会改变原数组的长度。
实现轮播其实就是是通过控制img_ul的left值来控制显示某张图片， 为了实现“滚动”的效果，
我们需要逐渐改变img_ul的left值，而不能直接使该值变化图片宽度的倍数。这里我们定义
一个动画效果函数autoPaly()。
css部分：
* {
mask-image : 0;
padding : 0;
list-style : none;
}
.box {
width : 1000px;
height : 300px;
position : relative;
margin : 50px auto;
overflow : hidden;
}
.box ul {
width : 600%;
height : 100%;
position : absolute;
}
.box ul li {
float : left;
}
.box ul li img {
width : 1000px;
height : 300px;
}
.box p {
position : absolute;
bottom : 1px;
width : 1000px;
text-align : center;
}
.box p span {
padding : 5px 10px;
margin : 5px;
background-color : #3399FF;
color : #FFFFFF;
cursor : pointer;
}
.box p span.active {
background-color : #6666FF;
}
html部分：可以使用js形成布局
< divclass = " box" > </ div> js部分：
var box = $ ( '.box' ) ;
var imgArr = [ "image/01.jpg" , "image/02.jpg" , "image/03.jpg" , "image/04.jpg" , "image/05.jpg" ] ;
var ul = $ ( '<ul></ul>' ) ;
var p = $ ( '<p></p>' ) ;
box. append ( ul) ;
box. append ( p) ;
for ( var i = 0 ; i < imgArr. length; i++ ) {
var liAndImg = ( `<li><img src= ${ imgArr[ i] } ></li>` ) ;
ul. append ( liAndImg) ;
var span = $ ( `<span> ${ i+ 1 } </span>` ) ;
p. append ( span) ;
}
var liAndImg = ( `<li><img src= ${ imgArr[ 0 ] } ></li>` ) ;
ul. append ( liAndImg) ;
var allSpan = $ ( '.box p span' ) ;
$ ( allSpan[ 0 ] ) . addClass ( 'active' ) ;
var n = 0 ;
var timer = setInterval ( autoPaly, 2000 )
function autoPaly ( ) {
n++ ;
if ( n == imgArr. length + 1 ) {
ul. css ( { left: 0 } ) ;
n = 1 ;
}
ul. animate ( {
left: - 1000 * n
} , 1000 )
switchTap ( )
}
ul. hover ( function ( ) {
clearInterval ( timer) ;
} , function ( ) {
timer = setInterval ( autoPaly, 2000 )
} )
allSpan. click ( function ( ) {
var index = $ ( this ) . index ( ) ;
console. log ( index) ;
n = index;
ul. animate ( {
left: - 960 * index
} , 1000 )
switchTap ( )
} )
function switchTap ( ) {
$ ( allSpan) . removeClass ( 'active' ) ;
if ( n == imgArr. length) {
$ ( allSpan[ 0 ] ) . addClass ( 'active' ) ;
} else {
$ ( allSpan[ n] ) . addClass ( 'active' ) ;
}
}
自动轮播用到了定时器setinterval
手动轮播用到了点击事件onclick
鼠标放入停止轮播用到了鼠标移入移除事件onhover
要想实现轮播效果大致为一下几点：
1、利用定时器 移动ul的left值(负数)
2、当移动到最后一张图的时候，利用css样式修改ul的left值，使其瞬间回到第一张图的位置
3、轮播中的过度效果使用了animate动画过渡效果
4、当鼠标移入关闭定时器，自动停播，当鼠标移除，开始定时器，自动开始
5、点击标识，通过span标签获取下标从而计算出ul的left值，且更改css样式
1、CSS3实现圆角（border-radius），阴影（box-shadow），
2、对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）
3、transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);// 旋转,缩放,定位,倾斜
4、增加了更多的CSS选择器 多背景 rgba
5、在CSS3中唯一引入的伪类是 ::selection.
6、媒体查询，多栏布局
7、border-image
3900
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
