javascript

语言分类

image.png

变量种类

• 原始值
  • stack
  • number,string,boolean,undefined,null
• 引用值
  • heap
  • array,object,function,date,RegExp ....

语句基本规则

• 语句后面要用分号结束“;”
• js语法错误会引发后续代码终止，但不会影像其他js代码块
• NaN

运算符

• NaN == NaN 为 false
• undefined,null,NaN,"",0,false
• !123 为 false !"" 为true
  ** javascript的&&和||与java的不一样，不只是会返回true 和 false，依照情况是会返回直接返回表达式的值。
• &&
  • 先看第一表达式转换成布尔值的结果，如果结果为真，那么它会看第二个表达式转换为布尔值的结果。如果只有两个表达式，直接返回第二个表达式的值。如果第一个表达式转换后的结果假，那么就直接返回第一个表达式的值
  • 常用情况。用一个变量作为函数入参，如果参数为空不传给函数。此时&&起阻断作用。

var data = ...
data && 执行一个语句，会用到data

• ||
  • 寻找一个真返回
  • 写兼容的时候会用到，两个表达式哪个有值就返回哪个

Object

Snipaste_2020-12-26_18-08-43.png

typeof

• 六种数据类型：
  • number,string,boolean,undefined,object,function
  • null,[],{}返回的都是object
• typeof(typeof(b))
  • typeof(b) -> b未定义，返回字符串“undefined”
  • 最后结果为string
  • typeof返回的number,string,boolean,undefined,object,function是string

类型转换

• 显示类型转换
  • Number(mix) Number(null) --> 0
  • parseInt(string,radix)
  • parseFloat(string)
  • toString(radix)(用得比价少)
  • String(mix)
  • Boolean()
• 隐式类型转换
  • isNaN() （会放在Number()后再判断）
  • ++/-- +/-(一元正负)
  • 加号
  • -*/%
  • &&||!
  • <><=>=
  • == != (undefined == null,true)
  • 不发生类型转换的绝对等于和不等于 ===，!==。长得不一样就是不一样

函数

声明方法

• 函数声明

function theFirstName(){
}

• 命名函数表达式

var test = function abc() {
}

• 匿名函数表达式（这不是匿名函数）

var demo = function() {
}

• 命名函数表达式只有test能代表，abc没有实际意义
• 命名函数表达式 和 匿名函数表达式 唯一的区别是test.name为abc,demo.name为demo.

匿名函数的this

• 匿名函数的执行环境是全局性的,指向windows

    var name = 'window'
    var person = {
        name :'Alan',
        sayName:function () {
            return function () {
                console.log(this.name)
            }
        }
    }
    person.sayName()()  // window 

解决方法还是有的，我们可以把外部作用域的this传递给匿名函数

    var name = 'window'
    var person = {
        name :'Alan',
        sayName:function () {
            var that = this
            return function () {
                console.log(that.name)
            }
        }
    }
    person.sayName()()  // Alan

形参和实参

• javascript就算不写全形参也能运行，通过arguments也能获取.但是arguments只映射一开始就对应上的。没映射在函数里后面才赋值的不会出现在arguments里。

  
  Snipaste_2020-12-28_14-51-05.png

语法分析

预编译

一些现象:

• test依旧能运行

test();

function test() {
  console.log('a');
}

• 输出undeifined

console.log(a);
var a = 123;

imply global 暗示全局变量

• imply global 暗示全局变量 ：即任何变量（包括写在函数里），如果未经声明就赋值，此变量就为全局对象所有
  • a = 123
  • var a = b = 123(中的b)
• 一切声明的全局变量，全是window的属性
  • var a = 123; ===>window.a = 123
• window即为全局

预编译

• 预编译过程this指向window
• 预编译发生在函数执行的前一刻
• 四部曲：
  • 1. 创建AO对象(Activation Object)(执行期上下文)
  • 2. 找形参和变量声明，将变量和形参作为AO属性名，值为undefined
  • 3. 将实参值和形参值统一
  • 4. 在函数体里面找函数声明，赋予函数体

• 例子：

  
  image.png

1. 创建AO
2. 找到形参a （var a = 123,重复了，OA只放一个a）,形参b,此时AO:

AO {
  a : undefined,
  b : undefined,
}

3. 将实参值和形参值统一,a 变成1

AO {
  a : 1,
  b : undefined,
}

4. 在函数体里面找函数声明，赋予函数体(a变成function a(){} ,b 还是undefined(注意b并不是函数声明)，d为 function d (){})

AO {
  a : function,
  b : undefined,
  d : function,
}

5 . 开始运行函数。第一个打印function。第二个打印123，function a (){}已经被提前了，所以不再运行，第三个还是打印123。b开始运行function.第四个打印function

全局的预编译

• 第一步生成的叫GO（global object === window）
• 没有第三步
• 先生成GO，再生成AO
• AO找不到找GO

作用域链

• [[scope]]:无法被修改操作

• 以下情况a是会被修改成0的

  
  Snipaste_2020-12-29_11-41-55.png

分定义和执行时两步

Snipaste_2020-12-29_11-18-06.png
Snipaste_2020-12-29_11-17-45.png

闭包

• return b后A的AO已经被销毁了，但b继承了它

  
  image.png
  Snipaste_2020-12-29_14-46-25.png

• 第二次输出是102，而不是101，拿着外面函数的劳动成果继续访问

  
  Snipaste_2020-12-29_14-41-44.png
• 闭包：当内部函数被保存到外部时，将会生成闭包。闭包会导致原有作用域链不释放，造成内存泄露。
  • 作用：
    • 实现公有变量（函数累加器）
    • 可以做缓存（存储结构）
    • 可以实现封装，属性私有化
    • 模块化开发，防止污染全局变量

Snipaste_2020-12-29_16-39-46.png Snipaste_2020-12-29_16-39-24.png

• 闭包练习

• 以下输出的是10个10，而不是123456789。test全部执行完才循环输出的。var i 是共同变量。里边的function并不是立即执行函数

  
  Snipaste_2020-12-29_17-19-38.png

• 这样是输出全部

        function test(){
            var arr = [];
            for(var i = 0; i<10; i++){
                arr[i] = function () {
                    document.write(i+",");
                }()
            }
            return arr;
        }
        
        var myArr = test();
        for(var j = 0; j < 10; j++){
            myArr[j];
        }

立即执行函数

• 格式：(function (){}())
• 特点：立即执行，马上释放，函数的引用也不被保存
• 上边的问题可以用立即执行函数实现

对象

• 对象里函数反问对象属性值要用this访问，否则访问不了。等同于deng.属性值=

Snipaste_2020-12-30_11-16-09.png

• 对象创建方法

1. var obj = {} plainObject 对象字面量/对象直接量
2. 构造函数
   2.1 系统自带的构造函数 new Object()
   2.2 自定义

Snipaste_2020-12-30_14-56-12.png

• 构造函数的隐式操作
  • 构造函数看着和普通函数没什么两样，只不过里面都要加this.是new()让它起构造函数的作用。隐含着一开始var this = {} ,最后return this的操作。

Snipaste_2020-12-30_15-05-54.png

包装类

var str = "abcd"; str.length = 2; 看似str直接调通的length,实际上是隐式地new String('abcd').length。str 本身没有.length

原型

• 定义：原型是function对象的一个属性，它定义了构造函数制造出的对象的公共祖先。通过该构造函数产生的对象，可以继承该原型的属性和方法。原型也是对象。

• 利用原型特点和概念，可以提取共有属性。

• 对象如何查看原型 ==》隐式属性proto
  

  Snipaste_2020-12-30_16-13-15.png

• 对象如何查看对象的构造函数 ==》constructor

• 这里打印的是sunny,因为proto指向的还是sunny那个地址。new之后，底下的写法换了一整个prototype。如果把底下的cherry放在new之前也能打印cherry
  

  Snipaste_2020-12-30_16-24-22.png

• 这里打印的是b

  
  Snipaste_2020-12-30_16-55-59.png

call/apply

• 作用：改变this指向

• 区别，后面传的参数形式不同，apply后面传一个arguments

  
  Snipaste_2020-12-30_17-14-44.png
  Snipaste_2020-12-30_17-29-10.png

继承

• 圣杯模式

  
  Snipaste_2021-01-04_14-26-11.png

使用技巧

• []等于访问属性

Snipaste_2021-01-04_15-24-50.png

• 使用方法的连续调用可以return this

Snipaste_2021-01-04_15-25-48.png

• for in循环遍历对象属性

Snipaste_2021-01-04_15-56-43.png

• 循环去除prop里的属性

Snipaste_2021-01-04_16-06-49.png

this

1. 函数预编译过程this ===> window
2. 全局作用域里this ====> window
3. call/apply 可以改变函数运行时this指向
4. obj.func(); func()里面的this指向obj

数组

• 改变原数组

  • push,pop,shift(操作第一位),unshift,sort,reverse,splice（从第几位开始，截取多少的长度，在切口处添加新的数据）

• 不改变原数组

  • concat(连接两个或多个数组),join(把数组中的所有元素放入一个字符串) ->split,toString,slice(从该位开始截取，截取到该位，正负数)

• 类数组

Snipaste_2021-01-05_10-59-17.png

错误

• Error.name的六种值对应的信息

1. EvalError: eval()的使用与定义不一致
2. RangeError: 数值越界
3. ReferenceError: 非法或不能识别的引用数值
4. SyntaxError: 发生语法解析错误
5. TypeError: 操作数类型错误
6. URIError: URI处理函数使用不当

es5严格模式

• "use strict"
• 不再兼容es3的一些不规则语法，使用全新的es5规范
• 就是一行字符串，不会对不兼容严格模式的浏览器产生影像
• 局部this必须被赋值（预编译不再指向windows，就是undefined）,赋值什么就是什么
• 拒绝重复属性和参数。

DOM

• 节点
  • 四个属性：
    • nodeName:元素的标签名，以大写形式表示，只读
    • nodeValue:text节点或Comment节点的文本内容，可读写
    • nodeType:该节点的类型，只读
    • attributes: Element节点的属性集合
    • 节点的一个方法：Node.hasChildNodes();

• DOM结构树

  
  Snipaste_2021-01-05_16-47-24.png

事件

Snipaste_2021-01-06_15-31-47.png Snipaste_2021-01-06_15-38-48.png

• 事件冒泡和捕获

  
  Snipaste_2021-01-06_16-01-19.png

• 取消冒泡和阻止默认事件

  
  Snipaste_2021-01-06_16-39-51.png

• 事件委托

  
  Snipaste_2021-01-06_16-55-30.png

• 例子：

Snipaste_2021-01-06_16-58-29.png

Json

• 以对象为样板，本质上就是对象，但用途有区别，对象就是本地用的，json是用来传输的
• JSON.parse(); string -> json
• JSON.stringify; json -> string