JS学习

使用变量要先进行声明

采用异步工作模式

• 数值
  NAN是JavaScript中唯一不等于自身的值
• 数组的forEach方法会跳过空元素，但是不会跳过undefined
• 数组的length属性不过滤空位
• getClassName()得到的是一个数组 ，通过getClassName()[0]取得第一个元素（即类名本身）

对象

• 生成方法：

1. 直接使用大括号
2. new Object()
3. Object.create()

• “===”用来判断值是否相等（绝对相等），“==”可用于判断类型相等
• 键名
  JavaScript的保留字可以不加引号当做键名
• 对象的引用
  不同的变量名指向同一个对象，那么它们都是这个对象的引用，也就是说指向同一个内存地址。修改其中一个变量，会影响到其他所有变量。
• 数值键名不能使用点运算符（因为会被当成小数点），只能使用方括号运算符。

obj.0xFF
// SyntaxError: Unexpected token
obj[0xFF]
// true

• delete 命令只能删除对象本身的属性，无法删除继承的属性

函数

图片发自App

面向对象编程

JavaScript 中，一切皆对象，运行环境也是对象，函数都是在某个对象之中运行，this就是这个对象（环境）

• 当 A 对象的方法被赋予 B 对象，该方法中的this就从指向 A 对象变成了指向 B 对象
• 使用一个变量固定this的值，然后内层函数调用这个变量，避免多层this
• use strict 严格模式硬性避免多层this
• 数组处理多层this
  • 使用中间变量

  var o = {
    v: 'hello',
    p: [ 'a1', 'a2' ],
    f: function f() {
      var that = this;
      this.p.forEach(function (item) {
        console.log(that.v+' '+item);
      });
    }
  }
  
  o.f()
  // hello a1
  // hello a2
  

  • 将this当作foreach方法的第二个参数
• this 绑定
  • call 、apply、bind方法若第一个参数为空、null和undefined，则默认传入全局对象
  • call 方法

    func.call(thisValue, arg1, arg2, ...)

    第一个参数为原始值会自动转成对应的包装对象，然后传入call方法。
    后面的参数为函数调用时所需参数
  • apply

  func.apply(thisValue, [arg1, arg2, ...])

  接收一个数组作为函数执行时的参数
  • bind
    每次返回新函数，故在处理监听事件时应注意

JSON

一种用于数据交换的文本格式

1. 复合类型的值只能是数组或对象，不能是函数、正则表达式对象、日期对象。
2. 简单类型的值只有四种：字符串、数值（必须以十进制表示）、布尔值和null（不能使用NaN, Infinity, -Infinity和undefined）。
3. 字符串必须使用双引号表示，不能使用单引号。
4. 对象的键名必须放在双引号里面。
5. 数组或对象最后一个成员的后面，不能加逗号。

• JSON.stringify 将一个值转为字符串，忽略对象的不可遍历性
  • 用JSON.parse还原
  • 原始对象中，有一个成员的值是undefined、函数或 XML 对象，这个成员会被过滤。
  • 数组的成员是undefined、函数或 XML 对象，这些值被转成null

CLASS 属性

• setProperty(propertyName,value)：设置某个CSS属性。
• getPropertyValue(propertyName)：读取某个CSS属性。
• removeProperty(propertyName)：删除某个CSS属性。

浏览器环境

• defer 属性
  在浏览器下载脚本文件时不会阻塞页面渲染，且执行顺序即页面出现的顺序。
• async 属性
  该属性无法保证脚本的执行顺序。按照脚本下载完成顺序进行执行。

DOM节点

• innerHTML 属性 : 获取元素内容
• nodeName 属性 : 节点的名称
• nodeName 是只读的
  • 元素节点的 nodeName 与标签名相同
  • 属性节点的 nodeName 与属性名相同
  • 文本节点的 nodeName 始终是 #text
  • 文档节点的 nodeName 始终是 #document
    nodeName 始终包含 HTML 元素的大写字母标签名
• nodeValue 属性 : 节点的值
  • 元素节点的 nodeValue 是 undefined 或 null
  • 文本节点的 nodeValue 是文本本身
    • 属性节点的 nodeValue 是属性值
  • nodeType 属性 : 节点的类型
• innerText
  输入的内容是一串html代码时我们通过innerHTML取出来的被转换的代码，希望取出来的就是输入的html则用innerText来实现

window对象

• window.location 获取当前窗口名字
• window.name 设置当前浏览器窗口名字
• window.closed 检查使用脚本打开的新窗口是否关闭

var popup = window.open();

if ((popup !== null) && !popup.closed) {
}

• window.opener 返回当前窗口父窗口
• window.length 当前页面包含的框架数
• window. pageXOffset、window.pageYOffset页面水平、垂直滚动距离
  *userAgent可以大致准确地识别手机浏览器，方法就是测试是否包含mobi字符串

var ua = navigator.userAgent.toLowerCase();

if (/mobi/i.test(ua)) {
  // 手机浏览器
} else {
  // 非手机浏览器
}

• window.moveTo 移动至绝对位置， window.moveBy 移动至相对位置
• window.scrollTo 网页指定位置，window.scrollBy 指定距离
  *iframe元素遵守同源政策，只有当父页面与框架页面来自同一个域名，两者之间才可以用脚本通信，否则只有使用window.postMessage方法
• alert()、prompt()、confirm()这三个方法弹出的对话框，都是浏览器统一规定的式样，是无法定制的

Storage

*存入数据使用setItem方法。它接受两个参数，第一个是键名，第二个是保存的数据
读取数据使用getItem方法。它只有一个参数，就是键名

Cookie

• window.navigator.cookieEnabled 浏览器是否打开Cookie功能