[JS]知识点

简介: 本文介绍了JavaScript中的多个重要知识点,包括ES6、严格模式、类与对象、解构、跨域问题及入口函数等。文章通过详细示例和推荐的外部资源,帮助读者更好地理解和应用这些概念。内容持续更新中,适合初学者和进阶开发者参考。

【版权声明】未经博主同意,谢绝转载!(请尊重原创,博主保留追究权)
https://developer.aliyun.com/article/1635707
出自【进步*于辰的博客

1、知识点扩展

  1. 细节与使用经验
  2. 词法作用域
  3. this
  4. Node.js
  5. jsonp

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:内置对象

  1. 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]为例)

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

    17、入口函数

    参考笔记一,P13.1。

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

示例。

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

在执行querySelector()时,由于还未加载<img>,故找不到,则imgundefinedimg.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脚本,目前我用第三种。

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

本文持续更新中。。。

相关文章
|
7月前
|
JavaScript 前端开发 API
|
7月前
|
JavaScript 前端开发 CDN
总结 vue3 的一些知识点:Vue.js 安装
总结 vue3 的一些知识点:Vue.js 安装
|
7月前
|
JavaScript
总结 vue3 的一些知识点:​Vue.js 条件语句​
总结 vue3 的一些知识点:​Vue.js 条件语句​
|
26天前
|
JavaScript 前端开发 中间件
JS服务端技术—Node.js知识点
本文介绍了Node.js中的几个重要模块,包括NPM、Buffer、fs模块、path模块、express模块、http模块以及mysql模块。每部分不仅提供了基础概念,还推荐了相关博文供深入学习。特别强调了express模块的使用,包括响应相关函数、中间件、Router和请求体数据解析等内容。文章还讨论了静态资源无法访问的问题及其解决方案,并总结了一些通用设置。适合Node.js初学者参考学习。
33 1
|
1月前
|
存储 JavaScript 前端开发
JS的ES6知识点
【10月更文挑战第19天】这只是 ES6 的一些主要知识点,ES6 还带来了许多其他的特性和改进,这些特性使得 JavaScript 更加现代化和强大,为开发者提供了更多的便利和灵活性。
20 3
|
2月前
|
存储 JSON JavaScript
JS知识点
JS知识点
21 3
|
2月前
|
JavaScript 前端开发 Java
【javaScript数组,函数】的基础知识点
【javaScript数组,函数】的基础知识点
27 5
|
3月前
|
JavaScript 前端开发 Java
JavaScript 类知识点概览
概览JavaScript中类的知识点,包括类的定义和实现、添加方法和get/set方法、类的继承和静态方法的使用。通过学生类和人员类的例子,演示了类的构造器、方法定义、继承关系和静态方法的调用。
JavaScript 类知识点概览
|
2月前
|
前端开发 JavaScript
JavaScript 知识点总结
JavaScript 知识点总结
29 0
|
2月前
|
存储 JavaScript 前端开发
JavaScript知识点
JavaScript知识点