广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >JS函数(普通函数,箭头函数)中this的指向问题详解
  • 409
分享到

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

2024-04-02 19:04:59 409人浏览 泡泡鱼
摘要

目录普通函数箭头函数普通函数 具名普通函数、匿名普通函数,在不作为对象的属性值的情况下,其内部的 this 总是指向代码运行环境下的全局对象 ( 例如,浏览器中的 window )。

普通函数

具名普通函数、匿名普通函数,在不作为对象的属性值的情况下,其内部的 this 总是指向代码运行环境下的全局对象 ( 例如,浏览器中的 window )。

示例:

(function() {
    console.log(this); // window
    (function() {
        console.log(this); // window
        (function() {
            console.log(this); // window
        })()
    })()
})()  

普通函数,均可以通过其 bind、call、apply 方法 来改变其内部 this 的指向。

示例:

(function() {
    const func = (function() { console.log(this) }).bind('hello')
    const obj = {
        func,
        func1: (function() { console.log(this) }).bind('hello'),
        func2: (function F() { console.log(this) }).bind('hello')
    }
    func() // String {'hello'}
    obj.func() // String {'hello'}
    obj.func1() // String {'hello'}
    obj.func2() // String {'hello'}
})() 

当普通函数( 具名的、匿名的、外部定义的方法 ),作为对象的属性值被引用的时候,其内部的 this 指向该属性所直接归属的对象 。

示例:

(function() {
    const func = function() { console.log(this) }
    const obj = {
        func,
        func1: function F() { console.log(this) },
        func2() { console.log(this) },
        param: {
            func,
            func1: function F() { console.log(this) },
            func2() { console.log(this) }
        }
    }
    func() // window
    obj.func() // obj
    obj.func1() // obj
    obj.func2() // obj
    obj.param.func() // obj.param
    obj.param.func1() // obj.param
    obj.param.func2() // obj.param
})() 

箭头函数

箭头函数,不管是作为独立的方法 或是 作为对象的属性值,其内部的 this 均指向 该箭头函数被定义时所在的上下文中对应的 this。

示例:

(function() {
    
    const arrowfunc = () => console.log(this)
    
    console.log('-- 外层作用域 --');
    console.log(this); // String {'hello'}
    arrowfunc(); // String {'hello'}
    
    (function() {
        
        const arrowfunc1 = () => console.log(this)
        
        console.log('-- 内层作用域 --');
        console.log(this); // String {'world'}
        arrowfunc() // String {'hello'}
        arrowfunc1() // String {'world'}
 
        
        const obj = {
            arrowfunc,
            arrowfunc1,
            param: {
                arrowfunc,
                arrowfunc1,
                arrowfunc2: () => console.log(this)
            }
        }
        
        console.log('-- 函数作为对象属性值 --');
        obj.arrowfunc() // String {'hello'}
        obj.arrowfunc1() // String {'world'}
        obj.param.arrowfunc() // String {'hello'}
        obj.param.arrowfunc1() // String {'world'}
        obj.param.arrowfunc2() // String {'world'}
    }).bind('world')()
}).bind('hello')()

箭头函数 也有 bind、call、apply 方法,与普通函数一样可以通过这三个方法预设箭头函数的入参值。

试图通过这三个方法改变箭头函数内部 this 的指向,虽不会报错但却是无效的。

示例:

(function() {
    console.log(this); // String {'hello'}
    (() => {
        console.log(this); // String {'hello'}
        (() => {
            console.log(this) // String {'hello'}
        }).bind('bbb')()
    }).bind('aaa')();
    
    ((a, b, c) => {
        console.log(this) // String {'hello'}
        console.log(a) // a
        console.log(b) // b
        console.log(c) // c
    }).bind(null, 1, 2)(3)
}).bind('hello')()  

附:

* 箭头函数不能作为构造函数使用,强制使用 new 运算符作用在箭头函数上,将会报如下错误

new (() => {}) // Uncaught TypeError: (intermediate value) is not a constructor  

* 箭头函数内部没有定义 arguments 变量,箭头函数所在的作用域也不存在 arguments 的情况下,应用该变量会报错。

(function() {
    ((a) => {
        console.log(a) // 1
        console.log(arguments) // Arguments ['hello']
    })(1)
})('hello');
 
(() => {
    console.log(arguments) // Uncaught ReferenceError: arguments is not defined
})();

* 普通函数都有原型属性 prototype,箭头函数没有这个属性。

(function() {}).prototype // {constructor: ƒ}
(() => {}).prototype // undefined

到此这篇关于js函数(普通函数,箭头函数)中this的指向问题详解的文章就介绍到这了,更多相关JS函数this的指向内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: JS函数(普通函数,箭头函数)中this的指向问题详解

本文链接: https://www.lsjlt.com/news/166767.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • JS函数(普通函数,箭头函数)中this的指向问题详解
    目录普通函数箭头函数普通函数 具名普通函数、匿名普通函数,在不作为对象的属性值的情况下,其内部的 this 总是指向代码运行环境下的全局对象 ( 例如,浏览器中的 window )。...
    99+
    2022-11-13
  • JS 箭头函数的this指向详解
    箭头函数是ES6中的新增特性,他没有自己的this,其this指向从外层代码库继承。 使用箭头函数时要注意一下几点: 箭头函数不能用作构造函数,用的话会抛出一个错误 ...
    99+
    2022-11-12
  • JS箭头函数的this指向分析
    本篇内容介绍了“JS箭头函数的this指向分析”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!箭头函数是ES6中的新增特性,他没有自己的thi...
    99+
    2023-06-25
  • JavaScript中箭头函数与普通函数的区别详解
    本文为大家讲解了JavaScript中箭头函数与普通函数的区别,供大家参考,具体内容如下 箭头函数: let fun = () => { console.log('...
    99+
    2022-11-12
  • JavaScript函数this指向问题详解
    目录一、 函数内 this 的指向1、普通函数2、构造函数3、对象方法4、事件绑定方法5、定时器函数6、立即执行函数二、改变函数内部 this 指向1、call 方法2、apply ...
    99+
    2022-11-12
  • JavaScript函数中this指向问题详解
    this关键字 哪个对象调用函数,函数里面的this指向哪个对象。 **严格模式下:**在全局环境中,this指向的是undefined **非严格模式下:**在全局环境中,thi...
    99+
    2022-11-12
  • JavaScript箭头函数与普通函数的区别示例详解
    目录箭头函数与普通函数的区别箭头函数的理解箭头函数里的this指向总结箭头函数与普通函数的区别 要讨论箭头函数和普通函数的区别,首先来看看两者的基本格式 普通函数和箭头共同点就是圆...
    99+
    2022-11-13
    JavaScript箭头函数普通函数 JavaScript 箭头普通函数区别
  • es6中箭头函数和普通函数的区别有哪些
    这篇文章主要介绍es6中箭头函数和普通函数的区别有哪些,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完! 区别:1、箭头函数的定义要比普通函数定义简洁、清晰得...
    99+
    2022-10-19
  • ES6箭头函数中this问题的示例分析
    小编给大家分享一下ES6箭头函数中this问题的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!简要介绍:箭头函数中的th...
    99+
    2022-10-19
  • 如何理解JavaScript函数this指向问题
    这篇文章给大家介绍如何理解JavaScript函数this指向问题,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。一、 函数内 this 的指向这些 this的指向,是当调用函数的时候确定的。 调用方式的不同决...
    99+
    2023-06-21
  • 详解Python中的普通函数和高阶函数
    目录什么是函数函数的嵌套调用高阶函数我们思考一下计算圆形和方形的面积为何高阶函数能够降低维度总结什么是函数 每个语言都有函数,甚至大家用的Excel里面也有函数,我们以前学习的数学也...
    99+
    2022-11-12
  • Javascript中函数分类&this指向的实例详解
    JS中定义函数的三种方式 通过实例来说明吧 <script> //method1 function fn() { ...
    99+
    2022-11-12
  • 详解JavaScript中的箭头函数的使用
    目录前言箭头函数语法无圆括号语法隐式返回注意隐式返回错误无法命名箭头函数如何处理this关键字匿名箭头函数不正常工作的情况箭头函数作为对象方法箭头函数与第三方库箭头函数没有argum...
    99+
    2022-11-13
    JavaScript箭头函数使用 JavaScript 箭头函数 JS 箭头函数
  • JS中不应该使用箭头函数的四种情况详解
    目录箭头函数的一些缺点1、不支持参数对象2、无法通过apply、call、bind来改变this指针什么时候不能使用箭头功能1、请不要在构造函数中使用箭头函数2、请不要在点击事件中操...
    99+
    2022-11-13
  • JavaScript进阶教程之函数的定义、调用及this指向问题详解
    目录前言一:函数的定义 1.1 命名函数 1.2 匿名函数 1.3 利用 new Function() 声明函数1.4 重要结论&n...
    99+
    2022-11-13
  • C语言中关于scanf函数的一些问题详解
    在学习创建二叉树时遇到了scanf的一些问题,在此记录下来 创建根节点A后理想情况是输入A的左子树,若不为空继续创建左子树,但输入A后发现重复创建了一个左子树,测试后发现输入A换行...
    99+
    2022-11-12
  • 解决Leetcode问题的高效方式:PHP中的重定向函数。
    解决Leetcode问题的高效方式:PHP中的重定向函数 Leetcode是一个专注于算法和数据结构的在线学习平台,它提供了海量的题目让我们去练习和学习。但是有时候我们在写代码的时候,会遇到一些问题,比如我们需要在某个条件下重定向到另一个页...
    99+
    2023-09-24
    leetcode 函数 重定向
  • js中如何解决Date()日期函数浏览器兼容的问题
    这篇文章主要为大家展示了“js中如何解决Date()日期函数浏览器兼容的问题”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“js中如何解决Date()日期函数浏览...
    99+
    2022-10-19
  • 如何解决ajax回调函数中使用$(this)取不到对象的问题
    本篇内容主要讲解“如何解决ajax回调函数中使用$(this)取不到对象的问题”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“如何解决ajax回调函数中使用$(t...
    99+
    2022-10-19
  • Leetcode问题的解决方案:PHP中如何使用重定向函数?
    在Web开发中,重定向是一种非常有用的技术,它可以让你将用户重定向到另一个页面或URL。在PHP中,重定向函数可以帮助你实现这个功能。在本篇文章中,我们将探讨如何使用PHP的重定向函数来解决Leetcode问题。 什么是重定向? 重定向是...
    99+
    2023-09-24
    leetcode 函数 重定向
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作