2 基础Ⅱ

对象

JavaScript 对象是属性和方法的命名值的容器

创建

一般使用 {} 的形式创建，不推荐使用 new

var person = {
    firstName:"Bill",
    lastName:"Gates",
    age:62,
    eyeColor:"blue",
    fullName : function() {
	    return this.firstName + " " + this.lastName;
	}
};

删除属性

delete 会同时删除属性的值和属性本身

var person = {firstName:"Bill", lastName:"Gates", age:62, eyeColor:"blue"};
delete person.age;   // 或 delete person["age"];

添加方法

var person = {
  firstName: "Bill",
  lastName : "Gates",
  id     : 678,
};

person.name = function() {
  return this.firstName + " " + this.lastName;
};

可迭代对象

对象方法

const person = {
  firstName: "Bill",
  lastName : "Gates",
  language : "EN"
};

// 以现有对象为原型创建对象
Object.create()

// 添加或更改对象属性
Object.defineProperty(person, "language", {value : "NO"});
// 设置 language 为只读
Object.defineProperty(person, "language", {writable:false});
// 使 language 不可枚举
Object.defineProperty(person, "language", {enumerable:false});

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

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

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

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

try…catch

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

function myFunction() {
  var message, x;
  message = document.getElementById("p01");
  message.innerHTML = "";
  x = document.getElementById("demo").value;
  try { 
    if(x == "")  throw "是空的";   //throw自定义错误
    if(isNaN(x)) throw "不是数字";
    x = Number(x);
    if(x > 10)   throw "太大";
    if(x < 5)  throw "太小";
  }
  catch(err) {                          //err是js提供的错误对象
    message.innerHTML = "输入：" + err;
  }
  finally {
    document.getElementById("demo").value = "";    //在每次try执行完，清空输入框
  }
}

严格模式

在脚本的开头定义 ："use strict";

为什么使用严格模式？

严格模式使我们更容易编写“安全的” JavaScript，把之前可接受的“坏语法”转变为真实的错误

• 在普通的 JavaScript 中，错打变量名会创建新的全局变量。在严格模式中，此举将抛出错误，这样就不可能意外创建全局变量
• 在普通 JavaScript 中，如果向不可写属性赋值，开发者不会得到任何错误反馈。在严格模式中，向不可写的、只能读取的、不存在的属性赋值，或者向不存在的变量或对象赋值，将抛出错误

// 声明严格模式
"use strict";
x = 3.14;       // 在不声明变量的情况下使用变量，是不允许的，这将引发错误

var x = \010;            // 避免错误的字符转义，这将引发错误

var obj = {};
Object.defineProperty(obj, "x", {value:0, writable:false});
obj.x = 3.14;            // 写入只读属性是不允许的，这将引发错误

this

this 关键词指的是它所属的对象

• 在方法中，this 指的是所有者对象
• 单独的情况下，this 指的是全局对象
• 在函数中，this 指的是全局对象
• 在函数中，严格模式下，this 是 undefined
• 在事件中，this 指的是接收事件的元素
• 在使用显示绑定时【call() ，apply() …】可以将 this 引用到任何对象
• 对于箭头函数，this 关键字始终表示箭头函数的所有者

// this指的是person对象
var person = {
  firstName: "Bill",
  lastName : "Gates",
  id     : 678,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

// this指的是window对象
var x = this;
document.getElementById("demo").innerHTML = x;

// this指的是拥有myFunction方法的对象
function myFunction() {
  return this;
}

// 这时this是未定义的，因为严格模式不允许默认绑定
"use strict";
function myFunction() {
  return this;
}

// 指的是button元素
<button onclick="this.style.display='none'">
  点击来删除我！
</button>

// 将person2作为参数，传递给person1的fullName函数
var person1 = {
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
}
var person2 = {
  firstName:"Bill",
  lastName: "Gates",
}
person1.fullName.call(person2);  // 会返回 "Bill Gates"

类

JavaScript 的类与 Java 类似

// 定义一个名为 Car 的类
class Car {  
  constructor(name, year) {       // constructor是构造方法，必须要有
    this.name = name;
    this.year = year;
  }
  age(x) {        //age是Car类中的方法
    return x - this.year;
  }
}

let date = new Date();
let year = date.getFullYear();
let myCar = new Car("Ford", 2014);
document.getElementById("demo").innerHTML = "My car is " + myCar.age(year);

模块

模块允许将代码分解成单独的文件，这使维护代码库更加容易

[!attention] 模块仅适用于 HTTP(s) 协议，通过 file:// 协议打开的网页无法使用导入/导出

导出

命名导出

// 采用逐个内联导出
export const name = "Bill";
export const age = 19;

// 采用底部一次性导出
const name = "Bill";
const age = 19;

export {name, age};

默认导出

const message = () => {
const name = "Bill";
const age = 19;
return name + ' is ' + age + 'years old.';
};

export default message;  // 默认导出message

[!attention] 一个文件中只能有一个默认导出

导入

从命名导入中导出

<script type="module">   // 需要声明 type="module"
import { name, age } from "./person.js";   // 再导入
</script>

从默认导入中导出

<script type="module">   // 需要声明 type="module"
import message from "./message.js";
</script>