
javaScript
文章平均质量分 61
heiheiheiheiheiheii
这个作者很懒,什么都没留下…
展开
-
从运行时、文法、语义三方面梳理JavaScript知识体系
用一定的词法和语法,表达一定语义,从而操作运行时。原创 2022-09-26 17:22:05 · 433 阅读 · 0 评论 -
继承的方式
继承的方式原型链继承function Person() { this.data = [1, 2, 3];}function Teacher() {}Teacher.__proto__ = Person.prototype;var teacher = new Teacher();teacher.data; // [1, 2, 3];问题:对于引用类型的将会共享。改变之后会引用到父的数据。不能够给父构造函数传值。构造函数继承function Person(d原创 2022-03-10 22:46:51 · 279 阅读 · 0 评论 -
创建对象的方法
创建对象的方法1. 通过 Object 构造器var obj = new Object();obj.name = 'xxx'obj...问题:需要写大量的重复代码2. 字面量创建var obj = {};obj.name = 'xxx';问题:需要写大量的重复代码3. 工厂模式function createObj(name, age) { var obj = new Object(); obj.name = name; obj.age = age;原创 2022-03-10 22:46:37 · 192 阅读 · 0 评论 -
js 事件委托
事件委托定义何为事件委托,事件委托就是我们可以把本身应该在自己身上的事件触发,委托给别的元素上,让它来代替事件触发。原理主要是通过事件冒泡的特性,触发点击事件之后,PC 端的点击事件是由 300 毫秒的延迟的,当前元素触发之后,会一直向上冒泡,直到 document 才会停止冒泡。注意:任意一层阻止冒泡将会停止。好处当我们有大量的子元素,我们为了点击它,需要在它的身上都加上一个点击事件,知道个数还好,假如我们不知道个数,想绑定事件都没法绑定。所以我们需要借助它的父亲来实现点击事件。只需要指定原创 2022-03-09 19:30:12 · 191 阅读 · 0 评论 -
instanceof
instanceof定义obj instanceof Constructor; 我们用 instanceof 来检测 Constructor.prototype 是否存在于参数 obj 的原型链上。使用function Person() {};var person1 = new Person();person1 instanceof Person; // true;person1 instanceof Object; // true我们可以看到 person1 同时还属于 Object 类原创 2022-03-09 19:29:37 · 126 阅读 · 0 评论 -
toString
toStringtoString 可以用来判断数据类型. 可以把它看作是 typeof 的加强版,因为它不仅可以检测原始类型,还可以区分 object。[[Class]]我们需要先来说一下 [[Class]] 这个内部属性(只要是 [[]] 都是 js的内部属性,是不能够直接访问的),你不要认为它是与类有关系的内部属性,你可以把它看作是一种分类的方法。我们可以间接地通过在这个值上借用默认的 Object.prototype.toString() 来调用展示。Object.prototype.toSt原创 2022-03-09 19:29:01 · 266 阅读 · 0 评论 -
js 防抖
防抖开发中,经常会遇到一些频繁触发的事件。应用场景window: resize、scrollmousemove、mouseodownkeyup, keydown我们会明明鼠标只是移动一次,可能就会触发五六次。如果我们请求数据,1次就会请求这么多次,多么的浪费带宽。我们需要借助一些工具,使得我们能够控制触发的频率。防抖防抖就是我们的事件触发只会 n 秒后触发一次,如果你在事件触发当中,又触发了事件,事件的最终触发触发事件将会延迟到最后一次触发的 n 秒之后触发。实现原理原理就是:第一次原创 2022-03-08 18:38:03 · 351 阅读 · 0 评论 -
详解 this
this 指向如果我们将环境传入function foo(context) { return context.toUpperCase();}function bar(context) { return context + '欢迎';}foo(环境1);bar(环境2);我们使用 thisfunction foo(context) { return this.toUpperCase();}function bar(context) { return t原创 2022-03-07 17:14:55 · 206 阅读 · 1 评论 -
实现 new
new我们使用 new 来创建一个我们定义的对象类型的实例或者是内置构造函数的实例。版本一function new() { // 生成的实例 var obj = new Object(); var Constructor = [].shift.call(arguments); // 改变原型 obj.__proto__ = Constructor.prototype; // 执行构造函数 Constructor.apply(obj, argume原创 2022-03-07 17:14:25 · 86 阅读 · 0 评论 -
bind实现
bind我们使用 this 容器丢失绑定,使用 bind 可以一次性绑定,并且不会有丢失绑定问题。第一版本我们需要返回一个新的函数,新的函数(用来绑定的).if (!Function.prototype.bind) { Function.prototype.bind = function (context, ...args) { return (...Nargs) => { return this.apply(args, Nargs);原创 2022-03-07 17:13:54 · 225 阅读 · 0 评论 -
js 执行栈
执行栈js 中可执行的代码有哪几类呢?怎么的代码才算是符合规范的。当 js 执行全局代码的时候,会编译全局代码并创建全局上下文,全局执行上下文是只有一个的。当执行函数的时候,会编译函数中的代码,然后创建函数上下文,函数执行完成之后,上下文就会被销毁。执行 eval 函数的时候,eval会被编译,并创建 eval 上下文。执行上下文我们写的函数那么多,是如何管理那么多执行上下文的呢?var a = 1;function foo() {}当执行之前,会先编译,创建全局上下文,压入执行栈中原创 2022-03-07 17:13:23 · 858 阅读 · 1 评论 -
js 原型链
原型链js 是一种基于原型的语言,每个对象拥有一个原型对象,对象从原型继承方法和属性。原型对象也可以能拥有原型,并从中继承方法和属性,一层一层,最终构成了原型链。注意:OOP中,首先定义类,此后创建对象实例,类中定义的所有属性和方法都被复制到实例中。而 js 中是通过在实例和它的构造器之间建立一个链接。prototype每一个函数都有一个属于自己的 prototype 属性,它指向一个对象,而这个对象就是实例的原型。原型就是每一个 js 对象在创建的时候与之关联的一个对象。每一个对象都会从原型"原创 2022-03-07 17:13:05 · 115 阅读 · 0 评论 -
js 类型转换
类型转换让我们思想一个问题,类型转换是邪恶的吗?带着这个问题来看。强制类型转换某些情况下,我们希望将值显示的转换为我们期望的类型。字符串的转换 ToString原始值需要借助内建类型(原生类型), String() 来将一个非字符串类型强制转换为 string , String() 转换的过程是由语言规范ToString 抽象操作处理的。参数类型结果Undefined“undefined”Null“null”Boolean如果参数是 true,返回 “tru原创 2022-03-07 17:12:16 · 323 阅读 · 0 评论 -
js词法作用域和动态作用域
词法作用域和动态作用域作用域作用域是指程序源代码中定义变量的区域。这些变量存活在哪,我们如何才能找到它们。这样的规则就叫做作用域。词法作用域js 在编译的第一步会进行词法分析(分词),词法作用域就是这么由来,就是在此法分析时被定义的作用域。变量和作用域的块儿在何处被编写决定了它的作用域,可以说作用域是基本固定不变的。var a = 1;function foo() { var a = 2; console.log(a); // 2}console.log(a); // 1原创 2022-03-07 17:11:37 · 128 阅读 · 0 评论 -
JavaScript 闭包
闭包定义MDN 对闭包的定义为: 闭包是指那些能够访问自由变量的函数。定义:闭包就是函数能够记住并访问它的词法作用域,即使当这个函数在它的词法作用域之外执行时。例子function foo() { var a = 2; function bar() { console.log(a); } bar();}foo();bar 是可以访问 foo 的作用域的,但是不能严格意义来说是闭包,它是在自己当前的词法作用域来执行的。function fo原创 2022-03-07 17:11:04 · 296 阅读 · 0 评论 -
ES Module 和 CommonJS
一、前言早期的 JavaScript 作为一种脚本语言,其产生的目的只是为了简单的表单验证或动画实现。并且不需要分离多个 js 文件来写,功能相对简单。只需要内嵌一个 script 标签即可。ajax 的出现,前后端也分离,前端更新数据接口。SPA 的出现,前端页面复杂化,前端路由、状态管理。Node 的出现, JavaScript 编写复杂的后端程序。模块化的需要日趋明显。在 JavaScript 还没有推出模块化的解决方案之前,社区涌现出许多的模块化规范。如:AMD、CMD、C原创 2022-01-17 16:15:08 · 2364 阅读 · 0 评论 -
JavaScript 惰性函数
概念惰性函数,表示函数执行的分支只会在函数第一次调用的时候执行。在一次调用过程中,该函数会被覆盖威另一个按照合适方式执行的函数。这样对原函数的调用就不会再经过执行的分支了。简单的来说,就是可以记录第一次的操作,之后就不再走第一次的老路了,而是采用一种获取值的方式。应用案例1.如果有一个函数,在函数里就行一个求值操作(纯函数),不会有副作用的情况下,我们为了将第一次的值保存下来,之后就不需要求得一遍,直接拿缓存。var cache = [ ];function sqrt (x) {原创 2022-01-13 17:18:29 · 352 阅读 · 0 评论 -
JavaScript 怎么防止构造函数意外丢失 new 调用
意外丢失 new 会怎么样子。var Person = function () { this.age = 18;}var p1 = Person();p1; // undefinedage; // 18怎么防止意外的丢掉 new ,而带来的现象?1. 通过使用严格模式,函数内部 this 不能指向全局对象,undefined 不能添加属性。function Person(name, age) { 'use strict'; this.name = name;原创 2022-01-09 19:08:23 · 294 阅读 · 0 评论 -
JavaScript 实现 parseInt
parseInt方法用于将字符串转为整数。实现:function _parseInt(str, radix) { // 先转为字符串 if (typeof str != 'string') str = String(str); // 删除空格 str = str.trim(); // 正则匹配 +-符号, 进制, 数 const regex = /^(?<symbol>[\+|\-]*)(?<radix>[0]?[Xx]?原创 2022-01-05 13:06:57 · 437 阅读 · 0 评论 -
JavaScript 中精度丢失
在我们开发中经常会遇到精度丢失问题,整数丢失可能不太常见,但是小数部分的丢失时常见的,可以先了解0.1 + 0.2 !== 0.3、IEEE 754。在 JavaScript 中 Number类型统一按浮点数处理,整数是按最大54位来算最大(253 - 1,Number.MAX_SAFE_INTEGER,9007199254740991) 和最小(-(253 - 1),Number.MIN_SAFE_INTEGER,-9007199254740991) 安全整数范围的。所以只要超过这个范围,就会存在..原创 2022-01-04 20:15:30 · 789 阅读 · 0 评论 -
0.1 + 0.2 === 0.3 吗
在 JavaScript 中,存在精度丢失的问题,所以导致小数运算结果跟我们所想的结果造成偏差。在 JavaScript 中,采用 IEEE 754 双精度浮点数来存储数值。所以,整数和小数之间的界限也就不是那么明晰了。第1位(Sign):符号位,0表示正数,1表示负数 第2位到第12位(Exponent)(共11位):指数部分 第13位到第64位(Mantissa)(共52位):小数部分(即有效数字)所以,我们所用能够表示的数字都是会按照这个格式存储的,我们能够发现,越高的位置对数值..原创 2022-01-04 17:50:28 · 525 阅读 · 0 评论 -
JavaScript 中字符串截取 (+实现)
String.prototype.slice(beginIndex, endIndex)slice 方法是用来从父字符串中截取子字符串并返回一个新的字符串,接受两个参数。beginIndex endIndex 接收一个整数作为第一个参数,会进行Number强制转换,如果得到 NaN,或者默认不传递第一个参数,都会以 0 作为默认值。如果超出字符串的长度,截取出来是一个空字符串。 接收一个整数作为第一个参数,会进行Number强制转换,如果得到 NaN,会以 0 作为默认值。如果不传入原创 2021-12-15 13:30:15 · 1515 阅读 · 0 评论 -
JavaScript 查找字符串方法讲解(手写)
String.prototype.indexOf(searchString, fromIndex)indexOf 方法返回调用它的第一次出现的指定值的索引,从fromIndex处进行搜索。如果未找到该值,则返回 -1。indexOf(searchString, fromIndex) searchString是传入String上下文,转为一个字符串。如果省略第一个参数,会默认 searchString 是 "undefined"。 fromIndex 是传入 Number 上下文,..原创 2021-12-14 18:31:20 · 2142 阅读 · 0 评论 -
JavaScript中string与unicode码点的之间的转换
在 JavaScript 中,字符串使用了UTF-16 编码,该编码使用一个 16 比特的编码单元来表示大部分常见的字符,使用两个代码单元表示不常用的字符。在 JavaScript 中 unicode 是以十六进制代码外加转义字符 "\u" 来表示的字符串。"\uxxxx"使用 "\u" 来对一个 Unicode 来进行解码,获得字符串。那么怎么将一个字符串转为一个 unicode 码点。String.prototype.charCodeAt(index)charCodeAt.原创 2021-12-13 17:31:56 · 2155 阅读 · 0 评论 -
>> 和 >>> 的区别。
>> 是指有符号位移。 (简单理解就是区分一个数字的正负在进行移动)。>>> 是指无符号位移。 (简答理机就是会无视一个数字是正数还是负数,进行统一规则的运算)。10 的 二进制是 101010 >> 1 // 510 >>> 1 // 510 的二进制是 1010,所以向右移动一位,就是 101,右边移动一位,所以为了补全32位(四个字节),就需要参照,正数前面补充0,负数补充1的规则,然后十进制表示就是 5,...原创 2021-12-13 12:56:47 · 1434 阅读 · 0 评论 -
JavaScript中String详解
javaScript 中的 String 对象用来表示和操作字符序列。字符串对于保存可以以文本形式表示的数据。并且有一些常用的字符串方法,用来查看字符串的长度,用来寻找字符串的位置等。创建字符串的方法。可以通过使用 String() 构造函数的将字符串创建出来字符串原语和字符串对象。const string1 = "This is a string";typeof string1 // stringconst objStr = 'This is a obj string';t...原创 2021-12-10 16:25:13 · 2626 阅读 · 0 评论 -
Unicode 与 JavaScript。
在上一篇我们讲解了Unicode 和 UTF-8 的关系,今天,让我们来看看在 JavaScript 中 编码格式的应用。Unicode 就是包含了所有的字符在一个集合内,计算机只要支持这一个字符集,就能显示所有的字符,再也不会有乱码了。Unicode 中的每一个字符都指定了一个编码,称为符号的“码点”。U+0000 U+ 紧跟在后面的十六进制数就是 Unicode 码点。现如今 Unicode 14.0 是Unicode 标准的计划版本,以跟随 Unicode 13.0.Un...原创 2021-12-07 22:03:13 · 907 阅读 · 0 评论 -
JavaScript 中的语句
JavaScript 中 语句分为 声明语句 和 普通语句,语句时没有返回值的,能产生执行效果的语句不多,能干活的也就只有表达式语句,其他语句的作用都是产生各种结构,来控制表达式语句执行或者改变表达式语句的意义。...原创 2021-12-06 22:08:38 · 161 阅读 · 0 评论 -
JavaScript的Number存储格式.
IEEE二进制浮点数算术标准(IEEE 754), 它规定了四种表示浮点数值的方式:单精度(32位),双精度(64位),延伸单精确度与延伸双精确度。在 JavaScript 中采用的是 64 位双精度存储的。这样存储结构优点可以归一化处理整数和小数。64 位比特可以分为三部分来存储我们的数字。符号位S:第1位是正负符号位,0表示是正值,1代表是负值。 63位为指数位。指数位E:中间的11位存储指数,用来表示次方数。52-62位。尾数位M:最后的52位尾数,超出的部分自动进一...原创 2021-12-06 19:18:59 · 862 阅读 · 0 评论 -
Number
详解JavaScript中Number的各种静态属性和方法。原创 2021-12-05 18:04:20 · 312 阅读 · 0 评论