Javascript this 的一些学习总结_javascript技巧

1.1.1 摘要
相信有C++、C#或Java等编程经验的各位,对于this关键字再熟悉不过了。由于Javascript是一种面向对象的编程语言,它和C++、C#或Java一样都包含this关键字,接下来我们将向大家介绍Javascript中的this关键字。
本文目录
全局代码中的this
函数中的this
引用类型
函数调用以及非引用类型
引用类型以及this的null值
函数作为构造器被调用时this的值
手动设置函数调用时this的值

1.1.2 正文

由于许多面向对象的编程语言都包含this关键字,我们会很自然地把this和面向对象的编程方式联系在一起,this通常指向利用构造器新创建出来的对象。而在ECMAScript中,this不仅仅只用来表示创建出来的对象,也是执行上下文的一个属性:

复制代码 代码如下:

activeExecutionContext = {
// Variable object.
VO: {...},
this: thisValue
};

全局代码中的this

复制代码 代码如下:

// Global scope
// The implicit property of
// the global object
foo1 = "abc";
alert(foo1); // abc
// The explicit property of
// the global object
this.foo2 = "def";
alert(foo2); // def
// The implicit property of
// the global object
var foo3 = "ijk";
alert(foo3); // ijk

前面我们通过显式和隐式定义了全局属性foo1、foo2和foo3,由于this在全局上下文中,所以它的值是全局对象本身(在浏览器中是window object);接下来我们将介绍函数中的this。
函数中的this
当this在函数代码中,情况就复杂多了,并且会引发很多的问题。
函数代码中this值的第一个特性(同时也是最主要的特性)就是:它并非静态的绑定在函数上。
正如此前提到的,this的值是在进入执行上下文(Excution context)的阶段确定的,并且在函数代码中的话,其值每次都不尽相同。
然而,一旦进入执行代码阶段,其值就不能改变了。如果要想给this赋一个新的值是不可能的,因为在那时this根本就不是变量了。
接下来,我们通过具体的例子说明函数中的this。
首先我们定义两个对象foo和person,foo包含一个属性name,而person包含属性name和方法say(),具体的定义如下:

复制代码 代码如下:

// Defines foo object.
var foo = {
name: "Foo"
};
// Defines person object.
var person = {
name: "JK_Rush",
say: function() {
alert(this === person);
alert("My name is " + this.name);
}
};
person.say(); // My name is JK_Rush
// foo and person object refer to
// the same function say
foo.say = person.say;
foo.say(); // My name is Foo.

通过上面的代码,我们发现调用person的say()方法时,this指向person对象,当通过赋值方式使得foo的say()方法指向peson中的say()方法时。我们调用foo的say()方法,发现this不是指向person对象,而不是指向foo对象,这究竟是什么原因呢?
首先,我们必须知道this的值在函数中是非静态的,它的值确定在函数调用时,具体代码执行前,this的值是由激活上下文代码的调用者决定的,比如说,调用函数的外层上下文;更重要的是,this的值是由调用表达式的形式决定的,所以说this并非静态的绑定在函数上。
由于this并非静态地绑定在函数上,那么我们是否可以在函数中动态地修改this的值呢?

复制代码 代码如下:

// Defines foo object.
var foo = {
name: "Foo"
};
// Defines person object.
var person = {
name: "JK_Rush",
say: function() {
alert(this === person);
this = foo; // ReferenceError
alert("My name is " + this.name);
}
};
person.say(); // My name is JK_Rush

现在我们在方法say()中,动态地修改this的值,当我们重新执行以上代码,发现this的值引用错误。这是由于一旦进入执行代码阶段(函数调用时,具体代码执行前),this的值就确定了,所以不能改变了。
引用类型
前面我们提到this的值是由激活上下文代码的调用者决定的,更重要的是,this的值是由调用表达式的形式决定的;那么表达式的形式是如何影响this的值呢?
首先,让我们介绍一个内部类型——引用类型,它的值可以用伪代码表示为一个拥有两个属性的对象分别是:base属性(属性所属的对象)以及该base对象中的propertyName属性:

复制代码 代码如下:

// Reference type.
var valueOfReferenceType = {
base: mybase,
propertyName : 'mybasepropertyName'
};

引用类型的值只有可能是以下两种情况:
当处理一个标识符的时候
或者进行属性访问的时候
标识符其实就是变量名、函数名、函数参数名以及全局对象的未受限的属性。

复制代码 代码如下:

// Declares varible.
var foo = 23;
// Declares a function
function say() {
// Your code.
}

中间过程中,对应的引用类型如下:

复制代码 代码如下:

// Reference type.
var fooReference = {
base: global,
propertyName: 'foo'
};
var sayReference = {
base: global,
propertyName: 'say'
};

我们知道Javascript中属性访问有两种方式:点符号和中括号符号:

复制代码 代码如下:

// Invokes the say method.
foo.say();
foo['say']();

由于say()方法是标识符,所以它对应于foo对象引用类型如下:

复制代码 代码如下:

// Reference type.
var fooSayReference = {
base: foo,
propertyName: 'say'
};

我们发现say()方法的base属性值为foo对象,那么它对应的this属性也将指向foo对象。
假设,我们直接调用say()方法,它对应的引用类型如下:

复制代码 代码如下:

// Reference type.
var sayReference = {
base: global,
propertyName: 'say'
};

由于say()方法的base属性值为global(通常来说是window object),那么它对应的this属性也将指向global。
函数上下文中this的值是函数调用者提供并且由当前调用表达式的形式而定的。如果在调用括号()的左边有引用类型的值,那么this的值就会设置为该引用类型值的base对象。 所有其他情况下(非引用类型),this的值总是null。然而,由于null对于this来说没有任何意义,因此会隐式转换为全局对象。
函数调用以及非引用类型
前面我们提到,当调用括号左侧为非引用类型的时,this的值会设置为null,并最终隐式转换为全局对象。
现在我们定义了一个匿名自执行函数,具体实现如下:

复制代码 代码如下:

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

由于括号()左边的匿名函数是非引用类型对象(它既不是标识符也不属于属性访问),因此,this的值设置为全局对象。

复制代码 代码如下:

// Declares object.
var foo = {
bar: function () {
alert(this);
}
};
(foo.bar)(); // foo.
(foo.bar = foo.bar)(); // global?
(false || foo.bar)(); // global?
(foo.bar, foo.bar)(); // global

这里注意到四个表达式中,只有第一个表达式this是指向foo对象的,而其他三个表达式则执行global。
现在我们又有疑问了:为什么属性访问,但是最终this的值不是引用类型对象而是全局对象呢?
我们注意到表达式二是赋值(assignment operator),与表达式一组操作符不同的是,它会触发调用GetValue方法(参见11.13.1中的第三步)。 最后返回的时候就是一个函数对象了(而不是引用类型的值了),这就意味着this的值会设置为null,最终会变成全局对象。
第三和第四种情况也是类似的——逗号操作符和OR逻辑表达式都会触发调用GetValue方法,于是相应地就会丢失原先的引用类型值,变成了函数类型,this的值就变成了全局对象了。
引用类型以及this的null值
对于前面提及的情形,还有例外的情况,当调用表达式左侧是引用类型的值,但是this的值却是null,最终变为全局对象(global object)。 发生这种情况的条件是当引用类型值的base对象恰好为活跃对象(activation object)。
当内部子函数在父函数中被调用的时候就会发生这种情况,通过下面的示意代码介绍活跃对象:

复制代码 代码如下:

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

由于活跃对象(activation object)总是会返回this值为——null(用伪代码来表示AO.bar()就相当于null.bar()),然后,this的值最终会由null转变为全局对象。
当函数调用包含在with语句的代码块中,并且with对象包含一个函数属性的时候,就会出现例外的情况。with语句会将该对象添加到作用域链的最前面,在活跃对象的之前。 相应地,在引用类型的值(标识符或者属性访问)的情况下,base对象就不再是活跃对象了,而是with语句的对象。另外,值得一提的是,它不仅仅只针对内部函数,全局函数也是如此, 原因就是with对象掩盖了作用域链中更高层的对象(全局对象或者活跃对象):
函数作为构造器被调用时this的值
函数作为构造函数时,我们通过new操作符创建实例对象是,它会调用Foo()函数的内部[[Construct]]方法;在对象创建之后,会调用内部的[[Call]]方法,然后所有Foo()函数中this的值会设置为新创建的对象。

复制代码 代码如下:

// Declares constructor
function Foo() {
// The new object.
alert(this);
this.x = 10;
}
var foo = new Foo();
foo.x = 23;
alert(foo.x); // 23手动设置函数调用时this的值

Function.prototype原型上定义了两个方法,允许手动指定函数调用时this的值。这两个方法分别是:.apply()和.call()。这两个方法都接受第一个参数作为调用上下文中this的值,而这两个方法的区别是传递的参数,对于.apply()方法来说,第二个参数接受数组类型(或者是类数组的对象,比如arguments), 而.call()方法接受任意多的参数(通过逗号分隔);这两个方法只有第一个参数是必要的——this的值。
通过示例代码介绍call()方法和apply()方法的使用:

复制代码 代码如下:

var myObject = {};
var myFunction = function(param1, param2) {
//setviacall()'this'points to my Object when function is invoked
this.foo = param1;
this.bar = param2;
//logs Object{foo = 'foo', bar = 'bar'}
console.log(this);
};
// invokes function, set this value to myObject
myFunction.call(myObject, 'foo', 'bar');
// logs Object {foo = 'foo', bar = 'bar'}
console.log(myObject);

call()方法第一个参数是必要的this值,接着我们可以传递任意多个参数,接着介绍apply()方法的使用。

复制代码 代码如下:

var myObject = {};
var myFunction = function(param1, param2) {
//set via apply(), this points to my Object when function is invoked
this.foo=param1;
this.bar=param2;
// logs Object{foo='foo', bar='bar'}
console.log(this);
};
// invoke function, set this value
myFunction.apply(myObject, ['foo', 'bar']);
// logs Object {foo = 'foo', bar = 'bar'}
console.log(myObject);

通过与call()方法对比,我们发现apply()方法和call()方法没有太大的区别,只是方法签名不一样。

1.1.3 总结

本文介绍Javascript中this的使用,更重要的是帮助我们能更好地理解this值在全局、函数、构造函数以及一些特例的情况中值的变化。

对于在函数上下文中this的值是函数调用者提供并且由当前调用表达式的形式而定的。如果在调用括号()的左边有引用类型的值,那么this的值就会设置为该引用类型值的base对象。 所有其他情况下(非引用类型),this的值总是null。然而,由于null对于this来说没有任何意义,因此会隐式转换为全局对象。
对于特例情况,我们要记住赋值符、逗号操作符以及||逻辑表达式,会使this丢失原先的引用类型值,变成了函数类型,this的值就变成了全局对象了

参考
[1] http://dmitrysoshnikov.com/ecmascript/chapter-3-this/ 英文版
[2] http://blog.goddyzhao.me/post/11218727474/this 译文
[3] https://net.tutsplus.com/tutorials/javascript-ajax/fully-understanding-the-this-keyword/

[作者]: JK_Rush

时间: 2024-10-21 20:10:05

Javascript this 的一些学习总结_javascript技巧的相关文章

javascript类型系统 Window对象学习笔记_javascript技巧

window对象是Web浏览器中javascript的一个终极兜底儿对象,在作用域中处于最末端,是一个包含所有对象的对象.所有在全局作用域中定义的属性和函数都是window对象的属性 var myStringVar = 'myString'; var myFunctionVar = function(){}; console.log('myStringVar' in window);//true console.log('myFunctionVar' in window);//true   1.

javascript类型系统 Array对象学习笔记_javascript技巧

       数组是一组按序排列的值,相对地,对象的属性名称是无序的.从本质上讲,数组使用数字作为查找键,而对象拥有用户自定义的属性名.javascript没有真正的关联数组,但对象可用于实现关联的功能 Array()仅仅是一种特殊类型的Object(),也就是说,Array()实例基本上是拥有一些额外功能的Object()实例.数组可以保存任何类型的值,这些值可以随时更新或删除,且数组的大小是动态调整的 一.数组创建 与Javascript中的大多数对象一样,可以使用new操作符连同Array

JavaScript高级程序设计 事件学习笔记_javascript技巧

第12章 事件 1.事件流 1.1事件冒泡(IE事件流) □事件冒泡(event bubbling),即事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接受,然后逐级向上传播到较为不具体的节点(文档). □所有浏览器均支持事件冒泡.Firefox.chrome.safari将事件一直冒泡到window对象. 1.2事件捕获(Netscape事件流) □不太具体的节点更早收到事件,而具体的节点最后收到节点. □Safari.chrome.Opera.firefox支持,但从window对象

JavaScript高级程序设计 DOM学习笔记_javascript技巧

第十章 DOM DOM是针对XML和HTML文档的一个API:即规定了实现文本节点操控的属性.方法,具体实现由各自浏览器实现. 1. 节点层次 1) 文档节点:document,每个文档的根节点. 2) 文档元素:即<html>元素,文档最外层元素,文档节点第一个子节点. 3) Node类型: ①Node是DOM中各种节点类型的基类型,共享相同的基本属性和方法. □ Node.Element_NODE(1); □ Node.ATTRIBUTE_NODE(2); □ Node.TEXT_NODE

JavaScript中的undefined学习总结_javascript技巧

在使用了一个并未声明的变量时,或者使用了已经声明但是没有赋值的变量时,又或者使用了一个并不存在的对象属性时,返回的就是这个值. 虽然undefined和null并不相同,但是==运算符却将两者看作是相等,如 my.prop == null 如果属性prop并不存在,或者它存在但是值为null,那么这个表达式的值为true. 当未定义的值用于布尔环境,它会转换为false,当它用于一个数字环境,它会转换为NaN,当它用户一个字符串环境,它会转换为"undefined"

整理Javascript基础入门学习笔记_javascript技巧

了解什么是变量? 变量是用于存储信息的容器 变量的声明 语法: var  变量名变量名 = 值; 变量要先声明再赋值 变量可以重复赋值变量的命名规则 变量必须以字母开头: 变量也能以$和_符号开头(不过我们不推荐这么做): 变量名称对大小写敏感(a和A是不同的变量). 1.语句 语句以一个分号结尾:如果省略分号,则由解析器确定语句的结尾. 有个好的编码习惯,都要以 ; 结尾 2.数据类型 在JavaScript中,一段信息就是一个值(value).值有不同的类型,大家最熟悉的类型是数字.字符串(

整理Javascript数组学习笔记_javascript技巧

1.什么是数组数组是一个值的集合,每个值都有一个索引号,从0开始,每个索引都有一个相应的值,根据需要添加更多数值. <script type="text/javascript"> var myarr=new Array(); //定义数组 myarr[0]=80; myarr[1]=60; myarr[2]=99; document.write("第一个人的成绩是:"+myarr[0]); document.write("第二个人的成绩是:&q

javascript实现控制文字大中小显示_javascript技巧

部分网站内容页通常会看到有控制文字分别以 大,中,小 三种方式显示,下面就把这个小功能做一下记录,对提高网站用户体验度还是有一些帮助的哦! <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>js控制文字大中小显示</title> </head> <body&g

JavaScript代码里的判断小结_javascript技巧

比较判断 比较判断是比较两个值,返回一个布尔值,表示是否满足比较条件.JavaScript一共提供了8个比较运算符,这里主要说一下严格相等运算符和相等运算符的区别 严格相等运算符=== 判断 返回 两个值类型不同 false 两个值都是null/undefined/true/false true 两个值其中之一为NaN false 两个值都为数值且值相等 true 两个值都为字符串,且值相等 true 两个值都指向同一个引用类型 true 1 === "1" // false true