this指向详解

目录

一:严格模式与非严格模式

1.严格模式的开启

2.this指向的一些情况:

二:如何指定this的值?

1.在调用时指定this的值

2.在创建时指定this的值

[​编辑三: 结尾](#编辑三: 结尾)

一:严格模式与非严格模式

在非严格模式下,总是指向一个对象,在严格模式下可以是任意的值。

1.严格模式的开启

在我们的日常开发中,所使用的一般都是非严格模式。如果要使用严格模式可以添加 use strict 代码。

注意:这一行代码不管是写在方法里还是全局,都要写在最上方,可以有注释,但是不能有别的代码。

2.this指向的一些情况:

1) 全局执行环境中,指向全局对象(无论是严格模式下还是非严格模式下)

javascript 复制代码
    <script>
        'use strict'
        console.log(this)
    </script>

这里是开启了严格模式的,但是其实非严格模式也是指向的Window

2) 函数内部,取决于函数被调用的方式

(1)直接调用的this值

非严格模式下:全局对象(window)

严格模式下:undefined

javascript 复制代码
        // ----函数内部----
        //  直接调用-非严格模式
        function func(){
            console.log(this);
        }
        //  直接调用--严格模式
        function func_script(){
            'use strict'
            console.log(this);
        }
        func()
        func_script()

(2)对象方法调用的this值:调用者(两种模式都是)

javascript 复制代码
        //-----3. 对象方法调用 -----
        'use strict'
        const person = {
            name:'张三',
            out(){
                console.log(this);
            }
        }
        person.out()

这里写了严格模式,非严格模式下也是指向的调用者(person)

二:如何指定this的值?

1.在调用时指定this的值

call方法:func.call(thisArg,参数1,参数2....)

apply方法:func.apply(thisArg,[参数1,参数2....])

javascript 复制代码
        // ------1. 调用时指定this的值 ------
        function func(numA,numB){
            console.log(this);
            console.log(numA,numB);
        }
        const person = {
            name:'张三'
        }
        // 1.1  call方法
        func.call(person,1,2)
        // 1.2 apply方法-以数组的方式传入参数
        func.apply(person,[3,4])

可以看到,这里的 this 指向被我们主动改变,变成了指向person对象。否则的话,这里的this应当是指向Window。

2.在创建时指定this的值

bind方法:const bindFunc = func.bind(thisArg,绑定参数1,绑定参数2....)

箭头函数:() => {console.log(this)} 注意:这里的this找的是上级函数的this

javascript 复制代码
        function func(numA,numB){
            console.log(this);
            console.log(numA,numB);
        }
        const person = {
            name:'张三'
        }


        // ------2. 调用时指定this的值 ------
        // // 2.1  bind方法
        const bindFunc =  func.bind(person,'bind方法第一个参数')
        bindFunc('第二个参数')
        // // 2.2  箭头函数
        const food = {
            name:'蛋包饭',
            eat(){
                console.log(this);
                //这里是箭头函数,所以是上级作用域的对象,所以是food
                setTimeout(() => {
                    console.log(this);
                }, 1000);
                // 下面不是箭头函数,所以是全局对象window
                // setTimeout(function(){
                //     console.log(this);
                // }, 1000);
            }
        }
        food.eat()

三: 结尾

this是开发过程中最为常用的,因此掌握好this的指向,是一个开发工程师所必不可少的,同时可以减少很多莫名其妙的Bug,后续会完善一些call,apply,bind的手写方法,有想法的小伙伴可以一起来学习哦!

相关推荐
Aoda2 小时前
从痛点到落地:PawHaven 的 Monorepo 架构设计
前端·javascript
Sirens.2 小时前
Java核心概念:抽象类、接口、Object类深度剖析
java·开发语言·github
幸运小圣2 小时前
Set数据结构【ES6】
javascript·数据结构·es6
望获linux2 小时前
【实时Linux实战系列】使用 u-trace 或 a-trace 进行用户态应用剖析
java·linux·前端·网络·数据库·elasticsearch·操作系统
zxg_神说要有光2 小时前
我好像找到了最适合我的生活状态
前端·javascript
飞哥数智坊2 小时前
今天,我的个人网站正式上线了!
前端
程序员阿鹏2 小时前
49.字母异位词分组
java·开发语言·leetcode
念念不忘 必有回响2 小时前
前端自动化部署全流程(Jenkins + Nginx)
前端·自动化·jenkins
爱上妖精的尾巴3 小时前
5-22 WPS JS宏reduce数组的归并迭代应用(实例:提取最大最小值的记录)
服务器·前端·javascript·笔记·wps·js宏
Yurko133 小时前
【C语言】基本语法结构(上篇)
c语言·开发语言·学习