JavaScript系列之基础篇

Posted 2021-06-29 coderkey

九，作用域导读

1，作用域

1.1，作用域概述

（1）含义：

就是代码变量（名字）在某个范围内起作用和效果，就叫做作用域。
目的就是为提高程序的可靠性，减少命名冲突。

1.2，全局作用域

（1）含义：

整个script标签或者是一个单独的js文件

1.3，局部作用域（函数作用域）

（1）含义：

在函数内部就是局部作用域，只在函数内部起效果和作用。

2，变量的作用域

2.1，变量的作用域的分类

（1）含义：

在javascript中，根据作用域的不同，变量可以分为全局变量和局部变量。

2.2，全局变量

（1）含义：

在全局作用域下的变量，就叫做全局变量（在函数外部定义的变量）。

（2）例如：

  var  num = 10；  // num就是一个全局变量，在全局下都可以用。
  console.log(num);   // 10
  function  fn( )  {
        console.log(num);
   }
   fn( );   // 10

2.3，局部变量

（1）含义：

在局部作用域下的变量或者在函数内部的变量，就叫做局部变量（在函数内部定义的变量）

（2）例如：

  function  fn( )  {
  var  num = 10；  // num就是一个局部变量，只能在函数内部使用。
  num2 = 20;    //  在函数内部没有声明直接赋值的变量也是全局变量。
   }
   fn( );   // 10
   console.log(num);    //  undefined  
   console.log(num2);    // 20

（3）注意：

1，全局变量在代码的任何位置都可以使用。
2，在函数内不使用var声明的变量也是全局变量。
3，函数的形参实际上就是局部变量。

3，作用域链

3.1，作用域链概述

（1）含义：

内部函数访问外部函数的变量，采取的是链式（就近原则）查找的方式来决定那个值，这种结构我们称之为作用域链。

（2）例如：

  var num = 10;
  function fn( ) {  // 外部函数
       var num = 20;
       function fun( ) {  // 内部函数
            console.log(num);
       }
       fun( );
     }
     fn( );
   // 20

4，预解析

4.1，预解析概述

（1）含义：

JavaScript代码是由浏览器中的JavaScript解析器来执行的。JavaScript解析器在运行
JavaScript代码的时候分为两步：预解析和代码执行。

（2）类别：

预解析分为变量预解析（变量提升）和函数预解析（函数提升）。

（3）方法：

1，预解析 js 引擎会把js里面所有的var，还有 function 提升到当前作用域的最前面。
2，代码执行，按照代码书写的顺序从上往下执行。

（4）例如：

  //案例1
  var num = 10;
      fun( );
      function fun( ) {
        console.log(num);
        var num = 20;
      }

      //相当于执行了以下操作
      var num;
      function fun( ) {
        var num;
        console.log(num);  //undefined
        num = 20;
      }
      num = 10;
      fun( );

    //案例2
      f1( );
      console.log(c);
      console.log(b);
      console.log(a);
      function f1( ) {
        var a = b = c = 9;
        console.log(a);
        console.log(b);
        console.log(c);
      }

      //相当于执行了以下操作
      function f1( ) {
        var a;  //a是局部变量，b和c是全局变量
        a = b = c = 9; //相当于 var a = 9; b = 9; c = 9;
        //集体声明 var a = 9, b = 9, c = 9;
        console.log(a);  //9
        console.log(b);  //9
        console.log(c);  //9
      }
      f1( );
      console.log(c);  //9
      console.log(b);  //9
      console.log(a);  //报错

---

十，对象导读

1，对象的概述

1.1，什么是对象 object

（1）含义：

在JavaScript中，对象是一组无序的相关属性和方法的集合，对象是具体的事物，所有的事物都是对象，例如字符串、数值、数组、函数等。

（2）组成：

对象是由属性和方法组成的。

2，创建对象的三种方式

2.1，利用字面量创建对象

（1）含义：

对象字面量：就是花括号/大括号{ }里面包含了表达这个具体事物（对象）的属性和方法。

（2）语法：

1，创建对象
var obj = { }； // 创建一个空的对象
2，使用对象
对象名.属性名 / 对象名['属性名'] //调用对象的属性
对象名.方法名( ) //调用对象的方法

（3）例如：

  var obj = {
       username: '李华',
       age: 18,
       sex: '男',
       sayHi: function( ) {
         console.log('hello world');
       }
     }
     console.log(obj.username);   //李华
     console.log(obj['age']);   // 18
     obj.sayHi( );   // hello world

2.2，利用 new Object 创建对象

（1）语法：

1，创建对象
var obj = new Object( )； // 创建一个空的对象
2，使用对象
对象名.属性名 / 对象名['属性名'] //调用对象的属性
对象名.方法名( ) //调用对象的方法

（2）例如：

  var  obj  =  new  Object( );
  obj.username  =  '李华';
  obj.age  =  18;
  obj.sex  =  '男';
  obj.sayHi  =  function( )  {
  console.log('hello world');
  }
  console.log(obj.username);   //李华
  console.log(obj['age']);   // 18
  obj.sayHi();   // hello world

2.3，利用构造函数创建对象

（1）含义：

构造函数就是把我们对象里面一些相同的属性和方法抽象出来封装到函数里面。

（2）语法：

1，声明构造函数
function 构造函数名( ) {
this.属性 = 值；
this.方法 = function( ) { }
}
2，调用构造函数
new 构造函数名( )；

（3）例如：

  //构造函数
  function Star(username, age, sex) {
       this.name = username;
       this.age = age;
       this.sex = sex;
       this.sing = function(sang) {
             console.log(sang);
       } 
    }
   //对象
   var ldh = new Star('刘德华', 18, '男');   //调用函数返回的是一个对象 object
   console.log(ldh.name);   // 刘德华
   console.log(ldh['sex']);   // 男
   ldh.sing('冰雨');    // 冰雨

   var zxy = new Star('张学友', 17, '男'); 
   console.log(zxy.name);   // 张学友
   console.log(zxy['age']);   // 17
   zxy.sing("一路上有你");   // 一路上有你

（4）注意：

1，构造函数名字首字母要大写。
2，构造函数不需要 return 就可以返回结果。
3，new构造函数可以在内存中创建了一个空的对象。
4，this 就会指向刚才创建的空对象。
5，执行构造函数里面的代码，给这个空对象添加属性和方法。
6，返回这个对象。

2.4，遍历对象属性

（1）含义：

for…in语句用于对数组或者对象的属性进行循环操作。

（2）语法：

for （变量 in 对象）{
… …
}

（3）例如：

  var obj = {
          name:  '李华',
          age:  18，
          sex:  '男'
  }
  for（var  k  in  obj） {
         console.log(k);      //得到属性名  name   age   sex
         console.log(obj[k]);     //得到属性值  李华  18  男
  }

---