JavaScript
山河 山河
在探索全栈的路上举步维艰
展开
-
JS中的位运算符
位运算将一个整数的二进制格式进行运算。在JS中如果一个数字进行位运算,那么先将这个数字转换为整数,并且是32位整数存储格式。(与JS本身采用双精度64位存储略有不同)NaN、Infinity、-Infinity转换为0与运算 &运算规则:两个整数比较,如果都为1则结果为1,否则为0。或运算 |运算规则:两个整数进行比较,如果有一位为1,则结果为1,否则为0。非/否运算 ...原创 2019-11-24 23:15:58 · 276 阅读 · 0 评论 -
深度剖析JS中this绑定
this到底是什么?当一个函数被调用时,会创建一个活动记录(有时候也称执行上下文),这个活动记录会包含函数在哪里被调用(调用栈)、函数的调用方法、传入的参数等信息,this就是记录的其中一个属性。this是在运行时进行绑定的,并不是在编写时,它的上下文取决于函数调用时的各种条件。this的绑定和和函数声明位置没有任何关系,只取决于函数的调用方法(也就是函数调用位置)。this绑定规则:默...原创 2019-07-28 13:56:52 · 151 阅读 · 0 评论 -
原生JS模拟实现React.createElement()
1、JSX语法渲染流程:使用jsx语法 => 调用React.createElement()函数 => 返回vNode(虚拟节点) => 渲染到页面上2、React.createElment(type|标签名,props|属性的对象集合,children..|各种节点)const React = { createElement(type, props, ...c...原创 2019-08-24 18:14:59 · 718 阅读 · 0 评论 -
浅谈JS继承
引言 要知道在工程化开发中,避免不了会遇见多个对象内会有相同类别属性情形,本人在之前的一篇博客https://blog.csdn.net/weixin_43821550/article/details/96914857中已经谈到可以利用JS中的构造函数的原型提取这些共有属性但是并不是继承的全部,本篇主要讨论的是JS继承的一些方法,并通过比较得出最优雅的解决方案。继承方案与解...原创 2019-08-10 15:32:49 · 121 阅读 · 0 评论 -
JS执行机制及事件循环
在讨论今天的主题之前,大家需要明白一下几点概念浏览器的线程JS引擎线程:解释执行JS代码、用户输入、网络请求等GUI线程(渲染线程):绘制用户界面、与JS主线程互斥HTTP网络请求线程:处理用户的GET、POST等请求,等拿到返回结果后,将回调函数推入事件队列定时器触发线程:setTimeout、setInterval等待时间结束后,将执行函数推入事件队列中事件处理线程:将...原创 2019-08-08 16:35:25 · 709 阅读 · 1 评论 -
前端算法之有效括号判定
给定一个只包括 '(',')','{','}','[',']'的字符串,判断字符串是否有效。有效字符串需满足:左括号必须用相同类型的右括号闭合。左括号必须以正确的顺序闭合。注意空字符串可被认为是有效字符串。示例 1:输入: "()"输出: true示例2:输入: "()[]{}"输出: true示例 3:输入: "([)]"输出: false...原创 2019-08-06 14:34:05 · 621 阅读 · 0 评论 -
数组方法归纳
引言在正式进入主题之前,先给大家介绍基本JS数据类型及存储位置栈内存:存储有序即一个挨着一个存储;堆内存:存储无序原始值:number、string、null、undefined、boolean,存储在栈内存引用值:array、object、function () {}、Date、RegExp(),存储在堆内存正文数组常用方法push:数组尾部添加一个或者多个元素,参数...原创 2019-08-26 11:59:38 · 160 阅读 · 0 评论 -
数组迭代方法模拟实现
forEachArray.prototype.myForEach = function (func) { var _arr = this, _len = _arr.length, _this = arguments[1] || window; for (var i = 0; i < _len; i++) { func.apply(_this, [_arr...原创 2019-08-28 00:54:26 · 170 阅读 · 0 评论 -
图解原型链
引言在看图之前希望大家明白几点prototype:函数都有一个prototype属性,这个属性指向函数原型,原型是一个普通对象例:Function.prototype=== Function的原型constructor:函数原型中有一个constructor属性,它指向构造函数本身__proto__:所有对象都有一个__proto__属性,被称为隐式原型注:就本篇而言可以把对象分为...原创 2019-08-30 11:21:34 · 120 阅读 · 0 评论 -
关于JavaScirpt容易忘记的知识点
变量输出console.log(010) // 8 八进制console.log(0x10) // 16 十六进制console.log(0b10) // 2 二进制ES5遍历数组方法特点let array = [,1,,2,,3];array = array.map((i) => ++i)//[,2,,3,,4]forEach,fi...原创 2019-09-16 22:21:09 · 109 阅读 · 0 评论 -
JavaScript数组结构(一)栈
一、定义栈遵循LIFO-(Last in, First out)原则即先进后出,栈存储结构被用在编程语言的编译器和内存中保存变量、方法调用(js的执行栈)等,也被用于浏览器历史记录存储(浏览器回退操作)。二、JavaScript模拟实现class Stack { constructor() { this.count = 0; this.item...原创 2019-09-18 22:41:30 · 142 阅读 · 0 评论 -
数组去重、并集、交集、差集
一、去重1、借助额外变量空间-ES5var arr = [1,3,4,5,6,6,7,3,3,3]var newArr = []var obj = {}function removeDuplicates(arr){ for(var i = 0 ; i < arr.length ; i++){ if(!obj[arr[i]]){ newArr.p...原创 2019-08-05 18:16:09 · 515 阅读 · 4 评论 -
JS包装类
什么是包装类?能做什么?代码:var num = 1;num.len = 1;console.log(num.len);//undefined预热:在看这段代码之前,希望大家能够明白一点,原始值(包括undefied、null)是不能有属性和方法的,属性和方法只能是对象(包括数组、函数)才可以拥有。执行解析:1)num.len = 1;原始值本身不可以拥有属性,但是浏览器...原创 2019-07-22 23:17:38 · 156 阅读 · 0 评论 -
JS隐式类型转换
isNaN():判断参数是否为NaN,返回boolean值,隐式调用显示类型转换中的Number()再将调用的结果和NaN比对,返回true/false;isNaN('123s') // true 解析:Number('123s') === NaN -> NaN === NaNisNaN(null) // false 解析: Number(null) === 0 -> ...原创 2019-07-16 13:00:13 · 157 阅读 · 0 评论 -
原生JS封装bind
前几天面试字节跳动,面试官让我封装bind,然后直接回复太难了没有做,后来仔细想一下其实并不是很难...无论是封装什么函数大家都要先明确一点,这个函数的功能是什么?把功能都考虑到位了实现自然也就不是什么难事了bind功能:改变this指向返回一个函数,调用这个函数改变this封装代码://简易版封装bindFunction.prototype.myBind = function...原创 2019-07-28 23:16:36 · 187 阅读 · 0 评论 -
JS原型、原型链
原型一、原型定义:原型是function对象的一个属性,它定义了构造函数制造出来的对象的公共祖先。通过该构造函数产生的对象,可以继承该原型的属性和方法。原型也是对象。先定义一个构造函数,Person.prototype这个属性就是这个构造函数的原型,这个属性天生就有,并且这个属性的值也是一个对象 function Person() { }我们可以在...原创 2019-07-23 23:55:04 · 122 阅读 · 0 评论 -
网络之同源策略+跨域解决方案
同源策略:(浏览器提出的安全策略)同源是指协议、端口、域名都相同,不同源的客户端脚本在没有明确授权的情况下不能读写对方的资源。虽然浏览器的同源策略可以防止自己的数据丢失被黑客窃取(当然这只是同源策略的一种好处这里不做过多介绍),但是也相应的阻碍了开发人员在合理范围内获取其他页面的数据。因此跨域就成了不可避免的一个问题,下面开始介绍跨域跨域解决方案:一、对方后端允许我们跨域1)Jso...原创 2019-07-29 20:11:02 · 268 阅读 · 0 评论 -
Var、Let、Const区别
一、var声明变量 特点:变量声明提升、可重复定义、全局变量挂载到window二、let声明变量 特点:没有变量声明提升、不可重复定义、全局变量不会挂载到window、声明的变量与{}形成块级作用域,声明在块级作用域内的变量外部无法使用、产生临时死区、优雅的解决了闭包三、const声明变量 特点:let用于变量声明、const用于常量声明,其余特...原创 2019-07-29 22:32:22 · 107 阅读 · 0 评论 -
原生JS实现Ajax
//1.创建XML对象var xhr = null;if (window.XMLHttpRequest) { xhr = new XMLHttpRequest();//IE6不兼容} else { xhr = new ActiveXObject("Microsoft.XMLHttp");//IE6独有创建XML对象方法}//2.建立连接xhr.open("...原创 2019-07-29 22:15:13 · 117 阅读 · 0 评论 -
原生JS实现深度克隆
function myDeepClone(origin, target) { var target = target || {}, toStr = Object.prototype.toString, arrStr = '[object Arrary]'; for (var prop in origin) { ...原创 2019-07-26 12:15:09 · 322 阅读 · 1 评论 -
JS区别数组和对象的方法
var Arr = [];var Obj = {};第一种 constructor --->构造器返回构造该对象的构造函数Arr.constructor //运行结果 ---> ƒ Array() { [native code] }Obj.constructor //运行结果 ---> ƒ Object() { [native code] }第二种 A i...原创 2019-07-26 13:11:47 · 289 阅读 · 0 评论 -
JS作用域、作用域链、运行期上下文
作用域(全局、局部——含函数作用域)定义:变量(变量作用域又称上下文)和函数生效(能被访问)的区域;每个javascript函数都是一个对象,对象中有些属性我们可以访问,但有些不可以,这些属性仅供javascript引擎存、取,[[scope]]就是其中一个。[[scope]]指的就是我们所说的作用域,其中存储了运行期上下文的集合。作用域链[[scope]]中所存储的执行期上下文对象的集合,...原创 2019-07-22 19:47:07 · 497 阅读 · 0 评论 -
JS闭包
定义: 当内部函数被保存到外部时,将会生成闭包。闭包会导致原有作用域链不释放,造成内存泄露;怎样理解内存泄漏? 正常情况函数执行结束就会销毁自己的作用域链,但是由于闭包的出现,内部函数被保存到了外部就还可以使用它的作用域链,即没有立即释放,就会占用过多了内存,内存变少,即内存泄漏。例:function test(){ var arr = []; for...原创 2019-07-22 21:07:57 · 91 阅读 · 0 评论 -
JS中Typeof用法、显示类型转换
提到类型转换就不得不说typeof(),它可以判断参数的数据类型,记住返回值为字符串类型且为小写字母,返回值有’number’、‘string’、‘object’、‘function’、‘undefined’,5中类型typeof NaN // 'number'typeof []、typeof {}、typeof null // 'object'typeof undefined // 'un...原创 2019-07-16 10:55:29 · 296 阅读 · 0 评论