ECMAScript

浏览器执行

// 浏览器分成两部分 渲染引擎和JS引擎
// 渲染引擎：用来解析HTML与CSS，俗称内核，
// 比如chrome浏览器的blink，老版本的webkit
// JS引擎：也称JS解释器。用来读取网页中的JavaScript代码，
// 对其处理后运行，比如chrome浏览器的V8

ECMAScript

// ECMAScript规定了js的编程语法和基础知识，
// 是所有浏览器厂商共同遵守的一套js语法工业标准

三部分

// DOM 文档对象模型
// BOM 浏览器对象模型
// ECMAScript

JS三种位置

// 内联
<input type="button" value='按钮' onclick="alert('弹出框')"/>

// 内嵌
<title>JavaScript</title>
<script>
    alert('弹出框')
</script>

// 外部
<script src='index.js' />

输入输出

prompt(info) 
// 浏览器输出输入框，用户可以输入

console.log(msg)
// 浏览器控制台打印输出信息

alert(msg)
// 浏览器弹出警示框

变量

// 程序在内存中申请的一块用来存放数据的空间

// 声明
var age = 18

// 声明多个
var name,
    age = 18
    
// 不声明直接使用
age = 18

// 命名规范
// 由字母、数字、下划线、$组成
// 严格区分大小写
// 不能数字开头
// 关键字、保留字不能作为变量名
// 驼峰命名法、语义化

简单数据类型

// Number Boolean String undefined null

// Number 数字型
// 八进制 012(10)
// 十六进制 0x12(18)
// 最大值 Number.MAX_VALUE 最小值 Number.MIN_VALUE
// 无穷大 Infinity 无穷小 -Infinity
// NaN 非数字类型 typeof NaN === 'number'
// isNaN(value) 判断是否为非数字类型

 // String 字符串型 
 // 换行 '\n'
 // 字符串长度 string.length
 // 拼接 'str' + 'ing' = 'string' '100' + 2 = '1002'
 
 // Boolean 布尔型
 // true 真 false 假
 
 // undefined 未定义
 // 声明变量不赋值 就会被初始化为undefined
 
 // null 空值

复杂数据类型

 // Object Array

typeof数据类型判断

typeof Number | String | Boolean | ... 

数据类型转换

// 转换字符串
number.toString()

String(number)

// 转换数字
// 取整 会去掉数字后非数字字符 parseInt('px') NaN
parseInt(string)
// 转换浮点
parseFloat(string)
Number(string)
// 隐式转换 + - * / 
'12' - 0 // 12

// 转换布尔
// '' 0 NaN null undefined

递增/递减

// 递增
// ++i 先自增再运算  i++ 先运算再自增
// 递减
// --i 先自减再运算  i--先运算再自减

等于/全等

// ===严格相等
// ==非严格相等 两侧转换后可相等

与/或/非

// && || !
// 短路表达式
// false && (...) (括号内不再运算)
// true || (...) (括号内不再运算)

// 条件表达式
// (...) && (...) &&前为true才执行&&后面表达式 一般代替简单if语句
// (...) || (...) ||前为false才执行||后面表达式 一般用来设置默认值

运算符优先级

// 小括号() 
// 一元运算符  ++ -- ! 
// 算数运算符 + - * / 
// 关系运算符  > >= < <= 
// 相等运算符  == != === !==
// 逻辑运算符 && > ||
// 赋值运算符 =
// 逗号 ,

流程控制

if ... else if ... else

三元表达式

// 条件表达式 ? 表达式1 : 表达式2
// 条件表达式为true 执行表达式1
// 否则执行表达式2

多分支

switch (表达式) {
  case value1:
              执行语句1;
              break;
  case value2:
              执行语句2;
              break;
  default:
              执行默认语句
             break;
}

循环

for (初始化变量; 条件表达式; 操作表达式) {
   // 循环体        
}
// 条件表达式 => 循环体 => 操作表达式 
// 条件表达式为true 执行循环体 否则跳出

while (条件表达式) {
   // 循环体 
}
// 条件表达式 => 循环体
// 条件表达式为true 执行循环体 否则跳出

do {
  // 循环体       
} while (条件表达式);
// 循环体 => 条件表达式 
// 条件表达式为true 执行循环体 否则跳出

// 关键字
// continue 跳出本次循环， 继续下一次循环
// break 立即跳出整个循环

数组

// 一组数据的集合
// new 创建数组
new Array()
// 字面量
var array = []

函数

// 可以被重复执行调用的代码块
function 函数名(参数1, 参数2 ...){
    // 函数体
    return 需要返回的结果
}

var fun = 函数名(参数1, 参数2 ...){
    // 函数体
    return 需要返回的结果
}

// 没有return 返回undefined
// 函数内部 arguements参数伪数组

作用域

// 可用性的代码范围
// es6之前 全局作用域 局部作用域
// 变量因此分为全局变量 局部变量
// 全局变量，浏览器关闭才会销毁，比较占用内存资源
// 局部变量，当程序执行完毕就会销毁，比较节约内存资源
// 函数内部作用域就是局部作用域

// 作用域链 函数内部可以访问函数外部的变量，链式查找决定哪些数据能被内部函数访问

预解析

// JavaScript解析器在运行代码时
// 分为预解析和代码执行
// 函数提升作用域最前面 变量声明提升最前面 不提升赋值 仅次于函数

对象

// 字面量创建
var object = {}
// 构造函数
var object = new Object()

// new 关键字执行过程
// 在内存创造一个空的对象
// this指向刚才创建的空对象
// 执行构造函数里面代码，给空对象添加属性和方法
// 返回这个对象（隐式）

// js对象分为自定义对象、内置对象、浏览器对象

简单类型和复杂类型

// 值类型
// 在存储时变量中存储的式值本身

// 引用类型
// 存储时变量中存储的仅仅是地址（引用）

// 简单数据类型存放栈里面 直接开辟一个空间存放的是值
// 复杂数据类型 栈里面存放地址 十六进制表示 地址指向堆数据

// 简单类型传参
// 把栈空间里面值复制一份传给形参，不会影响外部变量
// 复杂类型传参
// 把地址复制一份传给形参

立即执行函数

function fn(形参){}
fn(实参)

(function (形参){...})(实参)

(function (形参){...}(实参))

创建对象

// new Object() 创建对象
var obj = new Object();

// 对象字面量创建对象
var obj = {};

// 利用构造函数创建对象
function Person(name) {
   this.name = name;
}

var zs = new Star('zs', 18);

构造函数和原型

// new命令步骤
// 在内存中创建一个新的空对象
// this指向这个新的对象
// 执行构造函数里面的代码，给新对象添加属性和方法
// 返回这个新对象（所以构造函数里面不需要 return ）

// 静态成员
// 在构造函数本上添加的成员，只能由构造函数本身来访问 

// 实例成员
// 在构造函数内部创建的对象成员，只能由实例化的对象来访问

// 原型对象prototype
// 是一个对象，这个对象的所有属性和方法，都会被构造函数所拥有
// 方法直接定义在prototype对象
// 所有对象的实例就可以共享这些方法

// 对象原型__propto__
// 对象都会有一个属性 __proto__ 指向构造函数的prototype原型对象

// 构造函数、实例、原型对象关系
 Person -----------(Person.proptotype)---------> Person原型对象
构造函数 <----(Person.prototype.constructor) ---    prototype
    ↓                                              ↑
    ↓ new Person()                                 ↑zs.__proto__
    ↓                                              ↑
    ↓----------------> Person实例zs --------------->
    
// 原型链
// 当访问对象的属性（包括方法），首先查找这个对象自身有没有该属性。
// 如果没有就查找它的原型（也就是 __proto__指向的prototype原型对象）
// 如果还没有就查找原型对象的原型（Object的原型对象）
// 依此类推一直找到 Object 为止（null）
// __proto__对象原型的意义就在于为对象成员查找机制提供一个方向

// 拓展内置对象
Array.prototype.xxx = function(){} 

继承

// 通过构造函数和原型对象模拟实现继承
// 一般情况下，对象的方法都在构造函数的原型对象中设置
// 通过构造函数无法继承父类方法
// 将子类所共享的方法提取出来，让子类的prototype原型对象= new 父类()  
// 子类原型对象等于是实例化父类，因为父类实例化之后另外开辟空间
// 就不会影响原来父类原型对象
// 子类的constructor重新指向子类的构造函数

// 父类
function Person(name) {
      this.name = name;
}
Person.prototype.money = function (){}

// 子类
function Student(name, score) {
    // 父类this指向子类this同时调用这个函数
    Person.call(this, name); 
   this.score = score;
}

Student.prototype = new Person()
Student.constructor = Student

Student.prototype.study = function (){}
var zs = new Student('张三', 100);

数组方法

// 迭代/遍历 遍历过程不同于for 中途不能break/continue/return
array.forEach(function(el, index, arr){}) 
// el 数组当前项的值
// index 数组当前项的索引
// arr 数组对象本身

// 根据原数组创建新的数组
array.map(function(el, index, arr){})

// 创建新的数组，数组中元素筛选符合条件的元素
array.filter(function(el, index, arr){})

// 查找数组中是否有满足条件的元素
// 返回值是布尔值 查找到返回true 查找不到返回false
array.some(function(el, index, arr){})

// 查找数组中是否所有满足条件的元素
// 返回值是布尔值
array.every(function(el, index, arr){})

trim()

string.trim() //去除字符串两侧空格

对象方法

// 用于获取对象自身所有的属性
Object.keys(object)

// 定义对象中新属性或修改原有的属性
Object.defineProperty(object, prop, descriptor)
// object 目标对象 
// prop 定义或修改的属性的名字
// descriptor 目标属性所拥有的特性
// descriptor 属性
// value 设置属性的值 默认为undefined
// writable 值是否可以重写 默认为false
// enumerable 目标属性是否可以被枚举 默认为false
// configurable 目标属性是否可以被删除或是否可以再次修改特性 默认为false

函数定义方式

// 自定义函数(命名函数) 
function fn() {}

// 函数表达式 (匿名函数)
var fun = function() {}

// 构造函数
new Function('参数1','参数2', '函数体')

this指向

// 普通函数 window
// 构造函数调用 实例代码 原型对象里面的方法也指向实例实例
// 对象方法调用 方法所属对象
// 事件绑定方法 绑定事件对象
// 定时器函数 window
// 立即执行函数 window

// 严格模式this指向
// 全局作用域中函数中的this是undefined
// 构造函数不加new调用 this指向的是undefined 赋值则会报错

改变this指向

// call方法
function.call(thisArg, arg1, arg2, ...)
// thisArg function函数运行时指定的this值
// arg1/arg2 传递的其他参数
// 返回值就是函数的返回值
// 想改变this指向同时想调用这个函数的时候使用call

// apply方法
function.apply(thisArg, [argsArray])
// thisArg 在fun函数运行时指定的this值
// argsArray 传递的值必须包含在数组里面
// 返回值就是函数的返回值

// bind方法
function.bind(thisArg, arg1, arg2, ...)
// thisArg 在fun函数运行时指定的this值
// arg1/arg2 传递的其他参数
// 返回由指定的this值和初始化参数改造的原函数拷贝
// 想改变this指向且不想调用这个函数的时候使用bind

// call经常做继承
// apply经常跟数组有关系
// bind不调用函数但是也改变this指向

高阶函数

// 高阶函数是对其他函数进行操作的函数
// 它接收函数作为参数或将函数作为返回值输出

变量作用域

// 函数内部可以使用全局变量
// 函数外部不可以使用局部变量
// 当函数执行完毕 本作用域内的局部变量会销毁

闭包

// 闭包（closure）指有权访问另一个函数作用域中变量的函数
// 作用是延伸变量作用范围

function fn() {　　　　
  var num = 10;　　　　
  return function {　　　　　　
      return num       　　　　
  }
}
var f = fn()
fn() // 函数外部访问内部变量

递归函数

// 一个函数在内部可以调用其本身的递归函数
// 递归函数的作用和循环效果一样
// 递归很容易发生“栈溢出”错误（stack overflow）要加退出条件return 

深浅拷贝

// 浅拷贝只是拷贝一层 更深层次对象级别的只拷贝引用
// 深拷贝拷贝多层 每一级别的数据都会拷贝