《JavaScript 高级程序设计》笔记 第1~5章

第1章

js是专为网页交互而设计的脚本语言，由3部分组成：

  • ECMAScript，提供核心语言功能
  • DOM文档对象模型，提供访问和操作网页内容的方法和接口
  • BOM浏览器对象模型，提供与浏览器交互的方法和接口

js是一种脚本语言、解释性语言、动态类型语言、基于对象的语言

第2章 在HTML中使用JavaScript

  1. 包含在< script>元素内部的JavaScript代码将被从上至下依次解释，解析js代码时（包括下载js文件时），页面的处理也会暂时停止（页面中的其余内容不会被浏览器加载或显示，head元素中的js代码需要被下载、解析和执行后，才开始呈现页面内容：浏览器在遇到body标签时才开始呈现内容），因此通常将js代码放入< body>元素中页面的内容后面；
  2. < script>的src属性可以包含来自外部域的js文件；（安全性问题）跨域
  3. 延迟脚本，< script>标签的defer属性，当defer = “defer”，js脚本将会延迟到浏览器遇到< /html>时才执行，理应按顺序，但实际情况不一定按顺序，因此最好只包含一个延迟脚本；
  4. defer 属性规定是否对脚本执行进行延迟，直到页面加载为止，以便加快处理文档的速度。因为浏览器知道它将能够安全地读取文档的剩余部分而不用执行脚本，它将推迟对脚本的解释，直到文档已经显示给用户为止。
  5. 异步脚本，< script>标签的asynv属性，只适用于外部脚本文件，并告诉浏览器立即下载，但并不保证按先后顺序执行；
  6. 推荐使用外部文件：
    1）易于维护
    2）可缓存：若多个页面使用同一js文件，只需下载一次，加快了页面加载速度
    *指定async属性的目的不是让页面等待两个脚本下载和执行，从而异步加载其他内容。为此，建议异步脚本不要在加载期间修改DOM（P14）
  7. < noscript>当浏览器不支持JavaScript时让页面平稳地退化；
    1)浏览器不支持脚本
    2)浏览器支持脚本，但脚本被禁用
<noscript><p>本页面需要浏览器支持（启用）JavaScript。</p>
</noscript>

在这里插入图片描述
defer、async作用和区别分析
8. 文档模式：混杂模式和标准模式（影响css内容的呈现）
doctype
若在文档开始处没有声明文档类型，则所有的浏览器都会默认开启混杂模式，但这样并不值得推荐，因为不同浏览器在这种模式下的行为差异非常大，如果不使用某些hack技术，跨浏览器的行为没有一致性可言。

标准模式声明：HTML5

<!DOCTYPE html>
  1. 严格模式
    为js定义的解析与执行模型：在严格模式下，ECMAScript3中的一些不确定的行为将得到处理，对某些不安全的操作也会抛出错误
“use strict“

onload事件

window.onload

第3章 基本概念

3.1~3.3 语法、关键字和保留字、变量

  1. 区别大小写：True和False都不是Boolean类型；
  2. typeof是关键字而不是函数名,使用时不需要加括号；
  3. typeof null 返回object，null被认为是一个空的对象引用，如果定义的变量准备在将来用于保存对象，最好初始化为null而不是其他值；
  4. 隐式全局变量很难维护，不推荐这么用；
  5. 可以使用一条语句定义多个变量
var message = "hi",found = false,age =29;

3.4 数据类型

  1. typeof的返回值：4+1+1（5种基本数据类型除了null、object、function）
  2. undefined类型只有一个值，即其本身；
  3. null是另一个只有一个值的数据类型；
  4. undefined值是派生自null值的，因此undefined == null返回true；
  5. 对未声明和未初始化的变量，typeof的返回值居然都是undefined；
  6. 数值字面量：八进制必须以0开头，其后是0~7，若超出范围，前导0才会被忽略；十六进制前2位必须是0x；
  7. 保存浮点数值的内存空间是保存证书的2倍，因此ECMAScript会不失时机地将浮点数值转为整数；
  8. var floatNum = 3.15e7; //等于31500000
  9. 浮点数值最高精度是17位小数，但其算术运算的精度远不及整数，因此无法测试特定的浮点数值；
  10. NaN用于表示一个本来要返回数值的操作数未返回数值的情况（这样就不会抛出错误了）
  11. isNaN()会尝试将参数转为数值（我理解，先Number(参数)）；
  12. isNaN()也适用于对象：valueOf() → toString() ；
  13. Number(“ ”) 得到0；而parseInt(“ ”)得到NaN；
  14. Number()适用于任何数据类型；parseInt()、parseFloat()只用于字符串；
  15. parseInt(): 更多地考虑参数是否符合数值模式，
    1）找到第一个非空格字符；
    2）若第一个非空格字符不是数字或负号，则返回NaN；
    3）parseInt()会识别各进制，但ECMAScript3和5存在分歧，因此推荐提供第二个参数（基数）；
  16. parseFloat()解析到遇见第一个无效的浮点数字字符为止（第二个小数点无效，并且会忽略先导0，只解析十进制）；
  17. 字符串中若包含转义序列，在str.length时，转移序列当1个字符计算；
  18. null和undefined没有toString()方法，此时可用Sting()方法；
  19. toString()方法可传基数；

* 例子

var num1 = 070; // 八进制的56
var num2 = 079; // 无效的八进制数值-解析为79
var num3 = 0xA; // 十六进制的10var floatNum1 = .1 // 有效，但不推荐
var floatNum2 = 1.; //小数点后面没有数字 - 解析为1
var floatNum3 = 10.0; // 整数，解析为10isNaN(NaN); // true  
isNaN(10); //  false
isNaN("10"); //   false (可以被转换成数值)
isNaN("blue"); //  true  
isNaN(true); //  false(可以被转换成数值)Number(" ") // 0 
Number("000011") // 11parseInt("1234blue") // 1234 
parseInt(" ") //  NaN
parseInt("0xA") //  10 (十六进制数)
parseInt(22.5) //  22
parseInt("070") //  56 （八进制数）
parseInt("70") //  70 （十进制数）
parseInt("0xf") //  15 (十六进制数)parseInt(“10”,2) //  2(二进制数) 
parseInt(“10”,8) //  8(八进制数) 
parseInt(“10”,10) //  10(十进制数) 
parseInt(“10”,16) //  16(十六进制数) parseFloat("1234blue") // 1234
parseFloat("0xA") // 0
parseFloat("22.5") // 22.5
parseFloat("22.34.5") // 22.34
parseFloat("0908.5") // 908.5
parseFloat("3.125e7") // 31250000

第4章 变量、作用域和内存问题

函数提升优先级高于变量提升

1.typeof：基本数据类型 instanceof：引用类型

  1. 虽然在检测基本数据类型时typeof是非常得力的助手，但在检测引用类型时，这个操作符的用处不大。我们并非想知道某个值是对象，而是想知道它是什么类型的对象。instanceof操作符；
  2. result = variable instanceof constructor
    如果变量是引用类型的实例，则返回true；
  3. instanceof检测基本数据类型永远返回false：基本数据类型不是对象；
  4. instanceof操作符假定单一的全局执行环境。如果网页中包含多个框架，那实际上就存在两个以上不同的全局执行环境，从而存在两个以上不同版本的Array构造函数。使用value instanceof Array 可能不适用；
  5. 全局执行环境被认为是window对象，所有全局变量和函数都是作为window对象的属性和方法创建的；
  6. 全局执行环境直到应用程序退出（例如关闭网页或浏览器）时才会销毁；
  7. js没有块级作用域（其他语言中，花括号封闭的代码有自己的作用域）：指if、for的花括号内，依然是全局作用域；
  8. for(var i = 0; i < 10; i++) {} 变量i即使退出了循环，也依然存在于循环外部的执行环境中；
  9. 不建议隐式全局变量这种操作方式；
  10. 当局部变量和全局变量同名：如果不使用window.color，便无法访问全局变量；
  11. 对于上一点，访问局部变量快于全局变量，因为不用向上搜索作用域链；
  12. 垃圾收集：标记清除和引用计数方式；
  13. 对于循环引用的问题：最好在不使用时，手工断开原生js和dom之间的联系element.someObject = null
  14. 分配给web浏览器的内存比其他桌面应用少，目的是防止运行js的网页耗尽系统内存而导致系统崩溃；
  15. 解除引用：一旦数据不再有用，设置其值为null来释放其引用；

2.执行环境及作用域

  1. 执行环境（简称环境），定义了变量或函数有权访问的其他数据，决定了她们各自的行为。每个执行环境都有一个与之关联的变量对象，环境中定义的所有变量和函数都保存在这个对象中。
  2. 当代码在一个环境中执行时，会创建变量对象的一个作用域链。如果这个环境是函数，则将其活动对象作为变量对象，即 arguments对象；作用域链的下一个变量对象来自外部环境，最后一个对象是全局执行环境的变量对象。
  3. 内部环境可以通过作用域链访问所有的外部环境，但外部环境不能访问内部环境中的任何变量和函数。每个环境可以向上搜索作用域链。
  4. 延长作用域链： with try catch语句，都会在作用域链的前端添加一个变量对象。P75
  5. 参数实际上是函数的局部变量。

执行环境及作用域

var color = 'blue'
function changeColor() {var anotherColor = 'red'function swapColors() {var tempColor = anotherColoranotherColor = color color = tempColor// 最内层函数可以访问全局的color，外层函数的局部变量anoteColor 和自己的局部变量tempColor}swapColors()// 全局函数可以访问全局的color和自己的局部变量anotherColor，但不能访问内部函数的tempColor
}
changeColor()
  • 函数被调用时，活动对象是：this、arguments、和其他命名参数；
  • 函数这类的局部环境的变量对象，只在函数执行过程中存在。当函数执行完毕后，局部活动对象就会被销毁；
  • 创建函数时，先创建一个预先包含全局变量对象的作用域链，当调用函数时，会为函数创建执行环境，创建函数的活动对象，并将其推入执行环境作用域链的前端

闭包：有权访问另一个函数作用域中的变量的函数

  • 重要的是，在外部函数执行完毕后，其活动对象也不会被销毁，因为内部匿名函数（闭包）仍然在引用这个活动对象。（但它的执行环境的作用域链会被销毁）直到匿名函数被销毁后，外部函数的活动对象才销毁。
  • 匿名函数被返回，而且在其他地方被调用，也仍然可以访问变量key
function createFunction(key) {return function(obj1, obj2) {var v1 = obj1[key]var v2 = obj2[key]if (v1 < v2) {return -1} else if (v1 > v2) {return 1} else {return 0}}
}

第5章 引用类型

5.1 Object

  1. 访问对象属性值（方括号方法，属性名一定要加双引号）：
    person["first name"]

5.2 Array

  1. 数组的每一项都可以存储任何类型的数据；
  2. 使用构造函数创建对象、数组时，省略new关键字，效果相同：
var obj = Object()  <=>  var obj = new Object()
var arr = Array()   <=>  var arr = Array()
  1. 避免这样字面量数组：
var arr = [1,2,] // 可能会创建包含2项或3项的数组
var arr= [,,,,,] // 可能会创建包含5项或6项的数组
  1. P87 与对象一样，在使用数组字面量表示法时，也不会调用Array构造函数；
  2. 新增的每一项都会取得undefined；
var arr = [1,2,3] arr.length = 4 // arr会新增一项，undefined
  1. 检测数组 Array.isArray(value) （instanceof可能不适用）
    这个方法确定某个值到底是不是数组，而不管它是在哪个全局执行环境中创建的；
  2. 数组调用toString():返回逗号拼接每个值的字符串形式（最终结果是一个字符串）；
    数组调用toLocaleString(): 对数组每一项调用这个方法；
alert(数组) // 由于alert()要接收字符串参数，所以会在后台调用toString()
  1. join()方法只接受一个参数，作为分隔符；若无参数或参数是undefined，则以逗号作为分隔符；

5.3 Date

5.4 RegExp / /+标志

  1. 3个标志：
    g：全局模式，应用于所有字符串，而非在发现第一个匹配项时立即停止；
    i：不区分大小写；
    m：多行模式；
  2. 实例方法：
    reg.exec(str)
    reg.test(str)

5.5 Function

  1. 函数是对象，函数名是指针；
  2. 函数没有重载：若声明了2个同名函数，后者会覆盖前者；
  3. 解析器会率先读取函数声明，而函数表达式，需等到解析器执行到它所在的代码行，才会真正被解释执行；
  4. 函数内部arguments对象，拥有callee属性，指向函数；
  5. 递归方法，应当使用arguments.callee来消除函数执行与函数名的紧耦合；
  6. 函数内部this对象，指向函数环境对象；
  7. 函数对象属性caller，指向调用当前函数的函数，不能为caller赋值
  8. arguments.callee.caller
  9. apply()和call()能设置函数体内的this值；
  10. bind()创建一个函数的实例，this会被绑定到传给它的参数上；

5.6 基本包装类型

  • 每当读取一个基本类型的时候，后台就会创建一个对应的基本包装类型对象，这个对象只存在一瞬间，会被立即销毁；
  • typeof 基本包装类型的值是 object；
  • 使用转型函数和构造函数（new）typeof有区别
var num = "25"
var num1 = Number(num)
console.log(typeof num1) // number
var num2 = new Number(num)
console.log(typeof num2) // object

var obj= new Object('str')
console.log(obj instanceof Object) // true
console.log(obj instanceof String) // true

5.6.1 Boolean

var obj = new Boolean(false)
var result = obj && (true)
console.log(result) // true

5.6.2 Number

var num = 10.005
console.log(num.toFixed(2)) // 10.01 自动舍入

5.6.3 String；

  1. 数组、字符串都有concat()/slice()方法；
  2. 字符串不可变性；
  3. 字符串模式匹配；

5.7 单体内置对象

Global和Math

5.8 valueof()和toString()

  • 数组调用valueOf()，结果还是数组；
  • Date调用valueOf()，结果是日期的毫秒；
  • RexExp调用valueOf()，返回正则表达式本身；
  • 基本包装类型Boolean的实例重写valueOf()，返回基本类型false或true；
  • 基本包装类型Number的valueOf()返回数值；
  • 数组调用toString():返回逗号拼接每个值的字符串形式（最终结果是一个字符串）；
    数组调用toLocaleString(): 对数组每一项调用这个方法；
  • RegExp的实例调用toString() / toLocaleString() 返回正则表达式的字面量；
  • 函数的toString() / toLocaleString()返回函数代码；
  • 基本包装类型Boolean的toString()，返回字符串’false’ 或 ‘true’；
  • 基本包装类型Number的toString()，返回数值几进制的字符串形式；

5.9 判断类型终极方法Object.prototype.toString()

Object.prototype.toString.call({})              // '[object Object]'
Object.prototype.toString.call([])              // '[object Array]'
Object.prototype.toString.call(() => {})        // '[object Function]'
Object.prototype.toString.call('seymoe')        // '[object String]'
Object.prototype.toString.call(1)               // '[object Number]'
Object.prototype.toString.call(true)            // '[object Boolean]'
Object.prototype.toString.call(Symbol())        // '[object Symbol]'
Object.prototype.toString.call(null)            // '[object Null]'
Object.prototype.toString.call(undefined)       // '[object Undefined]'// 对于内置对象 or 构造函数
Object.prototype.toString.call(new Date())      // '[object Date]'
Object.prototype.toString.call(Math)            // '[object Math]'
Object.prototype.toString.call(new Set())       // '[object Set]'
Object.prototype.toString.call(new WeakSet())   // '[object WeakSet]'
Object.prototype.toString.call(new Map())       // '[object Map]'
Object.prototype.toString.call(new WeakMap())   // '[object WeakMap]'

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/251349.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

javascript --- js中prototype、__proto__、[[Propto]]、constructor的关系

javascript --- js中prototype、__proto__、[[Propto]]、constructor的关系

首先看下面一行代码: function Person(name){this.name name; } var person1 new Person; console.log(person1.__proto__ Person.prototype); console.log(person1.constructor Person);控制台打印如下: 可以看见,当使用构造函数(Person)构造一个实例(person1)时, 在后…
阅读更多...
前端知识点整理收集（不定时更新~）

前端知识点整理收集（不定时更新~）

知识点都是搜集各种大佬们的&#xff0c;如有冒犯&#xff0c;请告知&#xff01; 目录 原型链 New关键字的执行过程 ES6——class constructor方法 类的实例对象 不存在变量提升 super 关键字 ES6——...&#xff08;展开/收集&#xff09;运算符 面向对象的理解 关…
阅读更多...
重学《JavaScript 高级程序设计》笔记 第6章对象

重学《JavaScript 高级程序设计》笔记 第6章对象

第6章 面向对象的程序设计 ECMAScript中没有类的概念&#xff1b; 1.创建对象-历史 1.1 创建实例&#xff0c;添加方法和属性 → 对象字面量 缺点&#xff1a; 使用同一接口创建很多对象&#xff0c;产生大量重复代码 var person new Object() person.name "Y" pe…
阅读更多...
javascrip --- 构造函数的继承

javascrip --- 构造函数的继承

两点需要注意的. 第一是在构造函数声明时,会同时创建一个该构造函数的原型对象,而该原型对象是继承自Object的原型对象 // 声明一个构造函数Rectengle function Rectangle(length, width) {this.length length;this.width width; }// 即:看见function 后面函数名是大写,一般…
阅读更多...
javascript --- 使用语法糖class定义函数

javascript --- 使用语法糖class定义函数

本文讨论的是通过class声明的函数,有什么特点,或者说是指向了哪里. class A() {} // A是一个类// 要看class声明的函数指向哪里,只需将其[[Prototype]]属性打印到控制台,下面看看A和它的原型对象的指向 // 注:[[Prototype]]属性通过__proto__访问 console.log(A.__proto__…
阅读更多...
前端知识点整理收集（不定时更新~）二

前端知识点整理收集（不定时更新~）二

目录 require() 加载文件机制 线程和进程 线程 单线程 Nodejs的线程与进程 网络模型 初识 TCP 协议 三次握手 I/O I/O 先修知识 阻塞与非阻塞 I/O 同步与异步 I/O Git 基础命令 分支操作 修改远程仓库地址 远程分支获取最新的版本到本地 拉取远程仓库指定分支…
阅读更多...
SpringBoot零基础入门指南--搭建Springboot然后能够在浏览器返回数据

SpringBoot零基础入门指南--搭建Springboot然后能够在浏览器返回数据

File->new Project 修改默认包名&#xff0c;根据自己的喜好修改 选择初始化需要导入的包&#xff0c;尽量不要一开始就导入很多&#xff0c;特别是数据库&#xff0c;不然启动可能会有问题&#xff0c;创建好的目录如下&#xff1a; 配置文件写在application.properties下&…
阅读更多...
JavaScript算法相关

JavaScript算法相关

1. 排序 1.1.冒泡排序 每一轮比较&#xff0c;从左至右交换相邻&#xff0c;每轮结束&#xff0c;最后一个为最大下一轮&#xff0c;需要比较的个数 - 1 j < len - i (范围动态缩小)共 len - 1 轮比较 function bubbleSort(arr) {var len arr.length;for (var i 1; i &…
阅读更多...
数据结构基础知识

数据结构基础知识

排序 参考&#xff1a;https://www.bilibili.com/video/av38482633/?spm_id_fromtrigger_reload 目录 排序 插入排序 直接插入排序 折半排序 希尔排序 ​ 交换排序 冒泡排序 快速排序 选择排序 堆排序 流量单位计算 什么是计数排序 复杂度分析&#xff1a; 什…
阅读更多...
linux中安装软件，查看、卸载已安装软件方法

linux中安装软件，查看、卸载已安装软件方法

各种主流Linux发行版都采用了某种形式的包管理系统&#xff08;PMS&#xff09;来控制软件和库的安装。 软件包存储在服务器上&#xff0c;可以利用本地Linux系统上的PMS工具通过互联网访问。这些服务器称为仓库。 由于Linux发行版众多,目前还没有统一的PMS标准工具。 这里分别…
阅读更多...
html5 --- 使用javascript脚本控制媒体播放

html5 --- 使用javascript脚本控制媒体播放

H5中的标签(<audio…/> 和 <video…/>)对于JS中的HTMLAudioElement对象和HTMLVideoElement对象 对象有以下几个方法: play(): 播放 pause(): 暂停播放 load(): 重新装载音频、视频 canPlayType(type): 判断该元素可播放type类型的音频、视频 下面是一个简单的音乐…
阅读更多...
css3 --- 使用媒体查询进行响应式布局

css3 --- 使用媒体查询进行响应式布局

css3引入media,可以根据设备特性进行不同的布局, 本文展示的是根据不同屏幕的宽度进行不同的布局,代码如下: <!DOCTYPE html> <html> <head><meta http-equiv"Content-Type" content"text/html; charsetutf-8" /><title> 针…
阅读更多...
node项目正常启动后不能访问（防火墙未放行端口）

node项目正常启动后不能访问（防火墙未放行端口）

今天打开个人站点&#xff0c;发现登陆不了&#xff0c;原以为是pm2的问题&#xff0c;先停了pm2用node app.js的方式运行后端代码&#xff0c;项目能正常启动但是依然不能登陆。 1 检查ecs的安全组规则&#xff0c;node项目端口3000、8888是否放行 2 确认node正常运行 输入…
阅读更多...
图片地址引用

图片地址引用

阅读更多...
前端知识点整理（三）不定时更新~

前端知识点整理（三）不定时更新~

目录 一、移动端跨平台开发方案 Hybrid App React Native Weex Flutter PWA &#xff08;Progressive Web App&#xff09; 小程序 Cordova html5 组件和模块的区别 组件化 模块化 前端代码规范 前端工程化理解 网站性能监测与优化策略 1.网络传输性能优化 页…
阅读更多...
前端试题(一)

前端试题(一)

2020-03-28 金卡智能 *1. 脚手架 vue-cli现在用的什么版本&#xff0c;2版本了解多少&#xff0c;2 3有什么区别 绝对路径与相对路径 ./ 当前路径 …/父路径 / 绝对路径 某文件里引用其他路径下的资源&#xff1a; 判断该文件所在文件夹与其他资源路径间的关系。 什么&#…
阅读更多...
html5 --- 利用localStorage进行本地存储

html5 --- 利用localStorage进行本地存储

首先做一个提交到本地存储的表单及一个用来显示本地localStorage信息的表格…代码如下: <h2> 本地存储用 </h2>标题: <input id"title" name"title" type"text" size"60" style"margin-left:32px;margin-bottom:…
阅读更多...
前端试题(二)

前端试题(二)

1. 数组方法、reduce()的第二个参数 reduce() MDN文档 accumulator 累计器currentValue 当前值currentIndex 当前索引array 数组 在没有初始值的空数组上调用 reduce 将报错&#xff08;如果有initialValue不报错&#xff09;。回调函数第一次执行时&#xff0c;accumulator…
阅读更多...
项目中遇到问题的解决方法合集

项目中遇到问题的解决方法合集

以下内容主要是为了方便记录自己在工作中遇到的项目问题搜寻到的解决方法&#xff0c;肯定方法不唯一&#xff0c;这里只是给出解决了我的问题的方法&#xff0c;大家走过路过随便瞧瞧较好啦嘻嘻 1、使用vue/cli 4.x 创建vue项目时使用iconfont 图标无法显示——前者版本问题 …
阅读更多...
html5 --- IDBDatabase创建对象存储和索引

html5 --- IDBDatabase创建对象存储和索引

代码如下: <!DOCTYPE html> <html> <head><meta http-equiv"Content-Type" content"text/html; charsetutf-8" /><title> CRUD操作 </title><style type"text/css">table{width: 830px;border: 1px …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023