JavaScript&TypeScript学习总结

JavaScript

简介：
JavaScript 是一种解释型的脚本语言，被大量地应用于网页中，用以实现网页和浏览者的动态交互。目前几乎所有的浏览器都可以很好地支持 JavaScript。由于 JavaScript 可以及时响应浏览者的操作，控制页面的行为表现，提高用户体验，因而已经成为前端开发人员必须掌握的语言之一。

JavaScript的组成部分
标准化后的 JavaScript 包含了 3 个组成部分
JavaScript组成部分

1. ECMAScript
   脚本语言的核心内容，定义了脚本语言的基本语法和基本对象。现在每种浏览器都有对ECMAScript标准的实现。
2. DOM（Document Object Model）
   文档对象模型，它是HTML和XML文档的应用程序编程接口。浏览器中的DOM把整个网页规划成由节点层级构成的树状结构的文档。用DOM API可以轻松地删除、添加和替换文档树结构中的节点。
3. BOM（Browser Object Model）
   浏览器对象模型，描述了对浏览器窗口进行访问和操作的方法和接口。
   JavaScript的特点
   JavaScript 是一种运行在浏览器中的主要用于增强网页的动态效果、提高与用户的交互性的编程语言。相比于其他编程语言，它具有许多特点，主要包括以下几方面。
4. 解释性
   JavaScript 不同于一些编译性的程序语言，它是一种解释性的程序语言，它的源代码不需要经过编译，直接在浏览器中运行时进行解释。
5. 动态性
   JavaScript 是一种基于事件驱动的脚本语言，它不需要经过 Web 服务器就可以对用户的输入直接做出响应。
6. 跨平台性
   JavaScript 依赖于浏览器本身，与操作环境无关。任何浏览器，只要具有JavaScript脚本引擎，就可以执行JavaScript。目前，几乎所有用户使用的浏览器都内置了JavaScript脚本引擎。
7. 安全性
   JavaScript 是一种安全性语言，它不允许访问本地的硬盘，同时不能将数据存到服务器上，不允许对网络文档进行修改和删除，只能通过浏览器实现信息浏览或动态交互。这样可有效地防止数据丢失。
8. 基于对象
   JavaScript 是一种基于对象的语言，同时也可以被看作是一种面向对象的语言。这意味着它能运用自己已经创建的对象。因此，许多功能可以来自于脚本环境中对象的方法与脚本的相互作用。

基本语法
语句
JavaScript程序的执行单位为行（line），也就是一行一行地执行。一般情况下，每一行就是一个语句。
语句（statement）是为了完成某种任务而进行的操作，比如下面就是一行赋值语句：

var a = 1 + 3;

这条语句先用var命令，声明了变量a，然后将1 + 3的运算结果赋值给变量a。
1 + 3叫做表达式（expression），指一个为了得到返回值的计算式。语句和表达式的区别在于，前者主要为了进行某种操作，一般情况下不需要返回值；后者则是为了得到返回值，一定会返回一个值。
凡是JavaScript语言中预期为值的地方，都可以使用表达式。比如，赋值语句的等号右边，预期是一个值，因此可以放置各种表达式。一条语句可以包含多个表达式。
语句以分号结尾，一个分号就表示一个语句结束。多个语句可以写在一行内。

变量

变量是对“值”的引用，使用变量等同于引用一个值。每一个变量都有一个变量名。

var a = 1;

上面的代码先声明变量a，然后在变量a与数值1之间建立引用关系，也称为将数值1“赋值”给变量a。以后，引用变量a就会得到数值1。最前面的var，是变量声明命令。它表示通知解释引擎，要创建一个变量a。
变量的声明和赋值，是分开的两个步骤，上面的代码将它们合在了一起，实际的步骤是下面这样。

var a;
a = 1;

ECMAScript 的变量是松散类型的，所谓松散类型就是可以用来保存任何类型。用 var 操作符定义的变量将成为定义该变量的作用域中的局部变量。也就是说，如果在函数中使用 var 定义一个变量，那么这个变量在函数退出后就会被销毁。

function test(){
    var message = "hi"; // 局部变量，去掉var即为全局变量
}
test();
alert(message); // 错误！

对象Object

对象 Object 是ECMAScript 中使用最多的一个类型。我们常将数据和方法封装在对象中。
创建对象有如下两种方式，我们常用第二种。

//方式一new
var person = new Object();//生成空对象
person.name = 'Elon Musk';//设置对象的属性
person.age = 46;
person.job = 'SpaceX Rocket';
person.sayName = function(){    //设置对象的方法/函数，注意此处
    console.log(this.name);
};
//方式二字面量
var person = {
    name: 'Lary Page',
    age: 47,
    job: 'Software Engineer',
    sayName: function(){        //注意此处
        console.log(this.name);
    }
};
console.log(person.job);
person.sayName();

虽然 Object 构造函数或对象字面量都可以用来创建单个对象，但这些方式有个明显的缺点：使用同一个接口创建很多对象，会产生大量的重复代码。为解决这个问题，人们开始使用工厂模式的一种变体。代码如下：

function createPerson(name, age, job){
    var o = new Object();
    o.name = name;
    o.age = age;
    o.job = job;
    o.sayName = function(){
        console.log(this.name);
    };
    return o;
}
var person1 = createPerson('Steve Jobs',56 , 'Inventor');
var person2 = createPerson('Linus Torvalds', 49, 'Software Engineer');
var person2 = createPerson('Julian Assange', 47, 'Ethical Hacker');

数组
数组是一种特殊的变量，它能够一次存放一个以上的值。
如果您有一个项目清单（例如，汽车品牌列表），在单个变量中存储汽车品牌应该是这样的：

var car1 = "Saab";
var car2 = "Volvo";
var car3 = "BMW"; 

不过，假如您希望遍历所有汽车并找到一个特定的值？假如不是三个汽车品牌而是三百个呢？
解决方法就是数组！
数组可以用一个单一的名称存放很多值，并且还可以通过引用索引号来访问这些值。

TypeScript

简介：
TypeScript是微软开发的一个开源的编程语言，通过在JavaScript的基础上添加静态类型定义构建而成。TypeScript通过TypeScript编译器或Babel转译为JavaScript代码，可运行在任何浏览器，任何操作系统

let 和 const
et 与 const 唯一的区别是，两者声明的变量，对于初始化之后的行为，let 变量是可写的，const 变量（或者叫做常量）是不可写的。

注意，在 JavaScript 中的常量和一般语言中的常量含义不同。JavaScript 中的常量的含义是：“只能在初始化时候赋值一次，从此都不可以再次赋值的变量”，举个最简单的例子：

const a = new Date

这是 JS 中的 const，但是不是编译期可以确定的量，但是声明后，不允许对其修改，只能读取。

而某些其他语言的常量的含义是：“在编译期就可以确定的量，可以进行常量折叠”。为了常量折叠，他们可能做很多奇奇怪怪的限制，比如 go 语言，就限定量 const 不能调用函数。

类的定义和使用
定义一个最简单的Lady类,这里要使用关键字class,类里边有姓名属性和一个得到姓名的方法，代码如下：

class Lady {
  content = "Hi，帅哥";
  sayHello() {
    return this.content;
  }
}

const goddess = new Lady();
console.log(goddess.sayHello());

存取器-getter、setter
存取器可以让我们可以有效的控制对，对象中的中的成员的访问。可以通过getters和setters来进行操作，在typescript中分别对应 get 和 set

class Person{
    firstName: string //姓氏
    lastName: string  //名字
    constructor(firstName: string, lastName: string) {
        console.log('在实例化对象的时候,构造器被执行')
        this.firstName = firstName
        this.lastName = lastName
    }
    // 对数据进行读取
    get fullName() {
        console.log('get方法被执行了')
        return this.firstName+"-"+this.lastName
    }
    // 对数据进行修改
    set fullName(str: string) {
        console.log('set方法被执行了')
        this.firstName = str.split('-')[0]
        this.lastName = str.split('-')[1]
    }
}

const per = new Person('张', '无忌');
// 会去执行get方法,因为获取值吗
console.log(per.fullName)
// 会去执行set方法；因为你修改了值
per.fullName = '李-四'

继承

class Animal {
  // 当构造函数传入的参数加上了“访问权限控制符”，则同时会声明同名类属性，并赋值
  constructor(public name: string) { }
  protected log(message: string) {
    console.log(message);
  }
  move(distanceInMeters: number = 0) {        
    this.log(`${this.name} moved ${distanceInMeters}m.`);//请注意name来自何处
    this.log('==============');
  }
}

class Horse extends Animal {
  constructor(name: string) { 
    super(name); // 通过super调用父类构造器
  }
  run(distanceInMeters = 50) { //自己独有的函数
    this.log("Clop, clop..."); 
    super.move(distanceInMeters); // 通过super调用父类方法
  }
}

class Eagle extends Animal {
  constructor(name: string) { super(name); }
  reborn() { //自己独有的函数
    console.log('Reborn？ It is a joke, hahaha!');
  }

}

let tom: Horse = new Horse("Tommy the Palomino");
tom.run(8964);
let sam: Eagle = new Eagle("Sammy the Hawk");
sam.move(1024);//sam的move函数来自何处？
sam.reborn();