JavaScript函数this指向问题详解

目录
一、函数内 this 的指向
1、普通函数
2、构造函数
3、对象方法
4、事件绑定方法
5、定时器函数
6、立即执行函数
二、改变函数内部 this 指向
1、call 方法
2、apply 方法
3、bind 方法
三、call apply bind 总结
1、相同点
2、不同点
3、应用场景
总结
一、函数内 this 的指向
这些 this的指向，是当调用函数的时候确定的。调用方式的不同决定了this 的指向不同，一般指向调用者。
现在我们来具体看看吧！

1、普通函数
function fn(){
console.log(‘普通函数的this:’+this);
}
fn()
打印结果为：

可知普通函数调用时this指向的是 window

2、构造函数
function Star(){
console.log(‘构造函数的this:’+this);
}
new Star()
打印结果为：

可知对象方法调用时this指向的是该方法的实例对象。

3、对象方法
var o = {
print: function(){
console.log(‘对象方法的this:’+this);
}
}
o.print()
打印结果为：

可知对象方法调用时this指向的是该方法所属对象。

4、事件绑定方法
当我们给某个按钮添加了一个绑定事件，他的this又是如何指向的呢？

例如现在有一个button按钮，现在我们给它添加一个点击事件，如下：

<body>
<button>按钮</button>
<script>
var btn = document.querySelector(‘button’);
btn.onclick = function(){
console.log(‘绑定事件的this:’+this);
}
</script>
</body>
当我们点击按钮时，可以得到：

可知，绑定事件调用时this指向的是绑定事件对象。

5、定时器函数
写一个定时函数，让他在1s后调用该函数。

window.setTimeout(function(){
console.log(‘定时器的this:’+this);
},1000)
打印结果为：

可知，定时器函数调用时this指向的是window。

6、立即执行函数
定义一个立即执行函数：

(function(){
console.log(‘立即执行函数的this:’+this);
})();
打印结果为：

可知，立即执行函数调用时this指向的是window。

综上，我们可以总结为：

调用方式 this指向
普通函数调用 window
构造函数调用实例对象，原型对象里面的方法也指向实例对象
对象方法调用该方法所属对象
事件绑定方法绑定事件对象
定时器函数 window
立即执行函数 window
二、改变函数内部 this 指向
但是在函数中，this指向也不是一成不变的，我们可以通过一些方法来更改this指向，主要有以下几种方法。前面在总结原型对象中this的指向问题中，有提到过call方法和apply方法，这里就不重复了，直接举例。

1、call 方法
先定义一个对象和一个函数。

var o = {
name:’xl’
}
function fn(){
console.log(this);
}
此时的this在一个普通的函数里面，前面有提到过，普通函数的this指向windiw，现在如果想将this的指向o对象，我们应该：

fn.call(o)
打印的结果为：

this指向成功修改。

2、apply 方法
方法同上。

var o = {
name:’xl’
}
function fn(){
console.log(this);
}
fn.apply(o);
打印结果为：

3、bind 方法
bind()方法不会调用函数。但是能改变函数内部this指向。

语法：

fun.bind(thisArg, arg1, arg2, …)
thisArg：在 fun 函数运行时指定的 this 值arg1，arg2：传递的其他参数返回由指定的 this 值和初始化参数改造的原函数拷贝

因此当我们只是想改变this 指向，并且不想调用这个函数的时候，可以使用 bind。

如下（还是用上面的例子）：

var o = {
name:’xl’
}
function fn(){
console.log(this);
}
var f = fn.bind(o);
f();
打印结果为：

这里需要注意的是：由于bind()方法不会调用函数，修改this指向后，返回的是一个新函数，所以我们可以将这个新函数赋给一个f，然后通过f来调用。

三、call apply bind 总结
1、相同点
都可以改变函数内部的this指向。

2、不同点
call 和 apply 会调用函数, 并且改变函数内部this指向。
-call 和 apply 传递的参数不一样, call 传递参数 aru1, aru2…形式 apply必须数组形式[arg]。
bind 不会调用函数, 可以改变函数内部this指向。
3、应用场景
call 经常做继承。
apply 经常跟数组有关系。比如借助于数学对象实现数组最大值最小值。
bind 不调用函数,但是还想改变this指向. 比如改变定时器内部的this指向。
总结
本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注我们的更多内容!

时间： 2021-11-21
JS匿名函数内部this指向问题详析
前言网上看到一句话,匿名函数的执行是具有全局性的,那怎么具有的全局性呢? this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上this的最终指向的是那个调用它的对象 1.案例中,第一个say打出来的是Alan,而第二个则是window var name = ‘window’ var person = { name :’Alan’, sayOne:function () { console.log(this.name) }, sayTwo:functi
JavaScript函数中this指向问题详解
this关键字哪个对象调用函数,函数里面的this指向哪个对象. 严格模式下:在全局环境中,this指向的是undefined 非严格模式下:在全局环境中,this指向的是window 全局定义的函数直接调用,this => window function fn(){ console.log(this); // 此时 this 指向 window } fn(); // 相当于 window.fn() 对象内部的函数调用,this => 调用者 var obj = { fn:f

JS 箭头函数的this指向详解
箭头函数是ES6中的新增特性,他没有自己的this,其this指向从外层代码库继承. 使用箭头函数时要注意一下几点: 箭头函数不能用作构造函数,用的话会抛出一个错误无法使用arguments参数,如果要用的话就用rest 无法使用yield命令,所以箭头函数无法用作Generator函数因为没有自己的this,所以没法通过bind.call.apply来改变this指向但是这不代表箭头函数的this指向是静态的,我们可以通过改变它外层代码库的this指向来控制箭头函数的this从外层代码
深入理解js函数的作用域与this指向
函数的作用域与this指向是js中很重要的一部分,理清这点东西需要个逻辑,看看我的逻辑怎么样… 下面是个提纲,可以直接挑你感兴趣的条目阅读. • 函数的定义方式:直接定义(window下,内部定义),对象的方法,对象原型的方法: • 函数的调用方式:直接调用,call/apply,with • 对于直接定义的函数和对象的方法,作用域默认状态下是它的定义处的作用域链. • 对于直接定义的函数,this指向window. • 对于对象的方法,this指向实例化对象(对应于实例化对象默认返回thi

Javascript中函数分类&this指向的实例详解

JS中定义函数的三种方式通过实例来说明吧 <script> //method1 function fn() { console.log(‘fn created ‘); } //method2 var fn2 = function () { console.log(‘fn2 created’); } //method3 var fn3 = new Function(‘test’, ‘console.log(test);’); fn3(‘fn3 test’); console.dir(fn3);
javascript让setInteval里的函数参数中的this指向特定的对象
看到这个题,我蒙了,因为那时候我不清除这个问题,想了半天没想出来,后来到网上一查,在国外的某网站查到说setInterval和setTimeout之后的函数的作用域是全局的,也就是里面的this指向的是全局对象. 这个问题可麻烦了,我经常要在循环函数里用this来引用当前对象,也许你想到可以用闭包,不过实际情况并非如此简单,对象实例多了之后,闭包也乱套了. 我的愿望就是让循环函数里的this仍然指向当前上下文的对象,无需传参数,无需闭包(其实这也是闭包,只是形式上看着比较自然而已); 例如:(一
深入理解JavaScript系列（15）函数（Functions）
介绍本章节我们要着重介绍的是一个非常常见的ECMAScript对象—函数(function),我们将详细讲解一下各种类型的函数是如何影响上下文的变量对象以及每个函数的作用域链都包含什么,以及回答诸如像下面这样的问题:下面声明的函数有什么区别么?(如果有,区别是什么). 原文:http://dmitrysoshnikov.com/ecmascript/chapter-5-functions/ 复制代码代码如下: var foo = function () { … }; 平时的惯用方式:
详解JavaScript中关于this指向的4种情况
对很多前端开发者来说,JavaScript语言的this指向是一个令人头疼的问题.先看下面这道测试题,如果你能实现并解释原因,那本文对你来说价值不大,可以直接略过. 开篇测试题:尝试实现注释部分的Javascript代码,可在其他任何地方添加更多代码(如不能实现,说明一下不能实现的原因): let Obj = function (msg) { this.msg = msg this.shout = function () { alert(this.msg) } this.waitAndS

php指定函数参数默认值示例代码
例1 复制代码代码如下: <html><head><title>php函数指定默认值-www.jb51.net</title></head><body><?phpfunction printMe($param = NULL){ print $param;}printMe(“This is test”);printMe();?> </body></html> 输出结果:Thi
javascript中利用柯里化函数实现bind方法
柯理化函数思想:一个js预先处理的思想:利用函数执行可以形成一个不销毁的作用域的原理,把需要预先处理的内容都储存在这个不销毁的作用域中,并且返回一个小函数,以后我们执行的都是小函数,在小函数中把之前预先存储的值进行相关的操作处理即可: 柯里化函数主要起到预处理的作用: bind方法的作用:把传递进来的callback回调方法中的this预先处理为上下文context; / bind方法实现原理1 @param callback [Function] 回调函数 * @param con
javascript中利用柯里化函数实现bind方法【推荐】
• 柯理化函数思想:一个js预先处理的思想:利用函数执行可以形成一个不销毁的作用域的原理,把需要预先处理的内容都储存在这个不销毁的作用域中,并且返回一个小函数,以后我们执行的都是小函数,在小函数中把之前预先存储的值进行相关的操作处理即可: • 柯里化函数主要起到预处理的作用: • bind方法的作用:把传递进来的callback回调方法中的this预先处理为上下文context; / bind方法实现原理1 @param callback [Function] 回调函数 * @par
在java中实现C#语法里的按引用传递参数的方法
在C#中,在次函数中调用时改变了其中的数值,主函数中也将发生改变 ref 关键字使参数按引用传递.其效果是,当控制权传递回调用方法时,在方法中对参数所做的任何更改都将反映在该变量中.若要使用 ref 参数,则方法定义和调用方法都必须显式使用 ref 关键字 out 关键字会导致参数通过引用来传递.这与 ref 关键字类似,不同之处在于 ref 要求变量必须在传递之前进行初始化.若要使用 out 参数,方法定义和调用方法都必须显式使用 out 关键字. Java里面不像C#那样,Java只有对象类

深入理解JavaScript函数参数(推荐)
前面的话 javascript函数的参数与大多数其他语言的函数的参数有所不同.函数不介意传递进来多少个参数,也不在乎传进来的参数是什么数据类型,甚至可以不传参数. arguments javascript中的函数定义并未指定函数形参的类型,函数调用也未对传入的实参值做任何类型检查.实际上,javascript函数调用甚至不检查传入形参的个数 function add(x){ return x+1; } console.log(add(1));//2 console.log(add(‘1’));/
JavaScript高级程序设计（第3版）学习笔记8 js函数（中）
6.执行环境和作用域 (1)执行环境(execution context):所有的JavaScript代码都运行在一个执行环境中,当控制权转移至JavaScript的可执行代码时,就进入了一个执行环境.活动的执行环境从逻辑上形成了一个栈,全局执行环境永远是这个栈的栈底元素,栈顶元素就是当前正在运行的执行环境.每一个函数都有自己的执行环境,当执行流进入一个函数时,会将这个函数的执行环境压入栈顶,函数执行完之后再将这个执行环境弹出,控制权返回给之前的执行环境. (2)变量对象(variable ob
JavaScript 参数中的数组展开 [译]
译者注:本文要讲的是ECMAScript 6中的知识点,如果你连ES5都不了解的话.我得说,你已经很落后了.CSS4,HTML6,甚至ES7 ES8都已经开始规划了,赶紧形动起来吧,否则淘汰! 有些时候,我们需要把一个数组展开成多个元素,然后把这些元素作为函数调用的参数.JavaScript中可以使用Function.prototype.apply来实现这种展开操作,但它不能被应用在执行构造函数的情况下.本文解释了什么是展开操作以及如何在使用new运算符的同时进行展开操作. 1.展开(Sprea

更多相关文章

随机推荐