前端web之JavaScript语法(4)

本节主要归纳总结JavaScript语法，主要包含：JS语法和JS对象两个部分。后续章节将分别总结JS HTML DOM，JS Browser DOM，JS Ajax。

显示输出

常用四种显示数据方式：

方式	说明	使用场景	示例
window.alert()	写入警告框	使用警告框来显示数据	在浏览器弹框显示输出：window.alert(a+b)
document.write()	写入 HTML 输出。	仅用于测试目的	在HTML页面显示变量输出：document.write(a+b)
innerHTML	写入 HTML 元素。	更改 HTML 元素的 innerHTML 属性是在 HTML 中显示数据的常用方法。	修改id为demo的HTML元素的内容： document.getElementById("demo").innerHTML=a+b
console.log()	写入浏览器控制台	在浏览器控制台显示数据	在浏览器console控制台打印输出：console.log(a+b)

基础语法

语句

分号分隔 JavaScript 语句，虽然不强制使用，但是建议使用增加可读性

注释

单行语句注释：以 // 开头
多行代码块注释：以 /* 开头，以 */ 结尾

变量

• 使用let或者var关键字定义变量，ES6建议使用let定义变量。
• 常用变量类型：Number，String，Boolean，Array，Object；可以指定类型，也可以使用默认的动态类型，即根据值动态判断数据类型。
• typeof ：运算符能返回数据类型
• undefined：没有值的变量，其值是 undefined。任何变量均可通过设置值为 undefined 进行清空。
• 空值 , 空的字符串变量既有值也有类型, 与undefined不通。
• null：在 JavaScript 中，null 的数据类型是对象。可以通过设置值为 null 清空对象。undefined 与 null 的值相等，但类型不相等

运算符

运算符类型	运算符	说明	示例
赋值运算符	=	赋值	let a=1
	+=	加等	a+=1，等同于a=a+1
	++	递加	let a=2; a++
比较运算符	==	等于	注意: let x=5; x == "5"为true
	===	严格等于，数值和类型都完全相同	例如：let x=5; x === 5为ture，但是x === "5"为false
	!=	不相等	注意： let x=5; x != "5"为false
	!==	不等值或不等型	注意： let x=5; x != "5"为true

函数

定义函数

定义函数有两种方式：一种是直接使用关键字function定义函数，另一种是定义匿名函数然后将函数赋值给变量。
方式一：直接定义函数
函数通过 function 关键词进行定义，其后是函数名和括号 ()；
圆括号可包括由逗号分隔的参数；
由函数执行的代码被放置在花括号中：{}

        <script>
            let a=3
            let b=2
            function testFunc(x, y)
            {
                return x ** y
            }
            document.getElementById("demo").innerHTML=testFunc(a, b)
        </script>

方式二：定义匿名函数

var abs = function (x) {
    if (x >= 0) {
        return x;
    } else {
        return -x;
    }
};

上述两种定义完全等价，注意第二种方式按照完整语法需要在函数体末尾加一个;，表示赋值语句结束。

关键字arguments

• 关键字arguments，主要用于函数参数较多的场景。
  利用arguments，你可以获得调用者传入的所有参数。也就是说，即使函数不定义任何参数，还是可以拿到参数的值。

function foo(x) {
    console.log('x = ' + x); // 10
    for (var i=0; i<arguments.length; i++) {
        console.log('arg ' + i + ' = ' + arguments[i]); // 10, 20, 30
    }
}
foo(10, 20, 30);

• 实际上arguments最常用于判断传入参数的个数。
  示例：

// foo(a[, b], c)
// 接收2~3个参数，b是可选参数，如果只传2个参数，b默认为null：
function foo(a, b, c) {
    if (arguments.length === 2) {
        // 实际拿到的参数是a和b，c为undefined
        c = b; // 把b赋给c
        b = null; // b变为默认值
    }
    // ...
}

关键字rest
ES6引入了rest关键字，函数传递参数较多时，可以用于获取指定参数外的其他参数。

function foo(a, b, ...rest) {
    console.log('a = ' + a);
    console.log('b = ' + b);
    console.log(rest);
}

foo(1, 2, 3, 4, 5);
// 结果:
// a = 1
// b = 2
// Array [ 3, 4, 5 ]

foo(1);
// 结果:
// a = 1
// b = undefined
// Array []

rest只能用在最后面，前面用…标识，从运行结果可知，传入的参数先绑定a、b，多余的参数以数组形式交给变量rest。

条件判断

可使用如下条件语句：

• if ，指定条件为 true时执行
• else， 条件为 false时执行
• else if， 第一个条件为false，且当前条件为true时执行
• switch， 多个被执行的备选代码块
  break, break关键词，它会跳出 switch 代码块.它会“忽略” switch 代码块中的其他代码的执行
  default, 规定不存在 case 匹配时所运行的代码

例如：

        <script>
            switch (new Date().getDay()) {
            case 0:
                day = "星期天";
                break;
            case 1:
                day = "星期一";
                break;
            case 2:
                day = "星期二";
                break;
            case 3:
                day = "星期三";
                break;
            case 4:
                day = "星期四";
                break;
            case 5:
                day = "星期五";
                break;
            case 6:
                day = "星期六";
        } 
        console.log(day)  
        </script>

有时会需要不同的 case 来使用相同的代码, 此时不需要用break，case后面条件为空

        <script>
            switch (new Date().getDay()) {
            case 4:
            case 5:
                day = "周末快到了：）";
                break; 
            case 0:
            case 6:
                day = "今天是周末~";
                break;
            default: 
                day = "期待周末！";
        }
        console.log(day)
        </script>

循环

JavaScript 支持不同类型的循环：

• for - 多次遍历代码块
• for/in - 遍历对象属性
• while - 当指定条件为 true 时循环一段代码块
• do/while - 当指定条件为 true 时循环一段代码块

示例：

        <script>
            function testfunc(n)
            {
                let sum=0
                for(i=0; i<n; i++)
                    sum+=n
                return sum
            }
            console.log(testfunc(2))
        </script>

异常

异常关键字

• try 语句使您能够测试代码块中的错误。
• catch 语句允许您处理错误。
• throw 语句允许您创建自定义错误。
• finally 使您能够执行代码，在 try 和 catch 之后，无论结果如何。

Error 对象

error 对象提供两个有用的属性：name 和 message
示例：

        <script>
            function testfunc()
            {
                try{
                    n = document.getElementById("demo").value
                    console.log("input data: "+n)
                    sum = 0
                    for(i=0;i<n;i++)
                        sum += i
                    return sum
                }
                catch(err)
                {
                    console.log(err.message)
                }
                finally
                {
                    console.log("this is final")
                }
            }
            console.log(testfunc())
        </script>

JS面向对象

在 JavaScript 中，几乎“所有事物”都是对象。

创建对象

既可以直接创建；也可以使用new关键字创建。
以下两种创建对象方式等效：

• 直接赋值创建对象

        <script>
            let person = {
                name: "Bruce Luck",
                age:34,
                high: 178
            }
            document.getElementById("message").innerHTML =
            person.name + " is " + person.age + " years old.";          
        </script>

• new关键字创建对象

    <script>
        let person = new Object();
        person.age = 44;
        person.name = "Bruce Luck";
        person.high = "178";
        document.getElementById("message").innerHTML =
        person.name + " is " + person.age + " years old.";          
    </script>

对象方法

方法是能够在对象上执行的动作，是包含函数定义的属性。
创建对象方法的语法：

methodName : function() { 代码行 }

访问对象方法的语法：

objectName.methodName()

注意：
如果methodName不带(),则返回该方法的函数定义

例子：

   let person = {
       firstName: "Bruce",
       lastName : "Luck",
       age:34,
       high: 178, 
       fullName : function() {
           return this.firstName + " " + this.lastName;
       }
   }
   console.log(person.fullName) //访问 fullName 属性时没有使用 ()，则将返回函数定义
   document.getElementById("message").innerHTML =
   person.fullName() + " is " + person.age + " years old."; 

属性访问

访问对象属性的三种方式
方式一:

objectName.property           // person.age

方式二：

objectName["property"]       // person["age"]

方式三：

objectName[expression]       // x = "age"; person[x]

使用for…in 语句遍历对象的属性

     let person = {
         "name": "Bruce Luck",
         "age":34,
         "high": 178
     }
     for (i in person)
     {
         console.log(i)
     }

this 关键词
在 JavaScript 中，被称为 this 的事物，指的是“拥有”当前代码的对象。
this 的值，在函数中使用时，是“拥有”该函数的对象。

function person(firstName, lastName, age, eyeColor) {
    this.firstName = firstName;  //this指person对象本身
    this.lastName = lastName;
    this.age = age;
    this.eyeColor = eyeColor;
    this.changeName = function (name) {
        this.lastName = name;
    };
}

JavaScript 访问器（Getter 和 Setter）
get关键字，返回对象的属性

   let person = {
       firstName: "Bruce",
       lastName : "Luck",
       age:34,
       high: 178, 
       get name() {
           return this.firstName + " " + this.lastName;
       }
   }
   console.log(person.name) 
   document.getElementById("message").innerHTML =
   person.name + " is " + person.age + " years old.";  

set关键字，设置对象的属性

	 let person = {
	     firstName: "Bruce",
	     lastName : "Luck",
	     age:34,
	     high: 178, 
	     set name(age) {
	         this.age = age
	     }
	 }
	 person.age = 234
	 console.log(person.age) 
	 document.getElementById("message").innerHTML =
	 person.name + " is " + person.age + " years old.";   

原型prototype

JavaScript对每个创建的对象都会设置一个原型，指向它的原型对象。
当我们用obj.xxx访问一个对象的属性时，JavaScript引擎先在当前对象上查找该属性，如果没有找到，就到其原型对象上找，如果还没有找到，就一直上溯到Object.prototype对象，最后，如果还没有找到，就只能返回undefined。

• 所有 JavaScript 对象都从原型继承属性和方法。
  日期对象继承自 Date.prototype。数组对象继承自 Array.prototype。Person 对象继承自 Person.prototype。
• Object.prototype 位于原型继承链的顶端：
  日期对象、数组对象和 Person 对象都继承自 Object.prototype。

例如，创建一个Array对象：

var arr = [1, 2, 3];

原型链：arr ----> Array.prototype ----> Object.prototype ----> null

例如，创建一个函数对象：

function foo() {
    return 0;
}

原型链：foo ----> Function.prototype ----> Object.prototype ----> null

使用 prototype 属性可以给对象构造器添加新属性

   function Person(name, age, high)
   {
       this.name = name;
       this.age = age;
       this.high = high;
   }
   Person.prototype.school = "Hubei"
   stu_a = new Person("Bruce", 34, 167)
   stu_b = new Person("Frank", 43, 177)
   console.log(stu_a.name + " is " + stu_a.school)
   document.getElementById("message").innerHTML =
   stu_b.name + " is in " + stu_b.school;  

使用 prototype 属性可以给对象构造器添加新方法

   function Person(first_name, second_name, age, high)
   {
       this.first_name = first_name;
       this.second_name = second_name;
       this.age = age;
       this.high = high;
   };
   Person.prototype.name = function() {
       return this.first_name + " " + this.second_name;
   };
   stu_a = new Person("Bruce","Xu", 34, 167);
   stu_b = new Person("Frank", "Xu", 43, 177);
   console.log(stu_a.name() + " is " + stu_a.age);
   document.getElementById("message").innerHTML =
   stu_b.name() + " is in " + stu_b.age; 

对象构造器

有时我们需要创建相同“类型”的许多对象的“蓝图”。创建一种“对象类型”的方法，是使用对象构造器函数。

• 对象构造器类似与面向对象语言的类，通常使用大写首字母对构造器函数命名。
• 通过 new 关键词调用构造器函数可以创建相同类型的对象.

示例：

    function Person(name, age, high)
    {
        this.name = name;
        this.age = age;
        this.high = high;
    }
    stu_a = new Person("Bruce", 34, 167)
    stu_b = new Person("Frank", 43, 177)
    console.log(stu_a.name + " is " + stu_a.age + " years old.")
    document.getElementById("message").innerHTML =
    stu_b.name + " is " + stu_b.age + " years old."; 

在构造器函数中，this 是没有值的。它是新对象的替代物。 当一个新对象被创建时，this 的值会成为这个新对象。
注意：如果不写new，这就是一个普通函数，它返回undefined。但是，如果写了new，它就变成了一个构造函数，它绑定的this指向新创建的对象，并默认返回this，也就是说，不需要在最后写return this;。

与向已有对象添加新属性不同，无法为对象构造器添加新属性，例如：

     function Person(name, age, high)
      {
          this.name = name;
          this.age = age;
          this.high = high;
      }
      stu_a = new Person("Bruce", 34, 167)
      stu_b = new Person("Frank", 43, 177)
      Person.school = "Tinghua University"
      console.log(stu_a.name + " is " + stu_a.school)//执行代码将会提示属性undefined

向构造器添加一个新属性，必须添加到构造器函数：

 function Person(name, age, high, school="Tianjin")
     {
         this.name = name;
         this.age = age;
         this.high = high;
         this.school = school
     }
     stu_a = new Person("Bruce", 34, 167)
     stu_a.school = "Bejing"
     stu_b = new Person("Frank", 43, 177)
     console.log(stu_a.name + " is " + stu_a.school)
     document.getElementById("message").innerHTML =
     stu_b.name + " is in " + stu_b.school;  

新对象方法

// 添加或更改对象属性
Object.defineProperty(object, property, descriptor)

// 添加或更改多个对象属性
Object.defineProperties(object, descriptors)

// 访问属性
Object.getOwnPropertyDescriptor(object, property)

// 以数组返回所有属性
Object.getOwnPropertyNames(object)

// 以数组返回所有可枚举的属性
Object.keys(object)

// 访问原型
Object.getPrototypeOf(object)

// 阻止向对象添加属性
Object.preventExtensions(object)

// 如果可将属性添加到对象，则返回 true
Object.isExtensible(object)

// 防止更改对象属性（而不是值）
Object.seal(object)

// 如果对象被密封，则返回 true
Object.isSealed(object)

// 防止对对象进行任何更改
Object.freeze(object)

// 如果对象被冻结，则返回 true
Object.isFrozen(object)

// 定义 getter
get: function() { return language }
// 定义 setter
set: function(value) { language = value }

示例：

   function Person(first_name, second_name, age, high)
   {
       count = 0
       this.first_name = first_name;
       this.second_name = second_name;
       this.age = age;
       this.high = high;
       this.name = function() {
           return this.first_name + " " + this.second_name;
       }
   };
   stu_a = new Person("Bruce","Xu", 34, 167);
   Object.defineProperty(stu_a, "school", {value: "wuhan un"})
   console.log(stu_a.name() + " is " + stu_a.school);

类class

class用法

关键字class从ES6开始正式被引入到JavaScript。

• class的定义包含了构造函数constructor和方法.
• 方法不再需要function关键字

例如，使用原型构建对象

function Student(name, age) {
    this.a = name
    this.b = age
    this.hello = function() {
        console.log(this.name + "age is: " + this.age)
    }
}
Student.prototype.newfunc = function () {
    alert.prototype('add new func')
}

使用关键字class定义：

class Student
{
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
    hello()
    {
        console.log(this.name + "age is: " + this.age);  
    }
}

class继承

class子类继承父类，需要extends父类，并且在子类的构造函数中使用super()函数调用父类的构造方法。
示例：

class Student
{
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
    hello()
    {
        console.log(this.name + "age is: " + this.age);  
    }

};
class PrimaryStudent extends Student {
    constructor(name, age, grade) {
    	super(name, age);//调用父类构造方法
        this.grade = grade;
    };
};

注意：super()调用父类构造方法必须在this关键字赋值之前

参考文献：
https://www.w3school.com.cn/js/index.asp
https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript