JavaScript的this的值到底是什么?

前言

JavaScript 有一套完全不同于其它语言的对 this 的处理机制。 一般有四种不同的情况下 ,this 指向的各不相同。但是有一个总的原则,那就是this指的是,调用函数的那个对象。

this

一、函数调用

函数调用时,this指向全局对象,如果是在浏览器中中,这个对象是window

请看下面这段代码:

var fn  = function() {
    function test() {
      console.log(this);
    // this 将会被设置为全局对象(译者注:浏览器环境中也就是 window 对象)
    }
    test();
}
fn() //执行函数fn,结果指向window

二、方法调用

当函数作为对象的方法时,this指向该对象

请看下面这段代码:

var age = 10;
var xiaoming = {};

xiaoming.age = 18;
xiaoming.getAge = function(){
  console.log(this.age);
}

xiaoming.getAge(); //18

之所以为18不是10,因为this指向xiaoming这个对象,所以打印出来是18

三、调用构造函数

如果函数倾向于和 new 关键词一块使用,则我们称这个函数是 构造函数。 在函数内部,this 指向新创建的对象。

请看下面这段代码:


var x = 0;

function test(){
  this.x = 1;
}
var obj = new test();

console.log(obj.x); //  1

 

打印出来为1不为0,表明this指向新对象obj,而不是全局对象。

四、显式的设置 this (apply和call)

当使用 Function.prototype 上的 call 或者 apply 方法时,函数内的 this 将会被 显式设置为函数调用的第一个参数.

当第一参数为null 或者 undefined,在浏览器环境里那么window对象就是默认的this指向。

var age = 0;
var xiaoming = {};

function setAge(age){this.age = age;}

xiaoming.age = 18;
xiaoming.setAge = setAge;

xiaoming.setAge.apply(null,[20]);
xiaoming.age     // 18
age              // 20

xiaoming.setAge.call(xiaoming,25);
xiaoming.age     // 25
age              // 20

apply和call区别在于传递参数格式不同,call()接受一个参数列表,而apply()接受包含多个参数的数组(或类数组对象)

文笔有限,才疏学浅,文中若有不对之处,还望告知。


参考文章

this 的工作原理

this 的值到底是什么?一次说清楚

Javascript的this用法

Function.prototype.apply()

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 第5章 引用类型(返回首页) 本章内容 使用对象 创建并操作数组 理解基本的JavaScript类型 使用基本类型...
    大学一百阅读 3,274评论 0 4
  • 1. this之谜 在JavaScript中,this是当前执行函数的上下文。因为JavaScript有4种不同的...
    百里少龙阅读 1,039评论 0 3
  • 看着周围的伙伴一个个翻开了新的篇章,我却懒得翻页,我不敢想看到十年后自己,仿佛身边就有这样的模版
    忽然提IU阅读 94评论 0 1
  • 遇见任何事情,发现任何问题,首先要想的不是找出谁的责任,而是我怎么能快速的解决,能有效的最小的代价,来换取前进。 ...
    乾立风中阅读 165评论 0 0
  • 002 表演型人格 目录 ©️音海凛 短暂的沉默过后,马可回过头问我,刚才你在KTV唱的那首歌日文是从哪里来的,“...
    音海凛阅读 759评论 0 1