[JS]知识点
【版权声明】未经博主同意,谢绝转载!(请尊重原创,博主保留追究权)
https://www.cnblogs.com/cnb-yuchen/p/18031963
出自【进步*于辰的博客】
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脚本,目前我用第三种。
本文中的例子是为了方便大家理解和阐述知识点而简单举出的,旨在阐明知识点,并不一定有实用性,仅是抛砖引玉。
本文持续更新中。。。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性