JavaScript 核心语法总结：变量、函数、类与对象用法

JavaScript 概述与引入方式

本文旨在梳理 JavaScript 的基础与常用语法，供开发者参考。

概述

JavaScript 代码主要有两种引入方式：一是直接嵌入在 HTML 页面中，二是编写在独立的 .js 文件里并通过页面引用加载。

当直接嵌入代码时，<script> 标签可以放置在 <head> 或 <body> 标签内部。通常建议将函数定义放在 <head> 区域，而具体的执行代码放在 <body> 区域。例如，在 body 中编写：


<body>
<script>
   document.writeln("haha <br/> ");
</script>
</body>

引用方式


<script type="text/javascript" src="js_css/menutree.js"></script>

执行顺序与变量生命周期

执行顺序与生命周期

JavaScript 引擎自上而下依次解析和执行代码。在调用某个 function 之前，必须确保该函数已经被声明或解析完毕，这也是通常将函数定义置于 <head> 内的原因。

所有在页面中定义的 function 和变量仅在当前页面内有效。当用户离开当前页面跳转到新页面时，上一页中声明的变量和函数将无法被访问。若需跨页面传递数据，可通过 Cookie 存储并在下一页读取。

变量定义与特性

语法 - 变量

使用 var 关键字即可定义变量。位于函数体内的变量被视为局部变量，位于函数体外的则为全局变量。尽管 JavaScript 存在其他定义变量的语法，但建议仅使用这种最常见且足够使用的写法，以避免不必要的复杂性。

关于变量需注意以下几点：

(1) 变量是弱类型的，整数甚至可以直接与字符串相加，结果将转换为字符串类型。

(2) 所谓全局变量，其作用域仅限于当前页面。当页面卸载（unload）并跳转至其他页面时，所有变量均会被销毁。这与浏览器内置的全局对象（如 window、document）不同，后者在每个页面中自动存在。

(3) 字符串定义中，单引号与双引号没有区别。


<script>
  // 变量定义
  var nNumOfBytes = 10;
  var fPercent = 0.32;
  var strYourName = ‘Mr.Known';
  var pRect = new Object();

</script>

函数定义与调用机制

语法 - 函数


<script>
  function goToUrl(strUrl)
  {
    location.href = strUrl;
  }
</script>

函数可以在 HTML 事件、FORM 表单或 JavaScript 代码中被调用，例如：

HTML 元素事件回调：

FORM 元素事件回调

超链接目标

直接在 JavaScript 代码中调用


<script>
    goToUrl(”www.jb51.net");
</script>

类的定义与使用规范

语法 - 类

通常情况下，JavaScript 脚本无需使用自定义类，因为脚本语言通常只需编写少量代码。使用类会增加调试难度和阅读负担。然而，若需实现复杂功能（如菜单树），则必须通过类来完成。

JavaScript 中类的定义有两种格式，推荐使用下文介绍的格式，另一种格式较为晦涩，建议避免使用。

首先是一个不带构造参数的示例：


<script>
  function SampleClass()
  {
    // 变量变量定义
    this.nId = 10;
    
    // 成员函数定义
    this.plusId = function (nPlus)
    {
      return this.nId + nPlus;
    }
  }
</script>

接着是一个带参数的类定义


function MenuItem(l, h, t)
  {
    this.label = l;
    this.href = h;
    this.target = t;
    
    this.toHtml = function()
    {
      var html = "<a href='" + this.href + "' ";
        
      if(this.target != null)
        html += (" target='" + this.target + "' ");
        
      html += " >" + this.label + "</a>";      
      return html;
    }
  }

创建类的实例

var item = new MenuItem("haha", https://www.jb51.net, null);

关于类的定义，请注意以下几点：

(1) 建议直接复制示例代码进行修改，以避免出现奇怪的错误。

(2) 在成员函数中引用成员变量时，必须使用 this. 前缀，否则无法正确引用。

(3) 若成员函数需要返回值，直接使用 return 语句即可，无需预先声明返回值的类型。

(4) 对于熟悉 C++ 和 Java 的程序员，需理解 var p = new SomeClass(); 中的 new 关键字实际上创建了一个对象并返回其引用（指针）。

(5) 建议考虑使用 Object 类。

Object 对象与数组操作

语法 - Object 类

JavaScript 语法相对灵活，作为脚本语言无需过高的要求。虽然可以自定义类，但在大多数情况下无需声明特定结构，可以直接使用 Object 类来定义数据结构。例如：


function createObject()
{
  var obj = new Object();
  obj.x = 10;
  obj.y = 11;
  return obj;
}

如代码所示，该函数随意创建了一个 object 对象，并为其添加了 x 和 y 成员，无需通过 prototype 声明。使用者可以直接调用 o.x 和 o.y，无需猜测结构。


<script>
  var o = createObject();
  document.writeln("x=" + o.x + ", y=" + o.y);  
</script>

为了安全起见，也可以采用以下写法：


var o = createObject();

  if(o.x != null && o.y != null)
  {
    document.writeln("x=" + o.x + ", y=" + o.y);  

  }

语法 - 数组 Array


<script>
  // 创建
  var a = new Array();
  // 遍例
  for(var i=0; i<a.length; i++)
  {
    var e =   a[i];  
  }
  // 添加
  var item = new MenuItem("000");
  this.itemArray.push(item);
</script>

如何删除数组中的元素？目前的做法是直接将其赋值为 null，后续需测试确认后再做补充说明。

数组作为成员变量


function Menu()
{
  this.itemArray = new Array();
 
  this.addItem = function(l, h, t)
  {
    var item = new MenuItem(l,h,t);
    this.itemArray.push(item);
  };        
}

以上便是 JavaScript 核心语法的总结，希望能对读者有所帮助，欢迎支持本站。

JavaScript 基础语法与核心概念详解