JavaScript常见名词--《前端那些事》

简介: bom,dom ,js

1原型prototype

  1. 简介

​ 在构造函数中有一个属性叫 prototype

prototype是一个对象属性,其属性值为对象,称为原型对象
可以通过prototype来添加新的属性和方法,此时所有该构造函数创建的对象都会具有这些属性和方法
由该构造函数创建的对象会默认链接到该属性上
​ 语法:

构造函数.prototype.属性名=值;
构造函数.prototype.方法名=function(){方法定义体};
​ 访问对象属性的查找顺序:

首先在当前对象中查找对应的实例属性
如果没有,就会到该对象关联的构造函数的prototype属性中查找,即到原型对象中查找
​ 作用:

对象间共享数据
为"类"(系统内置或自定义)增加新的属性、方法,并且新增内容对于当前页面中已经创建的对象也有效

  1. proto_ _

​ prototype是一个隐藏属性,于是为每个对象提供一个叫__proto__的属性

对象的__proto__ 与创建它的构造函数的 prototype 本质上是同一个东西
__proto__是对象的属性,是站在对象的角度,来讨论其原型对象
prototype是构造函数的属性,是站在构造函数的角度,来讨论其原型属性
注:由于__proto__是非标准属性,因此一般不建议使用

  1. 对象的类型

​ 判断数据的类型:

使用typeof

可以判断任意变量的类型

判断对象的类型时总是返回object

使用instanceof

只能判断对象是否为某种类型,需要指定判断的目标数据类型,无法获取对象的类型名称

语法:对象 instanceof 数据类型,返回boolean值

​ 获取对象的类型:

函数有一个name属性,通过该属性可以获取函数的名称
构造函数的名称就是对象的类型

  1. 原型链

​ 任何对象都有其原型对象,原型对象也有原型对象,对象的原型对象一直往上找,直到null为止

​ 在这一过程中,有一个 Object 类型的,有很多方法,它就是 Object.prototype,位于顶层

  1. call和apply

​ 作用:以某个对象的身份来调用另一个对象的方法

​ 语法:

call:方法.call(对象,参数1,参数2...)
apply:方法.apply(对象,参数)
​ 区别:传参的方式有所不同

第一个参数是相同的,都表示由该对象来调用执行

后面的参数不同

call是逐个传参,后面参数可以有多个,逗号隔开

apply是以数组形式传参,后面参数只能有一个,会自动拆分为多个元素传入

  1. 继承

​ JS中实现继承的三种方式:

对象冒充继承,也称为构造继承

核心:使用call,以对象冒充的形式调用父类的构造函数,相当于是复制父类的实例属性给子类

缺点:只能继承父类构造函数中的属性和方法,无法继承原型中的属性和方法

原型链继承

核心:使用prototype,将父类的实例作为子类的原型

缺点:创建子类实例时,无法向父类构造函数传参,导致继承的父类属性没有值

组合继承

对象冒充+原型链
7闭包
​ 闭包是JS中特有的现象,如何理解闭包?

在一个函数内部又定义了一个函数,这个定义在内部的函数,就是闭包
闭包就是能够读取其他函数内部变量的函数
闭包是在某个作用域内定义的函数,该函数可以访问这个作用域内的所有变量
从作用上来说,闭包就是将函数内部和函数外部连接起来的一座桥梁
​ 闭包的用途

在函数的外部,可以读取到函数内部的变量
让变量的值始终保存在内存中(不会被垃圾回收器回收)
​ 如果内部函数使用外部函数的变量,在外部函数执行完成之前变量会有改变时,内部只能获取最后改变的值,无法获取定义时的值,就会产生闭包

​ 解决方式

不在函数内部定义函数,将函数定义在外面,在函数内部调用
为元素附加属性,用来存储变量
使用let来定义变量

  1. JSON

8.1 JSON简介
​ JavaScript Object Notation 是一种轻量级的数据交换格式,用于表示JavaScript对象的一种方式

​ 采用与编程语言无关的文本格式,易于阅读和编写,同时也易于解析和生成。

8.2 基本用法
​ 语法:{"属性名":属性值,"属性名":属性值....}

​ 注意:

JSON结构是由一系列的键值对所组成,称为JSON对象
属性名使用双引号引起来
JSON和对象字面量的区别:JSON的属性必须加双引号,而对象字面量可以不加
​ 使用:

简单的JSON对象
复合属性,属性的值为JSON对象
JSON对象的集合

  1. 事件操作

9.1 事件流
​ 概念:当一个HTML元素产生事件时,该事件会在当前元素与根元素之间按特定的顺序传播,所有经过的节点都会收到该事件并执行,这个传播过程就是DOM事件流。

​ 分类:事件冒泡、事件捕获

9.2 事件冒泡/事件捕获
​ 事件冒泡:当一个元素上的事件被触发时,事件从事件源开始,往上冒泡直到页面的根元素,这一过程被称为事件冒泡(默认方式)

​ 事件捕获:当一个元素上的事件被触发时,事件从页面的根元素开始,往下直到事件目标元素,这一过程被称为事件捕获

​ 阻止事件冒泡 :event.stopPropagation()

9.3 事件代理/事件委托
​ 概念:利用事件冒泡/事件捕获机制,通过给父元素绑定事件,从而实现对所有子元素的事件管理,无需为每个子元素绑定事件

​ 优点:1.减少事件注册,降低内存占用

​ 2.新增元素时实现动态绑定事件

9.4 事件默认行为
​ 概念:当一个事件发生时浏览器自己会默认做的事情,如:点击链接时默认会跳转,右键点击时默认会弹出菜单

​ 阻止事件的默认行为:e.preventDefault();

相关文章
|
1天前
|
JavaScript 前端开发 Java
前端网页开发学习(HTML+CSS+JS)有这一篇就够!(二)
前端网页开发学习(HTML+CSS+JS)有这一篇就够!(二)
|
1天前
|
前端开发 数据安全/隐私保护
前端网页开发学习(HTML+CSS+JS)有这一篇就够!(一)
前端网页开发学习(HTML+CSS+JS)有这一篇就够!(一)
|
1天前
|
SQL 前端开发 JavaScript
前端三剑客之JavaScript基础入门
前端三剑客之JavaScript基础入门
|
2天前
|
前端开发 JavaScript Serverless
前端新手建议收藏的JavaScript 代码技巧
前端新手建议收藏的JavaScript 代码技巧
|
2天前
|
前端开发 JavaScript Java
高效前端开发技巧:如何优化JavaScript代码执行效率
在当今互联网应用日益复杂的背景下,前端开发者面临着更高的性能要求。本文探讨了一些提升JavaScript代码执行效率的实用技巧,包括优化循环结构、减少内存占用以及利用现代浏览器的优化能力。通过这些方法,开发者可以在保持代码清晰易读的前提下,显著提升应用程序的响应速度和用户体验。
|
9天前
|
设计模式 前端开发 JavaScript
关于写好前端JS代码的一些建议
关于写好前端JS代码的一些建议
17 2
|
11天前
|
前端开发 JavaScript
阿里云验证码2.0 验证时报错 前端页面获取的验证参数有问题,动态JS加载失败,请问怎么解决啊?急,急,急。
用户反馈校验时遇到错误,日志显示验证码参数获取异常。采用无痕验证,失败后,返回`{captchaResult:false,bizResult:false}`,未触发滑块二次验证。
|
12天前
|
JavaScript 前端开发
杨校老师课堂之Web前端JS类库_JQuery案例[效果图与代码齐全]
杨校老师课堂之Web前端JS类库_JQuery案例[效果图与代码齐全]
15 0
|
15天前
|
前端开发 JavaScript 安全
高级前端开发需要知道的 25 个 JavaScript 单行代码
1. 不使用临时变量来交换变量的值 2. 对象解构,让数据访问更便捷 3. 浅克隆对象 4. 合并对象 5. 清理数组 6. 将 NodeList 转换为数组 7. 检查数组是否满足指定条件 8. 将文本复制到剪贴板 9. 删除数组重复项 10. 取两个数组的交集 11. 求数组元素的总和 12. 根据指定条件判断,是否给对象的属性赋值 13. 使用变量作为对象的键 14. 离线状态检查器 15. 离开页面弹出确认对话框 16. 对象数组,根据对象的某个key求对应值的总和 17. 将 url 问号后面的查询字符串转为对象 18. 将秒数转换为时间格式的字符串 19.
23 3
高级前端开发需要知道的 25 个 JavaScript 单行代码
|
18天前
|
XML 前端开发 JavaScript
前端简介(HTML+CSS+JS)
前端简介(HTML+CSS+JS)

热门文章

最新文章