【版权声明】未经博主同意，谢绝转载！（请尊重原创，博主保留追究权）
https://developer.aliyun.com/article/1635707
出自【进步*于辰的博客】
1、知识点扩展
2、什么是“ES6”？
介绍：
我未在此领域深耕，为大家推荐一个个人网站 → ECMAScript 6 入门（转发）。
3、严格模式
推荐一篇博文：《JavaScript中的严格模式详解》（转发）。
参考笔记三，P73.3。
内容整理中，你可移步推荐博文了解详情。
4、类、对象
参考笔记一，P12.2/9、P13.3、P14.11。
4.1 介绍
JS是弱类型语言，类与对象的界限没有那么明确。一般大写开头的是类，小写的是对象。
1：内置类
Array、Boolean、Date、Function、Global、Math、Number、Object、RegExp、String以及各种错误类。
错误类包括：Error、EvalError、RangeError、ReferenceError、SyntaxError和TypeError。
其中，Global 和 Math 在脚本程序初始化时创建，无需实例化。
2：内置对象
arguments：保存了函数所有实参，类型为object，可视为数组进行操作。
使用arguments需注意一点，箭头函数不兼容此对象，也就是，即便你使用了，也无法如在普通函数中一般从中遍历实参。当然，箭头函数中的arguments仍是对象。
因此，可以使用剩余（rest）参数代替arguments，剩余参数类似Java中的可变参数。
3：宿主对象
“宿主对象”指由执行js脚本的环境提供的对象。
例如：将js脚本嵌入到html文件中，则宿主对象是浏览器对象，如：window、document、element、form 和 image。
示例：使用 document 对象动态添加标签。
// 创建标签
var script = document.createElement('script')// 引号内必须是标签名
// 创建文本节点（标签）
var text = document.createTextNode("console.log('这是一个js脚本')")
// 添加文本标签
script.appendChild(text)
// 添加标签
document.body.appendChild(script)
// 结果是在控制台打印“这是一个js脚本”
// createTextNode()与appendChild()的结果与innerHtml相同
script.innerHtml = '这是一个js脚本'
还有：
// 将新标签插入到<body>的第2个位置（作为第2个子标签）
document.body.insertBefore(script, 1)
// 删除<body>的第1个子标签
document.body.removeChild(0)
// 复制标签
var script2 = document.body.script.cloneNode()
// 若是(true)，则表示可同时复制内容，但不能事件
// 替换标签
var div = document.createElement('div')
div.innerText = '这是一个div'
document.body.replaceNode(div, 1)
// 将刚刚创建的<script>替换成<div>
// 结果是页面显示“这是一个div”
4.2 自定义对象
4.2.1 创建对象方法
1：字面量。
var platform = {
id: 1,
name: 'csdn',
setName: name => {
this.name = name
}
}
2：Object构造函数。
var platform = new Object() // 可省略 ()
platform.id = 1
platform.name = 'csdn'
platform.setName = name => {
this.name = name
}
3：自定义构造函数。
var platform = function(id, name) {
this.id = id
this.name = name
}
// 属性prototype是原型，即父类。setName()在prototype中
platform.prototype.setName = name => {
this.name = name
}
var p1 = new platform(1, 'csdn')
p1.set(2, '博客园')
4：原型。
var platform = new Object()
var csdn = Object.create(platform)// 同时建立继承关系
5：类。
class Platform {
constructor(id, name) {
// 构造函数
this.id = id
this.name = name
}
setName = name => {
this.name = name
}
}
var p1 = new Platform(1, 'csdn')
4.2.2 建立继承关系
JS不属于“面向对象”的编程语言，故没有明显的继承关系（extends）。要实现“继承”，需要额外建立，JS中的“父类”称为原型（prototype）。
示例。
let platform = function() {
}
let CSDN = function() {
}
// 实例化，可以不加 ()
var p1 = new platform()
var c1 = new CSDN()
Object.setPrototypeOf(c1, p1)// 建立继承关系
Object.getPrototypeOf(c1)// 获取原型，返回：platform {}
p1.isPrototypeOf(c1)// 判断继承关系，返回：true
11、为什么JS语句不需要分号结尾？
推荐一篇博文《js语句末尾是否需要加分号?》（转发）。
参考笔记二，P43.4。
因为在解释时会自动在行尾添加分号，除非下一行以(、[、/、+、-开头，且若下一行与下下一行仍能衔接，则继续拼接。
13、如何解决“跨域”问题？
参考笔记三，P47.1。
1：设置请求允许范围。
response.setHeader("Access-Control-Allow-Origin", "*")
response.setHeader("Access-Control-Allow-Origin", "http://127.0.0.1:8081/g1")
大致如此，因语言而异。
2：jsonp：见【其他知识点链接】的第3个知识点。
3：配置代理（后续补充）。
14、解构
推荐一篇博文《js中的解构》（转发）。
参考笔记二，P47.3。
小结：（以var [a, b] = [1, 2]为例）
- 解构时格式必须相同。
- 当有重命名时，新变量才保留声明。
- 扩展运算符只能放在最后，如
var [a, ...b]。 - 变量个数与元素个数不必相同，取对应值，且可设置默认值。
- 解构对象时，若新变量已声明，则解构语句必须用
()包裹，因为js规定括号才是一个语句块。17、入口函数
参考笔记一，P13.1。
页面加载的顺序是自上而下，步骤是先将标签载入DOM树，再加载内容。
示例。
<script>
var img = document.querySelector('img')
img.src = 'img/2.jfif'
</script>
<img src="" alt="">
在执行querySelector()时，由于还未加载<img>，故找不到，则img为undefined，img.src报错。
解决办法：
1：js原生语法：window.onload = function() {}。控制函数内代码在所有内容加载完成后执行。即：
<script>
window.onload = function() {
var img = document.querySelector('img')
img.src = 'img/2.jfif'
}
</script>
<img src="" alt="">
2：jq语法：$(document).ready(function() {})。控制函数内代码在DOM树加载完成后执行。即：
<script>
$(document).ready(function() {
var img = document.querySelector('img')
img.src = 'img/2.jfif'
})
</script>
<img src="" alt="">
或简写：
<script>
$(function() {
var img = document.querySelector('img')
img.src = 'img/2.jfif'
})
</script>
<img src="" alt="">
后者较前者延迟少，前者较后者可靠性高，前者在一个页面中只能有一个，后者可多个。
至于可靠性，一般情况下两者差别不大（加载完DOM树与加载完内容的确差别不大）。不过，例如图片较大，需要较长时间加载，而js脚本中包含对图片像素层面的处理，这种情况下使用$(function() {})就可能有问题。
最后
我所知的编写JS脚本比较好的方法：(1)F12控制台；(2)HTML文件；(3)vscode。第一种最便捷，但不方便编写多行js脚本，目前我用第三种。
本文中的例子是为了方便大家理解和阐述知识点而简单举出的，旨在阐明知识点，并不一定有实用性，仅是抛砖引玉。
本文持续更新中。。。
