函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象. 箭头函数本身没有this,this继承上级的this. 定时器中箭头函数的this指向包含定时器的函数,所以定时器中的箭头函数要使用外层this的时候,不用借that传递了,正常使用即可 // 为避免频繁点击触发事件,点击之后禁用点击事件,1.5秒后解除 $('#refresh').click(function () { $(this).css('pointer-events', 'none') //定时器的this指向wi…

特型介绍:箭头函数是ES6新增的特性之一,它为JS这门语言提供了一种全新的书写函数的语法. 'use strcit'; let arr = [1,2,3]; //ES5 let es5 = arr.map(function(n){ return n*2; }); //ES6 let es6 = arr.map(n => n*2); console.log(es5); //[2,4,6] console.log(es6); //[2,4,6] 箭头函数简化了原先的函数语法,不需要再写 functi…

1. 箭头函数 函数的简写方式 () => {} 只有一个参数时,可以省略() ---- x => {} 只有一条语句时,可以省略{},此时这点语句的结果会作为函数的返回值返回  () => console.log('hello'); 特点: 箭头函数没有自己的 this,与离他最近的一层包裹它的函数的 this 一致,如果没有函数就指向 window 箭头函数没有 prototype 属性,有 __proto__ 属性 箭头函数不能 new 调用 箭头函数不能强制修改 this 指向…

最近写完小程序后, 开始学习React, 因为有编译器, 就直接用ES6 新语法了, 中间自然离不开  () => { console.log('箭头函数的this是指向哪的问题')}; var obj2 = { id: 2333, test: () => console.log(this) } obj2.test();//window obj2.test.call(obj2);//window 那么我要这里 test函数的this 指向 obj2 是要怎么做呢 来分析下上面代码, 转换成 E…

es5中 this 的指向 var factory = function(){ this.a = 'a'; this.b = 'b'; this.c = { a:'a+', b:function(){return this.a} } }; console.log(new factory().c.b()); // a+ 通过es5的语法调用,返回的是 a+ ,this 的指向是该函数被调用的对象,也就是说函数被调用的时候,这个 this 指向的是谁,哪个对象调用的这个函数,这个 this 就是谁.…

在javscript中,this 是在函数运行时自动生成的一个内部指针,它指向函数的调用者. 箭头函数有些不同,它的this是继承而来, 默认指向在定义它时所处的对象(宿主对象),而不是执行时的对象. var name = "window"; var test = { name:"demo", // 传统函数 getName1: function(){ console.log(this.name); // demo var that = this; setTimeo…

普通函数中的this: 1. this总是代表它的直接调用者, 例如 obj.func ,那么func中的this就是obj 2.在默认情况(非严格模式下,未使用 'use strict'),没找到直接调用者,则this指的是 window 3.在严格模式下,没有直接调用者的函数中的this是 undefined 4.使用call,apply,bind(ES5新增)绑定的,this指的是 绑定的对象 箭头函数中的this 默认指向在定义它时,它所处的对象,而不是执行时的对象, 定义它的时候,可能…

JS中this的四种用法 1.在一般函数方法中使用 this 指代全局对象 function test(){ this.x = 1; alert(this.x); } test(); //1 2.作为对象方法调用,this 指代上级对象 function test(){ alert(this.x); } var o = {}; o.x = 1; o.m = test; o.m(); // 1 3.作为构造函数调用,this 指代new 出的对象 function test(){ this.x =…

在讲箭头函数中的this之前我们先介绍一下普通函数中的this.      普通函数中的this: (1)this指向它的直接调用者 (2)默认的,非严格模式下,没找到直接调用者则指向window (3)严格模式下,没直接调用者的this是undefined (4)使用call,apply,bind绑定对象,则this指向被绑定的对象. ES5中 window.val = 1; var obj = { val: 2, dbl: function () { this.val *= 2; val *…

箭头函数的基本用法与特点 函数与ES6新语法 一.箭头函数的基本用法与特点 声明箭头函数采用声明变量和常量的关键字:var.let.const 箭头函数的参数:没有参数用"()"空括号表示.一个参数可以不写括号.多个参数用"(a,b,c)"括号包裹 使用箭头“=>”连接参数与执行块"{}". 如果执行块内只有return语句,可以不写大括号“{}”和return关键字. //ES6箭头函数 const foo = (x,y) => x…

简要介绍:箭头函数中的this,指向与一般function定义的函数不同,比较容易绕晕,箭头函数this的定义:箭头函数中的this是在定义函数的时候绑定,而不是在执行函数的时候绑定. 1.何为定义时绑定 我们来看下面这个例子: (1) var x=11; var obj={ x:22, say:function(){ console.log(this.x) } } obj.say(); //console.log输出的是22 一般的定义函数跟我们的理解是一样的,运行的时候决定this的指向,我…

一谈到ES6的箭头函数,大家可能想到的优点就是语法更简洁,因为去掉了return.function.{}等输入. 但是设计者果真就是出于简洁的目的推出的箭头函数吗?显然不是.   => 箭头函数this设计的主要目的,以特定的方式改变this的行为特性,解决this相关编码的一个常见的痛点.   => 箭头函数this设计的主要目的,以特定的方式改变this的行为特性,解决this相关编码的一个常见的痛点.   => 箭头函数this设计的主要目的,以特定的方式改变this的行为特性,解…

箭头函数感性认识 箭头函数 是在es6 中添加的一种规范 x => x * x 相当于 function(x){return x*x} 箭头函数相当于 匿名函数, 简化了函数的定义. 语言的发展都是倾向于简洁 对人类友好的, 减轻工作量的. 就相当于我最钟情的python, 有很多类似之处, 在 关于promise 文章中我会和Python 框架中的tornado 中的异步进行对比的, 很相似. 箭头函数有两种格式, 一种只包含一个表达式,没有{…} 和 return . 一种包含多条语句, 这…

<script> { // es3,es5 var evens = [1, 2, 3, 4, 5]; var odds = evens.map(function (v) { return v + 1; }); console.log(evens, odds); } { // es6 let evens = [1, 2, 3, 4, 5]; let odds = evens.map(v => v + 1); console.log(evens, odds); } /* * this指向的是…

箭头函数会改变this的指向,这个大家看文档都看到过,可是有没有具体理解呢?我发现自己应该可能大概是......emmmm,然后我整理了一遍,加强一下概念吧顺带再讲一下setTimeout这个函数改写this的概念 首先分别讲一下两位主角 箭头函数:都2019年了,大家肯定不陌生了,用法很简单,可以自行百度,箭头函数有一个很大的特性是会改写内部的this指向,那么实际运用的过程中你考虑过注意过这个问题吗?箭头函数内部的this会指向声明箭头函数时所在作用域的this(划重点!!接下来要记住!)…

一.说明 ECMAScript6可以用箭头"=>"定义函数.x => x * x或(x) => {return x * x;}与匿名函数function(x){return x * x;}相等. 二.示例 2.1 没有参数的箭头函数 var f = () => 9; console.log(f()); //9 2.2 一个参数的箭头函数 var f = x => x * x; console.log(f(3)); //9 var f = x => {…

定义时所处的对象就是它的this 看外层是否有函数 如果有,外层函数的this就是内部箭头函数的this 如果没有,this就是window let obj = { name : '箭头函数', getName : () => { setTimeout(() => { // 这里this指向window // 可以理解成下面这种形式 console.log(this); }, ); } }; // 指向window的原因 // obj.getName = () => { // conso…

 壹 ❀ 引 在本文之前我已经花了两个篇幅专门介绍了JavaScript中的闭包与this,正好今早地铁上看到了两道面试题,试着做了下发现挺有意思,所以想单独写一篇文章来记录解析过程.若你对于闭包与this有所了解,不妨先看自己的理解是否正确,若你对于这部分知识欠缺,还是建议先阅读我前面的两篇文章,链接在下: 一篇文章看懂JS闭包,都要2020年了,你怎么能还不懂闭包? js 五种绑定彻底弄懂this,默认绑定.隐式绑定.显式绑定.new绑定.箭头函数绑定详解 那么本文开始.  贰 ❀ 题一 /…

 壹 ❀ 引 可以说this与闭包.原型链一样,属于JavaScript开发中老生常谈的问题了,百度一搜,this相关的文章铺天盖地.可开发好几年,被几道this题安排明明白白的人应该不在少数(我就是其一).我觉得this概念抽象,变化多端总是让人晕头转向,但平心它并不是有多难,今天我们就从this绑定的五种场景(默认绑定.隐式绑定.显式绑定.new绑定.箭头函数绑定)出发,静下心来好好聊聊这个 this,本文开始.  贰 ❀ this默认绑定 this默认绑定我们可以理解为函数调用时无任何调用…

以下来文字来自阮大神所著书籍摘记.为了加深记忆.本人就手动敲了一遍(相关代码本人也执行过,可保证运行通过.) 箭头函数注意事项: 1) 函数体内的this对象就是定义时所在的对象,而不是使用时所在的对象. 2) 不可以当做构造函数.也就是说,不可以使用new命令,否则会抛出错误. 3)不可以使用arguments对象,该对象在函数体内不存在.如果要用,可以用rest参数代替. 关于什么是arguments对象.可以参考MDN链接https://developer.mozilla.org/en-U…

函数变化: 1.函数默认参数 2.函数参数默认是已经定义了,不能再使用let.const声明 3.扩展运算符.rest运算符 ...就是扩展运算符,它的作用就是把数组给展开 结合函数使用传参,也可以将数组给收回来 ----------------------------------------------------------------------------------------- 案例:数组排序 ---------------------------------------------…

写法不同 // function的写法 function fn(a, b){ return a+b; } // 箭头函数的写法 let foo = (a, b) =>{ return a + b } this的指向不同 在function中,this指向的是调用该函数的对象: //使用function定义的函数 function foo(){ console.log(this); } var obj = { aa: foo }; foo(); //Window obj.aa() //obj {…

目录 壹 ❀ 引 贰 ❀ this默认绑定 叁 ❀ this隐式绑定 1.隐式绑定 2.隐式丢失 肆 ❀ this显式绑定 伍 ❀ new绑定 陆 ❀ this绑定优先级 柒 ❀ 箭头函数的this 捌 ❀ 总 壹 ❀ 引 可以说this与闭包.原型链一样,属于JavaScript开发中老生常谈的问题了,百度一搜,this相关的文章铺天盖地.可开发好几年,被几道this题安排明明白白的人应该不在少数(我就是其一).我觉得this概念抽象,变化多端总是让人晕头转向,但平心它并不是有多难,今天我们就…

ES6 箭头函数 this 指向 箭头函数有几个使用注意点: 函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象. 不可以当作构造函数,也就是说,不可以使用new命令,否则会抛出一个错误. 不可以使用arguments对象,该对象在函数体内不存在.如果要用,可以用 Rest 参数代替. 不可以使用yield命令,因此箭头函数不能用作 Generator 函数. 上面四点中,第一点尤其值得注意.this对象的指向是可变的,但是在箭头函数中,它是固定的. function foo(…

箭头函数有几个使用注意点. (1)函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象. (2)不可以当作构造函数,也就是说,不可以使用new命令,否则会抛出一个错误. (3)不可以使用arguments对象,该对象在函数体内不存在.如果要用,可以用Rest参数代替. (4)不可以使用yield命令,因此箭头函数不能用作Generator函数. 上面四点中,第一点尤其值得注意.this对象的指向是可变的,但是在箭头函数中,它是固定的. function foo() { setTi…

项目开发中一些常用的es6知识,主要是为以后分享小程序开发.node+koa项目开发以及vueSSR(vue服务端渲染)做个前置铺垫. 项目开发常用es6介绍 1.块级作用域 let const 2.箭头函数及this指向 3.promise. 4.async await语法 4.模块化 module export和import 5.解构赋值.字符串模板 …… 箭头函数 顾名思义 用箭头 “ => ” 定义函数 //es5的函数 var fn = function(num) { return n…

一. 箭头函数 箭头函数是ES6语法中加入的新特性,而它也是许多开发者对ES6仅有的了解,每当面试里被问到关于"ES6里添加了哪些新特性?"这种问题的时候,几乎总是会拿箭头函数来应付.箭头函数,=>,没有自己的this , arguments , super , new.target ,"书写简便,没有this"在很长一段时间内涵盖了大多数开发者对于箭头函数的全部认知(当然也包括我自己),如果只是为了简化书写,把=>按照function关键字来解析就好了…

今天注意到前端小伙伴用react 定义component class的方法的时候是通过箭头函数的方式,表示好奇. class Test extends React.Component { public fun1 = () => { console.log(this); }; fun2() { console.log(this); } } 如上代码中fun1的定义方式.于是感到好奇,fun1中的this是什么. 如果我们套用箭头函数的概念,我们可能认为,这中间的this是否会指向环境变量globa…

首先复习下普通函数里的this指向: function test(){ console.log(this) } test() 你会秒杀的毫无疑问的回答:window,针对普通函数:谁调用了函数  函数里的this就指向谁,test()等价于window.test(),所以是window var name="outername" var o={ name:"innername", getname:function(){ console.log(this.name) }…

前言 this 指向问题是入坑前端必须了解知识点,现在迎来了ES6时代,因为箭头函数的出现,所以感觉有必要对 this 问题梳理一下,遂有此文 在非箭头函数下, this 指向调用其所在函数的对象,而且是离谁近就是指向谁(此对于常规对象,原型链, getter & setter等都适用):构造函数下,this与被创建的新对象绑定:DOM事件,this指向触发事件的元素:内联事件分两种情况,bind绑定, call & apply 方法等, 容以下一步一步讨论.箭头函数也会穿插其中进行讨论.…