红宝书（javascirpt高级程序设计）学习笔记（一）

最新推荐文章于 2024-04-02 12:00:13 发布

weixin_34261739

最新推荐文章于 2024-04-02 12:00:13 发布

阅读量381

点赞数

文章标签： javascript xhtml ViewUI

原文链接：https://juejin.im/post/5c4ecce75188255a23470750

版权

资料下载地址(equb, mobi, awz3, pdf):

百度网盘

提取码: c2sm

本资料仅用于学习交流，如有能力请到各大销售渠道支持正版！

本文首发于Liubasara的个人博客，承蒙喜爱，欢迎转载。

第1章 JavaScript简介

本章主要讲解了Javascript的诞生历史以及其各个组成部分。

JavaScript由三个不同的部分组成：

ECMAScript，有ECMA-262定义，提供核心语言功能。
文档对象模型（DOM），提供访问和操作网页内容的方法和接口。
浏览器对象模型（BOM），提供与浏览器交互的方法和接口。

第2章在HTML中使用JavaScript

本章主要讲解了在html中嵌入<script>标签的使用方法，是十分基础的内容，适合系统学习。

2.1 script元素

<script>标签有以下6个属性
1. async 可选表示异步下载脚本，不妨碍页面的其他操作，只对外部脚本文件有效
2. chartset 可选表示通过src属性指定的代码字符集，该属性的值会被大多数浏览器忽略（少用）
3. defer 可选表示监本可以延迟到文档完全被解析和显示之后再执行
4. language 已废弃
5. src 可选表示包含要执行代码的外部文件
6. type 可选 language的替代属性，表示编写代码使用的脚本语言的内容类型，默认text/javascript
包含在<head标签>中的<script>元素，其内部的JavaScript代码将被从上至下依次解释。在解释器对<script>元素内部的所有代码求值完毕以前，页面中的其余内容都不会被浏览器加载或显示。
不能在HTML文档中使用下面这种语法
```
<script type="text/javascript" src="example.js"/>
复制代码
```
原因是这种语法虽然符合XHTML文档规范，却并不符合HTML规范，也不会得到某些浏览器（尤其是IE）的正确解析。（能在Vue等各大框架里面用是因为经过了转义和解析！）

2.1.1 标签的位置

现代Web应用程序一般都把全部JavaScript引用放在<body>元素中，因为如果放在<head>中，便意味着必须等到全部JavaScript代码都被下载、解析和执行完成后，才能开始呈现页面的内容。（浏览器在遇到<body>标签时才开始呈现内容）。

2.1.2 延迟脚本

介绍defer属性，加入此属性后脚本会被延迟到整个页面都解析完毕后再运行，此属性在H5这会儿已经是时代的眼泪了。

2.1.3 异步脚本

介绍async属性。

async只适用于外部脚本文件，指定async属性的目的是不让页面等待两个脚本的下载和执行，从而异步加载页面其他内容。因此，在异步脚本中不要再加载期间修改DOM。（异步脚本一定会在页面的load事件前执行，但可能会在DOMContentLoaded事件触发之前或之后执行）

2.1.4 在XHTML中的用法

时代的眼泪

2.4 `<noscript>`元素

当浏览器不支持JavaScript时显示替代的内容，在两种情况下出现：

浏览器不支持脚本
浏览器支持脚本，但脚本被禁用

第3章基本概念

本章介绍ECMAscript的基础知识，适合快速阅览，查缺补漏。

ECMAScript有5种基本数据类型：
- Undefined
- Null
- Boolean
- Number
- String
typeof操作符能够返回一个数据的数据类型，其结果可能有："undefined", "boolean", "string", "number", "object", "function"。
eg.
```
typeof('hello world!') // "string"
复制代码
```

NaN，非数值。这是一个特殊的数值，类型为Number。NaN不与任何值相等，在于任何值比较时，都会返回false，如下

alert(NaN == NaN) // false
alert(1 > NaN) // false
alert(1 < NaN) // false
复制代码

针对NaN的特点，ECMAScript定义了isNaN()函数，用于确定此参数是否“不是数值”。如下

alert(isNaN(10)) // false
alert(isNaN("10")) // false(可以被转化为数值10)
alert(isNaN(NaN)) // true
alert(isNaN('blue')) // true(不能转化为数值)
alert(isNaN(true)) // false(可以被转换为数值1)
复制代码

3.4.7 Object 类型

在ECMAScript中，Object类型是所有它的实例的基础，换句话说，Object类型所具有的任何属性和方法也同样存在于更具体的对象中。

Object的每个实例都具有下列的属性和方法：

constructor:保存着用于创建当前对象的函数。
hasOwnProperty(propertyName):用于检查给定的属性在当前实例中（而不是在实例的原型中）是否存在，其中，作为参数的属性名（propertyName）必须以字符串形式指定（eg. o.hasOwnProperty("name")）
isPrototypeOf(object): 用于检查传入对象是否是另一个对象的原型
propertyIsEnumeralbe(propertyName): 用于检查给定的属性是否能够使用for-in语句来枚举。
toLocalString():返回对象的字符串表示，该字符串与执行环境地区对应
toString():返回对象的字符串表示
valueOf():返回对象的字符串、数值或布尔值表示。通常与toString()方法的返回值相同。

3.6.5 for-in语句

for-in语句是一种精准的迭代语句。可以用来枚举对象的属性。

/**
* 示例
* for (property in expression) statement
**/
for (var propName in window) {
  document.write(propName)
}
复制代码

如果表示要迭代的对象的变量值为null或undefined，在ECMAScript5版本以前，for-in语句会抛出错误，所以为了保证最大限度的兼容性，建议在for-in循环之前，先检测确认该对象的值不是null或undefined。

3.6.8 with语句

with语句的作用是将代码的作用域设置到一个特定的对象中，如果在局部环境中找不到该变量的值，就会查询在该特定对象中是否有同名的属性值。

在开发大型应用程序时，大量使用with语句会导致性能下降和给调试代码带来困难，并且在严格模式下会报错，因此不建议使用with。

/** 
* 示例
* with (expression) statement
**/
with (location) {
    var qs = search.substring(1)
    var hostName = hostname
    var url = href
}
// 以上这段代码等同于下面的代码
var qs = location.search.substring(1)
var hostName = location.hostname
var url = location.href
复制代码

3.7函数

ECMAScript函数并不能像传统意义上那样实现重载，若同一个名字的函数被定义了两次，则后定义的函数会覆盖掉先定义的函数。

因此，只能通过检查传入函数中参数的类型和数量并作出不同的反应，可以模仿方法的重载。

3.7.1 理解参数

ECMAScript函数不介意传递进来多少个参数，因为在ECMAScript中的参数在内部使用一个数组来表示的。函数接收到的始终都死这个数组，而不关心数组中包含哪些参数（如果有参数的话）。实际上，在函数体内可以通过arguments对象来访问这个传参数组，从而获取传递给函数的每一个参数。同理，可以通过访问arguments对象的length属性可以获知有多少个参数传递给了函数。

weixin_34261739

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
红宝书（javascirpt高级程序设计）学习笔记（一）

资料下载地址(equb, mobi, awz3, pdf):百度网盘提取码: c2sm本资料仅用于学习交流，如有能力请到各大销售渠道支持正版！本文首发于Liubasara的个人博客，承蒙喜爱，欢迎转载。第1章 JavaScript简介本章主要讲解了Javascript的诞生历史以及其各个组成部分。JavaScript由三个不同的部分组成：ECMAScript，有ECMA-26...
复制链接

扫一扫