avatar
Articles
109
Tags
44
Categories
27

Home
Archives
Categories
DarylWxc
Home
Archives
Categories

DarylWxc

Typescript-Learning-Note
Created2023-06-01|web前端|Typescript
Typescript Properties(Notice)Optional propertiesadd a ? after the property name 123456function printName(obj: { first: string; last?: string }) { // ...}// Both OKprintName({ first: "Bob" });printName({ first: "Alice", last: "Alisson" }); Union TypesDefining a Union Type 1234567function printId(id: number | string) { //use | to separate console.log("Your ID is: " + id);}// OKprintId(101);// OKprintId(&qu ...
JavaScript之深入Map
Created2022-03-01|web前端|JavaScript
MapMap是一种ES6的新增集合类型,带来了真正的键/值存储机制。Map的API1234567891011121314151617181920212223242526272829//使用new和Map构造函数可以创建一个空映射const m = new Map();//与Set相似,可以插入一个可迭代对象,需要包含键值/对数组const m1 = new Map({ ["key1","val1"], ["key2","val2"], ["key3","val3"]}) //m1.size = 3//也可以使用迭代器初始化const m2 = new Map({ [Symbol.iterator] : function *() { yield ["key1","val1"], yield ["key2","val2 ...
JavaScript之深入Set
Created2022-03-01|web前端|JavaScript
1. Set是什么?Set是ES6新增的一种新集合类型,非常像是加强的Map,因为大多数API和行为是共有的。 2. Set的基本API123456789101112131415///创建一个空集合const m = new Set();///初始化Set需要传入一个可迭代对象const s1 = new Set([1,2,3]); //s1.size = 3///使用自定义迭代器初始化集合const s2 = new Set({ [Symbol.iterator]: function*(){ yield 1; yield 2; yield 3; }}) //s2.size = 3 初始化完Set后1.使用add()增加值 //add函数返回集合的实例2.使用has()查询3.通过size获得元素数量4.使用delete()和clear()删除元素 //delete返回一个布尔值,表示是否存在要删除的值3. Set的基本特性与map类似,Set可以包含任何JS数据 ...
JavaScript之深入闭包
Created2022-02-18|web前端|JavaScript
1. 什么是闭包闭包指那些能够访问自由变量的函数。自由变量:指在函数中使用的,但既不是函数参数也不是函数的局部变量的变量。 2. 分析闭包在闭包中,函数上下文维护了一个作用域链: 123funcContext = { Scope:[AO,checkscopeContext.AO,globalContext.VO]} 闭包通过这个维护的作用域链可以访问到维护变量的活动对象中的值。 3. 闭包题目常见闭包题目:循环打印
JavaScript之深入执行上下文
Created2022-02-18|web前端|JavaScript
123456789var scope = "global scope";function checkscope(){ var scope = "local scope"; function f(){ return scope; } return f();}checkscope(); 执行过程如下: 执行全局代码,创建全局执行上下文,全局上下文被压入执行上下文栈 全局上下文初始化,初始化的同时,checkscope函数被创建,保存作用域链到函数的内部属性[[scope]] 执行checkscope函数,创建checkscope函数执行上下文,checkscope函数执行上下文被压入执行上下文栈 checkscope函数执行上下文初始化: 复制函数[[scope]]属性创建作用域链 用arguments创建活动对象 初始化活动对象,加入形参、函数声明、变量声明 将活动对象压入checkscope作用域链顶端 执行f函数,创建f函数执行上下文,f函数执行上下文被压入 ...
JavaScript之深入this
Created2022-02-18|web前端|JavaScript
1. ReferenceReference是一个特殊类型,只存于规范里的抽象类型。它们是为了更好地描述语言的底层行为逻辑才存在的,但并不存在于实际的js代码中。Reference有三个属性: base name strict 有一个从Reference类型获取对应值的方法:GetValue。 123456789var foo = 1;var fooReference = { base: EnvironmentRecord, name: 'foo', strict: false};GetValue(fooReference) // 1; 2. 如何确定this的值如果表达式返回的不是Reference类型,this值为undefined,非严格模式下为window(全局对象)。如果表达式返回的是Reference类型,那么this值为表达式所代表的作用域。
JavaScript之深入作用域链
Created2022-02-18|web前端|JavaScript
1. 作用域链在查找变量时,会先从当前上下文的变量对象中查找,如果没有找到,就会从父级(词法层面上的父级)执行上下文的变量对象中查找,一直找到全局上下文的变量对象,也就是全局对象。这样由多个执行上下文的变量对象构成的链表就叫做作用域链。 2. 函数创建函数有一个内部属性[[scope]],当函数创建时,会保存所有父变量对象到其中,你可以理解[[scope]]就是所有父变量对象的层级链,但它并不代表完整的作用域链! 1234567891011121314function foo() { function bar() { ... }}foo.[[scope]] = [ globalContext.VO //foo函数父层为window变量对象];bar.[[scope]] = [ fooContext.AO, globalContext.VO // bar函数父层为foo函数上下文活动对象]; 3. 函数激活当函数激活时,进入函数上下文,创建VO/AO后,就会将活动对象添加到作用域链的前端。这时候执 ...
JavaScript之深入变量对象
Created2022-02-18|web前端|JavaScript
1. 什么是变量对象每个执行上下文都有三个重要属性: 变量对象(Variable object,VO) 作用域链(Scope chain) this 变量对象是与执行上下文相关的数据作用域,存储了在上下文中定义的变量和函数声明。不同执行上下文的变量对象稍有不同。 首先:全局上下文中的变量对象就是全局对象。 2. 函数上下文在函数上下文中,用活动对象(activation object,AO)表示变量对象。活动对象和变量对象其实是一个东西,只不过进入一个执行上下文中,需要激活他的变量对象,才能被访问,而被激活的变量对象就是活动对象。 3. 函数执行过程执行上下文的代码会分成两个阶段处理: 进入执行上下文 代码执行 3.1 进入执行上下文进入执行上下文时,代码还未执行,变量对象会包括: 函数的所有形参(如果是函数上下文) 由名称和对应值组成的一个变量对象的属性被创建 没有实参,属性值设为undefined 函数声明 由名称和对应值(函数对象function-object)组成一个变量对象的属性被创建 如果变量对象已经存在相同名称的属性,则完全替换这个属性 变量声明 ...
JavaScript之执行上下文栈
Created2022-02-18|web前端|JavaScript
1. JavaScript可执行代码JavaScript可执行代码有三种: 全局代码 函数代码 eval代码 2. 执行上下文栈在js执行到一个函数的时候,就会进行执行上下文(execution context)的准备。执行上下文栈(Execution context stack,ECS)用于管理执行上下文。 1234567891011121314151617181920212223242526272829303132333435363738ECStack = [globalContext] // 执行上下文栈的底部永远有个globalContextfunction fun3() { console.log('fun3')}function fun2() { fun3();}function fun1() { fun2();}fun1();↓// fun1()ECStack.push(<fun1> functionContext);// fun1中调用了fun2,还要创建f ...
JavaScript之深入词法作用域
Created2022-02-18|web前端|JavaScript
1. 什么是词法作用域?JavaScript采用的是词法作用域(静态作用域),函数的作用域在函数定义的时候就决定了。 123456789101112var value = 1;function foo() { console.log(value);}function bar() { var value = 2; foo(); //调用该函数时,会根据书写的位置,查找上一层的代码(window)}bar(); // print 1 以上就是词法作用域(静态作用域)。 2. 静态作用域例子1234567891011121314151617181920var scope = "global scope";function checkscope(){ var scope = "local scope"; function f(){ return scope; } return f();}checkscope(); // ...
1234…11
avatar
DarylWxc
Articles
109
Tags
44
Categories
27
Follow Me
Announcement
My favorite music type is melodic progressive house
Recent Post
Symbols-in-English2024-11-03
Database-Notes2024-11-03
react-porject-build2024-10-24
Node-Learning2024-10-03
CLass-Note2024-09-03
Categories
  • Back-End1
  • Class2
  • DOM1
  • English1
  • Entertainment1
  • Personality14
  • UI设计开发5
  • Web前端32
Tags
字体 设计模式 diary Typescript ES6 工程化 Vue HEXO 正则表达式 前端学习 Database Studying 测试 Drama 网络安全 front-end development record 开发者工具 语法知识 图片编辑 移动端开发 函数 Music notes 代码管理 JavaScript Mpvue 前端 Axure 学习需求 learning webpack CSS 前端框架 工作职责 伸缩布局 原型设计 响应式布局 前端开发 Web性能
Archives
  • November 20242
  • October 20242
  • September 20241
  • January 20241
  • November 20233
  • October 20233
  • September 20231
  • August 20231
Info
Article :
109
UV :
PV :
Last Push :
©2019 - 2025 By DarylWxc

Static Badge Static Badge Static Badge