返回顶部
首页 > 资讯 > 前端开发 > 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://lsjlt.com/news/166767.html(转载时请注明来源链接)

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

猜你喜欢
  • JS函数(普通函数,箭头函数)中this的指向问题详解
    目录普通函数箭头函数普通函数 具名普通函数、匿名普通函数,在不作为对象的属性值的情况下,其内部的 this 总是指向代码运行环境下的全局对象 ( 例如,浏览器中的 window )。...
    99+
    2024-04-02
  • JS 箭头函数的this指向详解
    箭头函数是ES6中的新增特性,他没有自己的this,其this指向从外层代码库继承。 使用箭头函数时要注意一下几点: 箭头函数不能用作构造函数,用的话会抛出一个错误 ...
    99+
    2024-04-02
  • JS箭头函数的this指向分析
    本篇内容介绍了“JS箭头函数的this指向分析”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!箭头函数是ES6中的新增特性,他没有自己的thi...
    99+
    2023-06-25
  • JavaScript中箭头函数与普通函数的区别详解
    本文为大家讲解了JavaScript中箭头函数与普通函数的区别,供大家参考,具体内容如下 箭头函数: let fun = () => { console.log('...
    99+
    2024-04-02
  • JavaScript函数中this指向问题详解
    this关键字 哪个对象调用函数,函数里面的this指向哪个对象。 **严格模式下:**在全局环境中,this指向的是undefined **非严格模式下:**在全局环境中,thi...
    99+
    2024-04-02
  • JavaScript箭头函数与普通函数的区别示例详解
    目录箭头函数与普通函数的区别箭头函数的理解箭头函数里的this指向总结箭头函数与普通函数的区别 要讨论箭头函数和普通函数的区别,首先来看看两者的基本格式 普通函数和箭头共同点就是圆...
    99+
    2022-11-13
    JavaScript箭头函数普通函数 JavaScript 箭头普通函数区别
  • JavaScript函数this指向问题详解
    目录一、 函数内 this 的指向1、普通函数2、构造函数3、对象方法4、事件绑定方法5、定时器函数6、立即执行函数二、改变函数内部 this 指向1、call 方法2、apply ...
    99+
    2024-04-02
  • JavaScript如何把普通函数改成箭头函数
    小编给大家分享一下JavaScript如何把普通函数改成箭头函数,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!把普通函数改成箭头函数const func = function() {...
    99+
    2023-06-27
  • es6中箭头函数和普通函数的区别有哪些
    这篇文章主要介绍es6中箭头函数和普通函数的区别有哪些,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完! 区别:1、箭头函数的定义要比普通函数定义简洁、清晰得...
    99+
    2024-04-02
  • ES6箭头函数及this指向怎么使用
    这篇文章主要介绍“ES6箭头函数及this指向怎么使用”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“ES6箭头函数及this指向怎么使用”文章能帮助大家解决问题。1...
    99+
    2024-04-02
  • JavaScript 箭头函数的特点、与普通函数的区别
    目录1. 箭头函数的使用1. 普通函数到箭头函数2. 省略大括号和 return3. 省略小括号2. 箭头函数与普通函数的区别1. 箭头函数的 this 是父级作用域的 this2....
    99+
    2024-04-02
  • es6箭头函数和普通函数的区别有哪些
    这篇文章主要介绍“es6箭头函数和普通函数的区别有哪些”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“es6箭头函数和普通函数的区别有哪些”文章能帮助大家解决问题。ES6 箭头函数的主要区别如下:&n...
    99+
    2023-06-17
  • ES6箭头函数中this问题的示例分析
    小编给大家分享一下ES6箭头函数中this问题的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!简要介绍:箭头函数中的th...
    99+
    2024-04-02
  • 关于JS中的箭头函数
    更简短的函数并且不绑定this。 箭头函数表达式的语法比函数表达式更简洁,并且没有自己的this,arguments,super或new.target。 箭头函数表达式更适用于那些本...
    99+
    2023-05-19
    JS 函数 箭头函数
  • 如何理解JavaScript函数this指向问题
    这篇文章给大家介绍如何理解JavaScript函数this指向问题,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。一、 函数内 this 的指向这些 this的指向,是当调用函数的时候确定的。 调用方式的不同决...
    99+
    2023-06-21
  • 详解Python中的普通函数和高阶函数
    目录什么是函数函数的嵌套调用高阶函数我们思考一下计算圆形和方形的面积为何高阶函数能够降低维度总结什么是函数 每个语言都有函数,甚至大家用的Excel里面也有函数,我们以前学习的数学也...
    99+
    2024-04-02
  • Javascript箭头函数中this的示例分析
    小编给大家分享一下Javascript箭头函数中this的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!首先我们先看一段...
    99+
    2024-04-02
  • JavaScript箭头函数的this怎么使用
    这篇文章主要介绍“JavaScript箭头函数的this怎么使用”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“JavaScript箭头函数的this怎么使用”文章能...
    99+
    2024-04-02
  • 详解JavaScript中的箭头函数的使用
    目录前言箭头函数语法无圆括号语法隐式返回注意隐式返回错误无法命名箭头函数如何处理this关键字匿名箭头函数不正常工作的情况箭头函数作为对象方法箭头函数与第三方库箭头函数没有argum...
    99+
    2022-11-13
    JavaScript箭头函数使用 JavaScript 箭头函数 JS 箭头函数
  • 一文带你了解JS箭头函数
    【推荐学习:javascript视频教程】以上就是一文带你了解JS箭头函数的详细内容,更多请关注编程网其它相关文章!...
    99+
    2022-11-22
    javascript 箭头函数
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作