文档章节

js的this指向详解

b
 boySpray
发布于 2017/08/04 16:22
字数 590
阅读 9
收藏 0

前言

this是Javascript语言的一个关键字它代表函数运行时,自动生成的一个内部对象,只能在函数内部使用。

this指向十分重要,了解js中this指向是每一个学习js的人必学的知识点。这些是我在学习中借鉴前人总结的,希望对你有用。

常见的几种 this 指向场景

  • 全局作用域或者普通函数中 this 指向全局对象window。

    //直接打印
    console.log(this)       //window
    
    //function声明函数
    function bar () { console.log(this) }
    bar()          //window     严格模式下输出 undefined
    
    //function声明函数赋给变量
    var bar = function () { console.log(this) }
    bar()        //window        严格模式下输出 undefined
    
    //自执行函数
    ( function () { console.log(this) } )();        //window        严格模式下输出 undefined
    
  • 方法调用中调用的 this 指向

    //对象方法调用
    var person = {
        run: function () {console.log(this)}
    }
    person.run()       // person
    
    //事件绑定
    var btn = document.querySelector("button")
    btn.onclick = function () {
        console.log(this)       // btn
    }
    //事件监听
    var btn = document.querySelector("button")
    btn.addEventListener('click', function () {
       console.log(this)        //btn
    })
    
    //jquery的ajax
     $.ajax({
        self: this,
       ···
        success: function (res) {
            console.log(this)       // this指向传入$.ajxa()中的对象
            console.log(self)       // window
            }
    

}); //这里说明以下,将代码简写为$.ajax(obj) ,this指向obj,在obj中this指向window,因为在在success方法中,独享obj调用自己,所以this指向obj ```

  • 在构造函数或者构造函数原型对象中的 this 指向构造函数的实例

    //不使用new指向window
    function Person (name) {
        console.log(this)     // window
        this.name = name;
    }
    Person('inwe')
    
    //使用new
    function Person (name) {
          this.name = name
          console.log(this)       //people
          self = this
      }
      var people = new Person('iwen')
      console.log(self === people)        //true
    //这里new改变了this指向,将this由window指向Person的实例对象people
    
  • 函数体中,return新的函数的 this 指向

    //常见问题
    var myObj={
       name:'myObject',
       toString:function(){
        return `this ${ this.name ? this.name : this }`
       },
       getInfo:function(){
          return (function(){
            return this.toString();    //  内部 匿名函数自调用,因此this指向了全局对象 window
          })();
       }
     }
    alert(myObj.getInfo());     // 报错  this 指向window  而window并有 toString 函数还怎么调用。  严格模式下this 为 undefined
    
    //解决办法
    var myObj={
      name:'myObject',
      toString:function()   {
        return `this ${ this.name ? this.name : this }`
      },
      getInfo:function(){
       var This=this;//先把当前的this指向存起来
       return (function(){ 
          return This.toString();
       })();
      }
     }
    alert(myObj.getInfo());      // this myObject
    

总结

此学习篇,主要列举了一些应用场景的this指向问题。 

并未总结改变this指向的 bing  call  applay方法。

本人菜鸟一枚,文中若有错误,希望大神们能帮忙指出,指点指点。

© 著作权归作者所有

b
粉丝 0
博文 5
码字总数 4483
作品 0
厦门
高级程序员
私信 提问
JavaScript箭头函数中的this详解

前言 箭头函数极大地简化了this的取值规则。 普通函数与箭头函数 普通函数指的是用function定义的函数: var hello = function () {console.log("Hello, Fundebug!");} 箭头函数指的是用=>定...

开元中国2015
06/20
21
0
JavaScript继承详解(四)

文章截图 - 更好的排版 在本章中,我们将分析Douglas Crockford关于JavaScript继承的一个实现 - Classical Inheritance in JavaScript。 Crockford是JavaScript开发社区最知名的权威,是JSO...

solu
2010/12/25
1K
0
javascript技术难点(三)之this、new、apply和call详解

原文出处:夏天的森林 讲解this指针的原理是个很复杂的问题,如果我们从javascript里this的实现机制来说明this,很多朋友可能会越来越糊涂,因此本篇打算换一个思路从应用的角度来讲解this指...

夏天的森林
2014/12/10
0
0
JavaScript继承详解(二)

文章截图 - 更好的排版 这一章我们将会重点介绍JavaScript中几个重要的属性(this、constructor、prototype), 这些属性对于我们理解如何实现JavaScript中的类和继承起着至关重要的作用。 ...

solu
2010/12/22
239
0
关于javascript的原型和原型链,看我就够了(三)

温故 我们先回顾一下前两天讨论的内容 创建对象的三种方式 通过对象直接量 通过new创建对象 通过Object.create() js中对象分为两种 函数对象 普通对象 原型对象prototype 每一个函数对象都有...

陌上寒
2018/11/04
0
0

没有更多内容

加载失败,请刷新页面

加载更多

AliOS Things 3.0 应用开发指南

目录 应用开发框架介绍 使用条件 快速开始 第一步:下载AliOS Things 3.0源码 第二步:添加AOS_SDK_PATH环境变量 第三步:AliOS Studio中创建应用工程 编译、烧录、调试 其他说明 参考文档 ...

阿里云官方博客
36分钟前
3
0
日期和月份的计算

需求一 根据 【首次任务开始时间】和【任务间隔时间】和【每个任务持续时间】和【任务次数】计算出每个任务的时间 // 数据计算方法 async dateCalculation() { const firstD...

沉迷代码我爱学习
41分钟前
2
0
Spring Cloud Gateway 之请求坑位[微服务IP不同请求会失败]

问题产生背景 在使用Spring Cloud Gateway过程中,希望配置多Routes映射不同的微服务,因为Gateway 和Zuul的访问路径不同(zuul 会带有服务service Id),造成错误。 现象表现 问题定位 认为是...

IsaacZhang
52分钟前
5
0
Vue nodejs商城项目-搭建express框架环境

本文转载于:专业的前端网站➯Vue nodejs商城项目-搭建express框架环境 1.express-project 搭建express框架环境 安装express generator生成器 通过生成器自动创建项目 配置分析 安装 cnpm i -...

前端老手
59分钟前
3
0
maven项目A引入maven项目B的jar包

首先打开 项目B 的 pom 文件,加入如下配置 <build> <plugins> <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-compiler-plugin<......

嘴角轻扬30
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部