JavaScript基础复习笔记

1.前置知识

1.1五大主流浏览器内核

IE: trident
Chrome: webkit blink
safari: webkit
firefox: gecko
opera: presto

1.2编程语言

编译型翻译过程: 源码 -> 编译器 -> 机器语言 -> 可执行的文件
解释型翻译过程: 源码 -> 解释器 -> 解释一样执行一行

1.3JavaScript

ECMAscript: 语法、变量、关键字、保留字、值、原始类型、引用类型运算、对象、继承、函数
DOM: document object model W3C规范
BOM: browser object model 没有规范

1.4单线程和多线程

js引擎肯定是单线程的但是可以模拟多线程

轮转时间片：短时间内轮流执行多个任务的片段

任务1 任务2
切分任务1 任务2
随机排列这些任务片段，组成队列
按照这个队列顺序将任务片段送进JS进程
js线程执行一个又一个的任务片段

2.基础知识

2.1变量

    var a;          //声明变量
    a = 3;          //变量赋值
    var a = 3;      //变量声明并赋值

    var x = 1,      //一次声明并赋值多个变量
        y = 2;
    
    var z = x + y;  //运算的优先级大于赋值的优先级

2.2JS的值

原始值(基本数据类型)

Number：数字
String：字符串
Boolean：布尔值(true/false)
undefined：未被定义的
null：空值

引用值(引用数据类型)

Object：对象
arry：数组
function：函数
date：日期对象
RegExp：正则表达式

3.基础语法

3.1循环

    //1.for循环 
    for(var i = 0; i < 10; i++) {
        console.log(i)
    }
    for(初始胡变量；条件表达式；操作表达式) {
	循环体
    }
    // 双重for循环,外层循环执行一次,里面循环执行全部
    for(外层初始胡变量；外层条件表达式；外层操作表达式) {
	循环体1
        for(里层初始胡变量；里层条件表达式；里层操作表达式) {
            循环体2
        }
    }
    /*
    步骤：
        1.声明变量i = 0
        2.if(i < 10) {
            log(i)
        }
        3. i++
        4.i = 1了
        5.if(i < 10) { 不满足条件时停止循环
            log(i)
        }
        6. i++
    */
    // break 退出循环
    // continue 结束本次循环，直接继续执行下次循环

    // 2.while循环
    while(条件表达式) {
	    循环体
    }
    var a = 1;
    while(a < 10) {
        num++
    }
    // do while循环
    do{
	    循环体
    } while(条件表达式)
    // dowhile至少会执行一次循环体，因为先do做后while判断

用来计数跟次数相关的用for while和dowhile用来做更复杂的

3.2 typeof()

console.log(typeof(typeof(a)))--string因为typeof返回值是字符串格式

3.3数据类型转换

Number()强制转换成数字型
parseInt()转化成整数数字型,必须以数字开头否则返回NaN
parseFlot()转为数字,可转换小数,如果无法转换则返回NaN
toFixed()保留几位小数,会四舍五入
String()转字符串
toString()转字符串--undefined和null无toString方法
Boolean()代表空、否定的值会被转成false 例如0，NaN，Null，'',undefined其余的全是true
isNaN()检查其参数是否是非数字值-也会先进行隐式转换

4.函数

    // 最基本的函数写法 - 函数声明式
    function test('形参') {
        // 函数执行语句
    }
    // 匿名函数表达式   函数字面量
    var fn = function ('形参') {
        // 函数执行语句
    }
    // 注：函数都需要return 不写的话js会默认在最后添加一个return语句来终止函数

4.1变量类型

    a = 1;
    function fn1() {
        // 局部变量
        var b = 2;
        console.log(a);
        function fn2() {
            // 局部变量
            var c = 3;
            console.log(b)
        }
        fn2()
        consoloe.log(c)
    }
    fn1()
    // 内部可访问外部变量，外部不可访问内部变量

4.2初始化参数--默认值

参数的默认值不设置就是undefined

    function fn(a = 1, b = 2) {
        console.log(a);
        console.log(b);
    }
    // a使用默认值,b使用实参的值
    fn(undefined,1)

4.3递归

一个函数内部调用自己就是递归,记住递归一定要有结束条件要不就是死循环了

    function fn(x) {
        if(x > 0) {
            return x + fn(x-1)
        } else {
            return 0
        }
    }
    fn(3)
    /*  解析
        fn(3) = 3 + fn(3-1)
              = 3 + 2 + f(2-1)
              = 3 + 2 + 1 + f(1-1)
    */

4.4预编译

检查通篇的语法错误
预编译的过程
解释一行执行一行

    fn()
    function fn() {
        console.log(1)
    }

    console.log(a)//结果undefined而不是a is not defined
    var a = 10
    /*
        函数声明整体提升
        变量只有声明是提升的,赋值是不提升的
    */

预编译前奏

imply global暗示全局变量任何变量，如果变量未经声明就赋值，这些变量就为全局对象所有。一切声明的全局变量和未经声明的变量，全归window所有。

    var a = 123;
    window = {
        a: 123
    }
    function test(){
	// 这里的b是未经声明的变量，所以是归window所有的。
	var a = b = 110;
    }

预编译-函数执行期上下文

创建AO对象（Activation Object）函数上下文
找形参和变量声明，将形参名和变量作为AO属性名，值为undefined
将实参值赋值给形参。
在函数体里面找函数声明，值赋予函数体。
执行

    function test(a){
        console.log(a)
        var a = 1
        console.log(a)
        function a() {

        }
        console.log(a)
        var b = function() {}
        console.log(b)
        function d() {}
    }
    test(2)
    /*OA = {
        a: undefined -- 2 -- function a() {} -- 1,
        b: undefined -- function() {}
        d: undefined -- function d() {}
    }*/


    // 例子2
    function test(a, b) {
        console.log(a); //1
        c = 0;
        var c;
        a = 5;
        b = 6;
        console.log(b);
        function b() {}
        function d() {}
        console.log(b);
    }
    test(1)
    /*
        OA = {
            a: undefined -- 1 -- 5,
            b: undefined -- function b() {} -- 6,
            c: undefined -- 0,
            d: function d() {}
        }
    */

预编译-全局执行期上下文

创建GO对象（global object）全局上下文
找变量声明，将变量名作为GO属性名，值为undefined
找函数声明，作为GO属性，值赋予函数体
执行

    var a = 1;
    function a() {
        console.log(2);
    }
    console.log(a);
    /*
        GO = {
            a: undefined -- function a() {} -- 1
        }
    */

    // 例子1
    var b = 3
    console.log(a);
    function a(a) {
        console.log(a);
        var a = 2
        console.log(a);
        function a() { }
        var b = 5
        console.log(b);
    }
    a(1)
    /*
        GO = {
            b: undefined -- 3
            a: function a(a) {...}
        }
        OA = {
            a: undefined -- 1 -- function a() {...} -- 2
            b: undefined -- 5
        }
    */


    // 例子2
    a = 1
    function test() {
        console.log(a); 
        a = 2
        console.log(a);
        var a = 3
        console.log(a);
    }
    test()
    var a
    /*
        GO = {
            a: undefined -- 1 -- 2
            test: function test() {...}
        }

        AO = {
            a: undefined -- 2 -- 3
        }
    */

4.5作用域

[[scope]]

函数创建时，生成的一个JS内部的隐士属性
函数存储作用域链的容器，作用域链里存储这AO/GO，函数执行完以后AO是要销毁的，每次执行函数都会生产一个新的AO，函数执行完AO便会销毁，也就是说AO是一个即时的存储容器

    function a() {
        function b() {
            var b = 2
        }
        var a = 1
        b()
    }
    var c = 3
    a()

注：每个函数的作用域链都是包含GO的--每一个函数在被定义的时候就包含了全局执行上下文GO

图解
1.-----------------------------

2.-----------------------------

3.-----------------------------

4.-----------------------------

5.-----------------------------

6.-----------------------------

7.-----------------------------

8.-----------------------------

全局执行的前一刻 GO生成函数声明已经定义 --- 函数被定义的时候就生成了作用域和作用域链和GO当函数执行前一刻则会生成自己的AO

4.6初识闭包

    function test1() {
        function test2() {
            var b = 2
            console.log(a)
        } 
        var a = 1
        return test2()
    }
    var c = 3
    var test3 = test1()
    test3()

图解
1.-----------------------------

2.-----------------------------

3.-----------------------------

4.-----------------------------

5.-----------------------------

当内部函数被返回到外部并保存时，一定会产生闭包，闭包一定会产生原来的作用域链不释放(不销毁)，过度的闭包可能会导致内存泄漏，或加载过慢

4.7立即执行函数

页面加载自动执行,执行完成后立即释放(销毁)

    // 写法1
    (function() {

    })()
    // 写法2--w3c建议这么写
    (function () {

    }())
    // 一定是表达式才能被执行符号()执行

案例

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

5.对象

    // 1.对象字面量
    let obj = {
        name: '冷然',
        age: 18
    }

    /*  2.构造函数
        系统自带的构造函数
        对象是通过实例化构造函数而构造的一个对象实例
    */
    var obj = new Object()
    obj.name = '冷然',
    obj.age = '18'
    console.log(obj)

    // 3.自定义构造函数
    function Test() {
        this.name = '冷然'
        this.age = 18
        this.smoke = function() {
            console.log('I am smoking')
        }
    }
    var test = new Test()
    console.log(test)

    
    // 4.自定义构造函数传参
    function Teacher(opt) {
        this.name = opt.name
        this.sex = opt.sex
        this.weight = opt.weight
    }
    var t1 = new Teacher({
        name: '冷然',
        sex: '男',
        weight: 108
    })

5.1构造函数中的this

    function Car(color) {
        this.color = color
    }
    var car1 = new Car('red')
    var car2 = new Car('blue')
    /*
        GO = {
            car: function(){}
            car1: {
                color: 'red'
            }
        }
        AO = { 
            1.ao执行了但是看到new了所以系统认为是实例化对象
            2.所以ao里就保存了this对象,然后看函数内部去保存对应的this键值对
            3.隐士的在最后加了个return this
            car1接收的是返回的this对象,然后car1是全局标量所以保存到了go
            this: {
                color: color
            }
        }
    */

实例化之前this.指向window 实例化之后this指向为当前实例化对象而不是构造函数本身

posted @ 2021-04-01 14:23 冷然57 阅读(79) 评论(0) 收藏举报

刷新页面返回顶部

冷然57