什么是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. 树莓派3B+之Raspbian系统的安装

    概述 因为之前一段时间在研究物联网的原因,所以对树莓派这个东西早就有所耳闻.在我的印象里,树莓派几乎无所不能,它可以用来学编程. 搞物联网. 做服务器,甚至还能用它来进行渗透测试.终于,没禁的住诱惑, ...

  2. rabbitmq++:RabbitMQ的消息确认ACK机制介绍

    1):什么是消息确认ACK. 答:如果在处理消息的过程中,消费者的服务器在处理消息的时候出现异常,那么可能这条正在处理的消息就没有完成消息消费,数据就会丢失.为了确保数据不会丢失,RabbitMQ支持 ...

  3. Java系列之泛型

    自从 JDK 1.5 提供了泛型概念,泛型使得开发者可以定义较为安全的类型,不至于强制类型转化时出现类型转化异常,在没有反省之前,可以通过 Object 来完成不同类型数据之间的操作,但是强制类型转换 ...

  4. Kubernetes实战总结 - Prometheus部署

    什么是普罗米修斯? Prometheus是最初在SoundCloud上构建的开源系统监视和警报工具包 . 自2012年成立以来,许多公司和组织都采用了Prometheus,该项目拥有非常活跃的开发人员 ...

  5. 为什么我建议每个开发人员都需要学Python?

    转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 原文出处:https://dzone.com/articles/10-reasons-why-every-d ...

  6. RedHat 6.5 上将系统语言修改为中文

    RedHat 6.5 上将系统语言修改为中文 1.打开终端,输入su -,键入密码,获取超级用户权限. 2.输入cd /etc/sysconfig,进入设置目录. 3.输入vi i18n,进入到配置文 ...

  7. Linux网络安全篇,进入SELinux的世界(四)

    SELinux的策略与规则管理set 1.安装SELInux工具 yum install setools-console 2.基本的命令 seinfo [-Atrub] -A ===> 列出SE ...

  8. 插入排序(C语言版)

    #include<iostream>using namespace std;int n;void lan(int a[],int size){ for(int i = 0;i < s ...

  9. C语言移动一个点

    #include"stdio.h"#include"windows.h"#include"conio.h"#define M 3#defin ...

  10. P4015 运输问题【zkw费用流】

    输入输出样例 输入 #1复制 2 3 220 280 170 120 210 77 39 105 150 186 122 输出 #1复制 48500 69140zuixiaofeiyo 说明/提示 1 ...