什么是this：

　　解析器（就是浏览器）在调用函数时，每次都会向函数内部传递两个隐含的参数；

　　这两个隐含参数其中一个就是this（还有一个是arguments，用来接收函数的实参），this指向的是一个对象，这个对象我们称为函数执行的上下文对象；

this的指向问题：

　　首先我们需要知道的是，this的指向不是固定的，它会根据函数的不同调用方式，来决定this的指向，常见的情况有以下几种：

　　1，封装函数后，直接以函数的形式调用：

　　　　　　——一般情况下以函数的形式来调用，this指向的是window对象

function fun() {

      console.log(this);

    }

// 以函数形式调用，this是window

fun();

　　　　——严格模式下为undefined

"use strict";

function fun() {

  console.log(this);

}

　　2，以方法的形式调用

　　　　　　——以方法的形式来调用，this就是调用方法的那个对象

function fun() {

      console.log(this.name);

    }

// 创建一个对象

var obj = {

  name: "meng",

  sayName: fun

}

var obj2 = {

  name: "xue",

  sayName: fun

}

// 以方法的形式调用，this是调用方法的那个对象（这里就是obj，而不是obj2或window）

obj.sayName();

　　

　　3，函数作为构造函数使用时

　　　　　　——以构造函数的形式来调用，this就是构造函数返回的那个对象

function Persion() {

        this.name = "meng";

}

// 这里的this指向构造函数返回的那个对象

var per = new Persion(); // Persion返回一个对象

console.log(per)

　　

　　4，在DOM操作，给元素对象绑定事件响应函数时，响应函数给谁绑定this就是谁

　　　　　　——事实上，也可以理解为事件响应函数函数在解析器内部，也是通过方法的形式调用的

<body>

  <div id="box1"></div>

  <button id="btn1">点我一下</button>

  <script>

      // 获取box1

      var box1 = document.getElementById("box1");

      var btn1 = document.getElementById("btn1");

      btn1.onclick = function() {

        // 这里的this是btn1元素对象

        console.log(this)

      };

  </script>

</body>

　　this的重定义：

　　有时候，我们希望自己定义this的指向，这个时候就用到了call，apply，bind三个方法，他们是属于Function构造函数原型中的方法，都有改变this指向的功能，但是他们的传参和使用方式有一些区别，这三个方法的使用和差别可参考：https://www.runoob.com/w3cnote/js-call-apply-bind.html

　　总结：

　　this其实是函数调用时，浏览器默认传给函数的一个参数；

　　  这个参数指向一个对象，具体是那个对象根据函数的调用方式不同而不同；

　　  我们可以通过call，apply，bind三个方法来改变this的指向；

对JavaScript中的this的理解的更多相关文章

  1. javascript中concat方法深入理解

    最近在恶补js知识的时候,总是会因为js强大的语法而感到震撼.因为以前对前端方面的疏忽,导致了一些理解的错误.因此痛改前非,下定决心,不管做什么事情,都要有专研的精神. 在介绍前,抛出一个问题:如何将 ...

  2. JavaScript - javascript 中的 "||" 与 "&&" 的理解与灵活运

    你肯定见到过这样的代码:a = a||"xxx". 它其实就等价于下面三种形式的代码: a = a || "xxx"; 与: if (!a) { a = &qu ...

  3. javascript中关于继承的理解

    首先,你要理解在javascript中,每当一个新函数创建时,都会生成一个prototype属性,我们管它叫做原型对象.看一个例子: function foo(){ this.name='qiangq ...

  4. 第一篇 对Javascript中原型的深入理解

      理解原型对象 在Javascript中不管什么时候,仅仅要创建一个新的函数,就会依据一组特定的规则为该函数创建一个prototype属性,这个属性指向函数的原型对象(这个对象的用途是包括能够有特定 ...

  5. Javascript中闭包的个人理解

       Javascript的一个特殊点就在于它的闭包和回调特性,这两个特性让初学Javascript的我是云里雾里,至今仍在苦苦摸索与理解.在一番苦思之后,整理了一下资料,将自己的理解思路记录下来,以 ...

  6. 关于JavaScript中prototype机制的理解

    最近几天一直在研究JavaScript中原型的机制,从开始的似懂非懂,到今天终于有所领悟.不敢说彻底理解,但是起码算知道怎么回事了. 为什么一开始似懂非懂 开始了解一遍原型机制后,感觉知其然但不知其所 ...

  7. javascript中变量提升的理解

    网上找了两个经典的例子 var foo = 1; function bar() { if (!foo) { var foo = 10; } alert(foo); } bar(); // 10 var ...

  8. JavaScript中with语句的理解

    with语句的作用是暂时改变作用域链.减少的重复输入. 其语法结构为: with(object){ //statements } 举一个实际例子吧: with(document.forms[0]){ ...

  9. 深入浅析JavaScript中with语句的理解

    JavaScript 有个 with 关键字, with 语句的原本用意是为逐级的对象访问提供命名空间式的速写方式. 也就是在指定的代码区域, 直接通过节点名称调用对象. with语句的作用是暂时改变 ...

  10. 对于JavaScript中this关键字的理解

    这是我第二遍学this了,第一遍学的懵懵的.this指哪里都是凭我一个男人的直觉然后控制台输出看看对不对. 刚查了书.博客.视频.理解差不多了.毕竟菜鸡me: 一.首先介绍下什么是this this是 ...

随机推荐

  1. SubLime Text3 常用插件总结

    近来开始恶补前端知识,在一定的技能基础上,逐渐开始进阶的学习和使用.因此在这里罗列下,SubLime Text3 常用插件: 1.Emmet 提高HTML & CSS3编写速度. 2.Them ...

  2. django中 对Mysql数据库的建表

    Django操作Mysql数据库: 1.1 在settings中,配置数据库相关参数,所以无需修改,这里我们看一下: DATABASES = { 'default': { # 这里可以指定使用的数据库 ...

  3. [codeforces]Page Numbers <模拟>

    描述: «Bersoft» company is working on a new version of its most popular text editor — Bord 2010. Bord, ...

  4. Python turtle库的应用——蛇

    turtle库介绍 1.Turtle中的turtle.setup()函数用于启动一个图形窗口,它有四个参数 turtle.setup(width, height, startx, starty) 分别 ...

  5. 不可被忽视的操作系统（ FreeRTOS ）【2】

    本文章总结基于官方FreeRTOS手册,测试系统为ESP32的IDF 4.0 本篇续上一篇<不可被忽视的操作系统( FreeRTOS )[1]> 其中上一篇主要内容为: FreeRTOS介 ...

  6. layuiadmin使用Ueditor 获取不了数据的解决方法

    表单根元素请使用form元素,layuiadmin 默认使用div作为表单根元素. <form class="layui-form"> <textarea nam ...

  7. 使用 Visual Studio 开发、测试和部署 Azure Functions（二）测试，部署

    1,引言 上一篇介绍了使用使用 Visual Studio 开发 "Azure Functions" 函数,此篇介绍 “Azure Functions” 的测试以及直接从 Vist ...

  8. css过渡和2d详解及案例

    css过渡和2d详解及案例(案例在下方,不要着急) 本文重点: 1.在2D变化使用过程中,有些需求需要两种或两种以上的变化同时使用, 值得注意的是尽量把位移变化放在最前面,把其他变化放在最后面,属性值 ...

  9. HDU1166（线段树 +更新单点，求区间总和）、HDU1754（线段树 + 更新单点，求区间最大值）

    线段树简单应用 先附上几张图便与理解,大佬文章传送门1.传送门2 HDU1166:题目描述 线段树 +更新单点,求区间总和 代码如下(递归版) #include<iostream> #in ...

  10. Vertica的这些事（九）——-vertica存储统计信息

    vertica存储统计信息: 表数量: select count(distinct table_name) FROM tables; 分区表数量: select count(distinct tabl ...