前端知识杂记——javascript

发表于   |   分类于   |     |   阅读次数

对前端开发知识的一些梳理,主要参考前端开发面试题及对它的补充，持续完善…

基本数据类型

Undefined、Null、Boolean、Number、String、Symbol(ES6)

内置对象

Object 是 JavaScript 中所有对象的父对象

数据封装类对象：Object、Array、Boolean、Number 和 String
其他对象：Function、Arguments、Math、Date、RegExp、Error

JavaScript有几种类型的值

栈：原始数据类型（Undefined，Null，Boolean，Number、String）
堆：引用数据类型（对象、数组和函数）

两种类型的区别是：存储位置不同；
原始数据类型直接存储在栈(stack)中的简单数据段，占据空间小、大小固定，属于被频繁使用数据，所以放入栈中存储；
引用数据类型存储在堆(heap)中的对象,占据空间大、大小不固定,如果存储在栈中，将会影响程序运行的性能；引用数据类型在栈中存储了指针，该指针指向堆中该实体的起始地址。当解释器寻找引用值时，会首先检索其
在栈中的地址，取得地址后从堆中获得实体

继承

原型

创建对象

  • 对象字面量的方式
  • 工厂函数
  • 原型链

作用域链

This对象：引用的是函数据以执行的环境对象

  • 全局范围内:指向全局对象
  • 函数调用:foo() 指向全局对象
  • 方法调用:test.foo();this 指向 test 对象。
  • 调用构造函数:this 指向新创建的对象
  • 显式的设置 this:apply,call

null，undefined

null是一个表示”无”的对象，转为数值时为0；undefined是一个表示”无”的原始值，转为数值时为NaN。
当声明的变量还未被初始化时，变量的默认值为undefined。 null用来表示尚未存在的对象，常用来表示函数企图返回一个不存在的对象。

undefined表示”缺少值”
（1）变量被声明了，但没有赋值时，就等于undefined。
（2) 调用函数时，应该提供的参数没有提供，该参数等于undefined。
（3）对象没有赋值的属性，该属性的值为undefined。
（4）函数没有返回值时，默认返回undefined。

null表示”没有对象”，即该处不应该有值
（1） 作为函数的参数，表示该函数的参数不是对象。
（2） 作为对象原型链的终点。

attribute和property

attribute是dom元素在文档中作为html标签拥有的属性；
property就是dom元素在js中作为对象拥有的属性。
对于html的标准属性来说，attribute和property是同步的，是会自动更新的，
但是对于自定义的属性来说，他们是不同步的，

window，document

* DOM,文档对象模型,针对 HTML 和 XML 提供的一个API,以编程的方法操作HTML 的内容
* document,是整个 DOM 树的根节点，是window对象的一个属性。这个 document 包含了标题（document.title）、URL（document.URL）等属性，可以直接在 JS 中访问到,在一个浏览器窗口中可能有多个 document，例如，通过 iframe 加载的页面，每一个都是一个 document。
* BOM 浏览器对象模型,为了操作浏览器出现的 API。
* window 是 BOM 的一个对象,通过这个对象可以获取窗口位置、确定窗口大小、弹出对话框等等

事件机制

use strict

use strict是一种ECMAscript 5 添加的（严格）运行模式,这种模式使得 Javascript 在更严格的条件下运行,

使JS编码更加规范化的模式,消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为。
默认支持的糟糕特性都会被禁用，比如不能用with，也不能在意外的情况下给全局变量赋值;
全局变量的显示声明,函数必须声明在顶层，不允许在非函数代码块内声明函数,arguments.callee也不允许使用；
消除代码运行的一些不安全之处，保证代码运行的安全,限制函数中的arguments修改，严格模式下的eval函数的行为和非严格模式的也不相同;

new操作符

1、创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型。
2、属性和方法被加入到 this 引用的对象中。
3、新创建的对象由 this 所引用，并且最后隐式的返回 this 。

1
2
3
var obj  = {};
obj.__proto__ = Base.prototype;
Base.call(obj);

js延迟加载

  • 使用script标签的defer(HTML4)和async(HTML5)属性

    defer延迟加载脚本,该属性使得浏览器能延迟脚本的执行，等文档完成解析完成后会按照他们在文档出现顺序再去下载解析.

    在DOMContentLoaded事件之前执行完成。也就是说defer属性script就类似于将script放在body的效果.
    而async属性能够异步的加载和执行脚本，不因为加载脚本而阻塞页面的加载。一旦加载到就会立刻执行。在window的load事件之前执行完成

  • 动态创建DOM方式

    谷歌推荐的代码：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <script type="text/javascript">
      function downloadJSAtOnload() {
          var element = document.createElement("script");
          element.src = "defer.js";
          element.async = true;//可以再Opera和旧版本的FF中支持异步加载
          document.body.appendChild(element);
          }
          if (window.addEventListener)
          window.addEventListener("load", downloadJSAtOnload, false);
          else if (window.attachEvent)
          window.attachEvent("onload", downloadJSAtOnload);
          else window.onload = downloadJSAtOnload;
      </script>

  • 通过ajax下载js脚本(无法引用使用CDN方式提供的js文件)

    Ajax

    (1)创建XMLHttpRequest对象,也就是创建一个异步调用对象.

    (2)创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.

    (3)设置响应HTTP请求状态变化的函数.

    (4)发送HTTP请求.

    (5)获取异步调用返回的数据.

    (6)使用JavaScript和DOM实现局部刷新.

    跨域

    模块化开发

    ECMAScript6

    document.write，innerHtml

    document.write只能重绘整个页面
    innerHTML可以重绘页面的一部分

    offsetWidth

    clientHeight和clientWidth用于描述元素内尺寸，是指 元素内容+内边距 大小，不包括边框（IE下实际包括）、外边距、滚动条部分
    offsetHeight和offsetWidth用于描述元素外尺寸，是指 元素内容+内边距+边框，不包括外边距和滚动条部分
    clientTop和clientLeft返回内边距的边缘和边框的外边缘之间的水平和垂直距离，也就是左，上边框宽度
    offsetTop和offsetLeft表示该元素的左上角（边框外边缘）与已定位的父容器（offsetParent对象）左上角的距离
    offsetParent对象是指元素最近的定位（relative,absolute）祖先元素，递归上溯，如果没有祖先元素是定位的话，会返回null
    scrollWidth和scrollHeight是元素的内容区域加上内边距加上溢出尺寸，当内容正好和内容区域匹配没有溢出时，这些属性与clientWidth和clientHeight相等
    scrollLeft和scrollTop是指元素滚动条位置，它们是可写的

作用域与变量声明提升

getComputedStyle

getComputedStyle是一个可以获取当前元素所有最终使用的CSS属性值。返回的是一个CSS样式声明对象([object CSSStyleDeclaration])，只读。
vs element.style
getComputedStyle方法是只读的，只能获取样式，不能设置；而element.style能读能写
getComputedStyle方法获取的是最终应用在元素上的所有CSS属性对象,element.style只能获取元素style属性中的CSS样式
element.currentStyle返回的是元素当前应用的最终CSS属性值（包括外链CSS文件，页面中嵌入的