一篇文章能够看懂基础源代码之JavaScript篇
admin
2023-07-25 22:00:08
0

javascript:解释型语言,使用js引擎进行解释,目前常用版本为ECMAScript6

js分为三部分:DOM,BOM,ECMAScript

DOM:Document Object Model 文档对象模型

BOM:Browser Object Model 浏览器对象模型

ESCMAScript:脚本执行

DOM:主要负责控制页面组件的显示,各种web组件元素的显示

BOM:主要是负责浏览器的操作,例如地址栏的数据操作,浏览器网页显示窗口的关闭,大小,加载操作,导航前进后退操作,

浏览器浏览过程可以参看之前发过的文章:

BS架构浏览过程原理(一)

BS架构浏览过程原理(二)

javascript源码后缀名一般为js,可以直接在html里面写代码,也可以另外存一个js文件,然后在html代码里引入,单独写js文件时只需要直接写内容即可

在html代码里直接使用


在js文件里书写代码,则在html使用引入的方式

  1. 声明变量:
    var myVar = 0; //推荐写法是代码行结束不用写分号;,不过推荐变来变去的,没有统一
    let myVar = '1' //let是推荐声明变量的,因为let的作用域只在本代码块里,而var一不注意可能会导致变量变成全局变量
    let myArr = [1,2,3] //声明数组变量
    let myObj = {a: 1, b: '2'} //声明一个对象实例
    myObj.a //获取对象的a属性
    myObj['b'] //获取对象的b属性
    //变量前置,如果使用var声明了变量,那么即使var语句在最后,变量在前面使用也不会报错,但如果没有声明直接使用变量则会报错。赋值除外,例如:
    console.log(a) ---->undefined
    b = 20 ---->不会错
    console.log(c) ------>报错
    var a = 10

  2. 声明方法:
    function myFunc() {} //不带参
    function myFunc(myParam) {} //带参
    当调用方法时,如果方法没有返回值,那么得到的是undefined
    let a = myFunc() // a=undefined
    给函数的原型链再追加内容:此时myFunc相当于一个类,需要new实例化才能调用追加的内容
    myFunc.prototype.newMethod = function () {}

  3. 函数的调用和对象的实例化
    当直接调用函数时,myFunc(),得到的效果是执行一次函数方法
    let a = myFunc() // a=undefined
    当使用new myFunc()时,得到的效果是实例一个对象,并执行一次函数方法,此时得到的是一个对象实例
    let a = new myFunc() // a是myFunc的实例对象

  4. 声明一个类:
    ES6有关于类的定义,在后端应用中会把类class编译functon的代码,所以后端能够识别,但直接写在前端时,浏览器是无法正确识别。需要编译浏览器才能识别
    class MyJsClass{
    constructor() {} //无参构造函数
    constructor (myVar) {} //有参构造函数
    myMethod() {} //声明方法
    }
    //继承
    class MySon extends MyFather{}
    另外一种方式声明类:
    function MyFuncClass () {}
    MyFuncClass.myStaticMethod = function (){} //给类挂载一个静态方法
    MyFuncClass.myStaticMethod()//调用静态方法,不能通过实例对象调用
    MyFuncClass.prototype.myMethod = function () {}//相当于声明一个方法,实例可以调用
    new MyFuncClass().myMethod() //调用实例方法
    let myAnnoFunc = function () {} //声明一个函数,可以通过myAnnoFunc()调用
    //闭包:把外部不能获得的内容通过return出去,导致外部获得内部的引用,使用不当会导致内存溢出

        function a() {
            let myInnerVar = 1 
            let b = function () {
                return myInnerVar
             }
            return b
        }
  5. 箭头函数 :简化function的写法
    myVar => { 执行体}
    myVar => 执行语句
    (myVar1,myVar2) =>{执行体}

  6. 运算符,算术运算,逻辑运算

        • / % ++ -- && || !
  7. 逻辑判断:
    if (myCondition){}
    else if (condition2) {}
    else {}

  8. 循环:

    for(let i=0;i<10;i++){}
    
    for(let a in myObj){}
    
    myArr.forEach(item =>{})
    
    myArr.forEach((item,index) => {})
    
    do {} while (condition)
    
    while (condition) {}
    //分支:
    switch (myVar) {
        case 1:
             //do
             break
        case 2:
             break
        default:
                break
    }

    所有未声明的却使用的变量会报undefined
    如果对undefined对象进行读取属性的操作会报Error

  9. 自执行函数 :(function(){})() //函数自执行
    window对象是整个js对象的根对象,所有的内容都是挂载在window下的,称为全局变量和全局函数
    window.myProp
    window.myMethod()
    函数自执行后相当于把内容挂载在windows上,例如
    (function(){
    myProp = 10
    })()
    执行后相当于window.myProp = 10

相关内容

热门资讯

普京称考虑全面禁止柴油出口 △当地时间28日,俄罗斯总统普京主持召开国内燃油市场保障会议。当地时间6月28日,俄罗斯总统普京在主...
委内瑞拉强震遇难人数升至145... △当地时间28日凌晨,委内瑞拉拉瓜伊拉州,震后救援现场。当地时间28日,委内瑞拉全国代表大会主席豪尔...
AI抢专家饭碗?一线社工被AI... “在AI时代,专家甚至可能不如豆包。我们现在去社区里,对方都说,豆包就能解决大部分问题。你们专家来,...
第十四届中俄(黑河)林草生态建... 科技日报记者 朱虹 通讯员 温浩 6月24日,第十四届中俄(黑河)林草生态建设学术论坛在黑龙江省黑河...
如何在沈阳筛选适配多场景的防爆... 在工业生产、现代农业、节能环保等多个领域,涉及易燃易爆介质的工况下,对测控仪表的防爆性能、测量精度都...
原创 预... 在预算三千内挑选手机,大家最看重颜值与实用性的完美结合。今天为大家盘点2000-3000元好看又好用...
原创 央... #央视曝手机测评作弊乱象 #,央视财经专项调查栏目曝光手机数码测评行业全链条作弊黑幕,完整揭露当下测...
高塔变身“电波卫士” 科技赋能... 无形的空中电波,是城市平稳运行、民生通信保障、公共安全防控的重要“生命线”,深度赋能社会生产生活的方...
手机直连卫星布局加速!中国移动... 快科技6月28日消息,据《科创板日报》报道,中国移动下一颗手机直连卫星试验星03星近期将择机发射。 ...
广东一大学禁止小米汽车入校!学... 6月28日,多家媒体报道称,广州华立学院禁止小米汽车进入校园。 该校工作人员在接受采访时说,其他外来...