前端学习笔记2

1. 跨域：发起请求与指向资源域不相同（协议+域名+端口）
   常见有指向资源的部件：a, form, img, script, iframe, link 等标签以及 Ajax

2. apply（）可以接收一个数组作为参数，不管数组中有多少个元素

3. 如果一个元素拥有ID属性,那么ID属性的属性值就会成为window对象的属性名.

4. 在讨论回流与重绘之前，我们要知道：

   浏览器使用流式布局模型 (Flow Based Layout)。
   浏览器会把HTML解析成DOM，把CSS解析成CSSOM，DOM和CSSOM合并就产生了Render Tree。
   有了RenderTree，我们就知道了所有节点的样式，然后计算他们在页面上的大小和位置，最后把节点绘制到页面上。
   由于浏览器使用流式布局，对Render Tree的计算通常只需要遍历一次就可以完成，但table及其内部元素除外，他们可能需要多次计算，通常要花3倍于同等元素的时间，这也是为什么要避免使用table布局的原因之一。
   一句话：回流必将引起重绘，重绘不一定会引起回流。

   回流 (Reflow)
   当Render Tree中部分或全部元素的尺寸、结构、或某些属性发生改变时，浏览器重新渲染部分或全部文档的过程称为回流。

   会导致回流的操作：

   页面首次渲染
   浏览器窗口大小发生改变
   元素尺寸或位置发生改变
   元素内容变化（文字数量或图片大小等等）
   元素字体大小变化
   添加或者删除可见的DOM元素
   激活CSS伪类（例如：:hover）
   查询某些属性或调用某些方法

5. mark 高亮显示文本

6. 首先， js有变量提升和函数提升，指的是用 var声明变量 或用 function 函数名（）{ } 声明的，会在 js预解析 阶段提升到顶端；（es6的let 和 const 不会提升）
   ● 其次，函数提升优先级 高于 变量提升
   ● 注意， 相同作用域时声明变量而不赋值则还是以前的值， 而子作用域声明不赋值则函数内该值为undefined，因为声明了私有变量

7. JavaScript RegExp 对象有 3 个方法：test()、exec() 和 compile()。
   (1) test() 方法用来检测一个字符串是否匹配某个正则表达式，如果匹配成功，返回 true ，否则返回 false；
   (2) exec() 方法用来检索字符串中与正则表达式匹配的值。exec() 方法返回一个数组，其中存放匹配的结果。如果未找到匹配的值，则返回 null；
   3）compile() 方法可以在脚本执行过程中编译正则表达式，也可以改变已有表达式。

8. 阻止默认事件：
   e.preventDefault()
   e.returnValue = false (IE)
   阻止冒泡：
   e.stopPropagation()
   e.cancelBubble = true (IE)

9. 优先级由高到低可分为：

   在属性后面使用!important会覆盖页面内任何位置定义的元素样式。
   作为style属性写在元素内的样式
   id选择器
   类选择器 = 伪类选择器=属性选择器 （后面的样式会覆盖前面的样式）
   标签选择器
   通配符选择器
   浏览器自定义的样式 ​

10. Ctx.arc(x,y,r,0,2Math.PI,true);才是绘制一整个圆。

11. 基本类型：string null undefined number boolean 复杂类型：object array date regexp function 基本包装类型：boolean number string 单体内置对象：global math 注意：以上内容该首字母全部大写！！！

12. Promise对象只有三种状态。
    异步操作“未完成”（pending）
    异步操作“已完成”（resolved，又称fulfilled）
    异步操作“失败”（rejected）

13. DHTML 的动态样式的作用是使网页作者改变内容的外部特征而不强制用户再次下载全部内容。

14. DHTML 将 HTML、JavaScript、DOM 以及 CSS 组合在一起，用于创造动态性更强的网页。通过 JavaScript 和 HTML DOM，能够动态地改变 HTML 元素的样式。

15. hasOwnProperty： 是用来判断一个对象是否有你给出名称的属性或对象。不过需要注意的是，此方法无法检查该对象的原型链中是否具有该属性，该属性必须是对象本身的一个成员。

16. isPrototypeOf : 是用来判断要检查其原型链的对象是否存在于指定对象实例中，是则返回true，否则返回false。

17. 从属关系区别 @import是 CSS 提供的语法规则，只有导入样式表的作用；
    1. link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等。
    2.加载顺序区别 加载页面时，link标签引入的 CSS 被同时加载；@import引入的 CSS 将在页面加载完毕后被加载。
    3.兼容性区别 @import是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；link标签作为 HTML 元素，不存在兼容性问题。
    4.DOM可控性区别 可以通过 JS 操作 DOM ，插入link标签来改变样式；由于 DOM 方法是基于文档的，无法使用@import的方式插入样式。
    5.权重区别 link引入的样式权重大于@import引入的样式。

18. Json数据格式：｛“name”:“xiaoming”,“age”:“student”｝

19. text-overflow: ellipsis 属性可以使超出的文字部分变成”…”

20. 普通的函数调用，此时this指向window，this.color应该为全局变量的值
    this指向调用函数的对象test4399，因此this.color应该为对象的属性值

21. 浏览器会为 HTML 文档创建一个 window 对象，并为每个框架创建一个额外的 window 对象。

22. 在HTML body部分中的JavaScripts会在页面加载的时候被执行。
    在HTML head部分中的JavaScripts会在被调用的时候才执行。

23. 我们不难发现清除浮动的方法可以分成两类：

    一是利用 clear 属性，包括在浮动元素末尾添加一个带有 clear: both 属性的空 div 来闭合元素，其实利用 :after 伪元素的方法也是在元素末尾添加一个内容为一个点并带有 clear: both 属性的元素实现的。

    二是触发浮动元素父元素的 BFC (Block Formatting Contexts, 块级格式化上下文)，使到该父元素可以包含浮动元素，关于这一点。通过设置父元素overflow值为hidden；给父元素添加clearfix类。

24. 要运用css3动画，需要运用@keyframes规则和animation属性。

25. JS基本数据类型没有Array

26. JavaScript实现继承共6种方式：
    原型链继承、借用构造函数继承、组合继承、原型式继承、寄生式继承、寄生组合式继承。

27. cellpadding 单元格边距，就是文字与边框之间的距离
    cellspacing 单元格之间的间距

28.    apply,call,bind的用法和区别(方法劫持)
    

    用途:手动改变this的指向

    区别：1.apply和call会使当前函数立即执行，bind会返回一个函数，后续需要时再调用

    2. call是apply的语法糖，只有传的参数不同，call中要传多个任意参数，apply只可以直接传数组或者类数组

    3. bind是为函数绑定一个this上下文

    规则: fn.apply(上下文环境，执行所需数组)

        fn.call(上下文环境，执行所需单个参数)
    
        fn.bind(上下文环境)
    

    ps：如果上下文的值为null，则使用全局对象代替，相当于没传上下文还用以前的

    apply可以将一个数组转换为一个参数列表([p1,p2,p3]转换为p1,p2,p3)

      var arr=[1,2,3,4]
    
       console.log (Math.max.apply(null,arr))//4
    

    Math.max()只能传数字，可以使用apply将数组转为一个一个参数传入

29. 把鼠标移到按钮并点击时，hover focus active

30. 在html中，样式表按照应用方式可以分为三种类型:内嵌样式表;行内样式表;外部样式表文件

31. iframe可用在以下几个场景中：
    1：典型系统结构，左侧是功能树，右侧就是一些常见的table或者表单之类的。为了每一个功能，单独分离出来，采用iframe。
    2：ajax上传文件。
    3：加载别的网站内容，例如google广告，网站流量分析。
    4： 在上传图片时，不用flash实现无刷新。
    5： 跨域访问的时候可以用到iframe，使用iframe请求不同域名下的资源。