对javascript this的理解

对于this的理解,大部分时间都比较模糊,最近几天做了一些研究,记录一下

首先应该明白,this是执行上下文的一个属性,它的值取决于执行上下文,执行上下文和函数调用方式相关,定义一个function的时候会激活一个上下文,关于上下文的介绍,参考《对javascript执行上下文的理解》一文。

this的几种使用场景:

一 、全局代码中的this

在全局的上下文中,this始终是全局对象本身,看代码:

this.a = 10;
alert(window.a);//10

b = 20;
alert(this.b);//20

var c = 30;
alert(this.c);//30

二、function中的this

要彻底理解function,应该明白this的赋值原理,讲this赋值之前,先来看一下javascript的引用类型(reference type), 引用类型的值可以看作一个对象,包含两个属性,propertyName 标识属性的值,base标识该属性的拥有者,

{

  base : <base object>,

  propertyName : <property name>
}

javascript处理引用类型的值只可能有两种情况:① 处理一个标识符 ②属性访问符

先看标识符,把标识符处理成引用类型包含 声明变量,函数名,形参和全局对象中未识别的属性名

如下

var foo = 10;
function bar(){}

操作的中间结果中,引用类型的值分别被处理成如下所示:

var fooReference = {
  base: global,
  propertyName: ‘foo‘
};

var barReference = {
  base: global,
  propertyName: ‘bar‘
};

属性访问器都应该熟悉。它有两种变体:点(.)语法(此时属性名是正确的标示符,且事先知道),或括号语法([])

var foo = {
  bar : function(){}
}foo.bar();foo[‘bar‘]();

在中间计算的返回值中,我们有了引用类型的值。

var fooBarReference = {  base: foo,  propertyName: ‘bar‘};

那么引用类型和this的赋值有什么关系呢,在javascript中,一个函数上下文中确定this值的通用规则如下:

在一个函数上下文中,this由调用者提供,由调用函数的方式来决定。如果调用括号()的左边是引用类型的值,this将设为引用类型值的base对象(base object),在其他情况下(与引用类型不同的任何其它属性),这个值为null。不过,实际不存在this的值为null的情况,因为当this的值为null的时候,其值会被隐式转换为全局对象。

#demo1

function foo(){
  alert(this);
}
foo();//this-> global

上面提到,标识符包含函数名,即foo被当成引用类型的值来处理,处理过程中值为

var fooBarReference = {
  base: global,
  propertyName: ‘foo‘
};

所以执行上下文中的this被赋值为global

#demo2

var foo = {
  bar : function(){
    alert(this);
  }
}
foo.bar();//this->foo

demo2中方法调用属于属性访问器的方式,base被置为foo

#demo3 看一个调用方式,

var name ="i am from window";
var foo = {
  name : "i am in foo",
  getName : function(){
    alert(this.name);
  }
}
var bar = foo.getName;
bar();//i am from window

foo.getName();//i am in foo

bar属于标识符,解析成引用类型的值后base为global,foo.getName属性访问器访问方式调用方法,base 为foo,为什么用表达式的不同形式激活同一个函数会不同的this值,答案在于引用类型(type Reference)不同的中间值

三、函数调用和非引用类型

当调用括号的左边不是引用类型而是其它类型,这个值自动设置为null,结果为全局对象

(function () {
  alert(this); // null => global
})();

在这个例子中,我们有一个函数对象但不是引用类型的对象(它不是标示符,也不是属性访问器),相应地,this值最终设为全局对象。

四、引用类型和this为null

有一种情况是这样的:当调用表达式限定了call括号左边的引用类型的值, 尽管this被设定为null,但结果被隐式转化成global。当引用类型值的base对象是被活动对象时,这种情况就会出现。

下面的实例中,内部函数被父函数调用,此时我们就能够看到上面说的那种特殊情况。

function foo() {
  function bar() {
    alert(this); // global
  }
  bar(); // the same as AO.bar()
}

活动对象总是作为this返回,值为null——(即伪代码的AO.bar()相当于null.bar())。这里我们再次回到上面描述的例子,this设置为全局对象。

五、构造方法中的this

构造方法中的this比较简单,

function Foo(){
  this.a = ‘inner‘;
  this.getA = function(){
    alert(this.a);
  }
}

var f1 = new Foo();
f1.a;// inner
f1.getA();//inner

new Foo()执行的时候,首先先创建一个空对象{},然后把对象作为this传入到构造方法Foo()中执行初始化操作,然后把标识符f1指向该对象。

六、调用函数中手动修改this

在函数原型中定义的两个方法(因此所有的函数都可以访问它)允许去手动设置函数调用的this值。它们是.apply和.call方法。他们用接受的第一个参数作为this值,this 在调用的作用域中使用。这两个方法的区别很小,对于.apply,第二个参数必须是数组(或者是类似数组的对象,如arguments,反过来,.call能接受任何参数。两个方法必须的参数是第一个——this。

var b = 10;

function a(c) {
  alert(this.b);
  alert(c);
}

a(20); // this === global, this.b == 10, c == 20

a.call({b: 20}, 30); // this === {b: 20}, this.b == 20, c == 30
a.apply({b: 30}, [40]) // this === {b: 30}, this.b == 30, c == 40

对javascript this的理解

时间: 2024-10-10 22:02:25

对javascript this的理解的相关文章

JavaScript大杂烩6 - 理解JavaScript中的this

在JavaScript开发中,this是很常用的一个关键字,但同时也是一个很容易引入bug的一个关键字,在这里我们就专门总结一下页面中可能出现的this关键字(包括几种在其他页面文件中出现的this). JavaScript中的this关键字通常只使用在函数中,它指向当前函数的调用者,这是this关键字的本质,所有的使用方式都是围绕这个展开的,让我们来看一下在各种性质的函数中this的用法.1. 在对象的函数中使用this var person = { name: 'Frank', say: f

【JavaScript】深入理解JavaScript之强大的原型和原型链

由于JavaScript是唯一一个被广泛使用的基于原型继承的语言,所以理解两种继承模式的差异是需要一定时间的,今天我们就来了解一下原型和原型链. AD: hasOwnProperty函数: hasOwnProperty是Object.prototype的一个方法,它可是个好东西,他能判断一个对象是否包含自定义属性而不是原型链上的属性,因为hasOwnProperty 是 JavaScript 中唯一一个处理属性但是不查找原型链的函数. // 修改Object.prototype Object.p

JavaScript大杂烩12 - 理解Ajax

AJAX缘由 再次谈起这个话题,我深深的记得就在前几年,AJAX被炒的如火如荼,就好像不懂AJAX,就不会Web开发一样.要理解AJAX为什么会出现,就要先了解Web开发面临的问题. 我们先来回忆一下Web页面的申请过程,这个咱们在第一篇中就介绍过了:Web页面开发就是在无连接和无状态的HTTP协议上管理页面的状态.每次申请页面的时候,服务器都会返回完整的HTML文本(当然还有其他的文本文件),浏览器就负责解析这个文本并在浏览器中显示. 在这个过程中,不管当前页面的内容是不是都变化了,服务器都会

JavaScript大杂烩7 - 理解内置集合

JavaScript内置了很多对象,简单的类型如String,Number,Boolean (相应的"值类型"拥有相同的方法),复杂一点的如Function,Object,Array,它们支撑起来JavaScript编程的基石.由于Number与Boolean很简单,这里就不多说了,下面着重介绍其他的内置对象. 万物之源 - Object对象 JavaScript是单根的,唯一的根就是Object对象,这个对象提供了几个还是不错的方法,值得了解一下. 1. hasOwnProperty

JavaScript大杂烩8 - 理解文本解析的"黄金搭档"

文本解析"黄金搭档" - String与RegExp对象 文本解析是任何语言中最常用的功能,JavaScript中也是一样,而正则表达式作为最常用的方式,JavaScript也同样是支持的,下面就来看看字符串对象与正则表达式对象的配合. 字符串的恒定性 在正式开始讨论字符串对象的成员之前,我们需要了解一点,那就是:与C#一样,JavaScript 的字符串是不可变的(immutable),String对象定义的方法都不会改变字符串的内容.像toUpperCase这样的方法,返回的是全新

[JavaScript原型继承理解一]

转:http://www.cnblogs.com/harolei/p/3740354.html 对于JavaScript的继承和原型链,虽然之前自己看了书也听了session,但还是一直觉得云里雾里,不禁感叹JavaScript真是一门神奇的语言.这次经过Sponsor的一对一辅导和自己回来后反复思考,总算觉得把其中的精妙领悟一二了. 1. JavaScript创建对象 在面向对象语言中,通常通过定义类然后再进行实例化来创建多个具有相同属性和方法的对象.但是在JavaScript中并没有类的概念

JavaScript大杂烩9 - 理解BOM

毫无疑问,我们学习JavaScript是为了完成特定的功能.在最初的JavaScript类型系统中,我们已经分析过JavaScript在页面开发中充当着添加逻辑的角色,而且我们知道JavaScript不仅仅包含基本的语法规范.下面我们就重点看一下JavaScript在页面中干的那些事.总的来说,JavaScript在页面端就干两件事:操作DOM与操作BOM (当然了向Server获取数据也是它的工作,不过获取到数据后还是回来干这两件事,大家对JavaScript最直接的印象应该就是各种光怪陆离的

JS javascript面向对象的理解及简单的示例

javascript面向对象的理解及简单的示例 一. javascript面向对象概念: 为了说明 JavaScript 是一门彻底的面向对象的语言,首先有必要从面向对象的概念着手 , 探讨一下面向对象中的几个概念: 1.一切事物皆对象 2.对象具有封装和继承特性 3.对象与对象之间使用消息通信,各自存在信息隐藏 以这三点做为依据,C++ 是半面向对象半面向过程语言,因为,虽然他实现了类的封装.继承和多态,但存在非对象性质的全局函数和变量.Java.C# 是完全的面向对象语言,它们通过类的形式组

JavaScript:彻底理解同步、异步和事件循环(Event Loop) (转)

原文出处:https://segmentfault.com/a/1190000004322358 一. 单线程 我们常说"JavaScript是单线程的". 所谓单线程,是指在JS引擎中负责解释和执行JavaScript代码的线程只有一个.不妨叫它主线程. 但是实际上还存在其他的线程.例如:处理AJAX请求的线程.处理DOM事件的线程.定时器线程.读写文件的线程(例如在Node.js中)等等.这些线程可能存在于JS引擎之内,也可能存在于JS引擎之外,在此我们不做区分.不妨叫它们工作线程