博客
关于我
对于js中的this指向的深入理解
阅读量:407 次
发布时间:2019-03-05

本文共 1546 字,大约阅读时间需要 5 分钟。

this指向详解

1. this的指向规则

this的指向是 JavaScript 中一个非常重要的概念,它决定了在函数中哪个对象会被用来访问变量、方法和属性。在不同的调用方式下,this的指向会发生变化。以下是几种常见的 this 指向规则:

  • new绑定

    当函数被用 new 调用时,this 指向的是新创建的对象。如果构造函数没有返回值,this 指向新对象;如果返回值是一个对象或函数,则this指向返回值。

  • 显式绑定

    使用 callapplybind 方法手动指定 this 的值。如果传入 nullundefined,严格模式下 this 为传入值,非严格模式下按默认规则绑定全局对象。

  • 隐式绑定

    函数在对象属性上直接调用,如 obj.func(),此时 this 指向 obj

  • 默认绑定

    当没有其他绑定规则适用时,this 绑定为调用函数的上下文对象。在严格模式下,thisundefined,否则为全局对象。

  • 箭头函数

    箭头函数没有自己的 this,它继承外层上下文的 this


  • 2. this指向的面试题总结

    如何判断 this 的指向?

  • 判断是否为 new 绑定:如果函数被 new 调用,则 this 指向新对象(返回值为对象或函数时除外)。

  • 判断是否为显式绑定:如果函数使用 callapplybind 手动指定 this,则 this 指向指定对象。

  • 判断是否为隐式绑定:如果函数在对象属性上调用,如 obj.func(),则 this 指向对象 obj

  • 默认绑定:如果以上均不适用,则 this 绑定为调用上下文对象(严格模式下为 undefined)。

  • 特殊情况:若 callapplybind 传入 nullundefined,严格模式下 this 为传入值,否则按默认规则绑定全局对象。


  • 3. 实际案例分析

    案例1:默认绑定

    var age = 28;function info4() {    console.log(this.age);}info4(); // 严格模式下:this 为 undefined,非严格模式下:this 为 window 或 global

    案例2:显式绑定

    var person3 = {    age: 26,    info: function() {        console.log(this.age);    }};var info = person3.info.bind(person3)();// 调用 bind 后,this 指向 person3

    案例3:隐式绑定

    var person5 = {    age: 26,    info3: function() {        console.log(this.age);    }};person5.info3(); // this 指向 person5

    案例4:箭头函数

    let obj = {    age: 27,    info: function() {        return () => {            console.log(this.age); // 这里的 this 指向 obj        }    }};let info5 = obj.info();info5(); // 输出 27

    4. 总结

    this 的指向是 JavaScript 开发中必须深入理解的核心概念。通过 new、显式绑定、隐式绑定和默认绑定等规则,可以准确判断 this 的值。尤其是在面试中,能够灵活运用这些规则来分析函数调用上下文,能够大大提升你的代码写作能力和问题解决能力。

    转载地址:http://capg.baihongyu.com/

    你可能感兴趣的文章
    PHP-快速排序的2种实现方法
    查看>>
    Redis使用lua脚本
    查看>>
    php-数据结构-二叉树的构建、前序遍历,中序遍历,后序遍历,查找,打印
    查看>>
    php-有序数组合并后仍有序
    查看>>
    redis使用
    查看>>
    Redis以及Redis的php扩展安装
    查看>>
    PHP-算法-最少比较次数获取最大值最小值
    查看>>
    php-约瑟夫问题
    查看>>
    Redis从库不能同步报Can’t save in background: fork: Cannot allocate memory错误
    查看>>
    Redis从入门到精通|干货篇
    查看>>
    php.ini maxfileuploads,细说PHP高洛峰文件上传类源文件
    查看>>
    php.ini中常见的配置信息选项
    查看>>
    php.ini配置中有10处设置不当,会使网站存在安全问题
    查看>>
    php/jsp/asp的区别
    查看>>
    php20个主流框架
    查看>>
    php301到https,虚拟主机设置自动301跳转到HTTPS
    查看>>
    php5 apache 配置
    查看>>
    php5 升级 php7 版本遇到的问题处理方法总结
    查看>>
    PHP5.3.3安装Mcrypt扩展
    查看>>
    PHP5.4 + IIS + Win2008 R2 配置
    查看>>