重构箭头函数，使其与IE兼容 - 腾讯云开发者社区

文章/答案/技术大牛

发布

普通函数与箭头函数

一、区别箭头函数是匿名函数，不能作为构造函数，不能使用new let FunConstructor = () => { console.log('lll'); } let fc = new...FunConstructor(); 箭头函数不绑定arguments，取而代之用rest参数...解决 function A(a){ console.log(arguments); } A(1,2,3,4,5,8...is not defined let C = (...c) => { console.log(c); } C(3,82,32,11323); // [3, 82, 32, 11323] 箭头函数不绑定...function() { return ()=>{ console.log(this.a); //10 } } } obj.b(); obj.c()(); 箭头函数通过...箭头函数比较特殊没有调用者，不存在this.箭头函数()的概念，但是它内部可以有this，而内部的this由上下文决定例子1： var o = { user:"追梦子", fn:function

1.3K4 0

箭头函数与this指向探究

——柴陵郁禅师今天研究了下箭头函数与this，发现了一些挺好玩的特性首先，我们在控制台输入上这段js var handler = { name :'handler', init...// init4: {name: 'handler', init: ƒ} } init3.apply(); }, }; handler.init(); 可以明显的看到，箭头函数是锁定了...this指向的，这里的箭头函数中的this都指向这个handler对象而使用function声明的函数中的this永远指向外部的window对象我们再到webpack构建的vue项目中尝试 printThis...options: {…}, _renderProxy: Proxy, _self: VueComponent, …} print6.call(); }; print5(); } 可以看到这里的箭头函数中的...this都为undefined 而使用function声明的函数仍然指向当前Vue组件实例了解这个特性，能清楚this的具体指向，方便后续前端开发

5761 0

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

是的

没有找到

箭头函数与普通函数的区别？

以下是箭头函数和普通函数的主要区别： 1：语法简洁性：箭头函数具有更简洁的语法形式，可以帮助减少代码量。它使用箭头（=>）来定义函数，省略了function关键字和大括号。...// 普通函数 function sum(a, b) { return a + b; } // 箭头函数 const sum = (a, b) => a + b; 2：this绑定：箭头函数没有自己的...这意味着在箭头函数内部，this的值与外部的上下文保持一致，并且无法通过调用方式来改变this的指向。...但是箭头函数没有自己的arguments对象，它会继承外部函数的arguments对象。...：普通函数可以用作构造函数来创建新的对象实例，而箭头函数不能使用new关键字来创建对象。

6702 0

箭头函数与普通函数的区别

01 【从定义方式来看】【普通函数】定义普通函数的方式通常有函数声明和函数表达式：【箭头函数】箭头函数是普通函数的语法糖（使用语法糖能够增加程序的可读性，从而减少程序代码出错的机会），书写要更加简洁...【箭头函数】无论是严格模式还是非严格模式下，this始终指向window：箭头函数没有自己的执行上下文，this指向是在定义函数时就被确定下来的，箭头函数中的this，永远指向外层作用域中最接近自己的普通函数的...箭头函数会忽略任何形式的this指向的改变（bind、call、apply等方式无法改变箭头函数的this指向），箭头函数的this指向是静态的： 03 【从构造函数来看】【普通函数】通过new关键字调用普通函数...（作为构造函数），this指向被创建出来的对象实例：【箭头函数】箭头函数不能当做构造函数来使用： 04 【从arguments对象来看】【普通函数】在普通函数中，arguments是类数组对象...，保存着函数执行时传入的参数：【箭头函数】箭头函数没有arguments： 05 【补充】箭头函数没有prototype属性箭头函数不能当做Generator函数，不能使用yield关键字

1.1K2 0

箭头函数与普通函数的区别详解

箭头函数和普通函数的区别一.外形不同：箭头函数使用箭头定义，普通函数中没有代码实例如下： // 普通函数 function func(){ // code } // 箭头函数 let func...=()=>{ // code } 二.箭头函数都是匿名函数普通函数可以有匿名函数，也可以有具体名函数，但是箭头函数都是匿名函数。...1.箭头函数本身不创建this 也可以说箭头函数本身没有this，但是它在声明时可以捕获其所在上下文的this供自己使用。...但是箭头函数并没有此对象。...（2）.箭头函数不具有prototype原型对象。（3）.箭头函数不具有super。（4）.箭头函数不具有new.target。

1.3K2 0

JavaScript闭包与箭头函数

箭头函数表达式（也称胖箭头函数, fat arrow function）具有较短的语法相比函数表达式和词法绑定此值。...箭头函数总是匿名的。...有两个因素会影响介绍箭头函数：更简洁的函数 this 更简洁的函数 var a = [ "Hydrogen", "Helium", "Lithium", "Beryllium" ];...var a2 = a.map(function(s){ return s.length }); var a3 = a.map( s => s.length ); this 在箭头函数出现之前，每一个新函数都重新定义了自己的...self.age++; }, 1000); } 另外，创建一个约束函数(bound function)可以使得this值被正确传递给growUp()函数箭头功能捕捉闭包上下文的this值，所以下面的代码工作正常

1.2K2 0

JavaScript的箭头函数与普通函数区别？

一、什么是箭头函数？...箭头函数用更简洁的方式，来完成普通函数的功能，但是不具备普通函数拥有的属性： this 、 arguments 、 super 、 new.target，有两种表达形式： 1、(...args...arguments正确使用： function foo(n) { // 隐式绑定 foo函数的参数与 arguments对象. // arguments[0] 表示传给foo函数的第一个参数...普通函数的this 等于 undefined，无法调用；对象方法的this，指向对象本身。箭头函数，不会定义自己的this，它只会继承自己上一层作用域的this。...alert(this.title + ': ' + student) }); } }; group.showList(); --- 六、参考链接： JavaScript的箭头函数与普通函数区别

9713 0

ES6 箭头函数： () => {} 与匿名函数 function() {}

function foo() { setTimeout( () => { console.log("id:", this.id); },...

4022 0

JavaScript函数篇之ES6箭头函数与匿名函数

当然可以，我们称这种函数为匿名函数，顾名思义，没有名字。箭头函数在ES6版本中，JavaScript加入了一个新的函数，箭头函数。箭头函数是 JavaScript 里的一种新的函数形式。...//普通函数 function add(x, y) { return x + y; } //箭头函数 var add = (x, y) => { return x + y;... } //箭头函数简写 var add = (x, y) => x + y; 其实，他出现的目的是为了简化我们的代码。...箭头函数的this 与常规函数相比，箭头函数对 this 的处理也有所不同。简而言之，使用箭头函数没有对 this 的绑定。...在常规函数中，关键字 this 表示调用该函数的对象，可以是窗口、文档、按钮或其他任何东西。对于箭头函数，this 关键字始终表示定义箭头函数的对象。

6462 0

热点面试题：箭头函数与普通函数的区别？

前言前端小菜鸡一枚，分享的文章纯属个人见解，若有不正确或可待讨论点可随意评论，与各位同学一起学习~ 箭头函数和普通函数的区别？ 1. 箭头函数比普通函数语法更加简洁： 1....箭头函数没有自己的 this 3....箭头函数不能作为构造函数使用：在构造函数 new 的步骤中，有一步是将函数中的 this 指向新的对象，在箭头函数中，因为没有自己的 this，且 this 指向外层的执行环境，且不能改变指向，所以不能当成构造函数使用...箭头函数没有自己的 arguments 7. 箭头函数没有原型 prototype 8....箭头函数不能用于语法糖 Generator，不能使用 yeild 关键字文章特殊字符描述 •问题标注 Q:(question)•答案标注 R:(result)•注意事项标准：A:(attention

2431 0

事件冒泡怎么解决，与ie的兼容又怎么解决

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="vie...

9032 0

重走前端路JS进阶篇：This 指向与箭头函数

箭头函数不会绑定this、arguments属性箭头函数不能作为构造函数来使用 // {} 是执行体 var arrFn = () => { } // 指向的是对象需要加小括号才可以做到...var arrFn = () => ({ name: "why" }) 箭头函数基本写法 ()：函数的参数 {}:函数的执行体 var foo3 = (name, age) => {...console.log("箭头函数的函数体") console.log(name, age) } 优化写法只有一个参数时, 可以省略() names.forEach...var res = ["abc", "cba", "nba"] callbackFn(res) } obj.getData() 总结 this的指向问题与优先级...是踏入JS的敲门砖，如果不先系统了解之后使用的时候可能会出现奇怪的错误使用ES6的语法箭头函数提前熟悉ES6语法可以提升开发效率

9593 0

箭头函数与普通函数（function）的区别是什么？构造函数（function）可以使用 new 生成实例，那么箭头函数可以吗？为什么？

基本不同 1.写法不同，箭头函数使用箭头定义，普通函数中没有 .箭头函数都是匿名函数，普通函数可以有匿名函数，也可以有具体名函数，但是箭头函数都是匿名函数。...在普通函数中，this总是指向调用它的对象，如果用作构造函数，this指向创建的对象实例。箭头函数中没有this,声明时捕获其所在上下文的this供自己使用。...所以箭头函数结合call(),apply()方法调用一个函数时，只传入一个参数对this没有影响。...，不能使用new 关键字，因为new关键字是调用函数对象的constructor属性，箭头函数中没有该属性，所以不能new function fn1(){ console.log...arguments，取而代之用rest参数…解决 6.箭头函数不可做Generator函数

2.9K1 0

WebSocket 学习笔记--IE，IOS，Android等设备的兼容性问题与代码实现

对WebSocket的支持问题这里有必要单独拿出来说，IE10以后才支持HTML5，因此也要这个版本后的浏览器才支持WebSocket，所以默认的Win7下面的浏览器都没法支持。...我测试用的是Win8.1的IE11，可以支持WebSocket，效果跟FireFox、Chrome一样，但有一个恼火的问题，IE的WebSocket它会自动向服务器端发起“心跳包”，而此时服务端使用SockeAsyncEventArgs...中实现websocket http://xuepiaoqiyue.blog.51cto.com/4391594/1285791 但同事说，这些方法用过了，就是现在测试的效果，跟真正的WebSocket 兼容得不好...localhost:1818/chat ws.onopen = function(event){alert("已经与服务器建立了连接...){alert("接收到服务器发送的数据：\r\n"+event.data);}; ws.onclose = function(event){alert("已经与服务器断开连接

3.5K8 0

【C++】多态 ① ( 类型兼容性原则与函数重写 | “ 多态 “ 引入 | 函数重写 )

一、类型兼容性原则与函数重写 1、" 多态 " 引入在面向对象中 , " 多态 " 是设计模式的基础 , 是软件框架的基础 ; 面向对象的三大特征是逐步递进的 , 封装 -> 继承 ->..., 可以使用域作用符父类名称 :: 被重写的函数() 的方式进行调用 ; 3、类型兼容性原则的几类情况被重写的函数 , 遇到类型兼容性原则时 , 调用的函数是子类重写的函数 , 还是...子类对象 , 查看调用重写函数的执行效果 ; 4、父类与子类示例在父类和子类中 , 都定义了 print 函数 , 子类重写父类的该函数 ; // 父类 class Parent...将 Parent 引用指向子类对象 // 结果 - `父类 : x = 1` Parent& p3 = child; p3.print(); 二、完整代码示例 - 类型兼容性原则与函数重写 1...函数仍然是父类的 print 函数 // 这是类型兼容性原则导致的结果 p = &child; p->print(); // 5.

4714 0

还在纠结用不用ES6，不如来试试TypeScript

ES6特性兼容性箭头函数支持类的声明和继承部分支持，IE8不支持增强的对象字面量支持字符串模板支持解构支持，但注意使用方式参数默认值，不定参数，拓展参数支持 let与const...支持 for of IE不支持 iterator, generator 不支持模块 module、Proxies、Symbol 不支持 Map，Set 和 WeakMap，WeakSet 不支持 Promises...兼容性与规范。...箭头函数 ts: var add = (a, b) => a + b; javascript var add = function (a, b) { return a + b; }; 增强对象字面量 ts...类型可以让你更敏捷地重构代码（比如可以利用 VS 自动重构）。可以在编译阶段更容易的发现错误，而不是放在运行时。类型是一种良好的文档形式。

1.1K0 0

低版本浏览器兼容方案：IE11 适配 ES6 语法与 CSS 新特性

低版本浏览器兼容方案：IE11 适配 ES6 语法与 CSS 新特性面向仍需支持 IE11 的项目，目标是在不牺牲核心可用性的前提下，对 JS 的 ES6 语法与常用 Web API、以及 CSS 的现代特性做可控的转译...兼容原则明确范围：页面可正常加载、主要交互可用、视觉允许有限降级优先工程化：构建期转译为主，运行期垫片为辅面向能力：特性检测优先于 UA 检测，按需启用降级可回归：用自动化与手动清单覆盖关键路径...的兼容关键在于构建期的系统性配置与运行期的必要垫片，再辅以清晰的视觉与交互降级策略。...('closest' in Element.prototype)) { await import('element-closest') } 事件与 DOM 兼容清单 Passive 事件：IE11 不支持...，避免相互覆盖迁移执行清单明确兼容范围与验收标准补充 .browserslistrc 并统一构建配置引入核心垫片与按需策略审计并转译第三方依赖建立视觉与交互的降级样式完成关键路径的 IE11

3481 0

大前端进阶篇：es6语法中对象简写，箭头函数与对象操作符

console.log("我骑小黄车") } } es6简写应为对象k,v存在如果key和变量名字一致，可以省略括号指定一次即可如果value 是一个函数...对象操作符 … …操作符：可以将一个对象的值赋值给另一个对象，也可以选择性的赋值可以通过括号选中出不想传输给其他对象的属性，之后通过 …操作符把对象剩下的属性或者函数给另一个对象

1.3K2 0

面试题每日一练，测测你对JavaScript箭头函数与arguments对象的理解

今天的挑战题目考察了JavaScript中箭头函数和 arguments 对象的使用。让我们一起分析这段代码的行为。...代码分析 const func = () => arguments.length; console.log(func(1, 2, 3)); 箭头函数与 arguments 对象：在JavaScript...传统的函数表达式和函数声明中可以访问 arguments 对象。然而，箭头函数没有自己的 arguments 对象。它会从其外层作用域中继承 arguments。...为什么会出错：当你调用 func(1, 2, 3) 时，JavaScript 会尝试在箭头函数内部访问 arguments。...不论是在严格模式还是非严格模式下，这段代码都会抛出相同的错误，因为 arguments 变量在箭头函数的上下文中是不可用的。

3331 0

html 鼠标形状箭头,CSS各种鼠标样式介绍

ne-resize：向右上方的箭头 n-resize：向上的箭头 nw-resize：向左上方的箭头 w-resize：向左的箭关 sw-resize：向左下的箭头 s-resize：向下的箭头 se-resize...鉴于ie5系列基本无人问津，我们选择“手型”可以选择“pointer”属性，这样就兼容了市场上99%的浏览器。...当然非要兼容ie6以下浏览器，我们可以选择这样的css hack:{cursor:pointer;cursor:hand;} 讲到这，我想大家应该已经掌握了系统自带的cursor样式，接下来我将为大家重点讲解如何自定义...cursor样式并兼容各大浏览器。...顺便给出 viewpage() 函数的代码 function viewpage(p) { if(window.XMLHttpRequest) { var xmlReq = new XMLHttpRequest

9.5K2 0

点击加载更多

普通函数与箭头函数

箭头函数与this指向探究

箭头函数与普通函数的区别？

箭头函数与普通函数的区别

箭头函数与普通函数的区别详解

JavaScript闭包与箭头函数

JavaScript的箭头函数与普通函数区别？

ES6 箭头函数： () => {} 与匿名函数 function() {}

JavaScript函数篇之ES6箭头函数与匿名函数

热点面试题：箭头函数与普通函数的区别？

事件冒泡怎么解决，与ie的兼容又怎么解决

重走前端路JS进阶篇：This 指向与箭头函数

箭头函数与普通函数（function）的区别是什么？构造函数（function）可以使用 new 生成实例，那么箭头函数可以吗？为什么？

WebSocket 学习笔记--IE，IOS，Android等设备的兼容性问题与代码实现

【C++】多态 ① ( 类型兼容性原则与函数重写 | “ 多态 “ 引入 | 函数重写 )

还在纠结用不用ES6，不如来试试TypeScript

低版本浏览器兼容方案：IE11 适配 ES6 语法与 CSS 新特性

大前端进阶篇：es6语法中对象简写，箭头函数与对象操作符

面试题每日一练，测测你对JavaScript箭头函数与arguments对象的理解

html 鼠标形状箭头,CSS各种鼠标样式介绍

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐