[JS]知识点

进步·于辰

已于 2024-07-28 19:12:23 修改

阅读量1w

点赞数 17

分类专栏：前端原生知识点文章标签： Javascript知识点

于 2023-12-23 11:09:23 首次发布

本文链接：https://blog.csdn.net/m0_69908381/article/details/135165704

版权

前端原生知识点专栏收录该内容

7 篇文章 1 订阅

订阅专栏

【版权声明】未经博主同意，谢绝转载！（请尊重原创，博主保留追究权）
https://blog.csdn.net/m0_69908381/article/details/135165704
出自【进步*于辰的博客】

1、知识点扩展

2、什么是“ES6”？

介绍：

在这里插入图片描述

我未在此领域深耕，为大家推荐一个个人网站 → ECMAScript 6 入门（转发）。

3、严格模式

推荐一篇博文：《JavaScript中的严格模式详解》（转发）。
参考笔记三，P73.3。

内容整理中，你可移步推荐博文了解详情。

4、类、对象

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

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不属于 $\color{green}{“面向对象”}$ 的编程语言，故没有明显的继承关系（extends）。要实现“继承”，需要额外建立，JS中的“父类”称为 $\color{blue}{原型}$ （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。

页面加载的顺序是自上而下，步骤是先将标签载入 $\color{green}{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脚本，目前我用第三种。

本文中的例子是为了方便大家理解和阐述知识点而简单举出的，旨在阐明知识点，并不一定有实用性，仅是抛砖引玉。

本文持续更新中。。。

进步·于辰

关注

17
点赞
踩
26

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录