H5小游戏入门：JavaScript / Typescript基础概念

什么是JavaScript

JavaScript是解释性脚本语言，
JavaScript 是基于对象和事件驱动的，无需特定的语言环境，只需在支持的浏览器上就能运行。
JavaScript 的语法简单，使用的变量为弱类型。

什么是ES6？

ECMAScript 6，ES6是JS的一种规范，

什么是Typescript？

TypeScript 是微软开发的自由和开源的编程语言，
它是 JavaScript 的超集，包含了 JavaScript 的所有元素，可以载入 JavaScript 代码运行，并扩展了 JavaScript 的语法。
TypeScript 是ES6的一个超集， 扩展了JavaScript的语法。支持强类型、面向对象、类。
TypeScript 的强类型是「静态类型检查」的「弱类型」。
TS引入了 接口、类、继承的编程思想，「类」和「继承」都不是 TypeScript 引入的，直接作为 JavaScript 的超集包含进来了。
TypeScript 中引入了模块的概念，可以把声明、数据、函数和类封装在模块中。
IDE推荐使用Visual Studio Code。

JavaScript和Typescript对比

本地浏览器支持
TypeScript 代码需要被编译（输出 JavaScript 代码），这是 TypeScript 代码执行时的一个额外的步骤。

JS / TS常见笔试题

JS 笔试题：var和函数的提前声明

function fn(a) {
console.log(a);
var a = 2;
function a() {}
console.log(a);
}

fn(1);
　　输出：function a() {} 2

我们知道var和function是会提前声明的，而且function是优先于var声明的（如果同时存在的话），所以提前声明后输出的a是个function，然后代码往下执行a进行重新赋值了，故第二次输出是2。

JS 笔试题：this

function JSClass() {
this.m_Text = ‘division element’;
this.m_Element = document.createElement(‘div’);
this.m_Element.innerHTML = this.m_Text;
this.m_Element.addEventListener(‘click’, this.func);
// this.m_Element.onclick = this.func;
}

JSClass.prototype.Render = function() {
document.body.appendChild(this.m_Element);
}

JSClass.prototype.func = function() {
alert(this.m_Text);
};

var jc = new JSClass();
jc.Render(); // add div
jc.func(); // 输出 division element
//click添加的div元素division element会输出underfined，为什么？
　　答案：division element undefined

第一次输出很好理解，第二次的话仔细看，this其实已经指向了this.m_Element，因为是this.m_Element调用的addEventListener函数，所以内部的this全指向它了。可以试着加上一行代码this.m_Element.m_Text = ‘hello world’，就会alert出hello world了。

笔试题：let

今天我们使用ES6提供的let来解决这个问题。接下来就看看let的神奇吧。

window.onload = function(){
var aLi = document.getElementsByTagName(‘li’);
for (let i=0;i<aLi.length;i++){
aLi[i].onclick = function(){
alert(i);
}
};
}
有看出什么区别吗？奥秘就在for循环中var i=0变成了let i=0，我们仅仅只改了一个关键字就解决了这个问题，还避免了使用闭包可能造成的内存泄漏等问题。

上述代码中的for 循环头部的 let 不仅将 i 绑定到了 for 循环的块中， 事实上它将其重新绑定到了循环的每一个迭代中， 确保使用上一个循环迭代结束时的值重新进行赋值。

后面就让我们好好来了解一下let这个神奇的关键字吧。

let 关键字可以将变量绑定到所在的任意作用域中（通常是 { … } 内部）。换句话说，let为其声明的变量隐式地了所在的块作用域。 ----《你所不知道的JavaScript（上）》P32