前端全栈开发
以基础+实战,按照前端开发全栈的技术路线进行编写的教程,掌握前端基础,实力,打造完整的前端全栈开发思路,工作流程,学会html css js原生,vue react 等框架,小程序开发,node,mongoDB,等等陆续更新
ordinary90
这个作者很懒,什么都没留下…
展开
-
ECMAScript 6 新特性下篇
/调用父类的构造函数bark() {');原创 2024-07-07 14:47:55 · 155 阅读 · 0 评论 -
ECMAScript 6 新特性上篇
, 1000);// 输出:undefined在这个例子中,传统函数中的 this 是在调用时确定的,所以 this.name 输出的是 undefined,因为在 setTimeout 的回调函数中,this 指向的是全局对象。原创 2024-07-07 14:26:22 · 278 阅读 · 0 评论 -
正则表达式
预定义类是一组常用的字符类的缩写。例如,\d表示匹配一个数字字符,\s表示匹配一个空白字符。原创 2024-07-04 11:45:10 · 936 阅读 · 0 评论 -
JavaScript函数闭包解析
一、什么是闭包一、什么是闭包JavaScript中的函数闭包是指函数可以访问其父级作用域中的变量,即使函数在父级作用域外被调用。闭包可以获取和修改其父级作用域中的变量,即使父级作用域已经被销毁。在JavaScript中,当一个函数被定义时,它会创建一个闭包。闭包包含函数中使用的任何变量,并允许函数在父级作用域中访问这些变量。闭包的一个常见用例是创建私有变量。通过使用闭包,在函数内部定义的变量可以在函数外部是不可访问的,从而实现了封装和信息隐藏。在上面的例子中,函数返回了一个内部函数。原创 2024-07-04 11:32:54 · 439 阅读 · 0 评论 -
js函数闭包解析
总结: 闭包是JavaScript中非常有用的概念,它可以让我们实现一些高级的功能,比如数据的封装和隐藏,变量的保护和延长变量的生命周期等。在使用闭包时,要注意变量的作用域和生命周期,以避免出现意想不到的问题。闭包是JavaScript中非常重要的概念,理解闭包对于编写高质量的代码是至关重要的。闭包是指在一个函数内部定义的函数,该函数可以访问包含它的父函数的变量。换句话说,闭包是一个函数和该函数所在的环境的组合体。来存储不同的内部函数,它们分别属于不同的作用域,因此它们对应的。函数返回的是一个内部函数。原创 2024-06-28 09:02:56 · 577 阅读 · 0 评论 -
js高阶函数解析
JavaScript中的高阶函数是指可以接受其他函数作为参数或返回函数的函数。这一特性使得函数可以被视为一种数据类型,可以像其他数据类型一样被传递和操作。这些高阶函数的使用可以简化代码,提高代码的可读性和可维护性。通过接受其他函数作为参数,可以实现函数的复用和组合。原创 2024-06-28 09:01:54 · 333 阅读 · 0 评论 -
JavaScript关于bind解析
我们使用 bind() 方法将该函数的第一个参数绑定为 2,并将绑定后的函数赋值给 multiplyByTwo 变量。部分应用是指固定一个函数的一些参数,并返回一个新的函数,该新函数接受剩余的参数。在 JavaScript 中,bind() 方法用于创建一个新的函数,该函数的 this 值被绑定到调用 bind() 方法的对象。bind() 方法可以接受一个或多个参数,第一个参数是要绑定的 this 值,后续的参数是要传递给绑定函数的参数。bind() 方法返回一个新的函数,不会立即执行。原创 2024-06-26 10:08:33 · 412 阅读 · 0 评论 -
JavaScript 关于apply()解析
总结: apply() 方法是 JavaScript 中 Function 对象的一个方法,它允许你在指定的作用域中调用一个函数,并将一个数组作为参数传递给该函数。它的用途包括调用函数并传递参数数组,将一个对象的方法应用到另一个对象上,以及改变函数的作用域。apply() 是 JavaScript 中 Function 对象的一个方法,它允许你在指定的作用域中调用一个函数,并将一个数组(或类数组对象)作为参数传递给该函数。// 输出 "Hello, Alice" greet.apply(person2);原创 2024-06-26 10:07:36 · 351 阅读 · 0 评论 -
JavaScript call()详细解析
方法,我们可以在JavaScript中灵活地改变函数内部的this指向,并实现各种各样的功能。方法,可以改变函数运行时的上下文,即改变函数内部的this指向。方法是用于调用函数并指定函数中的this值的方法。JavaScript中的。原创 2024-06-26 10:06:28 · 443 阅读 · 0 评论 -
js函数内 this 指向的不同场景
的指向可以通过函数的调用方式来确定,在全局作用域中是全局对象,在方法中是调用方法的对象,在构造函数中是新创建的实例,在显式绑定中是指定的对象,在箭头函数中是定义时的父作用域的。可以指向不同的对象,因此在不同的场景中它会有不同的含义。下面是一些常见的场景以及。关键字是一个特殊的对象,它的值取决于函数被调用的方式。的指向是动态的,而不是在函数定义时确定的。在 JavaScript 中,函数内部的。的值取决于函数被调用的方式和上下文。需要注意的是,当函数被调用时,原创 2024-06-23 14:04:41 · 321 阅读 · 0 评论 -
js函数声明与函数表达式的区别
函数表达式还可以进一步分为命名函数表达式和匿名函数表达式。命名函数表达式是指给函数表达式赋予一个函数名,匿名函数表达式则没有函数名。命名函数表达式在内部递归和调试中比较有用。两者之间的主要区别在于函数声明会被提升(hoisting),意味着无论函数声明在代码中的哪个位置,都可以在整个作用域内使用。而函数表达式不会被提升,必须在定义之后才能使用。在JavaScript中,函数可以通过函数声明和函数表达式两种方式进行定义。另外,函数声明在语法上要求有函数名,而函数表达式可以是匿名的(没有函数名)。原创 2024-06-23 14:03:41 · 191 阅读 · 0 评论 -
js函数定义方式
箭头函数是ES6引入的一种简化的函数定义方式。它使用箭头(=>)来表示函数,并且没有自己的this、arguments、super或new.target。它由关键字function、可选的函数名、参数列表和函数体组成。函数表达式可以是匿名的,也可以是具名的。构造函数是用来创建对象的函数,它由关键字function、函数名、参数列表和函数体组成。这些是JavaScript中常见的函数定义方式的详细解析和示例代码。根据具体的需求和场景,选择合适的函数定义方式可以使代码更加清晰和可维护。原创 2024-06-22 15:24:53 · 481 阅读 · 0 评论 -
js组合继承
需要注意的是,组合继承的缺点是在创建子类实例时调用了两次父类构造函数,一次是在Child.prototype = new Parent()这一步中,另一次是在Child.call(this, name)中。构造函数的继承通过在子类的构造函数中调用父类的构造函数来实现,这样就可以在子类的实例中拥有父类的属性。原型链的继承通过将子类的原型对象设置为父类的一个实例,这样就可以在子类的原型链上访问父类的方法。虽然有一些缺点,但是它兼顾了构造函数继承和原型链继承的优点,可以有效地实现继承和方法的重用。原创 2024-06-22 15:24:07 · 329 阅读 · 0 评论 -
js对象之间的继承
在JavaScript中,对象之间的继承是通过原型链来实现的。每个对象都有一个原型(prototype),原型又是一个对象,它包含了该对象共享的属性和方法。当访问一个属性时,JavaScript引擎首先在对象本身上查找,如果找不到,则去原型对象上查找,依此类推,直到找到该属性或者到达原型链的顶端。在JavaScript中,每个对象都有一个原型对象,通过原型链,一个对象可以继承其原型对象的属性和方法。继承的方法可以在子类中进行重写,子类的方法会覆盖原型对象中的方法。方法是继承自原型对象的属性。原创 2024-06-19 09:45:16 · 411 阅读 · 0 评论 -
JS 原生构造函数的原型对象
在上面的例子中,我们在上定义了一个名为myMethod的方法,然后我们通过实例对象obj调用该方法。由于obj的原型链上存在,所以obj也可以访问到myMethod方法。通过原生构造函数的原型对象,我们可以在构造函数的实例对象之间共享属性和方法。这样可以节省内存空间,并且使代码更加简洁和可维护。同时,原生构造函数的原型对象也是JavaScript继承的基础。原创 2024-06-19 09:43:05 · 293 阅读 · 0 评论 -
js实例对象读写原型对象成员
在 JavaScript 中,实例对象可以读写原型对象的成员。原型对象是一个对象,用于存储共享的属性和方法,它是通过构造函数创建的实例对象的共享属性和方法的来源。对于写入原型对象的成员,如果实例对象中已经存在同名的属性,则会覆盖原型对象中的成员。如果实例对象中不存在同名的属性,则会在实例对象中创建一个新的属性。直接通过实例对象来访问原型对象的成员。实例对象会首先在自身的属性中查找,如果找不到,就会继续在原型对象中查找。方法来获取实例对象的原型对象,并读取原型对象的成员。属性指向实例对象的原型对象。原创 2024-06-18 09:27:22 · 349 阅读 · 0 评论 -
js原型链原理与查找机制
通过以上的示例和解析,可以看出 JavaScript 的原型链是一种非常灵活和强大的继承机制,它使得我们可以在对象之间共享属性和方法,并且可以简化代码的编写。原型链的作用是在查找对象属性时,先从对象本身查找,如果找不到,则沿着原型链向上查找,直到找到该属性或者原型链的顶端(Object.prototype)为止。原型链的查找机制是从下往上查找,即先从对象本身查找属性,如果找不到,则沿着原型链向上查找。原型对象也是一个对象,同样具有自己的原型对象,形成一个链式结构,称为原型链。中找到了,所以直接输出了结果。原创 2024-06-18 09:26:20 · 395 阅读 · 0 评论 -
构造函数、实例、原型对象三者之间的关系
总结:构造函数用于创建实例,每个实例都有自己的属性和方法。构造函数还有一个与之关联的原型对象,原型对象中定义的属性和方法可以被所有实例共享。通过原型链,实例可以访问原型对象中定义的属性和方法。在 JavaScript 中,构造函数、实例和原型对象之间有着密切的关系。构造函数的原型对象,我们可以在原型对象中定义方法,然后通过实例访问这些方法。在上面的代码示例中,原创 2024-06-17 11:50:31 · 476 阅读 · 0 评论 -
prototype 原型对象
当我们试图访问一个对象的属性或方法时,JavaScript引擎会先查找该对象自身是否具有该属性或方法,如果没有,则会通过原型链去查找原型对象中是否有该属性或方法。原型链是一个对象到其原型对象,再到其原型对象的原型对象,依次往上查找的链条。当我们试图访问一个对象的属性或方法时,JavaScript引擎会先查找该对象自身是否具有该属性或方法,如果没有,则会通过原型链去查找原型对象中是否有该属性或方法。注意:修改或添加原型对象的属性和方法会影响到所有使用该原型对象作为原型的对象。原创 2024-06-17 11:49:39 · 548 阅读 · 0 评论 -
js中构造函数和实例对象的关系详解
关键字和构造函数创建的对象。实例对象继承了构造函数中定义的属性和方法,并可以通过点符号访问它们。在JavaScript中,构造函数用于创建和初始化对象的模板。总结:构造函数用于创建和初始化对象的模板,而实例对象是通过使用。关键字后跟构造函数的名称,并传入适当的参数(如果有的话)。来定义对象的属性和方法。要创建一个实例对象,只需使用。关键字引用新创建的对象,并通过将属性和方法赋值给。关键字和构造函数创建了两个实例对象。)可以访问实例对象的属性和方法。两个参数,并为实例对象定义了。,并传递了适当的参数。原创 2024-06-14 18:48:45 · 652 阅读 · 0 评论 -
js 创建对象的几种方式
在 JavaScript 中,有多种方式可以创建对象,以下是常用的几种方式和对应的代码示例。以上是几种常用的创建对象的方式,每种方式都有自己的特点和适用场景,可以根据实际需求选择使用。原创 2024-06-14 18:47:36 · 503 阅读 · 0 评论 -
什么是面向对象编程
面向对象编程(Object-oriented programming,简称OOP)是一种编程范式,通过将数据和操作数据的方法组合成一个对象来描述和解决问题。在面向对象编程中,程序的主要构建模块是对象,而不是函数或过程。面向对象编程的核心思想是将现实世界的事物抽象为对象,并通过对象之间的交互来完成任务。每个对象都有自己的状态(属性)和行为(方法)。对象之间可以通过信息传递进行通信。面向对象编程的三个主要特征是封装、继承和多态。封装是将数据和操作组合在一起,对外部隐藏内部细节;原创 2024-06-13 13:52:49 · 520 阅读 · 0 评论 -
history 对象解析
对象用于在浏览器的历史记录中进行导航。它提供了一些方法和属性,可以让开发者在浏览器历史记录中向前或向后导航,以及在当前页面中获取浏览器历史记录的相关信息。对象的使用可能会受到一些浏览器的限制和安全性策略的影响。JavaScript 的。原创 2024-06-13 13:49:24 · 283 阅读 · 0 评论 -
js location 对象
对象的一些常用属性和方法。通过使用它们,您可以获取和操作浏览器的URL信息,从而实现一些有趣的功能,比如页面重定向、加载新页面等。对象用于获取和操作浏览器的URL信息。它包含了当前页面的URL、域名、协议等相关信息。对象的详细解析和代码示例。JavaScript中的。原创 2024-06-12 16:48:39 · 289 阅读 · 0 评论 -
js点击切换的轮播图
通过上述代码,我们实现了一个简单的点击切换的轮播图。其中,点击上一张按钮会切换到前一张图片,点击下一张按钮会切换到下一张图片。当切换到第一张图片时,再点击上一张按钮会切换到最后一张图片;当切换到最后一张图片时,再点击下一张按钮会切换到第一张图片。原创 2024-06-12 16:47:41 · 810 阅读 · 0 评论 -
高级无缝滚动 js案例
事件,当鼠标进入容器时暂停动画,鼠标离开时恢复动画。属性用来实现平移动画。JavaScript代码监听。元素是一个带有固定宽度和高度的容器,用来包裹。以上代码实现了一个水平滚动的效果。元素是一个带有无序列表的容器,关键帧来实现滚动效果,原创 2024-06-11 09:03:53 · 562 阅读 · 0 评论 -
简单无缝滚动 js案例
函数来实现水平滚动的效果。在关键帧动画中,我们定义了从0%到100%的滚动效果,并配合。你可以将这段代码复制到一个HTML文件中,然后在浏览器中打开,就能看到无缝滚动的效果。元素,它的宽度是400px,比外部容器的宽度200px要大。,我们隐藏了内容超出容器的部分,实现了无缝滚动的效果。,当鼠标悬停在滚动内容上时,动画会暂停。在这个案例中,我们使用了CSS的。参数来实现无限循环滚动。这个案例中的滚动内容是一个。属性来实现滚动效果。原创 2024-06-11 09:03:13 · 321 阅读 · 0 评论 -
window.clearInterval(timer) 清除定时器
是用来清除定时器的方法。在JavaScript中,使用定时器可以在指定的时间间隔执行一段代码。方法会返回一个唯一的标识符,称为定时器ID。这个ID可以用来在需要的时候清除定时器。方法并传入定时器ID,即可在5秒后清除定时器。在定时器被清除后,将会输出"定时器已清除"。方法并传入定时器ID作为参数,即可清除指定的定时器。在上述代码中,我们创建了一个定时器,每隔1秒执行一次。方法可以在一定时间后执行一次代码,而使用。方法可以在每个时间间隔执行一次代码。原创 2024-06-08 09:05:07 · 490 阅读 · 1 评论 -
window.setInterval(func,interval)定时器
window.setInterval()是JavaScript中的方法,用于在指定的时间间隔重复执行某个函数或代码块。它接受两个参数,第一个参数是要执行的函数或代码块,第二个参数是时间间隔(以毫秒为单位)。另外,可以使用匿名函数作为第一个参数来实现更复杂的功能。上述代码中,匿名函数内部获取当前时间并更新页面上id为"time"的元素的内容。上述代码将会在页面加载后每隔1秒打印一次"Hello, world!原创 2024-06-08 09:03:50 · 487 阅读 · 0 评论 -
window.clearTimeout(timeout)清除延时器
方法,我们可以在需要的时候取消延时执行,从而避免不必要的函数调用。时,会返回一个唯一标识该延时的数值,可以通过这个标识来取消执行。的函数,该函数用于在控制台输出"Hello!方法创建了一个延时执行,该延时执行会在2秒后调用。延时器是一种在一定时间后执行的函数。在上面的代码示例中,首先定义了一个名为。方法取消了先前创建的延时执行。方法返回一个标识符,我们将其存储在。方法用于取消一个先前通过。原创 2024-06-07 09:39:00 · 400 阅读 · 0 评论 -
window.setTimeout 简述与代码示例
在上面的示例中,第一个参数是要执行的函数,第二个参数是延迟的时间,以毫秒为单位。如果有其他参数需要传递给函数,则可以在延迟时间之后的参数中指定。window.setTimeout()是JavaScript中的一个函数,它用于在一定的时间延迟之后执行一段代码。需要注意的是,setTimeout()函数只执行一次。如果我们想要重复执行一段代码,可以使用setInterval()函数。示例代码1:使用函数引用。示例代码2:使用匿名函数。原创 2024-06-07 09:37:26 · 471 阅读 · 0 评论 -
js onload 事件
事件是当页面或者页面中的某个元素完全加载完成时触发的事件。常见的使用场景包括在页面加载完成后执行一些初始化操作,或者在图片加载完成后执行某些操作。当图片加载完成后,这个事件处理函数会被调用。事件是在页面或元素加载完成后触发的事件,在JavaScript中可以使用。每当一个元素加载完成后,对应的事件处理函数会被调用。在这个例子中,匿名函数会在页面加载完成后被调用。属性,可以指定页面加载完成后需要执行的函数。需要注意的是,如果图片已经在缓存中存在,那么。函数会在页面加载完成后被调用。在这个例子中,我们使用。原创 2024-06-06 10:50:01 · 1158 阅读 · 0 评论 -
BOM 常见对话框用法
而对于 prompt() 对话框,如果用户输入了内容并点击确认按钮,则会显示一个带有 "Hello, [输入的名字]!confirm() 对话框: 这个对话框用于向用户显示一个带有确定和取消按钮的对话框,并等待用户点击其中一个按钮来确定或取消操作。prompt() 对话框: 这个对话框用于向用户显示一个带有输入框的对话框,用户可以在输入框中输入文本,并等待用户点击确定或取消按钮。alert() 对话框: 这个对话框用于向用户显示一个简单的提示信息,并等待用户点击确定按钮后关闭对话框。原创 2024-06-06 10:48:50 · 746 阅读 · 0 评论 -
JavaScript 浏览器对象模型BOM 概念
通过window对象可以访问和操作浏览器的其他对象,比如document对象(表示当前窗口的文档)和history对象(表示浏览器的历史记录)。BOM的功能可以通过JavaScript代码来实现,比如使用location对象来获取当前页面的URL,使用history对象来控制浏览器的后退和前进操作,使用window对象来弹出对话框等。总之,BOM提供了一组用于操作浏览器窗口和交互的对象和方法,使得JavaScript能够与浏览器进行交互并实现丰富的功能。操作浏览器的历史记录,比如history对象。原创 2024-06-05 09:31:29 · 462 阅读 · 0 评论 -
前端js 元素拖拽案例
在上面的代码中,我们定义了一个可拖拽的红色方块元素,并给它添加了一个类名.draggable。通过方法获取到该元素,并添加了mousedownmousemove和mouseup事件监听器。当用户按下鼠标按钮时,会触发mousedown事件,在该事件处理程序中,我们设置isDragging变量为true,并记录下鼠标与元素左上角的偏移值。当用户移动鼠标时,会触发mousemove事件,在该事件处理程序中,我们判断如果isDragging为true,则根据鼠标移动的位置和偏移值来更新元素的left和top。原创 2024-06-05 09:27:58 · 986 阅读 · 0 评论 -
JavaScript滚动偏移属性
scrollLeft属性用于获取或设置元素在水平方向上的滚动偏移量。如果元素有水平滚动条,则scrollLeft的值表示元素左侧被隐藏在滚动容器中的像素数。scrollTop属性用于获取或设置元素在垂直方向上的滚动偏移量。如果元素有垂直滚动条,则scrollTop的值表示元素顶部被隐藏在滚动容器中的像素数。注意:滚动偏移属性仅适用于具有滚动条的滚动容器。如果元素没有滚动条,或者滚动容器已经滚动到了边界,滚动偏移属性将返回0。JavaScript中的滚动偏移属性可用于获取或设置元素在滚动容器中的偏移量。原创 2024-06-04 09:47:58 · 486 阅读 · 0 评论 -
JavaScript偏移量属性
JavaScript中的偏移量属性(offset properties)是用于获取元素的偏移量(offset)的属性。元素的偏移量是指元素相对于其父元素的左上角的位置。偏移量属性在许多场景中都非常有用,比如获取元素在文档中的位置、计算元素之间的相对位置等。只要记住使用偏移量属性前,确保元素已经被渲染到文档中,否则获取的值可能不准确。需要注意的是,偏移量属性是只读属性,无法直接设置元素的偏移量。如果需要设置元素的偏移量,可以使用CSS的定位属性(如position、left、top等)来实现。原创 2024-06-04 09:46:49 · 459 阅读 · 0 评论 -
js取消默认行为和阻止事件传播的方式
当一个元素上触发某个事件时,事件会从该元素开始沿着 DOM 树向上传播,直到到达根元素。通过阻止事件传播,可以阻止事件继续向上传播,即停止事件冒泡。默认情况下,当用户触发某些事件时(如点击链接、提交表单等),浏览器会执行默认的操作。通过取消默认行为,可以阻止浏览器执行这些默认操作。需要注意的是,还有一种方法可以同时取消默认行为和阻止事件传播,即调用。在上述示例中,当点击链接时,既取消了默认行为,也阻止了事件传播。在上述示例中,当点击内部元素时,事件处理函数会调用。在上述示例中,我们通过调用。原创 2024-06-03 13:47:48 · 672 阅读 · 0 评论 -
js图片跟随鼠标移动效果
要实现图片跟随鼠标移动的效果,可以使用JavaScript原生的mousemove事件以及CSS的transform属性。在以上代码中,我们监听container元素的mousemove事件。当鼠标在container内移动时,获取鼠标相对container的坐标(mouseX和mouseY)。然后,根据container的宽度和高度计算出图片应该移动的距离(imageX和imageY)。最后,使用CSS的transform属性将图片移动到对应的位置上。原创 2024-06-03 13:46:57 · 1063 阅读 · 1 评论 -
js事件对象
在JavaScript中,事件对象是在事件触发时由浏览器自动创建的一个对象。它包含了与事件相关的信息,例如触发事件的元素、事件类型、鼠标的坐标等。可以通过事件处理函数的第一个参数来访问事件对象。event.type。原创 2024-06-02 07:25:57 · 430 阅读 · 0 评论