函数中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.
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 obj = new MyClass(); alert ( obj.name ); // sven call、apply调用 call、apply、bind可以人为改变function的this指向
JS中this的指向 this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上this的最终指向的是那个调用它的对象。...实例 定义函数与对象并调用,注意只有调用函数才会使this指向调用者,但箭头函数除外。...s1 s(); // Window // 此次调用仍然相当 window.s(),调用者为window }, t2: () => { // 测试箭头函数,this并未指向调用者...tt1: () => { console.log(this); } }, t5: function(){ // 测试函数调用时箭头函数的this的指向...window 改变this指向 使用 apply、call、bind可以改变this的指向,可以参考 https://github.com/WindrunnerMax/EveryDay/blob/master
this指向问题 this应该是第一个让人对JavaScript困惑的问题了,但是实际上它的原理非常简单:函数的this在运行时绑定。 什么叫运行时绑定?...谁调用这个函数,this就指向谁。 你现在大概会在想:原来这么简单,我精通了!...正解:brother call / bind / apply 此为3种干预this指向的操作,限于篇幅不展开讲。
页面加载事件(onload),鼠标双击事件(ondbclick) window.onload=function(){ //绑定元素,执行对应事件 鼠标双击(ondblclick...(){ alert('我是双击显示的'); } } 鼠标摁下(onmousedown)事件(摁下就执行,鼠标无需抬起...} } 鼠标抬起(onmouseup)事件(摁下后,鼠标回弹才执行) window.onload=function(){ ...鼠标移入(onmouseover)事件 window.onload=function(){ //绑定元素,执行鼠标移入事件 鼠标移入(onmousemove...){ alert('鼠标移出操作'); } } PS:鼠标移动(onmousemove)和鼠标移入(onmouseover
今天遇到一个非常奇怪而又搞笑的事情:给一个a标签添加一个鼠标移动上时给一个事件,我给其添加的是一个onMouseMove事件,结果在IE6 7 8 9和GOOLE中都很正常,结果在Firox中出现问题了...鼠标的一些事件如下所示: onMouseOver IE3|N2|O3 当鼠标移动到某对象范围的上方时触发的事件 onMouseMove IE4|N4|O 鼠标移动时触发的事件 onMouseOut IE4...|N3|O3 当鼠标离开某对象范围时触发的事件 onKeyPress IE4|N4|O 当键盘上的某个键被按下并且释放时触发的事件.
全局上下文 非严格模式和严格模式中this都是指向顶层对象(浏览器中是window)。...第一个参数是undefined或者null,非严格模式下,是指向window。严格模式下,就是指向第一个参数。后文详细解释。 经常有这类代码(回调函数),其实也是普通函数调用模式。...(数字,字符串,布尔值)的this会指向该原始值的自动包装对象。...根据参数thisArg的描述,可以知道,call就是改变函数中的this指向为thisArg,并且执行这个函数,这也就使JS灵活很多。严格模式下,thisArg是原始值是值类型,也就是原始值。...非严格模式下,null和undefined,指向全局对象(浏览器中是window),其余值指向被new Object()包装的对象。 对象上的函数调用:绑定到那个对象。
有时候客户让加代码不让别人偷他的图片,文章之类的,需要用一些 js 屏蔽鼠标动作。
Math.min.apply(Math,arr) Math.min.call(Math,…arr) Math.max.call(Math,…arr) Math.min() 取小值 五、this指向.../ let _this=this; setTimeout(()=> { console.log(this===btn) },0) } 总结:this通常是谁调用,this指向谁
js中this到底指向什么? 一、前言 前段时间,公司让我改一个界面,我心想改个界面还不简单吗?结果呃,我低估了这颗炸弹的威力。 好吧是我太菜,总结一下,这个this的指向问题。...在js中,this的指向在定义函数的时候是确定不了的,只有在使用这个函数的时候才能确定this的指向。 一般来说在使用时,谁调用的这个函数,函数中的this就指向它。...对象中的函数,在运行时this指向了me这个对象。...在js中,this的指向在定义函数的时候是确定不了的,只有在使用这个函数的时候才能确定this的指向。 这样,我稍微能理解点了,简单的来说就是谁调用的这个函数,函数里面的this就指向谁。...所以这时候,this的真正指向就是返回的那个对象。
当监听鼠标事件时,会触发一些事件,我们可以与之交互: mousedown 按下鼠标按钮触发 mouseup 鼠标按钮被释放 click 点击事件 dblclick 双击事件 mousemove 当鼠标移动到元素上时...,鼠标移动 mouseover 当鼠标移动到一个元素或它的一个子元素上时,鼠标悬停。...mouseenter 当鼠标移动到一个元素上时,鼠标进入。类似于mouseover但不冒泡。 mouseout 当鼠标移出元素时,以及当鼠标进入子元素时。...mouseleave 当鼠标移出一个元素时,mouseleave。类似于mouseout但不冒泡。 contextmenu 快捷菜单当快捷菜单打开时,例如用鼠标右键点击 事件重叠。...buttons 按钮(如果有),表示在任何鼠标事件上按下的按钮的数字。 clientX / clientY 无论是否滚动,鼠标指针相对于浏览器窗口的x和y坐标。
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指向这块,你基本上是过关的。
我喜欢在JS中更改函数执行上下文的指向,也称为 this 指向。...咱们经常会发现自己用的 `this` 指向不正确。下面的教你如何简单地将 `this` 绑定到所需的值。...为了确保方法内部的`this`指向正确的对象,必须这样做 1. 以属性访问器的形式执行方法:`agent.getFullName()` 2....在类的情况下,使用附加的变量self或箭头函数来修复this的指向是行不通的。...总结 与对象分离的方法会产生 this 指向不正确问题。静态地绑定this,可以手动使用一个附加变量self来保存正确的上下文对象。
写在前面 本篇文章的所有例子来源都是《JS设计模式与开发实践》这本书,写这篇文章之前也去查阅了很多关于this指向问题的探讨,包括但不仅仅有像阮一峰老师,还有很多的博主的帖子,还是决定写这篇文章有以下几个原因...,第一,加深自己的理解,重新理一遍关于这方面的知识,第二,我尽可能的使用通俗简单的说辞进行解释 力求让更多的人明白这个东西,第三,this是js中的一个关键字,很有必要单独拿出来写一篇文章。...js中的this this js中的this总是指向一个对象,也就是一个obj,但是具体指向的是哪一个obj是根据具体的运行时函数的执行环境动态绑定的,而不是函数被声明的环境!...,也就是windows,因为在js中全局对象就是windows window.name = "globalName" var getName = function () {...JS中很多别的不好理解的概念差不多,用的多了就明白了为什么那么写,很多的时候我们看到一个错,就知道需要使用let that = this类似这样的代码块解决,究其原因是他很理解错误的原因吗?
问题:在外部单独使用类实例对象的方法,this没有指向该类实例对象 代码如下 class CQH { hello() { let name = this.name();...this.name(); ^ TypeError: Cannot read property 'name' of undefined 原因:虽然类默认的方法指向类的实例...,但是如果在外部单独使用该方法,this会指向该方法运行时所在的环境,不再指向对象 解决办法 1....console.log(`Hello ${name}`); } } name() { return "chenqionghe" } } 箭头函数内部的this总是指向定义时所在的对象...,是在构造函数执行的时候,箭头函数所在的运行环境,肯定是实例对象,所以this会总是指向实例对象。
getName.bind(obj1); getName11(); // xiaoming // 对象的方法写的 function 声明,直接调用 this 指向对象本身...,将调用的方法单独保存起来调用,this 指向全局,通过bind 改写 this 指向后,可以继续指向 对象本身 var obj2 = { name
1.面试官问:能否模拟实现JS的new操作符 2.面试官问:能否模拟实现JS的bind方法 3.面试官问:能否模拟实现JS的call和apply方法 4.面试官问:JS的this指向 5.面试官问:JS...的继承 面试官出很多考题,基本都会变着方式来考察this指向,看候选人对JS基础知识是否扎实。...根据参数thisArg的描述,可以知道,call就是改变函数中的this指向为thisArg,并且执行这个函数,这也就使JS灵活很多。严格模式下,thisArg是原始值是值类型,也就是原始值。...之前也写过一篇文章:面试官问:能否模拟实现JS的bind方法就是利用call和apply指向这个thisArg参数,来模拟实现bind的。感兴趣的读者思考如何实现,再去看看笔者的实现。...之前也写了一篇文章面试官问:能否模拟实现JS的new操作符,是使用apply来把this指向到生成的新生成的对象上。感兴趣的读者思考如何实现,再去看看笔者的实现。
有一个同学在Gne的群里面咨询如何通过Selenium获取当前鼠标指向的元素,在我讲了方法以后,他过了两天又来问: 那么,我今天就来写一篇文章,具体说说应该怎么操作。...我们先来第一步,不考虑Selenium,只使用JavaScript,如何获取当前鼠标指向的元素呢? 我们首先需要知道在JavaScript中的一个事件句柄,叫做window.onmousemove。.../chromedriver') driver.get('https://www.kingname.info/') js = ''' window.hovered_element = null function...} window.hovered_element = element } window.onmousemove = track_mouse ''' driver.execute_script(js...由于window.onmousemove的采样时间间隔很小,所以我们可以近似把鼠标的移动看做是连续的移动。因此,这段代码会记录鼠标轨迹路径上面的每一个元素。
只要函数被赋给另一个变量,this的指向就会变。...严格模式下,指向 undefined。...(浏览器为window对象);call方法可以改变this的指向,指定this指向对象obj,然后在对象obj的作用域中运行函数f。...,指向bind。...也就是f调用了bind函数,结果返回一个指向o的f函数。然后再加括号执行bind(f,o)(),就等于执行了指向o的f函数。最后打印结果的this指向o,因此打印出123。
This指向与改变This指向 This 的指向 在 ES5 中,其实 this 的指向,始终坚持一个原理:this 永远指向最后调用它的那个对象。...所以 this 指向的也就是 window。 this 的指向并不是在创建的时候就可以确定的,在 es5 中,永远是this 永远指向最后调用它的那个对象。...改变 this 的指向 改变 this 的指向我总结有以下几种方法: 使用 ES6 的箭头函数 在函数内部使用 _this = this 使用 apply、call、bind new 实例化一个对象 例...箭头函数 箭头函数的 this 始终指向函数定义时的 this,而非执行时。...我们将 this(指向变量 a) 赋值给一个变量 _this,这样,在 func2 中我们使用 _this 就是指向对象 a 了。
领取专属 10元无门槛券
手把手带您无忧上云