javascript

2020-12-25 本文已影响0人 jiahzhon

语言分类

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)(执行期上下文)
- 1. 找形参和变量声明，将变量和形参作为AO属性名，值为undefined
- 1. 将实参值和形参值统一
- 1. 在函数体里面找函数声明，赋予函数体
例子：

image.png

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

AO {
  a : undefined,
  b : undefined,
}

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

AO {
  a : 1,
  b : undefined,
}

在函数体里面找函数声明，赋予函数体(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

对象创建方法

var obj = {} plainObject 对象字面量/对象直接量
构造函数
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

函数预编译过程this ===> window
全局作用域里this ====> window
call/apply 可以改变函数运行时this指向
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的六种值对应的信息

EvalError: eval()的使用与定义不一致
RangeError: 数值越界
ReferenceError: 非法或不能识别的引用数值
SyntaxError: 发生语法解析错误
TypeError: 操作数类型错误
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