当前位置: 首页 > news >正文

js 基础补充3

1. 闭包

        在函数内部定义的函数,可以访问改函数的属性和方法

        私有属性 延长变量的生命周期,更好的避免命名冲突

        缺点:内存消耗比较大,不建议频繁使用

2. js 原型 原型链

访问对像的属性方法,不光会在对象上查找还会在原型上查找 每个对象都有一个原型对象

指向构造函数的原型protoType

原型对象也存在原型,类推一级一级给上查找,形成了原型链

Person 实例对象 p1

p1.__proto__ === Person.prototype

Person.prototype.__proto__ === Object.prototype

Object.prototype.__proto__ === null

Object.__proto__ === Function.prototype

3. js 继承

不使用Object.create()

        原型链 child.prototype = new Parents() 指向同一内存地址互相影响

        构造函数 function child(){Parents.call(this)} 只能反问函数内部定义的属性方法 不是完整的原型链

        组合 1+2 调用两次方法 影响性能

使用Object.create()

        原型式 内存地址互相影响

        寄生 不能继承原型是上的方法

        整体组合 类似 ES6 新增的 extends

4. this

箭头函数的this 在创建时候已经确认了

绑定方式
        默认 没有其他规则 this 默认指向全局对象(除严格模式下)

        隐式绑定是指通过对象调用函数时,this 指向调用该函数的对象。

        new 绑定是指通过 new 关键字来创建一个新对象时,this 指向新创建的对象。

        显示(apply bind call ) call 返回的函数 列表

this在不同上下文 指向不同属性方法

apply call bind 的区别

三者都是用于显示的改变this指向的

第一个参数表示this指向的对象,若为空/null 则指向windows

第二个参数 apply 以数组形式传递,call 以参数列表的形式传递 两者都只能一次传递 bind可以多次传递

apply call 都是立即执行 (一次性修改)bind 返回修改this后的函数,需要手动执行(永久修改)

function test(...args){console.log(...args)console.log(this.name,this.age);}
const _obj = {name:'lili',age:18
}
test.apply(_obj,[1,2,3])
test.call(_obj,1,2,3)
const newFun = test.bind(_obj,1)
newFun(2,3)

5. instanceof typeof 区别

instanceof(实例是否属于 对象 没法准确判断基本数据类型) typeof (基本数据类型 不能区分数组和对象)

可以使用Object.prototype.toString.call() 判断

6.new 操作符干了什么(new 操作符用于创建构造函数的实例对象)

        1.创新一个新的对像

        2.把对象的原型绑定到构造函数的原型

        3.将构造函数中的 this 绑定到新创建的对象

        5. 构造函数没有return ,则返回新对象

手写 new 操作符
 

7. 执行上下文

执行上下文: 代码运行时所在的环境

全局 ,函数 ,eval Eval 函数执行时会创建一个 eval 执行上下文

创建阶段 (变量方法 this 作用域链) 词法环境 提供变量函数声明(静态) ,变量环境根据这些信息存储管理值 =>

执行阶段 代码执行 => 

回收 执行上下文出栈
 

执行栈 先进后出

8.事件


事件:用户和网页交互的结果

事件流:事件在页面传递顺序
 三个阶段

捕获阶段 (从大到小) -》目标阶段-》冒泡阶段 (小小到大

事件模型:定义如何处理事件

DOM Level 0 和 DOM Level 2 是两种主要的事件模型。

直接在标签上添加On-Event 例如OnClick 不能移除 不能重复使用

利用 addEventListener('click',()=>{}) 一次添加定多个事件处理程序

事件代理

 把一个/或一组响应事件委托给另一个事件 (在冒泡阶段),真正绑定的是父元素

 场景 : 监听多个li变化,把事件绑定在ul上

 优点:动态绑定减少工作量,减少整个页面所需内存,提高效率

 避免对鼠标移动绑定,需要计算详细位置,消耗更大 focus blur 没有冒泡机制,不能代理

事件循环

http://www.lryc.cn/news/466986.html

相关文章:

  • Invalid bean definition with name ‘employeeMapper‘ defined in file
  • 悦享驾驶,乐在旅途,首选江铃集团新能源易至EV3青春版
  • 测试WIFI和以太网的TCP带宽、UDP带宽和丢包率、延时
  • redis 第155节答疑 源码分析Hash类型ziplist结构和zlentry实体解析
  • IDE使用技巧与插件推荐
  • 1020接口测试面试题随记
  • Zotero7最新(2024)翻译问题——配置 百度API翻译
  • python程序设计员—练习笔记
  • 1.DBeaver连接hive数据库
  • CODESYS随机动态图案验证码制作详细案例(三)
  • NodeJS 使用百度翻译API
  • 摩熵数科数据产品阵容BCPM
  • ros2 .idl文件生成C、C++代码
  • scrapy的xpath在控制台可以匹配,但是到了代码无法匹配(无法匹配tbody标签)
  • OpenCL内存模型
  • Commvault Cloud如何改变网络弹性游戏规则?
  • echarts环形饼图自定义边框、标题及图例
  • Android SELinux——上下文Context源码(十)
  • 责任链模式下,解决开闭原则问题实践
  • 对Android的Binder机制的了解
  • 收藏文章_VMware17Pro虚拟机安装教程(超详细)
  • 友思特分享 | 车载同步技术创新:多相机系统如何实现精准数据采集与实时处理?
  • grafana failed to load dashboard from file= ... json error=EOF
  • 【前端学习】AntV G6-09 复杂的自定义边、边动画
  • 极狐GitLab 发布安全补丁版本 17.4.2, 17.3.5, 17.2.9
  • MATLAB智能算法 - Immunity Algorithm免疫算法
  • 学习eNSP对提升就业竞争力有多大帮助?
  • Molmo和PixMo:为最先进的多模态模型提供开放权重和开放数据
  • day02_计算机常识丶第一个程序丶注释丶关键字丶标识符
  • 【Trick】IOS系统解决“未受信任的企业级开发者”问题