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指向。

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注我们的更多内容!

赞 (0)

相关推荐

  • javascript让setInteval里的函数参数中的this指向特定的对象

    看到这个题,我蒙了,因为那时候我不清除这个问题,想了半天没想出来,后来到网上一查,在国外的某网站查到说setInterval和setTimeout之后的函数的作用域是全局的,也就是里面的this指向的是全局对象. 这个问题可麻烦了,我经常要在循环函数里用this来引用当前对象,也许你想到可以用闭包,不过实际情况并非如此简单,对象实例多了之后,闭包也乱套了. 我的愿望就是让循环函数里的this仍然指向当前上下文的对象,无需传参数,无需闭包(其实这也是闭包,只是形式上看着比较自然而已); 例如:(一

  • 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指向问题详析

    前言 网上看到一句话,匿名函数的执行是具有全局性的,那怎么具有的全局性呢? this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上this的最终指向的是那个调用它的对象 1.案例中,第一个say打出来的是Alan,而第二个则是window var name = 'window' var person = { name :'Alan', sayOne:function () { console.log(this.name) }, sayTwo:functi

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

    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);

  • 深入理解js函数的作用域与this指向

    函数的作用域与this指向是js中很重要的一部分,理清这点东西需要个逻辑,看看我的逻辑怎么样... 下面是个提纲,可以直接挑你感兴趣的条目阅读. • 函数的定义方式:直接定义(window下,内部定义),对象的方法,对象原型的方法: • 函数的调用方式:直接调用,call/apply,with • 对于直接定义的函数和对象的方法,作用域默认状态下是它的定义处的作用域链. • 对于直接定义的函数,this指向window. • 对于对象的方法,this指向实例化对象(对应于实例化对象默认返回thi

  • JS 箭头函数的this指向详解

    箭头函数是ES6中的新增特性,他没有自己的this,其this指向从外层代码库继承. 使用箭头函数时要注意一下几点: 箭头函数不能用作构造函数,用的话会抛出一个错误 无法使用arguments参数,如果要用的话就用rest 无法使用yield命令,所以箭头函数无法用作Generator函数 因为没有自己的this,所以没法通过bind.call.apply来改变this指向 但是这不代表箭头函数的this指向是静态的,我们可以通过改变它外层代码库的this指向来控制 箭头函数的this从外层代码

  • JavaScript函数this指向问题详解

    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.普通函数 f

  • JavaScript函数封装的示例详解

    JavaScript函数封装的示例详解

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,

  • JavaScript函数柯里化详解

    什么是柯里化 柯里化是这样的一个转换过程,把接受多个参数的函数变换成接受一个单一参数(译注:最初函数的第一个参数)的函数,如果其他的参数是必要的,返回接受余下的参数且返回结果的新函数. 柯理化函数思想:一个js预先处理的思想:利用函数执行可以形成一个不销毁的作用域的原理,把需要预先处理的内容都储存在这个不销毁的作用域中,并且返回一个小函数,以后我们执行的都是小函数,在小函数中把之前预先存储的值进行相关的操作处理即可: 柯里化函数主要起到预处理的作用: bind方法的作用:把传递进来的callba

  • JavaScript函数定义方法实例详解

    本文实例讲述了JavaScript函数定义方法.分享给大家供大家参考,具体如下: JavaScript 函数定义方法 函数声明 在之前的教程中,你已经了解了函数声明的语法 : function functionName(parameters) { 执行的代码 } 函数声明后不会立即执行,会在我们需要的时候调用到. function myFunction(a, b) { return a * b; } 分号是用来分隔可执行JavaScript语句. 由于函数声明不是一个可执行语句,所以不以分号结束

  • JavaScript函数参数的传递方式详解

    JavaScript使用一个变量对象来追踪变量的生存期.基本类型值被直接保存在变量对象内:而引用类型值则作为一个指针保存在变量对象内,该指针指向实际对象在内存中的存储位置. 基本类型值的传递 向参数传递基本类型值时,被传递的值会被复制给一个局部变量(即命名参数,或者是arguments对象中的一个元素). function addOne (num) { num++; return num; } var count = 1; var result = addOne(count); console.

  • JavaScript进阶教程之函数的定义、调用及this指向问题详解

    目录 前言 一:函数的定义 1.1 命名函数 1.2 匿名函数 1.3 利用 new Function() 声明函数 1.4 重要结论 二:函数的调用 2.1 普通函数调用 2.2 立即执行函数调用 2.3 对象内方法调用 2.4 构造函数调用 2.5 事件函数的调用 2.6 定时器函数的调用 三:各类函数的内部this指向问题 总结 前言 这篇文章开始我们函数的进阶篇,和我们JavaScript基础学的函数有了很多拓展,这篇文章首先我们从函数的定义,调用,及其 this指向 来一个总结. 一:

  • JavaScript This指向问题详解

    JavaScript This指向问题详解

    这篇文章主要介绍了JavaScript This指向问题详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 各位小伙伴在面试中被面试官问道this指向问题一定不少吧,同时还被问道apply,call和bind的用法区别,现在,就来简单的聊一聊this到底指向何方. 1.基本概念 MDN的官方解释:与其他语言相比,函数的 this 关键字在 JavaScript 中的表现略有不同,此外,在严格模式和非严格模式之间也会有一些差别.在绝大多数情况下,

  • JavaScript箭头函数与普通函数的区别示例详解

    JavaScript箭头函数与普通函数的区别示例详解

    目录 箭头函数与普通函数的区别 箭头函数的理解 箭头函数里的this指向 总结 箭头函数与普通函数的区别 要讨论箭头函数和普通函数的区别,首先来看看两者的基本格式 普通函数和箭头共同点就是圆括号和大括号,圆括号里面一般放置参数,大括号一般放置函数主体,很明显箭头函数不需要写那么长,举个例子,有一个数组,使用map方法为数组的每个元素增加字符 let arr=['昨天','今天','明天'] let newarr=arr.map(function(item){ return item+='放假'

  • JS函数(普通函数,箭头函数)中this的指向问题详解

    目录 普通函数 箭头函数 普通函数 具名普通函数.匿名普通函数,在不作为对象的属性值的情况下,其内部的 this 总是指向代码运行环境下的全局对象 ( 例如,浏览器中的 window ). 示例: (function() { console.log(this); // window (function() { console.log(this); // window (function() { console.log(this); // window })() })() })() 普通函数,均可

随机推荐