码迷,mamicode.com
首页 > 编程语言 > 详细

对JavaScript中的this的理解

时间:2020-04-23 23:30:07      阅读:147      评论:0      收藏:0      [点我收藏+]

标签:use   arguments   方法   sof   函数   解析   href   事件   size   

什么是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的理解

标签:use   arguments   方法   sof   函数   解析   href   事件   size   

原文地址:https://www.cnblogs.com/xfMeng/p/12763821.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!