方法.bind到某个对象,方法中使用this

最新推荐文章于 2024-09-06 16:11:28 发布
最新推荐文章于 2024-09-06 16:11:28 发布
阅读量845 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： function button input div
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/jzdzhiyun/article/details/4370413
本文介绍如何使用MooTools库中的FX.Tween模块来实现网页元素的宽度渐变效果。具体步骤包括：初始化元素样式，创建FX.Tween实例，绑定按钮点击事件触发渐变效果。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<script type="text/javascript"> 
// 这里是我们的函数
var newTweenSet = function() {
    // 由于我们使用了bind，现在"this"就指向了"newTween"
    // 因此，这里的相当于是：
    // newTween.set('width', '300px')
    this.start('width', '100px', '300px');
}
window.addEvent('domready', function() {
    // 首先把我们的元素赋值给一个变量
    var newTweenElement = $('newTween');
    newTweenElement.setStyle("background-color","#254523");
    // 然后我们new一个FX.Tween，然后赋值给一个变量
    var newTween = new Fx.Tween(newTweenElement);
 
    // 现在添加我们的事件，并绑定newTween和newTweenSet
    $('netTween_set').addEvent('click', newTweenSet.bind(newTween));  
});

</script>  
</head>
<body>
<div id="newTween">1111</div>
<input id="netTween_set" type="button" />
</body>
</html>

jzdzhiyun
关注
深入理解JS中的Function.prototype.bind()方法
11-22
前言 对于函数绑定(Function binding)很有可能是大家在使用JavaScript时...bind() 方法的主要作用就是将函数绑定至某个对象，bind() 方法会创建一个函数，函数体内this对象的值会被绑定到传入bind() 函数的值。 1.1 定
Javascript中的this,bind和that使用实例
10-15
在实践当中，如果在构造函数中使用`bind()`可能会导致性能问题，因为它会创建新的函数实例，这可能会消耗更多的内存和处理器时间。通常推荐的方法是使用变量（比如`that`、`self`或`context`）保存`this`的引用。...
this与bind(this)
热门推荐
覃大畅的博客
02-23 2万+
文章目录this与bind(this)thisthis详细- 全局环境- 函数内1. 普通函数2. 箭头函数3. 对象中的函数原型链中的thisgetter 与 setter 中的 thisbind(this) ReactNative系列-文章 this与bind(this) this this指向的是当前函数的作用域(对象实例)，有如下的例子 const app = { name: ...
JavaScript中this对象的绑定
DM_elena的博客
05-27 366
调用一个函数将暂停当前函数的执行，传递控制权和参数给新函数。除了声明时定义的形式参数，每个函数接受两个附加的参数：this和arguments 。参数 this 在面向对象编程中非常重要，它的值取决于调用的模式。在JavaScript中一共有四种调用模式：方法调用模式、函数调用模式、构造器调用模式和apply调用模式。 1.方法调用模式   当一个方法被调用时，this被绑定到该对象。 v
.bind(this)作用
普通人一枚
04-08 2155
<script> let vue = new Vue({ el: "#app", data: { img: '' }, methods: { upload(e) { let file = e.target.files[0]; // let s = URL.createObjectURL(file); .
bind(this) 的使用
youyou_LIN的博客
03-25 4263
为什么使用 bind(this) ?    当点击事件触发的函数里有使用 this 的时候，就需要使用 bind（this）,不然 this 是 null，如果没绑定this应该是全局window。    &lt;div className="save" onClick={this.handleClick.bind(this)}&gt;Save&lt;/div&gt;参考文章：    https:...
this与bind(this) (es5新增)
09-02 172
this与bind(this) this this指向的是当前函数的作用域(对象实例)，有如下的例子 const app = { name: 'xiaoming', log() { console.log(this.name); }, child() { return { name: 'b',...
JS中改变this指向的方法(call和apply、bind)
10-22
当我们需要在其他对象的上下文中执行某个函数时，可以使用`call`方法。`call`接受两个参数：第一个参数是想要绑定的`this`值，后续参数则是传递给函数的实际参数。例如，在继承场景中，我们可以用`call`来调用父类...
javascript中call apply 与 bind方法详解
01-21
在JavaScript中，call、apply和bind是Function对象自带的三个方法，本文将通过几个场景的应用，来详细理解三个方法。 call() call() 方法在使用一个指定的this值和若干个指定的参数值的前提下调用某个函数或方法。 ...
JavaScript this使用方法图解
11-21
- 当函数被某个对象的方法调用时，`this`会指向那个对象。 - 示例代码： ```javascript var obj = { method: function() { console.log(this); } }; obj.method(); // 输出：{ method: [Function: method] ...
【JavaScript】this关键字：绑定this的方法
weixin_45980065的博客
09-06 917
JavaScript 提供了call、apply、bind这三个方法，来切换/固定this的指向。
使用bind(this)的情况
weixin_30342209的博客
10-10 249
1.setInterval()、setTimeout()的回调函数，一定要加.bind(this)方法。 原因是：在setInterval()中定义的回调函数，是在同步代码执行完后，随着事件触发来异步执行的，此时函数的上下文Context已经由定义该函数的Script文件变为全局变量，如果不通过bind(this)来指定由组件实例作为上下文的话，回调函数中的this会指向全局变量中的Window...
js：bind(this)这是什么写法
分享前端开发工程师的一些日常生活、前端知识点、职业发展、对一些问题的看法、感悟等等
04-10 1万+
bind bind方法会创建一个新函数,称为绑定函数.当调用这个绑定函数时,绑定函数会以创建它时传入bind方法的第一个参数作为this,传入bind方法的第二个以及以后的参数加上绑定函数运行时本身的参数按照顺序作为原函数的参数来调用原函数. 关键词： bind 是创建了一个新的函数。 例一 <body> <button type="button" id="butto...
为什么要bind(this)
qq_38402659的博客
04-25 1144
在使用React中 如果使用ES6的Class extends写法 如果onClick绑定一个方法 需要bind(this), 而使用React.createClass方法 就不需要. 请问这是为什么呢 解释:React.createClass 是es5的写法默认是绑定了bind方法，而es6中 新增加了class，绑定的方法需要绑定this，如果是箭头函数就不需要绑定this，用箭头的方式 第一...
es6中为什么要bind(this)
最好的就是聚焦
12-25 1万+
在使用React中 如果使用ES6的Class extends写法 如果onClick绑定一个方法 需要bind(this), 而使用React.createClass方法 就不需要. 请问这是为什么呢解释:React.createClass 是es5的写法默认是绑定了bind方法，而es6中 新增加了class，绑定的方法需要绑定this，如果是箭头函数就不需要绑定this，用箭头的方式第一
bind绑定this特点
仰柔川
03-08 463
const obj = { a: 1, b: function() { console.log(this.a); } } const obj1 = { a: 2 } const fun = obj.b; fun.bind(obj1).apply(obj); //2 fun.bind(obj1).bind(obj)()//2 bind绑定this的特点： ...
用call或bind实现bind()
aa230489的专栏
09-28 297
一、bind方法 让我们看一下MDN上对bind方法的解释 　　　　bind()方法创建一个新的函数，在bind()被调用时，这个新函数的this被bind的第一个参数指定，其余的参数将作为新函数的参数供调用时使用。 也就是说，bind（）方法会： 创建一个新的函数（这也是它和call、apply不同的点） 创建的函数接收bind的第二个及以后的参数作为自己的参数...
bind方法解决this作用域问题
fel835的专栏
08-27 3708
在JavaScript中this是有作用域的，先看代码import React, { Component } from 'react';import { StyleSheet, View, Text, ListView, TouchableHighlight, Alert, } from 'react-native';class IndexVi
ES6中bind(this)用法说明
前端小狮的博客
06-11 9435
在使用 React 中的 Class extends写法，如果 onClick 绑定一个方法就需要 bind(this)，如果使用React.createClass 方法就不需要 解析： React.createClass 是ES5 的写法默认绑定了 bind 写法 在 ES6 中新增了class，绑定的方法需要绑定 this，如果是箭头函数就不需要绑定 this 示例： 第一种写法： _hand...
.bind(this),的函数如何传参
最新发布
11-21
在JavaScript中，`.bind(this)` 是一个方法，主要用于改变函数内部的`this`指向。当我们有一个函数并且希望在其他对象上调用它时，`this`关键字默认指向的是调用它的那个对象。通过`.bind()`，我们可以将`this`固定到我们想要的对象。 例如，假设你有一个这样的函数： ```javascript const obj = { sayHello: function() { console.log('Hello from', this); } }; ``` 如果你想在`obj`外部调用`sayHello`方法，并让`this`指向某个特定的实例，你可以这样做： ```javascript const specificThis = { name: 'John' }; obj.sayHello.bind(specificThis)(); // 输出: Hello from John ``` 在这里，`.bind(specificThis)`创建了一个新的函数，这个新函数的`this`值会被绑定到`specificThis`对象，所以当调用`sayHello`时，`this`会指向`specificThis`而不是`obj`本身。 至于传参，当你绑定了`this`之后，原函数的参数列表保持不变。可以直接像平常一样传递参数，比如： ```javascript obj.sayHello.bind(specificThis)('World'); // 输出: Hello from John World ``` 这里的`('World')`就是对原函数的参数进行传递。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值