![](https://img-blog.csdnimg.cn/20190927151053287.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
javascript
文章平均质量分 68
javascript开发和学习文档
美兮,乐兮
生如夏花
展开
-
深入理解javascript原型和闭包(19)——补充:this
function Fn() { console.log('testThis')}Fn.printSelf = function(message) { console.log(this) console.log(message)}Fn.printSelf('happy new year')上例中调用Fn.printSelf函数时,this值是函数Fn实例运行结果:ƒ Fn() { console.log('testThis')}VUE框架的use函数就是上原创 2021-02-10 16:03:13 · 203 阅读 · 0 评论 -
复制文本到粘贴板的三种实现方法(chrome)
复制文本到粘贴板的三种实现方法(chrome)一.采用 textarea存放文本内容二.采用矩形框存放文本内容采用navigator.clipboard.writeText( )复制文本内容一.采用 textarea存放文本内容/ 将特定字符串拷贝到剪贴板export function copyToBoard (text) { try { const input = document.createElement('textarea') input.value =原创 2020-11-20 16:22:54 · 2919 阅读 · 0 评论 -
void 0 与 undefined的区别
void 0 与 undefined的区别1.undefined可以被重写2.为什么选择void 0 作为undefined的替代在看《你不知道的JavaScript》的时候,看到了这个么一段代码.function foo() { var a = arguments[0] !== (void 0 ) ? arguments[0] : 2; return a; }void 0 返回undefined,我们都知道的,但是为什么不直接 arguments[0] !== undefined?查找相关转载 2020-09-20 18:57:53 · 299 阅读 · 0 评论 -
理解requirejs源码 (二)
理解requirejs源码 (二)require执行的第一个函数执行函数后会创建一个默认的命名空间执行函数后会创建一个新的context对象require执行的第二个函数执行第二个函数后会生成一个异步的任务异步任务从任务队列中被取出下面内容根据理解requirejs源码 (一)里面的实例展开require执行的第一个函数//Create default context.req({});执行函数后会创建一个默认的命名空间req定义的代码如下req = requirejs = functio原创 2020-09-02 22:03:01 · 237 阅读 · 0 评论 -
理解requirejs源码 (一)
理解requirejs源码(一)实例文件结构实例运行结果实例文件结构1.index.html为入口html文件<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Require</titl原创 2020-09-01 23:08:17 · 256 阅读 · 0 评论 -
Array.prototype.splice.apply合并数组用法详解
Array.prototype.splice.apply合并数组用法详解数组对象的splice方法合并数组Array.prototype.splice.apply合并数组数组对象的splice方法合并数组var arr1 = ['a', 'b', 'c']; arr1.splice(2, 0, '1');arr1.splice(2, 0, '2')arr1.splice(2, 0, '3')console.log(arr1);运行结果:Array.prototype.splice.app原创 2020-08-21 17:00:02 · 2320 阅读 · 1 评论 -
深入理解Object.prototype.toString方法
深入理解Object.prototype.toString方法ECMAScript 3ECMAScript 5ECMAScript 6ECMAScript 7ECMAScript 3在toString方法被调用时,会执行下面的操作步骤:获取this对象的[[Class]]属性的值.(第一步)计算出三个字符串"[object ", 第一步的操作结果Result(1), 以及 "]"连接后的新字符串.(第二步)返回第二步的操作结果Result(2). (第三步)[[Class]]是一原创 2020-08-10 16:28:08 · 6845 阅读 · 3 评论 -
ES6学习第六篇--生成器(Generator)
ES6学习第五篇--生成器一级目录一级目录下一篇:ES6学习第五篇–迭代器(Iterator)原创 2020-08-11 17:50:31 · 185 阅读 · 0 评论 -
ES6学习第五篇--迭代器(Iterator)
ES6学习第五篇--迭代器迭代器的概念迭代器的原理迭代器的概念遍历器(Iterator)就是这样一种机制。它是一种接口,为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署 Iterator 接口,就可以完成遍历操作(即依次处理该数据结构的所有成员)。Iterator 的作用有三个:一是为各种数据结构,提供一个统一的、简便的访问接口;二是使得数据结构的成员能够按某种次序排列;三是 ES6 创造了一种新的遍历命令for…of循环,Iterator 接口主要供for…of消费。原生具备 I原创 2020-08-11 11:34:28 · 1213 阅读 · 0 评论 -
Array所有方法汇总
Array所有方法汇总Array函数及其属性、方法Array.prototype方法Array函数及其属性、方法具体内容链接:https://zhuanlan.zhihu.com/p/53041549Array.prototype方法原创 2020-08-10 17:28:41 · 288 阅读 · 0 评论 -
preventDefault、stopImmediatePropagation和stopPropagation三剑客区别
三剑客区别1. preventDefault()阻止默认的点击事件执行1. 阻止选中复选框2. 在编辑域中阻止按键2. stopImmediatePropagation阻止监听同一事件的其他事件监听器被调用3. stopPropagation()阻止当前事件捕获和冒泡1. preventDefault()阻止默认的点击事件执行1. 阻止选中复选框下面的例子中,点击复选框时,因为调用了preventDefault函数,阻止了默认事件(复选框的默认事件是选中复选框),所以复选框不会被选中。<!D原创 2020-07-29 10:54:37 · 1498 阅读 · 0 评论 -
window.performance(监控网页与程序性能)
window.performance(监控网页与程序性能)performance对象的完整结构1. performance的memory属性对象2. performance的navigation属性对象3. performance的timing 属性对象timing属性的整体结构如下图timing 属性的解释timing 属性计算出网页性能数据4. performance.getEntries() 方法5. performance.now() 方法6. performance.mark()方法perfor原创 2020-07-17 15:31:25 · 4026 阅读 · 1 评论 -
JS基本数据类型和引用数据类型的区别
JS基本数据类型和引用数据类型的区别基本数据类型种类1. Undefined2. Null3. Boolean4. Number5. String6. Symbol特点引用数据类型种类特点浅拷贝深拷贝JS分两种数据类型:基本数据类型和引用数据类型基本数据类型种类基本数据类型:Number、String、Boolean、Null、 Undefined、Symbol(ES6)1. UndefinedUndefined类型只有一个值,即特殊的undefined。在使用var声明变量但未对其加以初始化时原创 2020-07-14 17:31:31 · 1179 阅读 · 0 评论 -
获取对象属性的函数的区别
获取对象属性的函数区别Object.keys()Object.getOwnPropertyNames()Object.getOwnPropertySymbols()相同点:都是获取对象的属性不同点:1 Object.keys()函数获取对象自身可枚举属性,属性包括可枚举的属性,不包括不可枚举的属性和Symbol 属性2 Object.getOwnPropertyNames()函数获取对象的所有自身属性的属性,属性包括枚举属性和不可枚举属性,不包括Symbol 属性3 Object.getOwnPr原创 2020-07-13 11:34:30 · 426 阅读 · 0 评论 -
详解Object.freeze函数
详解Object.freeze函数1. 语法参数返回值2. 描述3. 例子冻结对象冻结数组浅冻结深冻结4. 知识扩展1. 语法Object.freeze(obj)参数obj要被冻结的对象。返回值被冻结的对象。2. 描述被冻结对象自身的所有属性都不可能以任何方式被修改。任何修改尝试都会失败,无论是静默地还是通过抛出TypeError异常(最常见但不仅限于strict mode)。数据属性的值不可更改,访问器属性(有getter和setter)也同样(但由于是函数调用,给人的错觉是还是可以修原创 2020-07-10 13:46:37 · 779 阅读 · 0 评论 -
详解Object.defineProperty()
详解Object.defineProperty函数语法1. 参数2. 返回值描述1. 数据描述符和存储描述符共享的可选键值a. configurableb. enumerable2.数据描述符可选键值a. valueb. writable3.数据描述符可选键值a. getb. set4. 描述符默认值汇总5. 描述符可拥有的键值示例1. 创建属性2. 修改属性a. Writable 属性b. Enumerable 属性c. Configurable 属性3. 添加多个属性和默认值4. 自定义 Setters原创 2020-07-10 11:11:18 · 314 阅读 · 0 评论 -
深入理解javascript原型和闭包(18)——补充:上下文环境和作用域的关系
本系列用了大量的篇幅讲解了上下文环境和作用域,有些人反映这两个是一回儿事。本文就用一个小例子来说明一下,作用域和上下文环境绝对不是一回事儿。再说明之前,咱们先用简单的语言来概括一下这两个的区别。00 上下文环境:可以理解为一个看不见摸不着的对象(有若干个属性),虽然看不见摸不着,但确实实实在在存在的,因为所有的变量都在里面存储着,要不然咱们定义的变量在哪里存?另外,对于函数来说,上下文环境是在调用时创建的,这个很好理解。拿参数做例子,你不调用函数,我哪儿知道你要给我传什么参数?01 作用域:首先转载 2020-07-06 14:04:21 · 138 阅读 · 0 评论 -
深入理解javascript原型和闭包(17)——补this
本文对《深入理解javascript原型和闭包(10)——this》一篇进行补充,原文链接:深入理解javascript原型和闭包(10)——this原文中,讲解了在javascript中this的各个情况,写完之后发现还落下一种情况,就此补充。原文中this的其中一种情况是构造函数的,具体的内容可以参考原文,此处不再赘述。要补充的内容是,在构造函数的prototype中,this代表着什么。如上代码,在Fn.prototype.getName函数中,this指向的是f1对象。因此可以通过this转载 2020-07-06 13:52:13 · 83 阅读 · 0 评论 -
深入理解javascript原型和闭包(15)——闭包
前面提到的上下文环境和作用域的知识,除了了解这些知识之外,还是理解闭包的基础。至于“闭包”这个词的概念的文字描述,确实不好解释,我看过很多遍,但是现在还是记不住。但是你只需要知道应用的两种情况即可——函数作为返回值,函数作为参数传递。第一,函数作为返回值如上代码,bar函数作为返回值,赋值给f1变量。执行f1(15)时,用到了fn作用域下的max变量的值。至于如何跨作用域取值,可以参考上一节。第二,函数作为参数被传递如上代码中,fn函数作为一个参数被传递进入另一个函数,赋值给f参数。执行f(转载 2020-07-06 13:48:35 · 87 阅读 · 0 评论 -
深入理解javascript原型和闭包(14)——从【自由变量】到【作用域链】
先解释一下什么是“自由变量”。在A作用域中使用的变量x,却没有在A作用域中声明(即在其他作用域中声明的),对于A作用域来说,x就是一个自由变量。如下图:如上程序中,在调用fn()函数时,函数体中第6行。取b的值就直接可以在fn作用域中取,因为b就是在这里定义的。而取x的值时,就需要到另一个作用域中取。到哪个作用域中取呢?有人说过要到父作用域中取,其实有时候这种解释会产生歧义。例如:所以,不要在用以上说法了。相比而言,用这句话描述会更加贴切——要到创建这个函数的那个作用域中取值——是“创建”,而不转载 2020-07-06 11:39:29 · 87 阅读 · 0 评论 -
深入理解javascript原型和闭包(13)-【作用域】和【上下文环境】
上文简单介绍了作用域,本文把作用域和上下文环境结合起来说一下,会理解的更深一些。如上图,我们在上文中已经介绍了,除了全局作用域之外,每个函数都会创建自己的作用域,作用域在函数定义时就已经确定了。而不是在函数调用时确定。下面我们将按照程序执行的顺序,一步一步把各个上下文环境加上。另外,对上下文环境不了解的朋友,可以去看看之前的两篇文章:http://www.cnblogs.com/wangfupeng1988/p/3986420.htmlhttp://www.cnblogs.com/wangfupe转载 2020-07-06 11:29:45 · 80 阅读 · 0 评论 -
深入理解javascript原型和闭包(12)——简介【作用域】
提到作用域,有一句话大家(有js开发经验者)可能比较熟悉:“javascript没有块级作用域”。所谓“块”,就是大括号“{}”中间的语句。例如if语句:再比如for语句:所以,我们在编写代码的时候,不要在“块”里面声明变量,要在代码的一开始就声明好了。以避免发生歧义。如:其实,你光知道“javascript没有块级作用域”是完全不够的,你需要知道的是——javascript除了全局作用域之外,只有函数可以创建的作用域。所以,我们在声明变量时,全局代码要在代码前端声明,函数中要在函数体一开始就转载 2020-07-06 11:20:05 · 57 阅读 · 0 评论 -
深入理解javascript原型和闭包(11)——执行上下文栈
继续上文的内容。执行全局代码时,会产生一个执行上下文环境,每次调用函数都又会产生执行上下文环境。当函数调用完成时,这个上下文环境以及其中的数据都会被消除,再重新回到全局上下文环境。处于活动状态的执行上下文环境只有一个。其实这是一个压栈出栈的过程——执行上下文栈。如下图:可根据以下代码来详细介绍上下文栈的压栈、出栈过程。如上代码。在执行代码之前,首先将创建全局上下文环境。然后是代码执行。代码执行到第12行之前,上下文环境中的变量都在执行过程中被赋值。执行到第13行,调用bar函数。跳转转载 2020-07-06 11:08:21 · 114 阅读 · 0 评论 -
深入理解javascript原型和闭包(10)——this
接着上一节讲的话,应该轮到“执行上下文栈”了,但是这里不得不插入一节,把this说一下。因为this很重要,js的面试题如果不出几个与this有关的,那出题者都不合格。其实,this的取值,分四种情况。我们来挨个看一下。在此再强调一遍一个非常重要的知识点:在函数中this到底取何值,是在函数真正被调用执行的时候确定的,函数定义的时候确定不了。因为this的取值是执行上下文环境的一部分,每次调用函数,都会产生一个新的执行上下文环境。情况1:构造函数所谓构造函数就是用来new对象的函数。其实严格来说,所转载 2020-07-06 10:55:09 · 86 阅读 · 0 评论 -
深入理解javascript原型和闭包(9)——简述【执行上下文】下
继续上一篇文章(http://www.cnblogs.com/wangfupeng1988/p/3986420.html)的内容。上一篇我们讲到在全局环境下的代码段中,执行上下文环境中有如下数据:变量、函数表达式——变量声明,默认赋值为undefined;this——赋值;函数声明——赋值;如果在函数中,除了以上数据之外,还会有其他数据。先看以下代码:以上代码展示了在函数体的语句执行之前,arguments变量和函数的参数都已经被赋值。从这里可以看出,函数每被调用一次,都会产生一个新的执行转载 2020-07-05 22:27:25 · 76 阅读 · 0 评论 -
深入理解javascript原型和闭包(8)——简述【执行上下文】上
什么是“执行上下文”(也叫做“执行上下文环境”)?暂且不下定义,先看一段代码:第一句报错,a未定义,很正常。第二句、第三句输出都是undefined,说明浏览器在执行console.log(a)时,已经知道了a是undefined,但却不知道a是10(第三句中)。在一段js代码拿过来真正一句一句运行之前,浏览器已经做了一些“准备工作”,其中就包括对变量的声明,而不是赋值。变量赋值是在赋值语句执行的时候进行的。可用下图模拟:这是第一种情况。下面还有。先来个简单的。有js开发经验的朋友应该都知道转载 2020-07-05 21:43:18 · 92 阅读 · 0 评论 -
深入理解javascript原型和闭包(7)——原型的灵活性
在Java和C#中,你可以简单的理解class是一个模子,对象就是被这个模子压出来的一批一批月饼(中秋节刚过完)。压个啥样,就得是个啥样,不能随便动,动一动就坏了。而在javascript中,就没有模子了,月饼被换成了面团,你可以捏成自己想要的样子。首先,对象属性可以随时改动。对象或者函数,刚开始new出来之后,可能啥属性都没有。但是你可以这会儿加一个,过一会儿在加两个,非常灵活。在jQuery的源码中,对象被创建时什么属性都没有,都是代码一步一步执行时,一个一个加上的。其次,如果继承的方法不合转载 2020-07-05 21:31:14 · 76 阅读 · 0 评论 -
深入理解javascript原型和闭包(6)——继承
为何用“继承”为标题,而不用“原型链”?原型链如果解释清楚了很容易理解,不会与常用的java/C#产生混淆。而“继承”确实常用面向对象语言中最基本的概念,但是java中的继承与javascript中的继承又完全是两回事儿。因此,这里把“继承”着重拿出来,就为了体现这个不同。javascript中的继承是通过原型链来体现的。先看几句代码以上代码中,f1是Foo函数new出来的对象,f1.a是f1对象的基本属性,f1.b是怎么来的呢?——从Foo.prototype得来,因为f1.__proto__指向转载 2020-07-05 20:50:55 · 70 阅读 · 0 评论 -
深入理解javascript原型和闭包(5)——instanceof
又介绍一个老朋友——instanceof。对于值类型,你可以通过typeof判断,string/number/boolean都很清楚,但是typeof在判断到引用类型的时候,返回值只有object/function,你不知道它到底是一个object对象,还是数组,还是new Number等等。这个时候就需要用到instanceof。例如:上图中,f1这个对象是被Foo创建,但是“f1 instanceof Object”为什么是true呢?至于为什么过会儿再说,先把instanceof判断的规则告转载 2020-07-05 16:49:36 · 90 阅读 · 0 评论 -
深入理解javascript原型和闭包(4)——隐式原型
上节已经提到,每个函数function都有一个prototype,即原型。这里再加一句话——每个对象都有一个__proto__,可成为隐式原型。这个__proto__是一个隐藏的属性,javascript不希望开发者用到这个属性值,有的低版本浏览器甚至不支持这个属性值。所以你在Visual Studio 2012这样很高级很智能的编辑器中,都不会有__proto__的智能提示,但是你不用管它,直接写出来就是了。上面截图看来,obj.__proto__和Object.prototype的属性一样!这么巧转载 2020-07-05 16:35:08 · 89 阅读 · 0 评论 -
深入理解javascript原型和闭包(3)——prototype原型
既typeof之后的另一位老朋友!prototype也是我们的老朋友,即使不了解的人,也应该都听过它的大名。如果它还是您的新朋友,我估计您也是javascript的新朋友。在咱们的第一节(深入理解javascript原型和闭包(1)——一切都是对象)中说道,函数也是一种对象。他也是属性的集合,你也可以对函数进行自定义属性。不用等咱们去试验,javascript自己就先做了表率,人家就默认的给函数一个属性——prototype。对,每个函数都有一个属性叫做prototype。这个prototype的属转载 2020-07-05 15:57:53 · 104 阅读 · 0 评论 -
深入理解javascript原型和闭包(2)——函数和对象的关系
上文(理解javascript原型和作用域系列(1)——一切都是对象)已经提到,函数就是对象的一种,因为通过instanceof函数可以判断。var fn = function () { };console.log(fn instanceof Function); // trueconsole.log(fn instanceof Object); // true对!函数是一种对象,但是函数却不像数组一样——你可以说数组是对象的一种,因为数组就像是对象的一个子集一样。但是函数与对象之间,却不仅仅是转载 2020-07-05 15:36:45 · 65 阅读 · 0 评论 -
深入理解javascript原型和闭包(1)——一切都是对象
“一切都是对象”这句话的重点在于如何去理解“对象”这个概念。——当然,也不是所有的都是对象,值类型就不是对象。首先咱们还是先看看javascript中一个常用的运算符——typeof。typeof应该算是咱们的老朋友,还有谁没用过它?typeof函数输出的一共有几种类型,在此列出: function show(x) { console.log(typeof x); // undefined console.log(typeof 10); // number con转载 2020-07-05 15:14:59 · 110 阅读 · 0 评论 -
详解搭建一个VUE项目的过程
详解搭建一个VUE项目的过程一、安装node环境二、搭建vue项目环境三、vue项目目录讲解四、开始我们的第一个vue项目五、补充一、安装node环境下载地址为:https://nodejs.org/en/检查是否安装成功:如果输出版本号,说明我们安装node环境成功为了提高我们的效率,可以使用淘宝的镜像:http://npm.taobao.org/输入:npm install -g cnpm –registry=https://registry.npm.taobao.org,即可安装npm镜原创 2020-07-04 00:04:30 · 287 阅读 · 0 评论 -
详解数组的push()、pop()、shift()和unshift()方法
数组的push、pop、shift和unshift方法堆栈和队列堆栈实现类似栈的行为队列实现类似栈的行为JavaScript的数组是一个拥有堆栈和队列自身优点的global对象。也就是说JavaScript数组可以表现的像栈(LIFO)和队列(FIFO)一样操作。这也是JavaScript数组强大的可操作性的体现。堆栈和队列堆栈堆栈的基本概念ECMAScript为数组专门提供了 shift() 和 unshift() 方法,以便实现类似队列的行为。由于 push() 是向数组末端添加数组项的方法原创 2020-07-02 21:59:04 · 12434 阅读 · 0 评论 -
详解JS中slice函数和splice函数区别
详解JS中slice函数和splice函数区别1.slice()slice的定义slice的语法2.splice()splice的定义splice的语法以前是职场小白时,经常经常搞混JS中操作数组的slice和splice函数。因为这两个函数的名字非常相似,语法也类似。现在总结一下这两个函数的差异,方便以后调用。1.slice()slice的定义从已有数组中返回返回你选择的某段元素集合slice的语法arrayObject.slice(start, end)注意:start表示从何处开始原创 2020-07-02 21:20:58 · 7601 阅读 · 0 评论 -
javascript中实现继承的三种方式
版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。 ...转载 2019-08-23 10:59:31 · 148 阅读 · 0 评论 -
js apply和js call方法详解
js apply和js call方法总是让初学者困惑,下文就apply和call的区别,什么情况下用apply,什么情况下用call、apply的巧妙用法来阐述js apply和js call方法的详细使用方法。主要我是要解决一下几个问题:1. apply和call的区别在哪里2. 什么情况下用apply,什么情况下用call3. apply的其他巧妙用法(一转载 2017-10-14 11:28:09 · 285 阅读 · 0 评论 -
JS基本语法供自己查阅
js判断undefined类型 if (reValue== undefined){ alert("undefined"); } 发现判断不出来,最后查了下资料要用typeof方法:if (typeof(reValue) == "undefined") { alert("undefined"); } typeof 返回的是字符串原创 2016-08-01 13:59:37 · 453 阅读 · 0 评论