JavaScript
文章平均质量分 63
学习笔记
玳宸
这个作者很懒,什么都没留下…
展开
-
Promise 规范与应用
术语promise 是一个有 then 方法的对象或者是函数,行为遵循本规范thenable 是一个有 then 方法的对象或者是函数value 是 promise 状态成功时的值,也就是 resolve 的参数, 包括各种数据类型, 也包括 undefined / thenable 或者是 promisereason 是 promise 状态失败时的值, 也就是 reject 的参数, 表示拒绝的原因exception 是⼀个使⽤ throw 抛出的异常值规范Promise States原创 2021-08-18 22:11:30 · 175 阅读 · 0 评论 -
使用原生 js 给连续多个 li 绑定点击事件,输出每条 li 的下标(索引)的几种方式
html: <ul> <li>aaa</li> <li>bbb</li> <li>ccc</li> <li>ddd</li> <li>eee</li> </ul>方法一:通过设置属性方式给每一条 li 设置属性原创 2021-08-25 10:39:08 · 2978 阅读 · 0 评论 -
this 的五种场景
文章目录场景1: 函数直接调用时场景2: 函数被别人调用时场景3: new⼀个实例时场景4: apply、call、bind时场景5: 箭头函数时场景1: 函数直接调用时function myfunc() { console.log(this) // this是widow } var a = 1; myfunc();场景2: 函数被别人调用时function myfunc() { console.log(this) // this是对象a } var a = {原创 2021-08-23 00:33:59 · 154 阅读 · 0 评论 -
作用域、作用域链与闭包
文章目录作用域作用域链闭包作用域js中有全局作⽤域、函数作⽤域,es6中⼜增加了块级作⽤域。作⽤域的最⼤⽤途就是隔离变量或函数,并控制他们的⽣命周期。作用域是在函数执行上下文创建时定义好的,不是函数执行时定义的。举个栗⼦function a () { return function b() { var myname = 'b'; console.log(myname); // b } } function c() { var myna原创 2021-08-23 00:24:43 · 182 阅读 · 0 评论 -
执行上下文
文章目录创建阶段代码执行阶段执行上下文栈当函数执⾏时,会创建⼀个称为执⾏上下⽂(execution contex)的环境,分为创建和执⾏2个阶段创建阶段创建阶段,指函数被调⽤但还未执⾏任何代码时,此时创建了⼀个拥有 3 个属性的对象:executionContext = { scopeChain: {}, // 创建作⽤域链(scope chain) variableObject: {}, // 初始化变量、函数、形参 this: {} // 指定this }原创 2021-08-23 00:17:44 · 120 阅读 · 0 评论 -
实现继承的几种方法
文章目录1、原型链继承实现隐含的问题2、构造函数继承实现隐含的问题3、组合继承实现隐含的问题4、寄生组合式继承实现5、class 的 extends1、原型链继承实现function Parent() { this.name = "parentName";}Parent.prototype.getName = function () { console.log(this.name);};function Child() {}// Parent的实例同时包含实例属性方法和原型属性原创 2021-08-22 00:47:50 · 1484 阅读 · 0 评论 -
原型及原型链
文章目录一、在原型上添加属性或者方法有什么好处?二、怎么找到 Player 的原型对象?三、 new 关键字做了什么四、原型链又是什么呢?例子接上篇博客:https://blog.csdn.net/zeroheitao/article/details/119847400一、在原型上添加属性或者方法有什么好处?如果不通过原型的方式,每生成一个新对象,都会在内存中新开辟一块存储空间,当对象变多之后,性能会变得很差。但是通过Player.prototype.xx = function () {};原创 2021-08-22 00:41:35 · 97 阅读 · 0 评论 -
面向对象编程与面向过程编程
文章目录一、什么是面向对象编程?二、面向对象的特点是什么?1、在上面的例子中,面向对象的特性是怎么表现出来的呢?2、什么时候适合使用面向对象三、Js 中的面向对象1、对象包含什么2、一些内置对象3、创建对象一、什么是面向对象编程?面向对象是一种编程思想,经常被拿来和面向过程比较。说的简单点面向过程关注的重点是动词,是分析出解决问题需要的步骤,然后编写函数实现每个步骤,最后依次调用函数。而面向对象关注的重点是主谓,是把构成问题的事物拆解为各个对象,而拆解出对象的目的也不是为了实现某个步骤,而是为了描原创 2021-08-22 00:34:22 · 2013 阅读 · 0 评论 -
彻底弄懂 JavaScript 执行机制(同步、异步、宏任务、微任务......)
这篇文章真的是宝藏,如果读完还不懂,那再看一遍!!https://juejin.cn/post/6844903512845860872原创 2021-08-18 16:30:34 · 89 阅读 · 0 评论 -
JavaScript 继承模式
文章目录1、原型链继承2、借用构造函数继承3、组合继承1、原型链继承套路:定义父类型构造函数给父类型的原型添加方法定义子类型的构造函数创建父类型的对象赋值给子类型的原型将子类型原型的构造属性设置为子类型给子类型原型添加方法创建子类型的对象:可以调用父类型的方法关键:子类型的原型为父类型的一个实例对象<script type="text/javascript"> //父类型 function Supper() { this.supProp = 'Suppe原创 2021-04-24 18:41:26 · 85 阅读 · 2 评论 -
JavaScript 对象创建模式
文章目录1、Object 构造函数模式2、对象字面量3、工厂模式4、自定义构造函数模式5、构造函数+原型的组合模式1、Object 构造函数模式套路:先创建空Object对象,再动态添加属性/方法适用场景:起始时不确定对象内部数据问题:语句太多<script type="text/javascript"> /* 一个人: name:"Tom", age: 12 */ // 先创建空Object对象 var p = new Object() p = {} /原创 2021-04-24 18:01:00 · 57 阅读 · 0 评论 -
JavaScript 闭包
文章目录1、理解闭包2、常见的闭包3、闭包的作用4、闭包的生命周期5、闭包的应用 : 定义JS模块6、闭包的缺点及解决7、面试题1、理解闭包如何产生闭包?当一个嵌套的内部(子)函数引用了嵌套的外部(父)函数的变量(函数)时,就产生了闭包闭包到底是什么?使用chrome调试查看理解一:闭包是嵌套的内部函数(绝大部分人)理解二:包含被引用变量(函数)的对象(极少数人)注意:闭包存在于嵌套的内部函数中产生闭包的条件?函数嵌套内部函数引用了外部函数的数据(变量/函数)外原创 2021-04-24 17:18:18 · 100 阅读 · 0 评论 -
JavaScript 作用域与作用域链
文章目录1、作用域2、作用域与执行上下文3、作用域链4、面试题1、作用域理解就是一块"地盘",一个代码段所在的区域它是静态的(相对于上下文对象),在编写代码时就确定了分类全局作用域函数作用域没有块作用域(ES6有了)作用隔离变量,不同作用域下同名变量不会有冲突2、作用域与执行上下文区别1全局作用域之外,每个函数都会创建自己的作用域,作用域在函数定义时就已经确定了。而不是在函数调用时全局执行上下文环境是在全局作用域确定之后,js代码马上执行之前创建原创 2021-04-23 21:22:03 · 297 阅读 · 2 评论 -
JavaScript 执行上下文与执行上下文栈
文章目录1、变量提升与函数提升2、执行上下文3、执行上下文栈4、面试题1、变量提升与函数提升变量声明提升通过 var 定义(声明)的变量,在定义语句之前就可以访问到值:undefinedvar a = 3function fn () { console.log(a) var a = 4}fn() //undefined函数声明提升通过 function 声明的函数,在之前就可以直接调用值:函数定义(对象)fn2() //可调用 函数提升var b =原创 2021-04-23 20:15:56 · 87 阅读 · 1 评论 -
JavaScript 数据类型判断方法
1. JavaScript 数据类型分类基本(值)类型String: 任意字符串Number: 任意的数字boolean: true/falseundefined: undefinednull: null对象(引用)类型Object: 任意对象Function: 一种特别的对象(可以执行)Array: 一种特别的对象(数值下标, 内部数据是有序的)2. 数据类型判断方法typeof:可以判断: undefined/ number / string / boole原创 2021-04-18 19:41:02 · 66 阅读 · 0 评论 -
网页版别踩白块(JavaScript)
文章目录实验原理:实验步骤:1、页面布局2、添加样式3、游戏初始化4、让黑块动起来5、点击黑块事件6、js完整代码别踩白块这个游戏相信很多人都在手机上玩过,今天来做一个网页版的,主要涉及通过 javascript 操作元素节点的增删以及属性节点(class)的操作。先上一张游戏效果图:实验原理:将每一个黑块和白块抽象成一个个的数据结构,黑块的消失和出现其实就是数据结构的创造和销毁。实验步骤:1、页面布局可以用 div+css 布局来实现别踩白块的静态效果展示,将主界面分解成一个 4x4 的大原创 2021-03-13 20:46:18 · 1758 阅读 · 0 评论 -
JavaScript 原型与原型链
创建一个函数以后,解析器都会默认在函数中添加一个数prototypeprototype属性指向的是一个对象,这个对象称为原型对象。当函数作为构造函数使用,它所创建的对象中都会有一个隐含的属性执行该原型对象。这个隐含的属性可以通过对象.__proto__来访问。原型对象就相当于一个公共的区域,凡是通过同一个构造函数创建的对象他们通常都可以访问到相同的原型对象。可以将对象中共有的属性和方法统一添加到原型对象中,这样只需要添加一次,就可以使所有的对象都可以使用。当访问对象的一个属性或调用对象的一个.原创 2021-03-13 20:16:14 · 146 阅读 · 0 评论 -
JavaScript this(上下文对象)
每次调用函数时,解析器都会将一个上下文对象作为隐含的参数传递进函数。使用this来引用上下文对象,根据函数的调用形式不同,this的值也不同。this的不同的情况:以函数的形式调用时,this是window以方法的形式调用时,this就是调用方法的对象以构造函数的形式调用时,this就是新创建的对象...原创 2021-03-13 20:13:26 · 91 阅读 · 0 评论 -
JavaScript 作用域
作用域简单来说就是一个变量的作用范围。在JS中作用域分成两种:1、全局作用域直接在script标签中编写的代码都运行在全局作用域中。全局作用域在打开页面时创建,在页面关闭时销毁。全局作用域中有一个全局对象window,window对象由浏览器提供,可以在页面中直接使用,它代表的是整个的浏览器的窗口。在全局作用域中创建的变量都会作为window对象的属性保存在全局作用域中创建的函数都会作为window对象的方法保存。在全局作用域中创建的变量和函数可以在页面的任意位置访问。在函数作用域中.原创 2021-03-13 20:11:18 · 114 阅读 · 0 评论 -
JavaScript 数据类型及类型转换
目录一、JS中的六种数据类型二、基本数据类型1、String字符串2、Number 数值3、 Boolean 布尔值4、Null 空值5、Undefined 未定义三、引用数据类型1、 Object 对象四、类型转换1、转换为String2、转换为Number3、转换为布尔值一、JS中的六种数据类型String 字符串Number 数值Boolean 布尔值Null 空值Undefined 未定义Object 对象二、基本数据类型1、String字符串JS中的字符串需要使用引号引起原创 2021-03-13 20:02:38 · 270 阅读 · 0 评论 -
WebAPI编程(4)—— PC端网页特效
PC端网页特效1、元素偏移量offset系列1.1 offsett 概述使用offset系列相关属性可以动态的得到该元素的位置、大小等。element.offsetParent——返回作为该元素有定位的父级元素,否则返回bodyelement.offsetTop——返回元素相对带有定位父元素上方的偏移element.offsentLeft——返回元素相对带有定位父元素左边框的偏移element.offsetWidth——返回自身包括paddind、边框、内容区的宽度、返回数值不带单位ele原创 2020-10-05 14:26:02 · 194 阅读 · 0 评论 -
WebAPI编程(3)——BOM浏览器对象模型
BOM浏览器对象模型1、BOM概述BOM 即浏览器对象模型,它提供了独立于内容而与浏览器窗口进行交互的对象,其核心对象是 window。是一个全局对象。定义在全局作用域中的变量、函数都会变成window对象的属性和方法。2、window 对象的常见事件窗口加载事件window.onload = function() {};window.addEventListener(‘DOMContentLoaded’,function() {});window.onload 是窗口加载事件,当原创 2020-10-04 13:29:29 · 139 阅读 · 0 评论 -
WebAPI编程(2)——事件高级
事件高级1、注册事件1.传统注册方式利用on开头的事件onclick特点:注册事件的唯一性同一个元素同一个事件只能设置一个处理函数,最后注册的处理函数会覆盖前面注册的处理函数2.方法监听注册方式eventTarget.addEventListener( ‘type’,listener[,useCapture]):将指定的监听器注册到eventTarget(目标对象)上,当该对象触发指定的事件时,就会执行事件处理函数。– tyle:事件类型字符串,比如click、mouseover,不带原创 2020-10-04 13:27:07 · 89 阅读 · 0 评论 -
WebAPI编程(1)——DOM
DOM1、DOM简介DOM是一个处理可扩展标记语言的编程接口,通过DOM可以改变网页的内容、样式和结构。2、获取元素根据ID获取:document.getElementById();1.先有标签,后写script2.get 获得 element 元素 by 通过驼峰命名法3.参数id是大小写敏感的字符串4.返回的是一个元素对象根据标签名获取:document.getElementsByTagName(‘标签名’);1.返回带有指定标签名的对象的集合2.得到元素对象是动态的通过HTM原创 2020-10-04 13:23:26 · 123 阅读 · 0 评论 -
JavaScript 基础语法
1、输入输出语句alert(msg)——浏览器弹出警示框console.log(msg)——浏览器控制台打印输出信息,给程序员测试用的prompt(info)——浏览器弹出输入框,用户可以输入2、变量原创 2020-09-29 23:45:30 · 2504 阅读 · 0 评论