美文网首页
JavaScript基础入门

JavaScript基础入门

作者: 铁匠简记 | 来源:发表于2018-08-06 00:48 被阅读9次

一、 JS代码运行环境

js代码是通过<script>标签直接嵌入页面中的,一个页面中可以有多段<script>定义的代码片段 它们既相互关联 又保持独立(角度不同)
关联性:一段script中的内容(变量、函数) 可以在另一段script中使用
独立性:一段script运行发生错误 不影响另一script的执行
1、全局执行环境
js在运行时 首先会创建一个全局执行环境 这个全局环境就是定义一个全局对象,页面中所有的内容(不同的script中的内容) 都是这个全局对象的属性,在浏览器javascript中(嵌入网页的js)这个全局对象是window。

// 定义变量
var bar = "some text";
// 定义函数
function(){
  console.log("hello world");
}
// 查看网页中的全局对象
console.log(window);
window全局对象的属性.png

这就是说 不同的script中的内容 都同属一个window对象 因此他们的内容可以共享。

<script>
    // 定义变量
    var bar = "some text";
    // 定义函数
    function(){
        console.log("hello world");
    }
    // 查看网页中的全局对象
    console.log(window);
</script>
<script>
    // 打印不同script标签里的变量
    console.log(bar);
    // 调用不同script标签里的函数
    foo();
</script>

2、运行错误
1、当发生编译错误时 代码不执行 而执行时的错误;
2、影响错误之后的的输出 而不影响前面代码的执行。
3、无论发生何种错误 一段代码发生了错误不影响另一段代码的运行。

        <script>
            // 错误之前输出
            console.log("编译错误之前的输出");
            // js代码可以不以";"结尾 它会自动补全
                        // 非法换行,编译时发生语法错误
            var bar = "hello 
                        world";
            console.log("编译错误之后的输出");           
        </script>
        
        <script>
            console.log("执行错误之前的输出");
            console.log(unknow);
            console.log("执行错误之后的输出");
        </script>

3、使用异常处理错误
js代码运行时的错误 在页面不显示。而是自动抛出一个错误对象(Error)
处理错误:
1、使用try/catch来捕获该错误对象。
2、自定义错误处理场景 使用throw new Error(‘提示信息’)手动抛出错误。
            try {
                //当执行发生错误时 会抛出一个ReferenceError错误对象
                console.log(unknow);
            } catch (e) {
                console.log(e);
                //查看错误提示信息 -> 
                console.log(e.message);
            }
            
            function division(x) {
                if (!x)   throw new Error("被除数不能为0");
                return 1/x;
            }
            
            try {
                division(0);
            } catch (e) {
                console.log(e.message);
            }
            
        </script>

二、 变量和作用域

1、变量是存储数据的容器,JS中变量使用var声明,与变量密切相关的是它的作用域。作用域是指变量作用的区域 它分为全局和局部的作用域。
2、定义在程序顶层(不属于某个函数)中的变量是全局变量,函数体内的变量为局部变量。全局变量在整个页面中都有效,局部变量只能做作用于函数体内 当函数退出(执行完毕、调用结束)时 函数体内的状态会被销毁掉(变量被删除了) 因此无法在外部访问到。
3、变量也可不用var声明 未经var声明的变量会成为全局变量 即使是定义在函数体内。
4、使用var声明 但是未赋值的变量 初始化值是undefined。
5、没有块状作用域

<script>
    //常见面试题
    function foo() {
        var scope; 
        //函数体内的变量没有块状的作用域 变量一经定义 在整个函数体内都有效
        console.log(scope);
        scope = "local";
    }
    foo();
</script>

6、作用域链
全局变量是全局对象的属性 局部变量是一个叫做激活对象(也叫调用对象 是函数调用时产生的对象)的属性。组成变量作用域的是一个对象列表或对象链 一般叫“作用域链”。
在程序顶层中变量作用域链为全局对象,定义在函数f体内的变量作用域链为 f的激活对象 => 全局对象,函数体内嵌套的函数g的作用域为 g的激活对象 => 外围函数f的激活对象 => 全局对象。
当查询变量x值时 JS会沿着它当前所在位置的作用域链的头部开始查找 如果找到 则返回结果 如果没有 则继续往下查找 直到根部(根没有则是undefined)。



三、数据类型

布尔值、字符串、数值、null、undefined等是基本类型数据,传值引用;
数组、函数和对象是引用类型,传地址引用。

四、运算符和表达式

1、typeof
使用typeof 查看变量的数据类型 它是一个运算符 不是函数 当查看一个表达式时 会使用()使之看起来像个函数。

var arr = [];
arr[0] = "z";
console.log(typeof arr);   // object
console.log(typeof 1);     //number
console.log(typeof "hello");    //string
console.log(typeof true);       //boolean
console.log(1 + "a");    //数值和字符串相加 是将数值转化成字符串"1"
console.log(typeof (1 + "a"));  //string

2、delete
可以删除一个对象的属性或者数组元素。
还可以用来删除一个未用var声明的变量。
3、instanceof
用来检测一个对象是否是某个类的实例 注意不要取检测是否是Object的实例(都是true)。
4、in
用来判断对象中是否有某个属性
5、with 语句
变量有作用域 当作用域比较长的时候 可以使用with修改作用域链的头 简化代码输入量。

<body>
    <div id="d"></div>
    <script>
        var d = document.getElementById("d");
        with (d.style) {
            width = 100 + "px";
            height = 100 + "px";
            backgroundColor = "green";
        }
    </script>
</body>

6、|| 运算
或运算执行时 当表达式两边都为false时 返回false,有一个为true就返回true。
短路运算:当左边为true时 直接返回左边的值 不用往后执行。如果左边为FALSE呢 右边代表最终的结果。

五、函数

1、函数参数
JS中的函数参数可以不严格的匹配 当调用时传入的实参个数 多余定义的形参 多出的值会被忽略 当实参个数少于形参 在函数体内的形参值为undefined。

<script>
    function f(x, y) {
        console.log(x,y);
    }
    f(1,2);
    f(1,2,3);       
    f(1);
</script>

2、arguments对象
函数体内标识符arguments有着特殊的含义 它是一个类似数组的对象 用来获取函数调用时传入的实参值。
function h(x, y) {
    //函数体内使用arguments查看传入的实参
    console.log(arguments);
    //arguments对象的数字下标存储了实参值
    console.log(arguments[0], arguments[1]);
    //arguments的length属性存放实参个数
    console.log(arguments.length);
}
h("hello","world");

arguments对象可以有效的帮助我们处理可变参数(参数长度不固定 没法定义形参接收)函数,例如 计算一组数的最大值 实际调用时 会有不同个数的参数传入。
max(1,2,3,4)
max(1,2)
max(1,2,3)

<script>
    //使用arguments来处理可变参数的函数
    function max() {
        //不定义形参 使用arguments来获取实际调用时的参数值
        //初始化最大值为第一个实参元素
        var m = arguments[0];
        //从第二个实参值开始 循环 判断
        for (var i = 1; i < arguments.length; i++) {
            if (m < arguments[i])   m = arguments[i];
        }
        return m;
    }
    console.log(max(1,2,3));
    console.log(max(1,2,3,4));
    console.log(max(1,2,3,4,5));
</script>

3、函数属性
函数是数据类型 是对象的数据类型,它有属性和方法,函数的length属性是查看函数形参的个数。
function g(x, y) {
    //函数的length属性是它定义的形参个数
    console.log(g.length);
}
g();

相关文章

  • 第三次任务总结

    任务内容—Javascript 编程入门 1.Javascript代码个人练习 a.Javascript 基础练习...

  • Blue教程汇总

    【JavaScript从入门到精通】第二十四课 JS面向对象基础-01 【JavaScript从入门到精通】第二十...

  • 微信小程序入门之注册安装

    入门的几点要求 1.对JavaScript基础有所了解,教程w3school---JavaScript[http:...

  • JavaScript的组成部分

    该部分笔记记录关于JavaScript基础的学习。今天先从入门了解一下JavaScript的组成。JavaScri...

  • JavaScript基础入门

    一、 JS代码运行环境 js代码是通过 标签直接嵌入页面中的,一个页面中可以有多段 定义的代码片段 它们既相互关联...

  • javascript基础入门

    javascript中null和undefined   javascript中存在null和undefined,n...

  • JavaScript入门基础

    定义变量的关键词是var 1. 必须使用字母,下划线,或者$开始 2. 使用多个字母,下划线,数字,$组合 3. ...

  • JavaScript基础入门

    放置位置 放在 部分最常用的方式是在页面中head部分放置 元素,浏览器解析head部分就会执行这个代码,然后才解...

  • JavaScript基础入门

    JavaScript的历史 JavaScript的历史么,百度一下或者随便打开一本讲JavaScript的书,都会...

  • JavaScript 基础入门

    简介 一种高级编程语言,通过解释执行,是一门动态类型,面向对象(基于原型)的直译语言。它已经由 ECMA(欧洲电脑...

网友评论

      本文标题:JavaScript基础入门

      本文链接:https://www.haomeiwen.com/subject/rviivftx.html