javascript&typescript学习总结

JavaScript

一、 简介

JavaScript 是脚本语言，是一种解释性脚本语言(代码不进行预编译)，是一种轻量级的编程语言。

二、 基本语法

1. 基本语法:

var 变量名称;

2. 闭包

函数的局部变量在函数返回后会继续存在。

function greeting(name) {
    var text = 'Hello ' + name; 
    // 每次调用时，产生闭包，并返回内部函数对象给调用者
    return function() { console.log(text); } //注意该函数无名称，称为匿名函数
}
var sayHello = greeting('Closure'); //调用greeting()返回一个函数
sayHello(); // 注意此处的使用方法。通过闭包访问到了局部变量text

3. 原型

函数有一个属性叫prototype指向一个对象，这个对象叫原型对象。这个原型对象有一个constructor属性，指向这个函数本身。

4. 获取html元素

document.getElementById('button');
document.getElementsByClassName('button')//结果是一个数组
document.getElementsByName('button')//也是一个数组

三、 引用方式

• 页面内嵌 <script>&lt/script>引入，写 head 里面也行,写 body 里面也行：

<script>
	// 书写js代码
</script>

• 外部 js 文件，引入<script src=“”></script>

<script src="./a.js"></script>

四、 作用域

根据作用域不同变量可分为两种：全局变量、局部变量

• 全局变量：在代码任何位置都可以使用；全局作用域下用var声明的变量。只有在浏览器关闭的时候才会被销毁，比较占内存。
• 局部变量：函数内部声明的变量，形参也是局部变量。只能在函数内部使用，当其所在的代码块被执行时，会被初始化；当代码块运行结束后，就会被销毁，比较节约内存空间

TypeScript

一、 简介

TypeScript是JavaScript类型的超集：TypeScript给JavaScript加上可选的类型系统，给JavaScript加上静态类型后，就能将调试从运行期提前到编码期，诸如类型检查、越界检查这样的功能才能真正发挥作用。

二、 变量声明

 
let lang: string = 'TypeScript';//如果省略类型说明，TS也可进行自动推断
lang = 1010;//error! 如果需要可以使用联合类型：let lang: number | string = 'TS';
let age: number = 89;
let age = 64;//error!
 
const pi: number = 3.14159;//pi以后不可改变，类似常量
pi = 3.14;//error!

三、 类

书写方式与c++类似

 
//访问权限
class MyInfo { //class是关键字，类名默认全部大写首字母
  public name: string; //public属性，可省略
  private _weather: string; //私有属性，习惯以_开头进行命名
  
  constructor(name: string, weather: string){ //构造函数，一般用于初始化
    this.name = name;
    this._weather = weather;
  }
  printInfo(): void { //其它函数
    this._test();
    console.log(`Hello, ${this.name}.`);
    console.log(`Today is ${this._weather}.`);
  }
  private _test(): void {
    console.log('You can not call me outside!');
  }
}
 
let myData = new MyInfo('QiGe', 'raining'); //使用new关键字生成对象
console.log(myData._weather); //error!
myData._test(); //error
myData.printInfo();

四、 模块化

使用模块便于管理。每个 .ts 文件就是一个模块，通过 export 来对外部模块暴露元素，通过 import 来引入模块。

 
export class Name { //用export对外部暴露该类
  constructor(private first: string, private second: string) {}
  get nameMessage() {
    return `Hello ${this.first} ${this.second}`;
  }
}      

 
//用import从外部模块文件导入，默认后缀.ts去掉
import { Name } from "./modules/name";
 
let name = new Name('Wang', 'Yong');
 
console.log(name.nameMessage);       

五、 与HTML

TypeScript在HTML里的应用与Javascript大致相同，建议使用外部连接；即编写一个.ts文件，进行编译后.ts会生成对应的.js文件，再通过.html文件去调用.js文件。

结语

通过JavaScript和typescript能对HTML生成的web页面加上互动功能，增加页面的互动性，使页面活动起来，能实现更多功能。typescript对比JavaScript有了更多的规范、更加简洁，且更适用于大型项目的开发。