函数中this指向对于一些开发者来说一直是一个比较头疼的问题,this在js中比较灵活,不同的情况指向不同,小shy总结出了函数调用的this指向的一些情况,供大家参考。 1....默认绑定 function fn() { console.log(this); } fn(); 结果:this指向window对象 函数在被调用的时候,this会默认指向全局对象window...obj对象,this.name 即 obj.name 调用对象的方法时会出现隐式绑定,fn是在obj对象里的,obj调用fn,this就会指向obj对象。...指向,所以fn函数调用this都指向了obj2对象,所以得出结果为小红。...(如果不太明白call()、apply() 和 bind(),可以看小shy之前的博客《js call()、apply()、bind()用法和区别》) 4.
this指向问题 this应该是第一个让人对JavaScript困惑的问题了,但是实际上它的原理非常简单:函数的this在运行时绑定。 什么叫运行时绑定?...就是函数的this和你写在哪里无关,而是和谁调用它有关。谁调用这个函数,this就指向谁。 你现在大概会在想:原来这么简单,我精通了!...先问自己:谁调用的它?你应该一下看不出来,这明明就是直接调的啊!可能有的基础比较扎实的人会说是window,那真是非常的恭喜你了,但你要注意的是以上代码在严格模式下是undefined。...正解:brother call / bind / apply 此为3种干预this指向的操作,限于篇幅不展开讲。...箭头函数 箭头函数可以让你省很多事,因为它的this一般来说都是符合你的直觉的:它的this就是定义时候的this。
全局上下文 非严格模式和严格模式中this都是指向顶层对象(浏览器中是window)。...根据参数thisArg的描述,可以知道,call就是改变函数中的this指向为thisArg,并且执行这个函数,这也就使JS灵活很多。严格模式下,thisArg是原始值是值类型,也就是原始值。...是没有问题的。 然而事实上,这代码是报错的。...非严格模式下,null和undefined,指向全局对象(浏览器中是window),其余值指向被new Object()包装的对象。 对象上的函数调用:绑定到那个对象。...this指向问题可以考察new、call、apply、bind,箭头函数等用法。从而扩展到作用域、闭包、原型链、继承、严格模式等。
写在前面 本篇文章的所有例子来源都是《JS设计模式与开发实践》这本书,写这篇文章之前也去查阅了很多关于this指向问题的探讨,包括但不仅仅有像阮一峰老师,还有很多的博主的帖子,还是决定写这篇文章有以下几个原因...,第一,加深自己的理解,重新理一遍关于这方面的知识,第二,我尽可能的使用通俗简单的说辞进行解释 力求让更多的人明白这个东西,第三,this是js中的一个关键字,很有必要单独拿出来写一篇文章。...js中的this this js中的this总是指向一个对象,也就是一个obj,但是具体指向的是哪一个obj是根据具体的运行时函数的执行环境动态绑定的,而不是函数被声明的环境!...,也就是我们常见的普通函数使用的时候,此时的this其实指向的是当前的全局对象,也就是windows,因为在js中全局对象就是windows window.name = "globalName...JS中很多别的不好理解的概念差不多,用的多了就明白了为什么那么写,很多的时候我们看到一个错,就知道需要使用let that = this类似这样的代码块解决,究其原因是他很理解错误的原因吗?
js中的this指向 首先,js中的this指向是根据运行时确定的,而非定义时。...js中的this指向大致分为如下几种: 作为对象的方法调用 作为普通函数调用 构造调用 call、apply调用 作为对象的方法调用 var obj = { a: 1, getA: function...function(){ this.name = 'sven'; }; var obj = new MyClass(); alert ( obj.name ); // sven 一般情况下,构造调用时this指向...new后的对象,但是有种比较特殊,就是当构造函数return一个对象时(必须是对象,其余类型比如string请忽略)指向该对象。...指向: var obj1 = { name: 'sven', getName: function(){ return this.name; } }; var obj2 = { name
JS中this的指向 this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上this的最终指向的是那个调用它的对象。...console.log(this); }, t3: { // 测试对象中的对象 tt1: function() { console.log...(this); } }, t5: function(){ // 测试函数调用时箭头函数的this的指向,其指向了上一层对象的调用者 return {...,我们调用同一个方法,但是得到的this是不同的,要注意实际上this的最终指向的是那个调用它的对象 var s1 = { t1: function(){ console.log...由此,this指向了window 改变this指向 使用 apply、call、bind可以改变this的指向,可以参考 https://github.com/WindrunnerMax/EveryDay
js中this指向问题及call,apply,bind的区别# 1 this指向# 1.1 what is 'this'?...# 在 ECMAScript 5 中,函数内部存在两个特殊的对象:arguments(一个类数组对象,包含调用函数时传入的所有参数) 和 this(本文将要讲的)。...1.2 标准函数与箭头函数的this指向# this在标准函数与箭头函数中的时会有两种不同类型的指向行为。...1.2.1 标准函数的this指向# 在标准函数中,this 指向的是把函数当成方法调用的上下文对象。也就是说在哪里调用的这个函数,那这个this只会指向它外面最靠近它的对象。...# 当箭头函数时,this指向的是定义箭头函数的上下文。
在独立函数调用中,this的默认绑定也指向全局对象。...实际应用中,常见的this指向问题 在嵌套函数中丢失this:当在一个函数内部定义另一个函数,并在内部函数中使用this时,this的指向会发生变化。...可以使用箭头函数或通过在外部函数中将this赋值给一个变量来解决这一问题。 事件处理函数中的this:在事件处理函数中,this通常指向触发事件的元素。...可以使用箭头函数、bind()方法,或通过在外部函数中将this赋值给一个变量来解决这一问题。 对象方法中的this:在对象方法中,this通常指向调用该方法的对象。...但是,如果将该方法赋值给一个变量,并通过变量来调用方法,this将指向全局对象。可以使用bind()方法或箭头函数来解决这一问题。
1、什么是this this一般指向的是调用它的对象,比如调用它的上下文是window对象,那就是指向window对象,如果调用它的上下文是某对象就是指向某对象…… //例如 console.log...(this) //window //这里调用者是全局对象window,所以this指向window ?...2、用来干嘛 this在一般情况下,是指向函数的上下文,可以处理一些作用域下的事件调用 如果想要引用某对象的方法,就不用写太多重复代码,直接用this调用某对象的方法 3、怎么在代码中使用 console.log...4.1引入call、bind、apply 4.1.1区别 共同点 都是函数的内置方法 都可以改变函数执行的上下文 注:改变上下文可以为程序节省内存空间,减少不必要的内存操作 通俗易懂解释改变上下文:...小张在公司有个快递要拿,刚好有事,自己拿不了,他就安排小王拿,这里小张本来是拿快递的执行上下文,因为有事,就改变拿快递的执行上下文,变成了小王,节约了小张的时间,他就不用另外安排时间去拿快递了 不同点
this指向是js开发中必须掌握的知识,今天我们就用一道题目来看看你的基础。 ? 各位认为会输出什么呢?请大家先思考不要直接去运行看答案。 实际上会输出:5和2。...(1):第一行fn(),这个毫无疑问,this指向的是window,所以length自然输出5,大家不要看到fn()在obj对象里面调用,就把this认为指向了obj,这是非常错误的; this指向谁,...是在于函数执行时的环境对象,fn()在执行时,他的环境对象依然是window,这里的fn()大家可以理解为window.fn(),是这样进行执行的。...所以,这里大家可以理解为:arguments[0]()=arguments.fn(); this对象就是指向了arguments,length也自然是2了。...大家明白了吗,这道题对于this指向还是比较经典的题目,如果这道题可以独立做出来,证明this指向这块,你基本上是过关的。
// 对象里的方法写的是箭头函数,this始终访问全局 var name = "xiaoming"; var obj1...let getName11 = obj1.getName.bind(obj1); getName11(); // xiaoming // 对象的方法写的...function 声明,直接调用 this 指向对象本身,将调用的方法单独保存起来调用,this 指向全局,通过bind 改写 this 指向后,可以继续指向 对象本身 var
在setInterval和setTimeout中传入函数时,函数中的this会指向window对象。...// 原因:在setInterval和setTimeout中传入函数时,函数中的this会指向window对象 window.setTimeout(this.declare, 2000); //...推荐用下面两种写法 将bind换成call,apply也会导致立即执行,延迟效果会失效 window.setTimeout(this.declare.bind(this), 2000); 使用es6中的箭头函数...,因为在箭头函数中this是固定的。...// 箭头函数可以让setTimeout里面的this,绑定定义时所在的作用域,而不是指向运行时所在的作用域。
这样的结构是很清晰的,问题在于属性的值可能是一个函数。...原因跟上一段的多层this是一样的,就是内层的this不指向外部,而指向顶层对象。解决这个问题的一种方法,就是前面提到的,使用中间变量固定this。...这是因为getTime()方法内部的this,绑定Date对象的实例,赋给变量print以后,内部的this已经不指向Date对象的实例了。bind()方法可以解决这个问题。...obj.print内部this.times的this是指向obj的,这个没有问题。...但是,forEach()方法的回调函数内部的this.name却是指向全局对象,导致没有办法取到值解决这个问题,也是通过bind()方法绑定this。
1. this 的奥秘 很多时候, JS 中的 this 对于咱们的初学者很容易产生困惑不解。 this 的功能很强大,但需要一定付出才能慢慢理解它。...函数可以使用.bind()方法与对象绑定,就可以解决 this 指向的问题。...logInfo完全相同,但是此时的 this 指向 myCat,即使在函数调用中也是如此。...构造函数的作用就是去初始化这个对象。 可能你已经知道了,在这种类型的调用中,上下文指向新创建的实例。...)中定义,因此 this 指向window对象。
可对函数进行如下扩展 Function.prototype.bind = function(obj) { var _this = this; ...
js中this到底指向什么? 一、前言 前段时间,公司让我改一个界面,我心想改个界面还不简单吗?结果呃,我低估了这颗炸弹的威力。 好吧是我太菜,总结一下,这个this的指向问题。...在js中,this的指向在定义函数的时候是确定不了的,只有在使用这个函数的时候才能确定this的指向。 一般来说在使用时,谁调用的这个函数,函数中的this就指向它。...对象中的函数,在运行时this指向了me这个对象。...在js中,this的指向在定义函数的时候是确定不了的,只有在使用这个函数的时候才能确定this的指向。 这样,我稍微能理解点了,简单的来说就是谁调用的这个函数,函数里面的this就指向谁。...如此,这段的解释就是,在window环境下启用这个定时器,将立刻执行me.showName这个函数。 由此来看,定时器启动的函数中的this都是指向与window。
首先先说下正常的 this 指向问题 什么是 this:自动引用正在调用当前方法的.前的对象。...this指向的三种情况 1. obj.fun() fun 中的 this->obj ,自动指向.前的对象 2. new Fun() Fun 中的 this->正在创建的新对象,new 改变了函数内部的...this 指向,导致 this 指向实例化 new 的对象 3. fun() 和匿名函数自调 this 默认->window,函数内部的 this,this 默认是指向 window 的 再说回调函数中的...this 指向问题,我们先来看一个例子 1 2 var Bob={ 3 sname:"鲍勃", 4 friends:["Jack","...箭头函数中的 this: 函数体内的 this 对象,就是定义时所在的对象,而不是使用时所在的对象。
js中this的指向是在运行时会变动的 这句话严谨的说是有问题的。 this这个关键词,在java中的解释是引用当前类的实例变量。...,那么,这个函数的调用者就是此函数执行的作用域中的this 所以,归根结底,this是当前执行方法的调用者 你以为这样就结束了?...Too young too simple js中还有三个显式绑定this的方法,bind,apply,call当使用这些方法指定执行函数的this时,那this基本上就是指定的了 基本上?...上面的代码用babel编译之后 var _this = this; var sayThis = function () { console.log(_this); }; 复制代码 很容易理解箭头函数中this...的指向 发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/100937.html原文链接:https://javaforall.cn
我喜欢在JS中更改函数执行上下文的指向,也称为 this 指向。...execute(agent.getFullName); // => 'undefined undefined' ``` 执行结果不正确:`'undefined undefined'`,这是 `this` 指向不正确导致的问题...现在在`getFullName()` 方法中,`this`的值是全局对象(浏览器环境中的 `window` )。...或者静态地将`this`绑定到包含的对象(使用箭头函数、`.bind()`方法等) 方法分离问题,以及由此导致`this`指向不正确,一般会在下面的几种情况中出现: **回调** ```JavaScript...这种方法是在类中绑定this的最有效和最简洁的方法。 6. 总结 与对象分离的方法会产生 this 指向不正确问题。静态地绑定this,可以手动使用一个附加变量self来保存正确的上下文对象。
问题:在外部单独使用类实例对象的方法,this没有指向该类实例对象 代码如下 class CQH { hello() { let name = this.name();...this.name(); ^ TypeError: Cannot read property 'name' of undefined 原因:虽然类默认的方法指向类的实例...,但是如果在外部单独使用该方法,this会指向该方法运行时所在的环境,不再指向对象 解决办法 1....显示指定bind方法指定this 可以在构造方法中绑定this class CQH { constructor() { this.hello = this.hello.bind(...总是指向定义时所在的对象,是在构造函数执行的时候,箭头函数所在的运行环境,肯定是实例对象,所以this会总是指向实例对象。
领取专属 10元无门槛券
手把手带您无忧上云