javaScript Study Report

JavaScript Study Report

1. JavaScript 是什么?

1.1 定义

JavaScript(JS)是一种具有函数优先的轻量级,解释型或即时编译型的编程语言. JavaScript是一种基于对象(Object)和事件驱动(Event Driven)并具有安全性能的脚本语言.

1.2 语言特性

(1)一种解释性执行的脚本语言

同其他脚本语言一样,JavaScript也是一种解释性语言,其提供了一个非常方便的开发过程. 解释型的语言的好处就是可以随时修改代码,无需编译,刷新页面即可重新解释,可以实时看到程序结果,但每次都需解释,程序开销较大;

(2)一种基于对象的脚本语言。

在JavaScript中一切都是对象, 包括函数, 也可以被当做参数或者是返回值.

(3)一种简单弱类型脚本语言

JavaScript是弱类型的,它的数据类型无需在声明时指定,解释器会自动根据上下文对变量进行实例化.

(4)一种相对安全脚本语言

JavaScript作为一种安全性语言,不被允许访问本地的硬盘,且不能将数据存入服务器,不允许对网络文档进行修改和删除,只能通过浏览器实现信息浏览或动态交互。从而有效地防止数据的丢失或对系统的非法访问.

(5)一种事件驱动脚本语言

JavaScript对用户的响应,是以事件驱动的方式进行的. 在网页(Web Page)中执行了某种操作所产生的动作,被称为“事件”(Event). 例如按下鼠标、移动窗口、选择菜单等都可以被视为事件。当事件发生后,可能会引起相应的事件响应,执行某些对应的脚本,这种机制被称为“事件驱动”.

(6)一种跨平台性脚本语言

JavaScript依赖于浏览器本身,与操作环境无关,只要计算机能运行浏览器,并支持JavaScript的浏览器,就可正确执行目前在互联网上有很多浏览器,如Firefox、Internet Explorer、Opera等,但每种浏览器支持JavaScript的程度是不一样的,存在浏览器兼容性问题.

2. JavaScript 基础语法和类型

2.1 Hello World

TODO: 包括\ 标签和引入外界Script 文件(*.js)

2.2 数据类型

数据类型

  • 值类型
    • Number(数字)
    • String(字符串)
    • Boolean(布尔)
    • null(空)
    • undefined(未定义)
  • 引用类型
    • Object(对象)
      • Function(函数)
      • Array(数组)
      • Date(日期)
      • RegExp(正则表达式)

类型的判断

typeof
show typeof code
InstanceOf 判断 Object
show InstanceOf code

2.3 变量

命名规则

JavaScript 是区分大小写

变量声明

  • 使用关键词 var, var x=10; 这个语法可以用来声明局部变量和全局变量
  • 直接赋值, y=42, 会产生一个全局变量, 在严格模式下会产生错误。因此你不应该使用这种方式来声明变量
  • 使用关键词 let, 例如 let y = 13。这个语法可以用来声明块作用域的局部变量。

作用域

局部变量: 在函数内部声明的变量,叫做局部变量,因为它只能在当前函数的内部访问。 全局变量: 在函数之外声明的变量,叫做全局变量,因为它可被当前文档中的任何其他代码所访问。

实际上, 全局变量是全局对象的属性. 在网页中,缺省的全局对象是 window,所以你可以用形如 window.variable 的语法来设置和访问全局变量。

2.4 运算符

相等比较

  • 严格相等(===)
    • 将进行相同的比较,而不进行类型转换 (如果类型不同, 只是总会返回 false )
  • 非严格相等(==)
    • 将执行类型转换

两者对比:

如何插入本地图片img

其他

请参考MDN: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Expressions_and_Operators

2.5 流程控制

请参考MDN: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Control_flow_and_error_handling

3. 对象 (名值对)

类似于Perl 中的Hash or Python 中的Dictionary, 名称是字符串(ES6后可以是符号), 值可以是任意的数据类型

3.1 对象分类

JavaScript内置的对象.

  • Array
  • Date
  • RegExp
  • Math
  • NaN
  • Error
  • ...

浏览器对象模型中的对象(BOM).

浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器"对话"

Window 对象

所有浏览器都支持 window 对象。它表示浏览器窗口。 所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。 全局变量是 window 对象的属性。 全局函数是 window 对象的方法。

window.open() - 打开新窗口 window.close() - 关闭当前窗口 window.moveTo() - 移动当前窗口 window.resizeTo() - 调整当前窗口的尺寸

alert('Hi Builty!');

window.screen 对象包含有关用户屏幕的信息 window.location 对象用于获得当前页面的地址 (URL),并把浏览器重定向到新的页面。 window.history 对象包含浏览器的历史。

文档对象模型中的对象(DOM).

获取HTML DOM 元素 向HTML DOM 写元素 对HTML 事件监听和响应

自定义对象.

通过字面量
Cat = {
    name: '初一',
    sex: '公猫'
}
通过构造函数
function Cat (name, sex) {
    this.name = name;
    this.sex = sex;
};
var chuYi = new Cat('初一', '公猫');
var shiWu = new Cat('十五', '母猫');
通过Object.create()
var Cat = {
    type: '美短',
    skill: function() {
        console.log('喵喵叫~');
    }
}
var chuYi = Object.create(Cat);
chuYi.name = '初一';
chuYi.sex = '公猫';
var shiWu = Object.create(Cat);
shiWu.name = '十五';
shiWu.sex = '母猫';

console.log(Cat.prototype);

3.2 原型(prototype)与原型链

JavaScript 是一种基于原型而不是基于类的基于对象(object-based)语言

原型

原型: https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/Objects/Object_prototypes

原型链与集成

原型链: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Inheritance_and_the_prototype_chain

JavaScript 对象是动态的属性“包”(指其自己的属性)。 JavaScript 对象有一个指向一个原型对象的链。 当试图访问一个对象的属性时,它不仅仅在该对象上搜寻, 还会搜寻该对象的原型,以及该对象的原型的原型,依次层层向上搜索,直到找到一个名字匹配的属性或到达原型链的末尾。 性能: 在原型链上查找属性比较耗时,对性能有副作用,这在性能要求苛刻的情况下很重要。另外,试图访问不存在的属性时会遍历整个原型链。

原型链有哪些应用? 属性和方法的继承

4.函数

4.1 声明和调用函数

声明的两种方式

  1. 使用function关键字:
function fName(arg1, arg2[...,argn]) {
};
  1. 函数表达式:
    // 匿名函数
    var fc1 = function(arg1, arg2[...,argn]) {
    };
    // 指定函数名
    var fc1 = function fName(arg1, arg2[...,argn]) {
    };
    

函数声明一定要处于调用它们的域中,但是函数的声明可以被提升(出现在调用语句之后) 两种声明的区别: 第一种函数声明可以提升(函数调用可以写在声明以前), 第二种则不会被提升.

4.2 函数的参数:

值类型 or 引用类型

实参的可变性

默认参数
arguments
剩余参数

4.3 函数的嵌套

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Functions

4.4 作用域链

4.5 闭包 (实现封装)

4.6 this 是谁?

this 的指向

介绍 this 指向的四种情景: https://blog.csdn.net/Lunaqi/article/details/75012441 what is this: https://www.ibm.com/developerworks/cn/web/1207_wangqf_jsthis/ 这里面讲到了调用函数的执行环境构建过程, 可以画一个图出来

call和apply


如果要想把 this 的值从一个环境传到另一个,就要用 call 或者apply 方法。 apply:如果要想把 this 的值从一个环境传到另一个,就要用 call 或者apply 方法。 call: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/call

5. 面向对象(OOP)

5.1 类

5.2 封装: 闭包

5.3 继承: 原型链, aplly or call

5.4 多态

6. 事件驱动/事件模型

6.1 为事件添加handler

6.2 事件模型

6.3 事件阻止

阻止事件传播

阻止默认事件

6.4 事件委托

6.5 同步事件和异步事件

https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/Building_blocks/Events 事件流介绍(有图): https://www.w3.org/TR/DOM-Level-3-Events/#event-flow https://www.quirksmode.org/js/events_order.html 同步事件和异步事件: https://www.w3.org/TR/DOM-Level-3-Events/#event-flow

7. 单线程与异步

JavaScript 单线程和异步操作原理

(赞)https://zhuanlan.zhihu.com/p/23659122 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/EventLoop http://sporto.github.io/blog/2012/12/09/callbacks-listeners-promises/

浏览器调试器堆栈

Chrome Debug 技巧

https://www.cnblogs.com/yuerdong/p/9883951.html

8. What's new in ES6

9. reference

MDN 廖雪峰

JavaScript Study
JSRUN前端笔记, 是针对前端工程师开放的一个笔记分享平台,是前端工程师记录重点、分享经验的一个笔记本。JSRUN前端采用的 MarkDown 语法 (极客专用语法), 这里属于IT工程师。