【区块链-前端交互】第三篇：JS 基础语句和函数、对象和类class

JavaScript 基础语句

参考文章：JavaScript 简介-中文网

if 语句

let year = prompt('In which year was ECMAScript-2015 specification published?', '');

if (year < 2015) {
  alert( 'Too early...' );
} else if (year > 2015) {
  alert( 'Too late' );
} else {
  alert( 'Exactly!' );
}

逻辑运算符

或运算：||
与运算：&&
非：!

函数

常规函数声明

函数定义：

function name(parameter1, parameter2, ... parameterN) {
  ...body...
}

全局变量：任何函数之外声明的变量，都被称为全局变量。

函数对外部变量拥有全部的访问权限，函数也可以修改外部变量。

如果在函数内部声明了同名变量，那么函数内该 局部变量 会遮蔽 全局变量。

通过函数表达式创建函数

在任何表达式的中间创建一个新函数：

let sayHi = function() {
  alert( "Hello" );
};

请注意，function 关键字后面没有函数名。函数表达式允许省略函数名。

重点理解：重申一次，无论函数是如何创建的，函数都是一个值，例如：

function sayHi() {   // (1) 创建
  alert( "Hello" );
}

let func = sayHi;    // (2) 复制，把函数体代码复制给了func变量，可以使用 func() 调用创建的函数体

func(); // Hello     // (3) 运行复制的值（正常运行）！
sayHi(); // Hello    //     这里也能运行（为什么不行呢）

箭头函数声明

创建函数还有另外一种非常简单的语法，并且这种方法通常比函数表达式更好。

箭头函数和常规函数：

// 单行箭头函数
let sum = (a, b) => a + b;

// 多行箭头函数
let sum = (a, b) => {  // 花括号表示开始一个多行函数
  let result = a + b;
  return result; // 如果我们使用了花括号，那么我们需要一个显式的 “return”
};


/* 箭头函数是下面这个常规函数的更短版本：

let sum = function(a, b) {
  return a + b;
};
*/

JavaScript 特性

代码结构

语句用分号分隔，但换行符也被视为分隔符，所以句尾不用输入额外分隔符，类似 Python。

严格模式

为了完全启用现代 JavaScript 的所有特性，我们应该在脚本顶部写上 “use strict” 指令，该指令必须位于 JavaScript 脚本的顶部或函数体的开头

'use strict';

...

浏览器交互

使用浏览器作为工作环境，基本的 UI 功能将是：

• prompt(question[, default])：提出一个问题，并返回访问者输入的内容，如果他按下「取消」则返回 null。
• confirm(question)：提出一个问题，并建议用户在“确定”和“取消”之间进行选择。选择结果以 true/false 形式返回。
• alert(message)：输出一个 消息。

这些函数都会产生 模态框，它们会暂停代码执行并阻止访问者与页面的其他部分进行交互，直到用户做出回答为止。

对象和symbol类型

对象（C的结构体）

创建一个空的对象：

let user = new Object(); // “构造函数” 的语法
let user = {};  // “字面量” 的语法

对象属性：

let user = {     // 一个对象
  name: "John",  // 键 "name"，值 "John"
  age: 30        // 键 "age"，值 30
};

symbol类型

“symbol” 值表示唯一的标识符 / 变量，我的个人理解，主要作用是为了避免 字符串 和 变量名 重复带来的混乱。

class对象

Class 基本语法

基本语法是：

class MyClass {
  // class 方法
  constructor() { ... }
  method1() { ... }
  method2() { ... }
  method3() { ... }
  ...
}

用法基本相同：

class User {

  constructor(name) {
    this.name = name;
  }

  sayHi() {
    alert(this.name);
  }

}

// 用法：
let user = new User("John");
user.sayHi();