为什么绑定道具不起作用，而使用箭头函数起作用？

绑定道具不起作用，而使用箭头函数起作用的原因是因为箭头函数具有词法作用域绑定，而不是动态作用域绑定。

在JavaScript中，函数的作用域是由函数被定义时的位置决定的，而不是函数被调用时的位置。当使用箭头函数时，它会继承父级作用域的上下文，而不是创建一个新的作用域。这意味着箭头函数内部的this关键字会指向定义箭头函数的上下文，而不是调用箭头函数的上下文。

相比之下，使用普通函数时，函数内部的this关键字会根据函数的调用方式动态绑定。如果函数被作为对象的方法调用，this将指向该对象；如果函数被独立调用，this将指向全局对象（在浏览器中是window对象）；如果函数使用apply()或call()方法调用，this将根据传入的参数进行绑定。

因此，当绑定道具不起作用时，可能是因为绑定的函数使用了普通函数而不是箭头函数，导致this关键字的绑定出现问题。而使用箭头函数时，由于它的词法作用域绑定特性，可以确保this关键字指向正确的上下文，从而起到预期的作用。

需要注意的是，箭头函数也有一些限制，例如不能作为构造函数使用，不能使用arguments对象等。因此，在选择使用箭头函数还是普通函数时，需要根据具体的需求和场景进行权衡和选择。

腾讯云相关产品和产品介绍链接地址：

云函数（Serverless）：https://cloud.tencent.com/product/scf
云开发（CloudBase）：https://cloud.tencent.com/product/tcb
云服务器（CVM）：https://cloud.tencent.com/product/cvm
云数据库（CDB）：https://cloud.tencent.com/product/cdb
云存储（COS）：https://cloud.tencent.com/product/cos
人工智能（AI）：https://cloud.tencent.com/product/ai
物联网（IoT）：https://cloud.tencent.com/product/iotexplorer
区块链（BCS）：https://cloud.tencent.com/product/bcs
音视频处理（VOD）：https://cloud.tencent.com/product/vod
网络安全（SSL）：https://cloud.tencent.com/product/ssl

相关·内容

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

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

1.8K1 0

如何修复Vue中的 “this is undefined” 问题

一个可能的原因是混淆了常规函数和箭头函数的用法，如果你遇到这个问题，我猜你用的是箭头函数。如果用常规函数替换箭头函数，它可能会为你修复这个问题。我们再深入一点，试着理解为什么会这样。...等等，我们不是刚发现当我们试图访问 this 时，箭头函数不起作用吗? 这就是区别所在。当我们在常规函数或简写函数中使用箭头函数时，常规函数将this设置为我们的Vue组件，而箭头函数则不一样。...由于此方法是常规函数（而不是箭头函数），因此将其自身的上下文设置为Vue实例。让我们进一步讨论如何使用axios或fetch来获取数据。...这可能会让人很困惑，所以大多数语言都只使用词法作用域。箭头函数使用词法作用域，而常规函数和简写函数不使用。这里最棘手的部分是词法作用域如何在函数中影响 this。...对于箭头函数，this与外部作用域的this绑定在一起。常规函数的this绑定方式有些奇怪，这就是引入箭头函数的原因，也是为什么大多数人尽可能多地使用箭头函数的原因。

4.9K2 0

ES6--对象、函数的扩展

来规避，如下： function log(x, y) { y = y || 'World'; console.log(x, y); } 但上述存在一个问题，当y对应的布尔值为false，则该赋值不起作用...（1）使用语法方式一：单一参数的单行箭头函数语法：arg => statement 示例： const fn = x => x + 1; fn(1); // 2 方式二：多参数的单行箭头函数...this.name); } }; var sayname = obj.sayName(); sayname(); // "obj" sayname.call(obj); // "obj" （3）注意事项箭头函数对上下文的绑定是强制的...见上述示例因为箭头函数绑定上下文的特性，故不能随意在顶层作用域使用箭头函数 var name = "window"; var obj = { name: "obj", sayName: ()...，会跟随上下文绑定到上层，所以在不确定上下文绑定结果的情况下，尽可能不要在箭头函数中使用arguments，而要使用…args。

4543 1

JavaScript 中 this 的使用技巧总结

setTimeout 的另一个坑之前啊说过，如果直接执行回调函数而没有绑定作用域，那么它的 this 是指向全局对象(window)，在严格模式下会指向 undefined，然而在setTimeout...箭头函数在 ES6 的新规范中，加入了箭头函数，它和普通函数最不一样的一点就是 this 的指向了，还记得我们使用闭包来解决 this 的指向问题吗，如果用上了箭头函数就可以更完美的解决了： ?...this对象，就是定义时所在的对象，而不是使用时所在的对象。...打印出来的是 Person 实例化出来的对象，而和 obj 没有关系，而 obj 也没有发生变化，说明，我们给 Person 指定 this 上下文并没有生效；因此可以得出：使用 bind 给一个构造函数指定...可以看到，虽然指定 this 不起作用，但是传入参数还是起作用了；为箭头函数指定 this 我们来定义一个全局下的箭头函数，因此这个箭头函数中的 this 必然会指向全局对象，如果用 call 方法改变

8523 0

拉格朗日对偶问题与神经网络

带箭头的直线是梯度方向，蓝色的是目标函数各个点的梯度方向，红色的是不等式约束函数的梯度方向。虽然圆的中心点最小，但它不在不等式满足的范围内，我们要的是在满足不等式的范围内找最小。...$x^*$只属于$g_α(x)$和$g_β(x)$这两条直线上，其他的三条直线是不起作用的。...虽然 $g_α(x^*)$=$g_β(x^*)$=0，但它们的梯度并不为0，见上图中两个橙色箭头的直线，蓝色箭头的直线为目标函数的梯度方向。...其他三个约束条件由于不起作用，$g_i$($x^*$)<0,i≠α,β，则它们对应的$λ_i$=0,i≠α,β，因为它们要满足KKT的互补松弛条件$λ_i$ $g_i$($x^*\...这三个不起作用的约束条件函数的梯度从上图中可以看到，它们两两的交点梯度和都跟目标函数的梯度同向，不可能构成相反的方向达到相加为0的效果，所以它们的调节因子\(λ_i$只能调节到0，以满足KKT条件∇f

4381 0

antd-design Form，Select联合使用 placeholder 不起作用问题

Contents 1 antd-design Form，Select联合使用 placeholder 不起作用问题 1.1 起因 1.2 排查 1.3 补充： antd-design Form，Select...联合使用 placeholder 不起作用问题起因最近在用antd写表单的时候遇到个问题:Form,Select组件一起使用时,设置Select组件的placeholder属性并没有起作用。...发现Select组件的placeholder属性并没有起作用。...对表单内的组件使用onChange合成事件不介意使用setState以及value为组件绑定值，介意使用initialValue设置初始化值。所以我这里写的也是没问题的。...补充：来自antd issuesSelect 控件为什么会把 null 当做有 value 而不显示 placeholder ，必须要为 undefined 才可以？

1.9K2 0

vue2脚手架之自定义组件的总结

vue-cli这个构建工具大大降低了webpack的使用难度，支持热更新，有webpack-dev-server的支持，相当于启动了一个请求服务器，给你搭建了一个测试环境，只关注开发就OK。...注意：如果我们只写（@click=“xxx”）是不起作用的，我们必须这样写： @click.native="xxx" 展示结果：但我们绑定完一个点击事件给子组件时，点击组件的范围就会出现相应的结果...自定义组件的总结： 1.一种组件通信的方式，适用于：子组件====>父组件 2.使用场景：A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（事件的回调在A中）。...$off('atlqj') 6.组件上也可以绑定原生DOM事件，需要使用native修饰符。 7.注意：通过this.$refs.xxx....$on('atguigu',回调)绑定自定义事件时，回调要么配置在methods中，要么用箭头函数，否则this指向会出问题！

6933 0

社招前端二面react面试题集锦

在组件尚未挂载之前，Ajax请求将无法执行完毕，如果此时发出请求，将意味着在组件挂载之前更新状态（如执行 setState），这通常是不起作用的。...redux有什么缺点一个组件所需要的数据，必须由父组件传过来，而不能像flux中直接从store取。...为什么它很重要？组件状态数据或者属性数据发生更新的时候，组件会进入存在期，视图会渲染更新。...（1）当使用箭头函数作为map等方法的回调函数时，箭头函数的作用域是当前组件的实例化对象（即箭头函数的作用域是定义时的作用域），无须绑定作用域。（2）事件回调函数要绑定组件作用域。...createClass方式的方法定义使用逗号，隔开，因为creatClass本质上是一个函数，传递给它的是一个Object；而class的方式定义方法时务必谨记不要使用逗号隔开，这是ES6 class的语法规范

2K6 0

【19】进大厂必须掌握的面试题-50个React面试

React的主要功能如下：它使用虚拟DOM而不是真实DOM。它使用服务器端渲染。它遵循单向数据流或数据绑定。 4.列出React的一些主要优点。...一旦完成计算，将仅使用实际已更改的内容来更新实际DOM。 8.为什么浏览器无法阅读JSX？浏览器只能读取JavaScript对象，而不能读取普通JavaScript对象中的JSX。...React中的箭头功能是什么？如何使用？箭头函数是用于编写函数表达式的简短语法。它们也称为“胖箭头”（=>）函数。这些功能允许正确绑定组件的上下文，因为默认情况下在ES6中自动绑定不可用。...箭头函数在使用高阶函数时最有用。...但是在语法上存在一些差异，例如：事件使用驼峰式大小写而不是仅使用小写字母命名。事件是作为函数而不是字符串传递的。事件参数包含一组特定于事件的属性。

11.1K3 0

Vue 选手转 React 常犯的 10 个错误，你犯过几个？

但是，它并不起作用！当我们输入一个项目并提交表单时，该项目没有被添加到购物清单中。问题就在于我们违反了也许是 React 中最核心的原则 —— 不可变状态。...这也是为什么 react 允许您将任何对象置于状态（无论有多大）而没有额外的性能或正确性陷阱。...例如，如果你使用了 class 而不是 className。...const res = await fetch(url); const json = await res.json(); setUser(json); }, [userId]); 不幸的是，这仍然不起作用...按照上面那种写法，箭头函数直接指向就是返回值，就相当于是返回了一个promise函数了，就不再是一个清理函数了。

1921 0

键盘失灵，鼠标正常

【问题现象】键盘无法使用，按键不起作用，只有鼠标可以操作【产生原因】无意中启用了筛选键导致【排查步骤】 1.查看设备管理器，未见其他明显异常； ...2.准备尝试下软键盘是否起作用，结果在机器右下方任务管理器向上箭头处藏着2个特殊图标：1个是启用了筛选键，另1个是启用了鼠标键，有疑点；图片图片 3.去掉筛选键和鼠标键勾选之后，立即重试键盘问题依旧...，重启机器问题解决； 4.找测试机分别验证筛选键和鼠标键，发现是启用了筛选键导致键盘不起作用。

2K1 0

python 面向对象技巧slots

python面向对象技巧使用__slots__ 正常情况下，当我们定义了一个class，创建了一个class的实例后，我们可以给该实例绑定任何属性和方法，这就是动态语言的灵活性。...动态给实例绑定一个属性 >>> print(s.name) Michael 还可以尝试给实例绑定一个方法： >>> def set_age(self, age): # 定义一个函数作为实例方法 ......>>> s.set_age(25) # 调用实例方法 >>> s.age # 测试结果 25 但是，给一个实例绑定的方法，对另一个实例是不起作用的： >>> s2 = Student() # 创建新的实例...使用__slots__ 但是，如果我们想要限制实例的属性怎么办？比如，只允许对Student实例添加name和age属性。...使用__slots__要注意，__slots__定义的属性仅对当前类实例起作用，对继承的子类是不起作用的： >>> class GraduateStudent(Student): ...

4922 0

TS_React:使用泛型来改善类型

箭头函数在jsx中的泛型语法在前面的例子中，我们只举例了如何用泛型定义常规的函数语法，而不是ES6中引入的箭头函数语法。...// ES6的箭头函数语法 const identity = (arg) => { return arg; }; 原因是在使用JSX时，TypeScript 对箭头函数的处理并不像普通函数那样好。...// 不起作用 const identity = (arg: ArgType): ArgType => { return arg; } // 不起作用 const identity...= (arg: ArgType): ArgType => { return arg; } 上面两个例子，在使用JSX时，都不起作用。...如果想要在处理箭头函数，需要使用下面的语法。

5.1K2 0

《你不知道的JavaScript》：this 绑定规则的例外情况与总结

fn的引用，因此调用位置是fn()而不是p.fn()。...例外情况4：箭头函数在ES6中，箭头函数对this的对象绑定作用机制完全不一样。箭头函数并不是使用function关键字定义的。而是根据 => 操作符定义的。...箭头函数不使用常规函数this的四种标准绑定规则，而是根据外层(函数或全局)作用域来决定this绑定，并且一旦绑定就不可修改，即使是new绑定也不行。...可以看到，fn函数返回一个箭头函数，根据箭头函数this的绑定规则，这个箭头函数中的this继承自外层函数fn中的this绑定的对象，也即是this绑定对象为obj1。...所以通常来说，绑定函数的this对象，可以使用常规的this机制，也可以使用self=this或箭头函数来否定this机制，具体选哪个，看你更习惯哪种代码风格，没有谁优谁劣的，只要代码写出来注意优雅可维护就好

4701 0

Python实例属性限制(slots)

) Michael 还可以给实例绑定一个方法： def set_age(self, age): #定义一个函数作为实例方法 self.age = age from types import...MethodType s.set_age = MethodType(set_age, s) #给实例绑定一个方法 s.set_age(25) s.age 25 但是，给一个实例绑定的方法，对另一个实例是不起作用的...绑定方法后，所有实例均可调用： s.set_score(100) s.score 100 s2.set_score(99) s2.score 99 只要在class上绑定方法以后，实例就可以直接使用了...使用__slots__ 但是，如果我们想要限制实例的属性怎么办？比如，只允许对Student实例添加name和age实现。...使用__slots__要注意，__slots__定义的属性仅对当前类实例起作用，对继承的子类是不起作用的： class GraduteStudent(Student): pass g = GraduteStudent

1.1K1 0

动态语言-Python1.动态语言的定义

它是一类在运行时可以改变其结构的语言：例如新的函数、对象、甚至代码可以被引进，已有的函数可以被删除或是其他结构上的变化。动态语言目前非常具有活力。...例如JavaScript便是一个动态语言，除此之外如PHP、Ruby、Python等也都属于动态语言，而C、C++等语言则不属于动态语言。...----来自维基百科 1.运行的过程中给对象绑定(添加)属性 ? 运行结果： ? 这里我想给要在运行过程里给对象绑定属性 ? 运行结果： ? 这里实际上就是动态给实例绑定属性！...请使用__slots__， 5....注意: ·使用__slots__要注意，__slots__定义的属性仅对当前类实例起作用，对继承的子类是不起作用的

7442 0

Python types.MethodType动态更改类方法

它是一类在运行时可以改变其结构的语言：例如新的函数、对象、甚至代码可以被引进，已有的函数可以被删除或是其他结构上的变化。...动态语言目前非常具有活力，例如JavaScript便是一个动态语言，除此之外如 PHP 、Ruby 、Python等也都属于动态语言，而 C、C++ 、Java等语言则不属于动态语言。...给P这个实例绑定属性对P1这个实例不起作用！那我们要给所有的Person的实例加上sex属性怎么办呢？答案就是直接给Person绑定属性！...请使用slots。 5.slots 动态语言：可以在运行的过程中，修改代码。静态语言：编译时已经确定好代码，运行过程中不能修改。如果我们想要限制实例的属性怎么办？...slots要注意，slots定义的属性仅对当前类实例起作用，对继承的子类是不起作用的。

2K2 0

事件绑定的几种常见方式

在项目开发中，经常遇到绑定事件不起作用，或者事件绑定多次，导致重复触发。...bind方法　　会给每一个符合selector的元素添加click执行函数，即：将click事件绑定到所有设置了的selector元素上,如果动态添加了元素，之前绑定事件也起作用 live方法　　...alert('你点我了'); }); 】　　唯一的区别在于delegate的性能会比live稍好一些，因为live方法需要遍历整个dom去查selector而delegate...函数　　可能有时候的需求需要触发某个特定事件，这时我们会想当然使用trigger触发事件，但是却没有考虑到带来的隐患。...，绑定事件： document.getElementById('btn').onclick=clickBtn; 3、JS获取DOM对象后，调用对象的addEventListener函数绑定事件

1.8K8 0

Python学习 Day 8 继承多态 Type isinstance dir slots

继承和多态在OOP程序设计中，当我们定义一个class的时候，可以从某个现有的class继承，新的class称为子类（Subclass），而被继承的class称为基类、父类或超类（Base class...在调用类实例方法的时候，尽量把变量视作父类类型，这样，所有子类类型都可以正常被接收；使用type() 判断对象类型，使用type()函数： >>> type(123)#基本类型都可以用type()判断...在Python中，如果你调用len()函数试图获取一个对象的长度，实际上，在len()函数内部，它自动去调用该对象的__len__()方法，所以，下面的代码是等价的： >>> len('ABC') 3...>>> s.age # 测试结果 25 但是，给一个实例绑定的方法，对另一个实例是不起作用的： >>> s2 = Student() # 创建新的实例 >>> s2.set_age(25) # 尝试调用方法...使用__slots__要注意，__slots__定义的属性仅对当前类起作用，对继承的子类是不起作用的： >>> class GraduateStudent(Student): ...

8743 0

【愚公系列】2023年03月其他-Web前端基础面试题（react专项_35道）

29、使用箭头函数(arrow functions)的优点是什么 30、为什么建议传递给 setState 的参数是一个 callback 而不是一个对象 31、 (在构造函数中)调用 **super(...29、使用箭头函数(arrow functions)的优点是什么作用域安全：在箭头函数之前，每一个新创建的函数都有定义自身的 this 值(在构造函数中是新对象；在严格模式下，函数调用中的 this...是未定义的；如果函数被称为“对象方法”，则为基础对象等)，但箭头函数不会，它会使用封闭执行上下文的 this 值。...33、除了在构造函数中绑定 this ，还有其它方式吗你可以使用属性初始值设定项(property initializers)来正确绑定回调，create-react-app 也是默认支持的。...在回调中你可以使用箭头函数，但问题是每次组件渲染时都会创建一个新的回调。

7.6K1 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云