[javascript]知识点-阿里云开发者社区

【版权声明】未经博主同意，谢绝转载！（请尊重原创，博主保留追究权）
https://developer.aliyun.com/article/1440740

出自【进步*于辰的博客】

1、其他知识点链接

2、严格模式

待输入。。。

3、类、对象

参考笔记一，P12.2/9、P13.3、P14.11。

3.1 概述

JS是弱类型语言，类与对象的界限没有那么明确。一般大写开头的是类，小写的是对象。

内置类：

Array、Boolean、Date、Function、Global、Math、Number、Object、RegExp、String以及各种错误类。

错误类包括：Error、EvalError、RangeError、ReferenceError、SyntaxError和TypeError。

其中，Global 和 Math 在脚本程序初始化时创建，无需实例化。

内置对象：

arguments：自动封装function()中所有实参，类型为Array。

宿主对象：

“宿主对象”指由执行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”

3.2 自定义对象

3.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')

3.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

4、变量

我们先来看一个示例。

var platform = function() {
    console.log(id)     // undefined
    var id = 'csdn'
}
platform()
console.log(id)     // id is not defined

输出undefined是因为 var 的变量提升机制，报错说明id的作用域是函数。把 var 换成 let：

var platform = function() {
    console.log(id)     // Cannot access 'id' before initialization
    let id = 'csdn'
}
platform()
console.log(id)     // id is not defined

第一个报错是因为“暂时性死区”，第二个报错同理。

那如果没有修饰符呢。

var platform = function() {
    console.log(id)     // id is not defined
    id = 'csdn'
}
platform()
console.log(id)     // csdn

没有变量提升故报错，输出csdn说明id是全局变量。

结论：

由var或let声明或定义的变量是局部变量，作用域为当前上下文；而直接定义（没有修饰符）的变量是全局变量。因此，可以认为var/let定义了变量的作用域。

注：这也是解释型语言的一个特点，这种现象也称为“懒散模式”，使用“严格模式”可规避这一弊端（意外创建全局变量）。

5、this

推荐一篇博文《JS this详解》（转发）。

参考笔记二，P6.1。

我暂未对相关阐述进行整理，大家可查阅这篇文章。

10、关于 var 与 let

参考笔记二，P43.3、P46.1。

前言：

关于编译与解释，详述可查阅博文《Java知识点锦集》的第17项。
变量提升机制的本质就是声明与定义不同步的错觉。

10.1 var

在解释时，解释器先扫描所有js脚本，将所有声明（包括变量和函数）移动到作用域顶端，且函数优先级高于变量。

示例：

console.log(str)
console.log(append)
// console.log(append(str))// 报错
var str = '中'
var append = function(str) {
    return str + '国'
}
console.log(str)
console.log(append(str))

经变量提升机制：

var append;
var str;
console.log(str)-----------------------A
console.log(append)--------------------B
// console.log(append(str))------------C
str = '中'
append = function(str) {
    return str + '国'
}
console.log(str)// 打印：中
console.log(append(str))// 打印：中国

输出结果：

变量提升机制将str与append()的声明移动到作用域顶部，故 A 和 B 的打印结果都是undefined。

由于函数的优先级高于变量，所以append()先于str声明。但毕竟只是声明而非定义，因此在执行 C 时，append只是一个未知变量，还不是函数，故解释解释解释报错。

为什么函数也会变量提升？

因为函数也是一种变量。(1)、js中有一种内部对象是Function；(2)、从函数声明var xx = function()可以看出。

10.2 let

let 与 var 具有相同的变量提升机制。不同的是，let 声明的变量在定义之前，存在“暂时性死区”，指在定义前访问或赋值会报错。

示例：

将上一个示例稍作修改，var → let。（let 与 var 的变量提升机制相同，故经变量提升机制修改后的脚本相同，看上面）

console.log(str)
console.log(append)
let str = '中'
let append = function(str) {
    return str + '国'
}
console.log(str)
console.log(append(str))

输出结果：

意思是在初始化之前，不能访问。

初始化就是上述所说的定义。因此，从变量声明let append;到变量定义append = function(str) {}之间的代码区就是“暂时性死区”。

9.3 区别

var 允许重复声明和定义，let 不允许；（重复声明和定义的本质其实变量提升后被覆盖）
作用域不同；（因为 let 存在“暂时性死区”）
let 不允许重复声明和定义是包括 var 和 let。（变量名相同就是同一个变量）

11、为什么语句不需要分号结尾？

推荐一篇博文《js语句末尾是否需要加分号?》（转发）。

参考笔记二，P43.4。

因为在解释时会自动在行尾添加分号，除非下一行以(、[、/、+、-开头，且若下一行与下下一行仍能衔接，则继续拼接。

12、内置函数

参考笔记一，P10.4、P11.3、P13.2；笔记三，P48.1/2。

12.1 通用函数

摘要	参数说明	返回值类型/返回值	说明
`parseInt(str)`			将字符串中的数字部分转换成数字，以字符截止。可用于去除小数。若首字符不是数字，得`NaN`
`Number(str)`			将字符串转换成数字。若字符串中包含非数字，得`NaN`
`list.find(item => {})`			返回匹配的数组元素
`str.slice(i)`			截取字符串
`eval(str)`			将字符串作为js脚本执行
`type(a)`			返回变量类型。同指令`type a`

12.1.1 list.find(item => {})

示例。

var platform = [{
    id: 1,
    name: 'C站'
}, {
    id: 2,
    name: 'B站'
}]
var result = platform.find(item => {// item 是数组元素，作为参数传入函数作为返回值
    if(item.id == '1')
        return true
})
console.log(result)// { id: 1, name: 'C站' }
var result = platform.find(item => {
    if (item.id == 3)
        return true
})
console.log(result)// undefined
var result = platform.find(item => {
    if (item.id == '1')
        return false
})
console.log(result)// undefined
var result = platform.find(item => {
    if (item.id == 3)
        return false
})
console.log(result)// undefined

四个示例中的if...使用的是’==‘（相等），而不是’==='（全等）。当然，也可以使用===，只是需要留意彼此类型（拿一个字符串去一组数字中查找，那肯定找不到，返回undefined）。

注意：这里的return的作用是终止循环，其返回值用于判断匹配的元素是否作为检索结果的依据，并不是检索结果（result）。

12.2 document对象函数

摘要	参数说明	返回值类型/返回值	说明
`innerText`			设置标签内容
`innerHTML`			设置标签内容。会识别内容中的标签
`querySelector()`			通过盒子名获取盒子。返回第一个
`querySelectorAll()`			通过盒子名获取盒子。返回所有

12.2.1 innerHTML、innerText

示例。

// 显示文字“content”，盒子<content>因没有样式而无法看出
document.body.innerHTML = "<content>China</content>";
// 显示文字“<content>China</content>”
document.body.innerText = "<content>China</content>";

12.3 Global对象函数

摘要	参数说明	返回值类型/返回值	说明
`encodeURI(url)`			对URL进行编码。作用对象：不属于URI的特殊字符，如：特殊符号、汉字
`encodeURIComponent(url)`			对URL进行编码。作用对象：任何非标准字符（即非字母）
`decodeURI(url)`			对URL进行解码。作用对象：不属于URI的特殊字符，如：特殊符号、汉字
`decodeURIComponent(url)`			对URL进行解码。作用对象：任何非标准字符（即非字母）

示例。

var url = 'https://blog.csdn.net/m0_69908381?type=blog&name=进步*于辰'
var enurl1 = encodeURI(url)
var enurl2 = encodeURIComponent(url)
console.log(enurl1)
console.log(enurl2)
var deurl1 = decodeURI(enurl1)
console.log(deurl1)
var deurl2 = decodeURIComponent(enurl2)
console.log(deurl2)

打印结果：

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、配置代理（后续补充）；

14、关于解构

推荐一篇博文《js中的解构》（转发）。

参考笔记二，P47.3。

小结：（以var [a, b] = [1, 2]为例）

解构时格式必须相同；
当有重命名时，新变量才保留声明；
扩展运算符只能放在最后，如var [a, ...b]；
变量个数与元素个数不必相同，取对应值，且可设置默认值；
解构对象时，若新变量已声明，则解构语句必须用()包裹，因为js规定括号才是一个语句块。

15、关于循环中的事件问题

参考笔记一，P10.11/12。

1、若事件在循环中，由于for一直执行，而事件在触发时才执行，故直接控制arr[i]无效（arr是盒子数组），需this。

示例。

// 当时此循环用于设置一批<img>的src
$("#section3 .nav img").each(function(i,e){
  $(this).attr("src",arr2[i]);// arr记录着图片的路径
})

2、使用arr[i].index可设置盒子数组元素的索引（数组元素只是对应索引i，本身无索引），index可用于“链接”。（这个词的意思忘了，大家自行揣摩哈。。。）

示例。

$("#section3 .nav img").each(function(i,e){
  $(this).attr('index', i)
  // 为前5张图添加点击事件，点击时修改路径
  if($(this).attr('index') < 5) {// 需要使用index进行判断，而不能是 i < 5
    $("#section3 .nav img").eq(i).click(function(){\
      $(this).attr("src",arr2[i]);
    })
  }
})

17、入口函数

参考笔记一，P13.1。

页面加载的顺序是自上而下，步骤是先将标签载入DOM树，再加载内容。

示例。

<script>
    var img = document.querySelector('img')
    img.src = 'img/2.jfif'
</script>
<img src="" alt="">

在执行querySelector()时，由于还未加载，故找不到，则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() {})就可能有问题。

19、阻止特殊行为

19.1 默认行为

推荐一篇博文《默认行为及阻止》（转发）。

参考笔记三，P48.4。

“默认行为”指标签自带的事件，如：点击，输入。阻止方法：

方法一：使用标签调用addEventListener('xx', e => {})。其中，xx是行为标识，如：click点击、contextmenu页面右键菜单、keydown键盘输入、submit提交；再调用e.preventDefault()。（在IE8之后版本有效）
方法二：window.event.returnValue = false，固定写法。
方法三：为标签添加相应事件，定义函数的返回值为false或调用e.preventDefault()。（这是jq方法，前两种是js原生方法）

19.2 冒泡行为

推荐一篇博文《html消除冒泡,jquery阻止元素冒泡的两种方法》（转发）。

参考笔记一，P14.10。

“冒泡”行为指由于盒子嵌套关系中，当子盒子的事件执行完成后再触发父盒子事件的情况。阻止方法：

为子盒子事件函数添加return;；
在子盒子事件的函数中调用e.stopPropagation()。

这两种方法都是通过jq实现，js原生方法暂且不讨论。

最后

我所知的编写js脚本比较好的方法：(1)F12控制台；(2)HTML文件；(3)vscode。第一种最便捷，但不方便编写多行js脚本，目前我用第三种。

本文持续更新中。。。

[javascript]知识点