js中bind与this指向 - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

js中this指向问题及call，apply，bind的区别

js中this指向问题及call，apply，bind的区别# 1 this指向# 1.1 what is 'this'?...1.2 标准函数与箭头函数的this指向# this在标准函数与箭头函数中的时会有两种不同类型的指向行为。...1.2.1 标准函数的this指向# 在标准函数中，this 指向的是把函数当成方法调用的上下文对象。也就是说在哪里调用的这个函数，那这个this只会指向它外面最靠近它的对象。...，解析的时候也是跟call一样顺序对应； call、apply没有返回值，而bind改变完this指向后会返回一个改变完this指向之后的原函数的拷贝可以再次进行调用。...例如： a.say.bind(b)('男', 'UNO') 运行的结果如下： 3 小结# 关于this指向、call、apply、bind的记录本篇就总结到这里，在日常使用脚手架、组件开发时可能会用的地方比较少

1.5K2 0

js中this指向问题

函数中this指向对于一些开发者来说一直是一个比较头疼的问题，this在js中比较灵活，不同的情况指向不同，小shy总结出了函数调用的this指向的一些情况，供大家参考。 1....默认绑定 function fn() { console.log(this); } fn(); 结果：this指向window对象函数在被调用的时候，this会默认指向全局对象window...}; const obj2 = { name: "小红" }; obj1.fn.call(obj2); // 小红 obj1.fn.apply(obj2); // 小红 obj1.fn.bind...(obj2)(); // 小红这里call()、apply和bind方法都是可以改变函数的this指向，所以fn函数调用this都指向了obj2对象，所以得出结果为小红。...（如果不太明白call()、apply() 和 bind()，可以看小shy之前的博客《js call()、apply()、bind()用法和区别》） 4.

3.1K6 0

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

是的

没有找到

我攻克的技术难题：JS中改变this的指向：call()、apply()、bind()

3种动态指定普通函数中this的指向的方法：call（）、apply（）、bind（）在之前的学习中，我发现在学习了很多JS方法后，却没有真正的应用起来或者是理解什么时候需要使用这些方法，导致自己很快就遗忘自己所学过的知识...所以在以后的笔记中，我都会添加这些所学知识的应用场景。...console.log(fun)应用场景只想改变this指向，并且不想调用这个函数的比如改变定时器内部的this指向：如果有一个按钮，当我们点击了之后就禁用这个按钮，2秒钟之后又开启这个按钮bind(btn) 等价于 bind(this) })总结call（）、apply（）、bind（）都可以改变函数内部的this指向，但是call...传递参数aru1，aru2...形式 apply传递参数arg形式bind区别于其他两种，不会调用函数我正在参与2024腾讯技术创作特训营第五期有奖征文，快来和我瓜分大奖！

6043 2

js中的this指向

js中的this指向首先，js中的this指向是根据运行时确定的，而非定义时。...js中的this指向大致分为如下几种：作为对象的方法调用作为普通函数调用构造调用 call、apply调用作为对象的方法调用 var obj = { a: 1, getA: function...new后的对象，但是有种比较特殊，就是当构造函数return一个对象时（必须是对象，其余类型比如string请忽略）指向该对象。...sven' return 'anne'; }; var obj = new MyClass(); alert ( obj.name ); // sven call、apply调用 call、apply、bind...可以人为改变function的this指向: var obj1 = { name: 'sven', getName: function(){ return this.name; }

4.7K4 0

JS中this的指向

JS中this的指向 this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，实际上this的最终指向的是那个调用它的对象。...实例定义函数与对象并调用，注意只有调用函数才会使this指向调用者，但箭头函数除外。...console.log(this); }, t3: { // 测试对象中的对象 tt1: function() { console.log...window 改变this指向使用 apply、call、bind可以改变this的指向，可以参考 https://github.com/WindrunnerMax/EveryDay/blob/master.../JavaScript/apply%E3%80%81call%E3%80%81bind.md

2.3K2 0

JS中的this指向问题

this指向问题 this应该是第一个让人对JavaScript困惑的问题了，但是实际上它的原理非常简单：函数的this在运行时绑定。什么叫运行时绑定？...谁调用这个函数，this就指向谁。你现在大概会在想：原来这么简单，我精通了！...正解：brother call / bind / apply 此为3种干预this指向的操作，限于篇幅不展开讲。

1.3K3 0

JS中的this指向问题

全局上下文非严格模式和严格模式中this都是指向顶层对象（浏览器中是window）。...根据参数thisArg的描述，可以知道，call就是改变函数中的this指向为thisArg，并且执行这个函数，这也就使JS灵活很多。严格模式下，thisArg是原始值是值类型，也就是原始值。...bind和call和apply类似，第一个参数也是修改this指向，只不过返回值是新函数，新函数也能当做构造函数（new）调用。...非严格模式下，null和undefined，指向全局对象（浏览器中是window），其余值指向被new Object()包装的对象。对象上的函数调用：绑定到那个对象。...this指向问题可以考察new、call、apply、bind，箭头函数等用法。从而扩展到作用域、闭包、原型链、继承、严格模式等。

1.7K3 0

说下js中的bind

bind的受体是对象，返回的是个新的函数。我们知道this总是指向调用他的对象。但是有时候我们希望‘固化’这个this。也就是无论怎么调用这个返回的函数都有同样的this值。...这就是bind的作用。语法 fun.bind(thisArg[, arg1[, arg2[, ...]]]) 参数 thisArg 当绑定函数被调用时，该参数会作为原函数运行时的 this 指向。...(o); // 输出 "blue", 因为传的是对象 o，this 始终指向 o func(); var func2 = sayColor.bind(this); // 输出 "red", 因为传的是..."}); console.log(g()); // azerty var h = g.bind({a:'yoo'}); //bind只生效一次！...优化 // 当myObj 调用，this就指向了myObj render: function () { this.getAsyncData(function () { this.specialFunction

2.5K1 0

手写js中的bind

1.0" /> Document // 手写实现 bind...Function.prototype.bind = // Function.prototype.bind ||...getName1 = obj.getName; getName1(); // xiaoming let getName2 = obj.getName.bind...let getName4 = obj.getName.bind(obj, 111)(); // [111] xiaohong let getName5...= obj.getName.bind(obj, 111, 222)(); // [111, 222] iaohong let getName6 = obj.getName.bind

1.9K2 0

async函数中，如果不使用bind，this会指向什么？

在 async 函数中，如果不使用 bind、箭头函数或其他方式来明确绑定 this，this 的指向取决于 async 函数的调用方式。下面是几种常见情况： 1....作为普通函数调用如果 async 函数被作为普通函数调用，而不是作为对象的方法，this 将指向全局对象（在浏览器中是 window，在 Node.js 中是 global），在严格模式下则为 undefined...在回调中如果 async 函数被用作回调函数（例如在 setTimeout 或其他异步操作中），this 的指向将取决于调用上下文。...总结在 async 函数中，如果不使用 bind 或箭头函数，this 的指向取决于函数的调用方式：作为对象的方法调用时，this 指向该对象。...在回调中，this 可能会丢失指向，导致 undefined。

1850 0

js中this到底指向什么？

js中this到底指向什么？一、前言前段时间，公司让我改一个界面，我心想改个界面还不简单吗？结果呃，我低估了这颗炸弹的威力。好吧是我太菜，总结一下，这个this的指向问题。...在js中，this的指向在定义函数的时候是确定不了的，只有在使用这个函数的时候才能确定this的指向。一般来说在使用时，谁调用的这个函数，函数中的this就指向它。...对象中的函数，在运行时this指向了me这个对象。...在js中，this的指向在定义函数的时候是确定不了的，只有在使用这个函数的时候才能确定this的指向。这样，我稍微能理解点了，简单的来说就是谁调用的这个函数，函数里面的this就指向谁。...由此来看，定时器启动的函数中的this都是指向与window。

2871 0

js中关于this指向的训练题

this指向是js开发中必须掌握的知识，今天我们就用一道题目来看看你的基础。 ? 各位认为会输出什么呢？请大家先思考不要直接去运行看答案。实际上会输出：5和2。...（1）：第一行fn(),这个毫无疑问，this指向的是window，所以length自然输出5，大家不要看到fn()在obj对象里面调用，就把this认为指向了obj，这是非常错误的； this指向谁，...所以，这里大家可以理解为：arguments[0]()=arguments.fn(); this对象就是指向了arguments，length也自然是2了。...大家明白了吗，这道题对于this指向还是比较经典的题目，如果这道题可以独立做出来，证明this指向这块，你基本上是过关的。

9671 0

JS 中几种轻松处理’this’指向方式

我喜欢在JS中更改函数执行上下文的指向，也称为 this 指向。...()`中的`this`是全局对象 Click me 接着介绍一些有用的方法，即如果方法与对象分离，...但是有一个涉及bind()方法的技巧，它将方法的上下文绑定到构造函数中： ```JavaScript class Person { constructor(firstName, lastName...这种方法是在类中绑定this的最有效和最简洁的方法。 6. 总结与对象分离的方法会产生 this 指向不正确问题。静态地绑定this，可以手动使用一个附加变量self来保存正确的上下文对象。...在类中，可以使用bind()方法手动绑定构造函数中的类方法。当然如果你不用使用 bind 这种冗长方式，也可以使用简洁方便的胖箭头表示方法。

1.3K2 0

关于JS中this指向问题的探究

写在前面本篇文章的所有例子来源都是《JS设计模式与开发实践》这本书，写这篇文章之前也去查阅了很多关于this指向问题的探讨，包括但不仅仅有像阮一峰老师，还有很多的博主的帖子，还是决定写这篇文章有以下几个原因...，第一，加深自己的理解，重新理一遍关于这方面的知识，第二，我尽可能的使用通俗简单的说辞进行解释力求让更多的人明白这个东西，第三，this是js中的一个关键字，很有必要单独拿出来写一篇文章。...js中的this this js中的this总是指向一个对象，也就是一个obj，但是具体指向的是哪一个obj是根据具体的运行时函数的执行环境动态绑定的，而不是函数被声明的环境！...，也就是windows，因为在js中全局对象就是windows window.name = "globalName" var getName = function () {...JS中很多别的不好理解的概念差不多，用的多了就明白了为什么那么写，很多的时候我们看到一个错，就知道需要使用let that = this类似这样的代码块解决，究其原因是他很理解错误的原因吗？

1.8K3 1

node.js中this指向失效解决

，但是如果在外部单独使用该方法，this会指向该方法运行时所在的环境，不再指向对象解决办法 1....显示指定bind方法指定this 可以在构造方法中绑定this class CQH { constructor() { this.hello = this.hello.bind(...console.log(`Hello ${name}`); } name() { return "chenqionghe" } } 也可以在外部使用bind...，例如 const cqh = new CQH(); const hello = cqh.hello.bind(cqh); 2....，是在构造函数执行的时候，箭头函数所在的运行环境，肯定是实例对象，所以this会总是指向实例对象。

2.5K2 0

JS对象中的方法的this指向

getName1 = obj1.getName; getName1(); // xiaoming let getName11 = obj1.getName.bind...(obj1); getName11(); // xiaoming // 对象的方法写的 function 声明，直接调用 this 指向对象本身，将调用的方法单独保存起来调用...，this 指向全局，通过bind 改写 this 指向后，可以继续指向对象本身 var obj2 = { name: "xiaohong",...getName2 = obj2.getName; getName2(); // xiaoming let getName22 = obj2.getName.bind

4K1 0

JS中call apply bind的用法

谁调用当前的属性或者方法的,它就是谁 /* 2.1.bind方法作用修改函数或者方法中的this为指定的对象, 并且会返回一个修改之后的新函数给我们注意点...: bind方法除了可以修改this以外, 还可以传递参数, 只不过参数必须写在this对象的后面 */ //call apply bind修改this的.../*call:修改函数或者方法中的this为指定的对象, 并且会立即调用修改之后的函数注意点: call方法除了可以修改this以外, 还可以传递参数, */.../*apply:修改函数或者方法中的this为指定的对象, 并且会立即调用修改之后的函数注意点: apply方法除了可以修改this以外, 还可以传递参数, 只不过参数必须通过数组的方式传递...console.log(this); } test(10,20); window.test(); let fn=test.bind

3.6K3 0

解析js中的call、apply、bind

Parent.call(child);//对象继承，子对象具有了父对象的属性和方法 console.log(child);//Object {name: "csxiaoyao", age: 25} bind...obj.bind(thisObj, arg1, arg2, ...); 把obj绑定到thisObj，这时候thisObj具备了obj的属性和方法。...与call和apply不同的是，bind绑定后不会立即执行。...function add(j, k){ return j+k; } function sub(j, k){ return j-k; } console.log(add.bind(sub,...5, 3)); //function add(j, k){return j+k;} console.log(add.bind(sub, 5, 3)()); //8 如果bind的第一个参数是null或

2.3K2 0

js中call、apply、bind那些事

前言回想起之前的一些面试，几乎每次都会问到一个js中关于call、apply、bind的问题，比如… 怎么利用call、apply来求一个数组中最大或者最小值如何利用call、apply来做继承 apply...答案是改变函数执行时的上下文，再具体一点就是改变函数运行时的this指向。有了这个认识，接下来我们来看一下,怎么使用这三个函数。...所以其实他们干的事从本质上讲都是一样的动态的改变this上下文,但是多少还是有一些差别的.. call、apply与bind的差别 call和apply改变了函数的this上下文后便执行该函数,而bind...中的伪数组(例如通过document.getElementsByTagName获取的元素)具有length属性，并且可以通过0、1、2…下标来访问其中的元素，但是没有Array中的push、pop等方法...中要往数组中添加元素，可以直接用push方法， 1234567 var arr1 = [1,2,3];var arr2 = [4,5,6];[].push.apply(arr1, arr2);// arr1

2.1K5 0

This指向与改变This指向

This指向与改变This指向 This 的指向在 ES5 中，其实 this 的指向，始终坚持一个原理：this 永远指向最后调用它的那个对象。...所以 this 指向的也就是 window。 this 的指向并不是在创建的时候就可以确定的，在 es5 中，永远是this 永远指向最后调用它的那个对象。...我们将 this(指向变量 a) 赋值给一个变量 _this，这样，在 func2 中我们使用 _this 就是指向对象 a 了。...使用 apply、call、bind 使用 apply、call、bind 函数也是可以改变 this 的指向的，使用 apply 例 10： var a = { name : "Cherry...所以我们可以看到，在 new 的过程中，我们是使用 call 改变了 this 的指向

1.8K2 0

点击加载更多

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭