前端js的理解 - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

前端-一篇文章理解 JS 继承

本文以《JavaScript高级程序设计》上的内容为骨架，补充了ES6 Class的相关内容，从我认为更容易理解的角度将继承这件事叙述出来，希望大家能有所收获。 1. 继承分类先来个整体印象。...如图所示，JS中继承可以按照是否使用object函数（在下文中会提到），将继承分成两部分（Object.create是ES5新增的方法，用来规范化这个函数）。...继承方式上图上半区的原型链继承，构造函数继承，组合继承，网上内容比较多，本文不作详细描述，只指出重点。这里给出了我认为最容易理解的一篇《JS中的继承（上）》。...如果对上半区的内容不熟悉，可以先看这篇文章，再回来继续阅读；如果已经比较熟悉，这部分可以快速略过。另，上半区大量借用了yq前端的一篇继承文章1。...总结 1、ES6 Class extends是ES5继承的语法糖 2、JS的继承除了构造函数继承之外都基于原型链构建的 3、可以用寄生组合继承实现ES6 Class extends，但是还是会有细微的差别

8252 0

理解js的this

为什么使用this 如果没有this，那么我们的代码会是下面的写法：在方法中，为了能够获取到name名称，必须通过obj的引用（变量名称）来获取。...但是这样做有一个很大的弊端：如果我将obj的名称换成了info，那么所有的方法中的obj都需要换成info。...（编写的位置）没有关系； 3.this的绑定和调用方式以及调用的位置有关系； 4.this是在运行时被绑定的； this绑定规则默认绑定在独立函数调用的情况下使用默认绑定独立的函数调用我们可以理解成函数没有被绑定到某个对象上进行调用...：也就是它的调用位置中，是通过某个对象发起的函数调用。...这个和setTimeout源码的内部调用有关； setTimeout内部是通过apply进行绑定的this对象，并且绑定的是全局对象；案例二：数组的forEach 数组有一个高阶函数forEach，用于函数的遍历

3K3 0

您找到你想要的搜索结果了吗？

是的

没有找到

js的DOM理解

try…catch try{}catch(e) {}finally{} Error.name的六种值对应的信息： 1. EvalError：eval()的使用与定义不一致 2....URIError：URI处理函数使用不当复制代码 es5严格模式 “use strict” 不再兼容es3的一些不规则语法。使用全新的es5规范。...DOM对象即为宿主对象，由浏览器厂商定义，用来操作html和xml功能的一类对象的集合。也有人称DOM是对HTML以及XML的标准编程接口。...ie7以下的版本中没有，非实时 .querySelectorAll() // css选择器在ie7和ie7以下的版本中没有，非实时复制代码 DOM基本操作遍历节点树： parentNode ->...->后一个兄弟节点 previousSibling->前一个兄弟节点基于元素节点树的遍历 parentElement -> 返回当前元素的父元素节点 (IE不兼容) (以下IE不兼容指的是 9 以下)

4.2K3 0

JS this指针的理解

this是javascript的一个关键字，也是比较容易令人迷糊的一个概念 this的本质：当前对象的所有者示例1 var x = 1; function test() { alert(this.x...); } test(); 在之前的“JS执行顺序”文章中讲过，这个test函数会被先编译为一个全局变量，如 var test = function test() { alert(this.x);...obj，this.x 也就是 obj.x 示例3 下面这个例子比较有迷惑性，是一个比较容易出错的情况 function test() { alert(this.title); } 输出的结果：undefined 其实onclick="test()"，...相当于 function onclick(event){ test(); } 是一个全局的function，上面的 test方法也是全局的function，而全局变量中并没有定义 title，所以结果为

1.8K7 0

我所理解的前端

入坑前端到今天也将近两年半了,这两天突然想到了第一次面试时面试官的一个问题-------你怎样理解前端的工作?...对于当时我一个小白而言完全是胡说一通,词不达意,搞得面试官一脸懵逼,现在想想那可能就叫尬聊吧……时隔两年在不断爬坑中对这个问题有了自己新的认识,今天趁着上午没什么事情,写下这篇博客,想到哪写到哪,谈一谈我所理解的前端...Js方面这时候已经可以开始挑一种主流框架进行学习了,前面提到的Vue, Angular,React都是不错的选择, 并且对面向对象编程,对象封装,原型继承,闭包,同步异步差异,等一系列的js进阶知识应该进行深入了解...上面只是一套笼统的流程,至少在前端这方面我们需要做的有梳理业务逻辑并理解业务逻辑,这对你后面的开发很有用处,同时根据需求进行应用技术的选择,项目结构的划分,需求模块的划分,完整项目的搭建,当然现在有很多可以自动化构建工具可以节省你很多时间...前端自动化构建在整个项目开发中越来越重要,但新手入门还是应该去尝试自己一点一点的去构建一个项目,等你多做几个项目觉得每次都这样重复好烦,自然而然的就入了自动化构建的坑,毕竟这样能让你更深刻的理解,为什么要使用自动化构建

85411 0

理解js中的new

new 操作符在有上面的基础概念的介绍之后，在加上new操作符，我们就能完成传统面向对象的class + new的方式创建对象，在Javascript中，我们将这类方式成为Pseudoclassical...基于上面的例子，我们执行如下代码 var obj = new Base(); 这样代码的结果是什么，我们在Javascript引擎中看到的对象模型是： ? new操作符具体干了什么呢?...成员对象第三行，我们将Base函数对象的this指针替换成obj，然后再调用Base函数，于是我们就给obj对象赋值了一个id成员变量，这个成员变量的值是”base”，关于call函数的用法，请参看陈皓...__的特性，toString这个方法也可以做新对象的方法被访问到。...于是我们看到了：构造子中，我们来设置‘类’的成员变量（例如：例子中的id），构造子对象prototype中我们来设置‘类’的公共方法。

3.4K4 0

js构造函数的理解

作为原型和原型链的基础，先了解清楚构造函数以及它的执行过程才能更好地帮助我们学习原型和原型链的知识。 1、什么是构造函数 2、为什么要使用构造函数？...; // 创建一个新的内存 #f3 每当创建一个实例的时候，就会创建一个新的内存空间(#f2, #f3)，创建 #f2 的时候，函数体内部的 this 指向 #f2, 创建 #f3 的时候，函数体内部的...(4) 默认返回 this 由于函数体内部的this指向新创建的内存空间，默认返回 this ，就相当于默认返回了该内存空间，也就是上图中的 #f1。此时，#f1的内存空间被变量p1所接受。...也就是说 p1 这个变量，保存的内存地址就是 #f1，同时被标记为 Person 的实例。以上就是构造函数的整个执行过程。 4、构造函数的返回值构造函数执行过程的最后一步是默认返回 this 。...首先，当用 new 关键字调用时，产生一个新的内存空间 #f11，并标记为 Person1 的实例；接着，函数体内部的 this 指向该内存空间 #f11；执行函数体内部的代码；由于函数体内部的this

2.2K3 1

理解js的变量提升

深刻理解变量提升当执行 JS 代码时，会生成执行环境，只要代码不是写在函数中的，就是在全局执行环境中，函数中的代码会产生函数执行环境，只此两种执行环境。...{ console.log('call b') } 想必以上的输出大家肯定都已经明白了，这是因为函数和变量提升的原因。...通常提升的解释是说将声明的代码移动到了顶部，这其实没有什么错误，便于大家理解。但是更准确的解释应该是：在生成执行环境时，会有两个阶段。...第一个阶段是创建的阶段，JS 解释器会找出需要提升的变量和函数，并且给他们提前在内存中开辟好空间，函数的话会将整个函数存入内存中，变量只声明并且赋值为 undefined，所以在第二个阶段，也就是代码执行阶段...let 不能在声明前使用，但是这并不是常说的 let 不会提升，let 提升了，在第一阶段内存也已经为他开辟好了空间，但是因为这个声明的特性导致了并不能在声明前使用。

5.5K2 0

彻底理解js的原型

原型（prototype）是函数创建的时候默认自带的。只要创建函数，他就默认存在。要理解原型，还要知道，我们所有对象最终都是都是继承自Object的。...__proto__ === Person.prototype搞清楚对象、构造函数他们原型的是什么，其他就更好理解了。...我们在理解new创建对象的过程发生了什么，可以加深理解他们的关系：一共5步：(1) 在内存中创建一个新对象。...理解原型链：首先，我们要知道原型链有什么作用，它的作用就是共享属性和方法。当一个对象访问属性或方法时，首先会在自身上寻找，找不到就会往对象原型上寻找，层层往上寻找的过程就是我们所说的原型链。...理解原型，理解下面的关系是很有必要的； console.log(Person.prototype.

781 0

理解微前端

今天我们来谈谈一个比较时髦的概念- 「微前端」。「微前端」是一套用于「组织大型前端应用的指导规范」。是受后端「微服务」启发而发展而来。...虽然微前端是一个备受关注的趋势性话题，但其中有一些概念是很难准确定位的。当理解一个新的趋势或技术时，首先需要理解它是解决哪些现存的问题。...❝理解微前端的最简单的方法是「把它们看作是对大规模应用如何进行组织的一种技术解决方案」。 ❞ 对于「大型应用」来说，有许多前端团队想要快速产生，并且这些团队能够在开发流程上「互相解耦」。...这可能是设计上的问题，因为微前端并不指向一个特定的通用实现。这也是为什么对微前端的用途会让人感到困惑的原因之一。...到后来出现了基于「模块化」的构建方式，分析模块之间的「依赖关系」，从「入口模块」开始构建一棵「依赖图」，中间遇到的用到的 js、css、图片等都会作为他的依赖。

4632 0

Node.js前端如何使用反向代理解决跨域

图片 Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境，它让 JavaScript 在服务器端运行，并提供了丰富的模块和工具来构建高性能的网络应用。...Node.js 的特点是单线程、异步、事件驱动、非阻塞 I/O 等，使得它能够处理大量的并发请求，并且具有高效、轻量、可扩展等优势。...在使用 Node.js 前端开发时，我们可能会遇到一些问题，比如跨域和 https 协议的限制。为了解决这些问题，我们可以利用反向代理。...反向代理是指一个代理服务器接收客户端的请求，并将其转发给后端服务器（如 Node.js 应用），然后将后端服务器返回的响应再转发给客户端。...因此，在使用 Node.js 前端开发时，我们不仅可以享受 Node.js 的高性能、轻量级和可扩展性等特点，还可以通过反向代理来解决一些常见的问题，并提升我们的开发效率和用户体验。

1.9K5 0

前端JS规范

ReferenceError 对所有引用都使用 const，不要使用 var，eslint: prefer-const, no-const-assign 原因：这样做可以确保你无法重新分配引用，以避免出现错误和难以理解的代码...，eslint: quote-props 原因：因为通常来说我们认为这样主观上会更容易阅读，这样会带来代码高亮上的提升，同时也更容易被主流 JS 引擎优化 // bad const bad = {...如果你发现函数定义既庞大又复杂以至于不能理解文件的其他部分，或许你应该将它拆分成模块！...bar.css' // good import fooSass from 'foo.scss' import barCss from 'bar.css' 迭代器建议使用 JS 更高优先级的函数代替...，我建议统一使用分号，代码更加清晰关于应不应该使用分号的讨论有很多，好的 JS 程序员应该清楚场景下是一定要加分号的，相信你也是名好的开发者。

5.3K1 0

前端--理解 Promise 的工作原理

从同步编程到异步回调编程有一个适应的过程，但是如果出现多层回调嵌套，也就是我们常说的厄运的回调金字塔(Pyramid of Doom)，绝对是一种糟糕的编程体验。...于是便有了 CommonJS 的 Promises/A 规范，用于解决回调金字塔问题。本文先介绍 Promises 相关规范，然后再通过解读一个迷你的 Promises 以加深理解。...callback，改造成一系列的.then的连缀调用，去除了层层缩进的糟糕代码风格。...Promises 不是一种解决具体问题的算法，而已一种更好的代码组织模式。接受新的组织模式同时，也逐渐以全新的视角来理解异步调用。...于是花了些经理查阅并翻译了Promise 的规范，以充分的理解 Promise 的细节。

1.4K6 0

前端必须理解this的相关知识

一、对this的产生原因分析和了解 1.this指的是函数运行时所在的环境（即调用的对象）。...2.JavaScript 语言之所以有this的设计，跟内存里面的数据结构有关系二、this绑定详解 this 实际上是在函数被调用时发生的绑定，它指向什么地方完全取决于函数在哪里被调用。...(2)把这个新对象的__proto__属性指向原函数的prototype属性。(即继承原函数的原型) (3)将构造函数的作用域赋给新对象（因此 this 就指向了这个新对象） (4)返回新对象。...绑定（1）函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。...) // 箭头函数 setInterval(() => this.s1++, 1000); //箭头函数没有this，它的this来自绑定时所在的作用域即外部代码块的

2211 0

我所理解的微前端

当下业内的微前端字眼出现的频率比较高，于是大致了解了一下微前端主要内容包括：什么是微前端？微前端的好处和意义是什么？做微前端应该如何做？...当发现使用微前端反而使效率变低，简单的变更复杂那就说明微前端并不适用。如何做微前端微前端的思想其实有点类似于 iframe，起一个框架，做一个导航，然后嵌入不同的页面。...单纯根据对概念的理解，实现微前端的就是将应用进行拆解和整合，通常是一个父应用加上一些子应用，主应用管理各个子应用。...每当微应用的JavaScript被加载并运行时，它的核心实际上是对全局对象 Window 的修改以及一些全局事件的改变，例如jQuery这个js运行后，会在Window上挂载一个window....通常在Node.js端可以采用vm模块，而对于浏览器，则需要结合 with 关键字和 window.Proxy 对象来实现浏览器端的沙箱。

5905 0

js---BOM 的理解方法

, "Default"); //提示用户输入信息，接受两个参数，即要显示给用户的文本和文本框中的默认值，将文本框中的值作为函数值返回 window.status //可以使状态栏的文本暂时改变 window.defaultStatus...//默认的状态栏信息，可在用户离开当前页面前一直改变文本 window.setTimeout("alert('xxx')", 1000); //设置在指定的毫秒数后执行指定的代码，接受2个参数，要执行的代码和等待的毫秒数...window.clearTimeout("ID"); //取消还未执行的暂停，将暂停ID传递给它 window.setInterval(function, 1000); //无限次地每隔指定的时间段重复一次指定的代码...pictures/index.htm location.portocol //URL中使用的协议，即双斜杠之前的部分，如http location.host //服务器的名字，如www.wrox.com...//URL中主机名后的部分，如/pictures/index.htm location.search //执行GET请求的URL中的问号后的部分，又称查询字符串，如?

1.4K3 0

理解JS下的“异常传播”

今天看了廖雪峰老师的一篇文章关于处理异常的，写的很不错，总结一下！...我们都知道JS里面的函数是非常重要的一部分，也是学习JS的精髓所在，那函数分为很多种，看你怎么分，可以分为有参函数和无参函数，按照返回值分为有返回值的函数和没有返回值的函数，那么在写函数的时候我们经常遇到一个问题就是异常的处理...，之前在写Java的时候其实也是一样会遇到这样的问题，那么在java里面其实只要你觉得哪里可能会出问题的时候，你只需要将代码try-catch捕捉一下将异常处理就行了，在js里面呢其实也是一样的，例如下面的例子...length' of null 这句话也就是我们处理异常的时候写的，也是最常见的一种，这个函数叫做有参函数，那么我们捕捉的是参数会不会有问题，如果有问题我们就将异常捕捉出来，这是很常规的一种写法，今天我们要说的是异常传播是什么意思呢...其实我们在写js函数的时候很多的时候不会是一个函数，会有很多的函数接连的调用，那么任何一个函数出问题其实都是应该捕捉的，理论上是这样的是吧，但是这样写代码的话就很麻烦了，所以就出现了下面这样的代码：

7291 0

深入理解Js中的this

深入理解Js中的this JavaScript作用域为静态作用域static scope，但是在Js中的this却是一个例外，this的指向问题就类似于动态作用域，其并不关心函数和作用域是如何声明以及在何处声明的...作用域我们先来了解一下JavaScript的作用域，以便理解为什么说this更类似于动态作用域，通常来说，一段程序代码中所用到的名字并不总是有效或可用的，而限定这个名字的可用性的代码范围就是这个名字的作用域...JavaScript在栈内存中提供一个供Js代码执行的环境，关于作用域以及函数的调用都是栈内存中执行的。...Js中基本数据类型String、Number、Boolean、Null、Undefined、Symbol，占用空间小且大小固定，值直接保存在栈内存中，是按值访问，对于Object引用类型，其指针放置于栈内存中...这个函数也是存在于堆内存中的，实际上在此处我们可以将其理解为这个函数的实际定义在一个内存区域(以一个匿名函数的形式存在)，而obj这个对象同样在其他的一个内存区域，obj通过say这个属性指向了这个匿名函数的内存地址

4371 0

前端常见算法的JS实现

arr[i]; while(i<j){ while(ix) j--; if(i<j) //这里用i++，被换过来的必然比...arr[i++] = arr[j]; while(i<j && arr[i]<x) i++; if(i<j) //这里用j--，被换过来的必然比...var re = /[\W_]/g; // 将字符串变成小写字符,并干掉除字母数字外的字符 var lowRegStr = str.toLowerCase().replace(re,'');...// 如果字符串lowRegStr的length长度为0时，字符串即是palindrome if(lowRegStr.length===0) return true; // 如果字符串的第一个和最后一个字符不相同

7033 0

nodejs与前端js的区别

很多前端程序员想玩nodejs开发，认为这是前端的一股趋势，但真正能从前端js过渡到nodejs的却是凤毛麟角，而看似和nodejs扯不上关系的后端程序员反而玩的不亦乐乎。...这于理不合，写js向来是前端程序员的拿手好戏，但为什么一碰到nodejs，前端程序员反而不知所措了呢？...因此我认为，前端开发中使用的js和nodejs之间，重点不是js，而是利用js开发的程序的种类的区别。...进行前端开发工作需要掌握技能有html、 css、js以及各种前端框架，把这些技术玩6就可以成为一名合格的前端开发工作者而进行nodejs开发，需要掌握js、web服务器原理、关系数据使用，如果玩想玩的深一点...而前端工程师，通常对于web服务器和关系数据库完全是陌生的，而掌握这两项技术可不比掌握js的使用来的轻松。

4.5K9 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭