热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

深入解析JavaScript中this关键字的使用方法与技巧

本文深入探讨了JavaScript中`this`关键字的多种使用方法和技巧。首先,分析了`this`作为全局变量时的行为;接着,讨论了其在对象方法调用中的表现;然后,介绍了`this`在构造函数中的作用;最后,详细解释了通过`apply`等方法改变`this`指向的机制。文章旨在帮助开发者更好地理解和应用`this`关键字,提高代码的灵活性和可维护性。

目次

1、 this作为全局变量
2、 作为对象要领的挪用
3、 作为组织函数挪用
4、 apply挪用

this是Javascript言语的一个关键字。它代表函数运转时,自动天生的一个内部对象,只能在函数内部运用.跟着函数运用场所的差别,this的值会发生变化。然则有一个总的准绳,那就是this指的是,挪用函数的谁人对象。

1、 this作为全局变量

var name = "The Window";
var object = {
    name : "My Object",
    getNameFunc : function(){
      return function(){
        return this.name;
      };
    }
};
console.log(object.getNameFunc()()); //The Window

2、 作为对象要领的挪用

函数还能够作为某个对象的要领挪用,这时候this就指这个上级对象。

function test2(){
console.log("x的值",this.x);
  }
  var o = {};
  o.x = 1;
  o.m = test2;
  o.m(); // 1

当要领在某个对象的内部时,此时this就指的是此要领的上级对象,由此可知最外层要领的上级对象是window全局对象

3、 作为组织函数挪用

所谓组织函数,就是经由过程这个函数天生一个新对象(object)。这时候,this就指这个新对象。

function test3(){
    this.x = 1;
  }
  var o = new test3();
  console.log("x的值",o.x);// 1

4、 apply挪用

apply()是函数对象的一个要领,它的作用是转变函数的挪用对象,它的第一个参数就示意转变后的挪用这个函数的对象。因而,this指的就是这第一个参数。

var x = 0;
  function test4(){
    alert(this.x);
  }
  var o={};
  o.x = 1;
  o.m = test4;
  o.m.apply(); //0

apply()的参数为空时,默许挪用全局对象。因而,这时候的运转效果为0,证实this指的是全局对象。
假如把末了一行代码修改成o.m.apply(o); //1
运转效果就变成了1,证实了这时候this代表的是对象o。

注:在一般的函数挪用中,this是由激活高低文代码的挪用者来供应的,即挪用函数的父高低文(parent context )。this取决于挪用函数的体式格局。

为了在任何情况下准确无误的肯定this值,有必要明白和记着这主要的一点。恰是挪用函数的体式格局影响了挪用的高低文中的this值,没有别的什么(我们能够在一些文章,以至是在关于Javascript的书本中看到,它们宣称:“this值取决于函数怎样定义,假如它是全局函数,this设置为全局对象,假如函数是一个对象的要领,this将老是指向这个对象。–这相对不正确”)。继承我们的话题,能够看到,即使是一般的全局函数也会被挪用体式格局的差别情势激活,这些差别的挪用体式格局致使了差别的this值。

function foo() {
alert(this);
}
foo(); // global
alert(foo === foo.prototype.constructor); // true
// 然则同一个function的差别的挪用表达式,this是差别的
foo.prototype.constructor(); // foo.prototype

有能够作为一些对象定义的要领来挪用函数,然则this将不会设置为这个对象。

var foo = {
bar: function () {
alert(this);
alert(this === foo);
}
};
foo.bar(); // foo, true
var exampleFunc = foo.bar;
alert(exampleFunc === foo.bar); // true
// 再一次,同一个function的差别的挪用表达式,this是差别的
exampleFunc(); // global, false

参考地点:
深切明白Javascript系列(13):This? Yes,this!
Javascript的this用法


推荐阅读
author-avatar
冰凌清泽_712
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有